Insites Docs Design system Data DisplayTable

Table

Last updated on April 04, 2025

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 ContentTrue, FalseSet 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.
HoverTrue, FalseEnable to use the hover state for sortable headers.
Checkbox SelectedTrue, FalseEnable to use the selected state of the checkbox. This property is not available if Checkbox is not selected for the order property.
Checkbox HoverTrue, FalseEnable to use the hover state of the checkbox. This property is not available if Checkbox is not selected for the order property.
Show Sort AscendingTrue, FalseToggle to show or hide the sort ascending icon. This property is not available if checkbox is selected for the order.
Show Sort DescendingTrue, FalseToggle 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 ContentTrue, FalseToggle to show or hide the default text content layer for the column.
Show Row ActionTrue, FalseToggle to show or hide the row actions for the column.
Edit StateTrue, FalseToggle 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 TagTrue, FalseToggle 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 ImageTrue, FalseToggle to show the row image for the column. This should only be enabled in the first column of your table (non checkbox).
Has ImageTrue, FalseToggle to show the image or initials for the row image.
Number of2, 3, 4, 5Select the number of row actions for the table.
Checkbox SelectedTrue, FalseToggle to use the default or selected state of the checkbox.
Checkbox HoverTrue, FalseToggle 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 SelectedTrue, False
Checkbox HoverTrue, 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 ImageTrue, FalseToggle to show or hide the row image.
Show CheckboxTrue, FalseToggle to show or hide the checkbox for the row.
Row Content-Select the content for the table data.
Checkbox SelectedTrue, FalseToggle to use the default or selected state of the checkbox.
Checkbox HoverTrue, FalseToggle to use the default or hover state of the checkbox.
Has ImageTrue, FalseToggle to show the image or initials for the row image.
Number of LinksTrue, FalseSelect the number of row actions for the table.
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.