Introduction
The table component can be used to display a list of items in a tabular format. It can automatically generate the required columns based on the datasource selected.
It comes pre-packed with searching, filtering, and pagination.
When the datasource does not have any items, the table is unable to determine the structure of the data and automatically generate the columns.
Configuration Options
Datasource
Expected Type: Array | List
The datasource powering the table. Must be a list of items that contains the fields that are required as columns from the table.
Once the datasource is entered, the component automatically tries to generate a list of columns for the table based on the structure of the datasource. It's always better to check if the datasource field's types were generated as desired.
If no datasource is specified, the columns must be manually configured.
Table Configuration
Columns
The table column supports multiple types of columns such as date, text, image etc. All of that can be configured here.
Creating a column
Click on + column under the table configuration section to create a new column. Each column can be configured with the following properties:
| Property | Description | Type | Example |
|---|---|---|---|
| Label | The label for the column | String |
First Name |
| Key | The field this column represents. The component will look for this field in the datasource and show that value for this column. | String |
firstName |
| Type | The data type for the column. | Text | Rich Text | Date | Time | Image | File | Picker |
Text |
Triggers
Row Click:Triggers whenever a row in the table is clicked.Row Double Click:Triggers whenever a row in the table is clicked twice in quick succession.
Theme Options
Title Align:The title's text alignment. (Number | Pixels)Title Color:The title's text color. (String | Hex)Title Style:The title's text style. (Bold | Italic | Underline)Text Size:The title's text size. (Number | Pixels)Padding:The tables's padding. (Number | Pixels)Shadow:The tables's shadow. (Shadow)Border:The tables's border. You can also specify the radius for the edges. (Border)Background Color:The tables's background color. (String | Hex)Header Background Color:The tables header's background color. (String | Hex)Header Text Color:The tables header's text color. (String | Hex)Row Background Color:The rows's default background color. (String | Hex)Row Text Color:The rows's default text color. (String | Hex)Selected Row Background Color:The selected rows's background color. (String | Hex)Selected Row Text Color:The selected rows's text color. (String | Hex)