Data Mode

Specifies the data source configuration.

Mode: Client Pages, Client Infinite, Server Pages, or Server Infinite.
Service Name: The service linked to the datatable for returning data. This is created after adding a datasource under the DATA tab.

Rows

An array of rows to display (variable or mapping).
Value type: Array. Default value: [].

There are two ways to set the data source for Rows:

1. Define a variable under the CODE tab with data, then select this variable as the value for the Rows property.
2. Use the DATA tab to map service data to the Rows property.

Limit

Required for calculating page sizes (row count) and pagination.
If not defined, Limit will be calculated as the length of the Rows data (resulting in one page with all row data).

Count

Sets the total count of all rows. Default: 0.

This property is necessary for correct row display in infinite scroll modes and for page navigation calculations.
Required when Data Mode is set to Server Pages or Server Infinite. When Data Mode is set to Client Pages or Client Infinite, Count will be automatically calculated as the length of the Rows data.

Offset

Shows the current offset (page - 1).

This property is necessary for calculating the current page number, which equals the Offset value plus 1.
Should be set if the first page number differs from the default.

Selection Type

Defines the type of row selection:

• 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

Used to conditionally show checkboxes for specific rows based on criteria.

Create a new function under the DATA tab and select it for this property.

(row, column, value) => {
    return row.name !== 'Ethel Price';
}

External Sorting

Used instead of client-side sorting. Default: False.

Row Height

Necessary for calculating page sizes when infinite scrolling is used; optional for pagination mode.

Default values:

• auto for Client Pages / Server Pages
• 50 for Client Infinite / Server Infinite

When infinite scrolling is not used, pass undefined for fluid heights.
When infinite scrolling is used, pass a number to calculate heights.

Note: Row Height cannot be auto when Data Mode is set to Client Infinite or Server Infinite, or when ScrollbarV is set to True. It automatically changes from auto to undefined when these conditions apply.

Header Height

Minimum header height in pixels.

Note: Header Height cannot be auto when ScrollbarV is True or Data Mode is Client Infinite or Server Infinite. It automatically changes from auto to undefined when these conditions apply.

Footer Height

Minimum footer height in pixels. Used for calculating table size dimensions.
Set to false for no footer.

Table Height

Sets the datatable height as a percentage of viewport height by applying a special CSS class.
Automatically changes to 100% when Data Mode is set to Client Infinite or Server Infinite, or when ScrollbarV is True.

Options:

• 25% - 25vh
• 33% - 33vh
• 50% - 50vh
• 66% - 66vh
• 75% - 75vh
• 100% - 100vh

ScrollbarH

Enables/disables horizontal scrollbars. Default: False.

ScrollbarV

Required for infinite scrolling. When set to True, resets Row Height and Header Height from auto to undefined because defined height values are required for correct table calculations. Default: False.

Column Mode

Defines how column width distribution is applied:

• Standard: Columns are distributed based on width defined in column options
• Flex: Distributes width's grow factor relative to other columns (similar to CSS flex-grow API). Takes available extra width and distributes it proportionally according to each column's Flex Grow value. Not recommended when ScrollbarH is True
• Force: Forces columns to distribute equally but overflows when minimum width of each column is reached. Usually ideal when columns don't need fixed sizing

Theme

Sets the default datatable style by applying a predefined theme CSS class.
Options: Material (default), Dark, Bootstrap.

Reorderable

Enables/disables the ability to reorder columns by dragging. Value type: boolean. Default: True.

Row Class

Function used to populate a row's CSS class. Takes a row and returns a string or object. Value type: Function.

Enables adding custom classes based on specific conditions.
Create a new function under the CODE tab and select it for this property.

(row) => {
  return {
    'old': row.age > 50,
    'young': row.age <= 50,
    'woman': row.gender === 'female',
    'man': row.gender === 'male'
  }
}

Sorts

Determines the default column for sorting. Default: empty (unsorted).

• Column Name: Enter text to name a column
• Direction: Set sorting direction: asc (ascending) or desc (descending)

Messages

Static table messages that can be overridden for localization:

• Empty Message: Message shown when an array with no values is presented
• Selected Message: Footer selected message
• Total Message: Footer total message

CSS Classes

Custom CSS classes that override the default icon classes for sorting (up/down) and pager navigation (previous/next).
When entered, custom classes replace existing icon classes.

Options:

• Pager Left Arrow: Default datatable-icon-left
• Pager Next: Default datatable-icon-skip
• Pager Previous: Default datatable-icon-prev
• Pager Right Arrow: Default datatable-icon-right
• Sort Ascending: Default datatable-icon-down
• Sort Descending: Default datatable-icon-up

(select)

Action triggered when the component is selected.