Table
Last updated on June 19, 2024
Not to be biased, but the Insites Table component has it all. This component gives you everything you expect a Table to have, and many more!
Figma Component Variant Properties
Static Header
| Properties |
Options |
Description |
| Column |
First, Middle, Last |
Use to set the default padding of and content of the header columns. |
Static Data
| Properties |
Options |
Description |
| Column |
First, Middle, Last |
Use to set the default padding of and content of the header columns. |
| Show Text Content |
True, False |
Set to true to use simple text content for the table data. If you set this property to true update the Show HTML Content property to false. |
| Show HTML Content | True, False | Set to true to use the content placeholder for custom content. If you set this property to true update the Show Text Content property to false. |
| Content | - | Placeholder for custom content. |
Dynamic Header
| Properties |
Options |
Description |
| Order |
Checkbox, First, Middle, Last |
Use to set the default padding of and content of the header columns. |
| Hover | True, False | Enable to use the hover state for sortable headers. |
| Checkbox Selected | True, False | Enable to use the selected state of the checkbox. This property is not available if Checkbox is not selected for the order property. |
| Checkbox Hover | True, False | Enable to use the hover state of the checkbox. This property is not available if Checkbox is not selected for the order property. |
| Show Sort Ascending | True, False | Toggle to show or hide the sort ascending icon. This property is not available if checkbox is selected for the order. |
| Show Sort Descending | True, False | Toggle to show or hide the sort descending icon. This property is not available if checkbox is selected for the order. |
Dynamic Data
| Properties |
Options |
Description |
| Column |
Checkbox, First, Middle, Last |
Use to set the default padding of and content of the header columns. |
| Show Text Content | True, False | Toggle to show or hide the default text content layer for the column. |
| Show Row Action | True, False | Toggle to show or hide the row actions for the column. |
| Edit State | True, False | Toggle to use the edit state of the column. If this is set to true you must set the Show Text Content and Show Tag to false. |
| Show Tag | True, False | Toggle to show or hide the tag for the table. If this is set to true you must set the Show Text Content and Edit State to false. |
| Show Row Image | True, False | Toggle to show the row image for the column. This should only be enabled in the first column of your table (non checkbox). |
| Has Image | True, False | Toggle to show the image or initials for the row image. |
| Number of | 2, 3, 4, 5 | Select the number of row actions for the table. |
| Checkbox Selected | True, False | Toggle to use the default or selected state of the checkbox. |
| Checkbox Hover | True, False | Toggle to use the default or hover state of the checkbox. |
Dynamic Header Responsive
| Properties |
Options |
Description |
| Show Checkbox |
True, False |
Use to set the default padding of and content of the header columns. |
| Checkbox Selected | True, False | |
| Checkbox Hover | True, False | |
Dynamic Data Responsive
| Properties |
Options |
Description |
| Collapsed |
True, False |
Use to set the default padding of and content of the header columns. |
| Show Row Image | True, False | Toggle to show or hide the row image. |
| Show Checkbox | True, False | Toggle to show or hide the checkbox for the row. |
| Row Content | - | Select the content for the table data. |
| Checkbox Selected | True, False | Toggle to use the default or selected state of the checkbox. |
| Checkbox Hover | True, False | Toggle to use the default or hover state of the checkbox. |
| Has Image | True, False | Toggle to show the image or initials for the row image. |
| Number of Links | True, False | Select the number of row actions for the table. |
