Example Tables

Basic Table

This is a simple example using default styles with columns, data, and no custom styling or action dropdowns.

Custom Styles

Here, you can pass custom class names using the customClassNames prop to override the default styles. Also disable the default dark mode style applied by setting enableDarkMode to false.

Table with Pagination

If you want to use a pagination component, you can pass it as the paginationComponent prop.

Custom Rows and Actions

This is an example where the table displays custom rows, with the last column having a custom action button. You can use the renderRow function to customize how each row is rendered and place a custom action button for the last item.

URL, Date/Time, Arrays

This is an example where I’m using the default TableComponent and passing a data object with a URL, date, and an array of strings. The TableComponent will automatically handle rendering for these data types based on the logic already present in the component.

Loading State

You can set the loading prop to true to show a shimmer in the table.

Default Row Clicking

This example shows how to use the rowOnClick prop in your TableComponent. When you click on a row, it will trigger a function that can display more details about the clicked item