Skip to content

DataTable

The DataTable widget provides a tabular interface optimized for displaying large datasets. While it offers a limited data entry capability through row editors, its primary function is efficient data visualization. It is significantly more efficient than the TableContent widget for handling large amounts of data.

XML Fields

Collection and Row Selection

  • XPath selects the collection context in the form data. ItemXPath selects the elements displayed as rows below that context; it normally uses * when every direct child is a row.
  • RowIdXPath identifies a row with a stable value. Configure it when rows need a durable identity across edits, imports, or refreshes.
  • FilterXPath is an expression that restricts displayed rows. SortXPath is the ordering expression. Leave either empty when all rows should be shown in their document order.
  • ItemsRootXPath selects a different collection root when the widget context and the row collection are not the same element.

Row Commands and Empty State

  • AllowNewXPath, AllowDeleteXPath, AllowDeleteAllXPath, AllowMovingXPath, and AllowMoveUpDownXPath decide whether the corresponding command is available. Point each one at an expression that evaluates to a Boolean for the current form or row.
  • AddNewLabel is the displayed caption for the add-row action. ShowBlankSlate enables the empty-list experience; BlankSlate contains the controls rendered in that state.
  • MonitoredXPaths lists data paths that should refresh the table when changed. Use it when a row filter, sort order, or command permission depends on another form value.

Columns and Editing

  • Every Columns/Column uses XPath to select its row value. Type controls the display/editor data type and Align controls the displayed alignment. Label, Template, and Footer define the column header, cell output, and footer output.
  • Editor contains the controls used to edit one row. RowRules applies conditional formatting or validation to a row; RowScript initializes or adjusts a row; DataExchange configures import and export columns.

Key Features

  • High-performance data display for large datasets, outperforming TableContent.
  • Limited data entry functionality; primarily designed for data display.
  • Supports row-level rules and row scripts through the XML fields described above.
  • Table import/export functionality.

Data Model

The DataTable widget uses a sequence-type data model. Each row in the table is represented as a new element within this data model, containing the row's data.

Table Columns

Columns utilize data templates to display data in a specific format. Each column is defined with a data type, influencing how data is presented. Column headers and footers also support data templates for calculated values.

When column template is not specified, the column's data type will be used to determine the appropriate template.

Unique Row IDs

To automatically generate unique IDs for each row, specify an XPath expression via the RowIdXPath property. This expression will be evaluated for each row to create a unique identifier.

Data Exchange

DataTable supports the import and exporting of data in XLSx format. Layout of the data is specified via the Columns property. By default export is enabled and import is disabled. You may need to set the AllowImport property to True if you want to allow users to import data.

Import and exporting layout is specified via the Columns property. Each column has an Caption property that determines the column header. The XPath property determines the data source for the column. Type property that determines how the data is imported and exported. Types include:

  • Text
  • Number
  • DateTime

Row Editor

Each row in the DataTable has an editor pane accessible via a modal dialog. This allows users to edit the row's data in a separate, focused interface.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<DataTable RequiredForGroup="save" ShowBlankSlate="True" XPath="DynamicList">
    <Rules/>
    <ItemXPath><![CDATA[*]]></ItemXPath>
    <RowIdXPath><![CDATA[]]></RowIdXPath>
    <FilterXPath><![CDATA[]]></FilterXPath>
    <SortXPath><![CDATA[]]></SortXPath>
    <ItemsRootXPath><![CDATA[]]></ItemsRootXPath>
    <AllowMovingXPath><![CDATA[]]></AllowMovingXPath>
    <AllowMoveUpDownXPath><![CDATA[]]></AllowMoveUpDownXPath>
    <AllowNewXPath><![CDATA[]]></AllowNewXPath>
    <AllowDeleteXPath><![CDATA[]]></AllowDeleteXPath>
    <AllowDeleteAllXPath><![CDATA[0]]></AllowDeleteAllXPath>
    <AddNewLabel>
        <Content><![CDATA[Add New Row]]></Content>
    </AddNewLabel>
    <MonitoredXPaths />
    <BlankSlate />
    <RowScript>
        <Content><![CDATA[]]></Content>
    </RowScript>
    <DataExchange AllowImport="False" AllowExport="True">
        <Columns>
            <Column Caption="Text" Type="Text">
                <XPath><![CDATA[Text]]></XPath>
            </Column>
            <Column Caption="Number" Type="Number">
                <XPath><![CDATA[Number]]></XPath>
            </Column>
            <Column Caption="Date" Type="DateTime">
                <XPath><![CDATA[Date]]></XPath>
            </Column>
        </Columns>
    </DataExchange>
    <RowRules/>
    <Columns>
        <Column Align="Left" Type="Text" XPath="Text">
            <Label>
                <Content><![CDATA[Text Header]]></Content>
            </Label>
            <Template><![CDATA[]]></Template>
            <Footer>
                <Content><![CDATA[Footer]]></Content>
            </Footer>
        </Column>
        <Column Align="Left" Type="Number" XPath="Number">
            <Label>
                <Content><![CDATA[Number Header]]></Content>
            </Label>
            <Template><![CDATA[]]></Template>
            <Footer>
                <Content><![CDATA[Number Footer {{sum(*/Number)}} ]]></Content>
            </Footer>
        </Column>
        <Column Align="Left" Type="Date" XPath="Date">
            <Label>
                <Content><![CDATA[Date Header]]></Content>
            </Label>
            <Template><![CDATA[]]></Template>
            <Footer>
                <Content><![CDATA[Date Footer]]></Content>
            </Footer>
        </Column>
    </Columns>
    <Editor>
        <RowContent Type="Field" Collapsing="None" FitHeight="False">
            <Rules/>
            <Label>
                <Content><![CDATA[Text]]></Content>
            </Label>
            <Columns>
                <Column>
                    <Controls>
                        <TextBox XPath="Text" MaxLength="255" InputMask="" Type="Text" Size="Medium" RequiredForGroup="">
                            <PlaceHolder><![CDATA[]]></PlaceHolder>
                            <Hints><![CDATA[]]></Hints>
                            <Rules />
                        </TextBox>
                    </Controls>
                </Column>
            </Columns>
        </RowContent>
    </Editor>
</DataTable>