DataTable
Overview of the DataTable Component
The DataTable component consists of DataTableCols the number of which can be changed by adding or cloning.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
The DataTable component has the following common properties:
| Property Name | Property Description |
|---|---|
| Data Mode | Data source. Mode: Client Pages, Client Infinite, Server Pages, or Server Infinite. Service Name - the service to be linked with the datatable to return data. It is created after a datasource is added under the DATA tab. |
| Rows | An array of rows to display (variable or mapping). Value type: Array. The default value is set to []. There are two ways to set the data source for Rows: Define a variable under the CODE tab with data. Then choose the variable as the value for the property Rows; Use the DATA tab to map service data to the Rows property. |
| Limit | Is necessary for calculating sizes (rows count) of the page and for pagination. If not defined, Limit will be calculated as the length of Rows data (one page with all rows data). |
| Count | Enter the number to set the total count of all rows. The default is set to 0. The property is necessary for correct rows displaying in infinite scroll modes and for calculations for page navigation. Required if the Data Mode property is set to Server Pages or Server Infinite. If the Data Mode property is set to Client Pagesor Client Infinite, Count will be automatically calculated as the length of `Rows data. |
| Offset | The current offset ( page - 1 ) is shown. The property is necessary for calculating the number of the current page. In this case, it will be the Offset property increased by 1. Should be set if the number of the first page differs from the default, |
| Selection Type | The type of row selection. The value types are Single - one row can be selected at a time; Cell - one cell can be selected at a time; Multi - multiple rows can be selected using Ctrl or Shift keys; MultiClick - multiple rows can be selected by clicking; Checkbox - multiple rows can be selected using checkboxes. |
| Display Check | Can be used to check whether you want to show the check box for a particular row based on some criteria. Create a new function under the DATA tab of the Visual Editor and choose the created function for the property. (row, column, value) => { return row.name !== 'Ethel Price'; } |
| External Sorting | To be used instead of client-side sorting. The default is set to False. |
| Row Height | Is necessary for calculating the sizes of the page when infinite scrolling is used and it is optional for pagination mode. The default value is auto for Client Pages / Server Pages and 50 for Client Infinite / Server Infinite. When infinite scrolling is not used, pass undefined for fluid heights. If infinite scrolling is used, pass a number to calculate the heights. Row Height can`t be auto when the Data Modeproperty is set to Client Infinite or Server Infinite or theScrollbarV property is set to True. It is automatically changed to undefined from auto if the properties above are set. |
| Header Hight | Minimum header height in pixels. Header Height can`t be auto when ScrollbarV is True or Data Mode is Client Infinite or Server Infinite or theScrollbarV property is set to True. It is automatically changed to undefined from auto if the properties above are set. |
| Footer Height | The minimum footer height in pixels. This property is used for calculating the dimensions of the table size. Pass false value for no footer. |
| Table Height | Set the height of a datatable in the percentage of viewport height. It means appending a special CSS class with needed styles. It will be changed to 100 % automatically when the Data Mode property is set to Client Infinite or Server Infinite or the ScrollbarV property is defined as True. - 25 % - 25vh - 33 % - 33vh - 50 % - 50vh - 66 % - 66vh - 75 % - 75vh - 100 % - 100vh. |
| ScrollbarH | Enable/disable horizontal scrollbars. The default value is set to False. |
| ScrollbarV | Is necessary for infinite scrolling. Setting the property to True resets the Row Height and Header Height properties from auto to undefined because there are required defined height values for correct table calculations. The default value is set to False. |
| Column mode | Column modes allow having a variety of different ways to apply column width distribution to the columns using: Standard - columns are distributed given the width is defined in the column options; Flex - distribute the width's grow factor relative to other columns. It works the same as the flex-grow API in CSS. Basically, it takes any available extra width and distributes it proportionally according to each column's Flex Grow value. Flex is not suggested when the ScrollbarH property is set to True; Force force the widths of the columns to distribute equally but overflows when the min-width of each column is reached. Force is usually the ideal column distribution method when columns do not need to be fixed-sized. |
| Theme | Set the default style of a datatable. It means appending a special CSS class of a predefined theme to the datatable element. The value types are Material (default), Dark, Bootstrap. |
| Reordable | Enable/disable the ability to re-order columns by dragging them. Value type: boolean. The default value is set to True. |
| Row Class | The function used to populate a row's CSS class. The function will take a row and return a string or object. The value type is Function. It makes adding custom classes depending on specific conditions possible. Create a new function under the CODE tab of the Visual Editor and choose the created function for the property. (row) => { return { 'old': row.age > 50, 'young': row.age <= 50, 'woman': row.gender === 'female', 'man': row.gender === 'male' } } |
| Sorts | Used to determine the default column for sorting. The default is set to empty (unsorted). Column Name - enter text to name a column. Direction - set the sorting direction: asc (ascending) or desc (descending). |
| Messages | Static messages in the table that can be overridden for localization. Value types: Empty Message - a message to show when an array with no values is presented; Selected Message - footer selected message; Total Message - footer whole message. |
| Css Classes | Custom CSS classes that can be defined to override the icons classes for up/down in sorts and previous/next in the pager. If entered, custom classes for icons will replace existing classes. Value types: Pager Left Arrow - the default value is set to datatable-icon-left; Pager Next - the default value is set to datatable-icon-skip; Pager Previous - the default value is set to datatable-icon-prev; Pager Right Arrow - the default value is set to datatable-icon-right; Sort Ascending - the default value is set to datatable-icon-down; Sort Descending - the default value is set to datatable-icon-up. |
| (select) | Action to be triggered when the component is selected. |
DataTableCol
To add a DataTableCol, click the + button on the DataTable.
The DataTableCol component has the following properties:
| Property Name | Property Description |
|---|---|
| Name | Column label. If none is specified, it will use the prop value and decimalize it. |
| Property | The property to bind the row values to. If undefined, it will camelcase the name value. |
| Resizeable | The column can be resized manually by the user. The default is set to True. |
| Can Auto Resize | Define whether the column can automatically resize to fill extra space. The default is set to True. |
| Sortable | Sorting of the row values by this column. The default is set to True. |
| Draggable | Define if the column can be dragged to re-order. The default is set to True. |
| Checkboxable | Indicate whether the column should show a check box component for selection. Only applicable when the selection mode is Checkbox. |
| Header Checkboxable | Indicate whether the column should show a check box component in the header cell. Only applicable when the selection mode is Checkbox. |
| Frozen Left | Determines if the column is frozen to the left. |
| Frozen Right | Determines if the column is frozen to the right. |
| Cell Template | Click the Edit button to access the HTML editor. Angular TemplateRef allows authoring custom body cell templates. |
| Header Template | Click the Edit button to access the HTML editor. Angular TemplateRef allows authoring custom header cell templates. |
| Flex Grow | The grow factor relative to other columns. Same as the flex-grow API. It will any available extra width and distribute it proportionally according to all columns' flexGrow values. The default is set to 0. |
| Cell Class | Cell classes to apply to the body cell. |
| Header Class | Header CSS classes to apply to the header cell. |
Updated 5 months ago