Table
The table component is essential for organizing and displaying data in a structured grid format. It's versatile, supporting features like sorting, filtering, and pagination, which are crucial for managing large datasets.
Tables can display text, numbers, icons, and even interactive elements like buttons or links. They are customizable in terms of styling, column resizing, and row selection, making them ideal for applications requiring data representation, such as analytics dashboards, database management interfaces, or administrative panels.
Examples
Various examples showcasing different configurations of the component
Users
Name
Leanne Graham
Ervin Howell
Clementine Bauch
Property
Value
Label
Users
Enabled features
["SEARCH","DOWNLOAD","FILTER","REFRESH"]
Ctas
[{"label":"Edit"},{"label":"Delete","color":"DANGER"}]
Rows
[{"id":1,"name":"Leanne Graham","email":"leanne.graham@gmail.com","enabled":true,"lastLogin":"2021-01-01T00:00:00.000Z","tags":["admin","user"],"avatar":"https://i.pravatar.cc/300?img=1"},{"id":1,"name":"Ervin Howell","email":"ervin.howell@gmail.com","enabled":true,"lastLogin":"2022-03-30T00:00:00.000Z","tags":["user"],"avatar":"https://i.pravatar.cc/300?img=2"},{"id":1,"name":"Clementine Bauch","email":"clementine.bauch@gmail.com","enabled":false,"lastLogin":"2020-01-01T00:00:00.000Z","tags":["user"],"avatar":"https://i.pravatar.cc/300?img=3"}]
Columns
[{"key":"avatar","name":"","inputType":"IMAGE","width":80},{"key":"name","name":"Name","minWidth":200},{"key":"email","name":"Email","minWidth":250},{"key":"lastLogin","name":"Last Login","inputType":"DATE","minWidth":150},{"key":"tags","name":"Tags","inputType":"CHIPS","minWidth":200},{"key":"enabled","name":"Enabled","inputType":"TOGGLE","minWidth":100},{"key":"actions","name":"","inputType":"ACTIONS"}]
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Configuration Properties
Property
Description
Default Value
Type
Columns
The columns data for the table.
[]
Array autocolumns
Data Configuration Properties
Property
Description
Default Value
Type
Rows
The rows data for the table.
[]
Array flat
Header Configuration Properties
Property
Description
Default Value
Type
Ctas
The CTA buttons available in the table.
[]
Array
Label
Label for the table.
String
Enabled features
Features enabled in the table.
String
Row Configuration Properties
Property
Description
Default Value
Type
Row actions
The CTA buttons available in the table.
[]
Array
Selected row index
The index of the currently selected row.
Number
Row height
The height of each row in the table.
40
Number
Elevation
The elevation level of the container.
1
String
No Data Placeholder
Placeholder text to show when there is no data.
No data to display
String
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On row click
Handler called when a row is clicked.
On row double click
Handler called when a row is double-clicked.
On refresh
Handler called when the table data is refreshed.