Table

Table is a basic HTML table intended for simple data display.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

The table component is used to display tabular data in a structured format. All table elements are supported (<tbody>, <tr>, <td>, etc.).

Table is available in several variants: primary, secondary and tertiary. The variant prop controls the background color of the table. This can be used to create different levels of hierarchy within your UI.

The divider prop can be used to adjust the appearance of the dividers in the table. It accepts: primary, secondary, tertiary or none.

The zebra variant of the table adds alternating row colors to improve readability. This is particularly useful for large datasets where distinguishing between rows can be challenging. The zebra prop can be used with the variant prop to achieve different styles.

Like variant the zebra prop supports three values: primary, secondary, and tertiary.

The divider prop can be used to adjust the appearance of the dividers in the table. It accepts: primary, secondary, tertiary or none.

The variant prop can also be applied to the table header. This allows you to create a visual distinction between the header and the body of the table.

The divider prop can be used to adjust the appearance of the dividers in the table. It accepts: primary, secondary, tertiary or none.

The variant prop can also be applied to the table footer. This allows you to create a visual distinction between the footer and the body of the table.

The divider prop can be used to adjust the appearance of the dividers in the table. It accepts: primary, secondary, tertiary or none.