Table Component

Configuration Options
Table Configuration
Theme Options


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


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


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


  • 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)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →