Styling
Introduction
If you want to customize the look and feel of the table without changing the template itself, it's best to use CSS. The Table component uses Tailwind CSS classes to style the table, but all major elements have their own class names, so you can easily target them with your own styles.
Available Classes
You're probably the fastest if you just inspect the table in your browser and see which classes are used. But to give you a head start, here are the classes that are used in the Table component. All classes are prefixed with it- to avoid conflicts with other classes.
General Classes
| Class | Description |
|---|---|
it-button | Applied to all buttons |
it-primary-button | Applied to the primary button style |
it-default-button | Applied to the default button style |
it-danger-button | Applied to the danger button style |
it-dropdown | The container for the a dropdown |
it-dropdown-items | The container for the a dropdown items |
it-dropdown-header | The header for the dropdown |
it-dropdown-item | The item in the dropdown |
it-dropdown-separator | The separator for the dropdown |
it-popover | The container for the popover |
it-popover-panel | The panel for the popover |
it-confirm-dialog | The container for the confirm dialog |
it-confirm-dialog-backdrop | The backdrop for the confirm dialog |
it-confirm-dialog-content | The content for the confirm dialog |
it-confirm-dialog-icon-wrapper | The wrapper for the custom icon in the confirm dialog |
it-text-input | The text input field for the search and filters |
it-select-input | The select input field for the filters |
it-checkbox-input | The checkbox input field for the filters |
it-dynamic-icon | The dynamic icon component for custom icons |
Action and Filter Classes
| Class | Description |
|---|---|
it-topbar | The container for the header with the search input and actions |
it-actions-dropdown | The container for the actions dropdown |
it-actions-dropdown-icon | The custom icon for the actions dropdown |
it-add-filter-dropdown | The container for the add filter dropdown |
it-toggle-column-dropdown | The container for the toggle column dropdown |
it-filters | The container for the active filters |
it-filter-popover | The container for the filter popover |
it-filter-clause-select-input | The select input field for the filter clauses |
it-filter-input-container | The container for the filter input field |
Table-specific Classes
| Class | Description |
|---|---|
it-wrapper | The wrapper div that contains the table |
it-table | The table element itself |
it-table-head | The table head element |
it-table-body | The table body element |
it-toggle-item-checkbox | The checkbox to toggle a single row |
it-toggle-all-checkbox | The checkbox to toggle all rows |
it-loading-spinner | The container for the loading spinner |
it-boolean-icon | The boolean column icon |
it-boolean-true-icon | The icon for a true boolean value |
it-boolean-false-icon | The icon for a false boolean value |
it-row-actions | The container for the row actions |
it-row-actions-link | The row link or action that is styled as a link |
it-row-actions-icon | The row action custom icon |
it-row-actions-dropdown | The container for the row actions dropdown |
it-row-actions-dropdown-icon | The custom icon for the row actions dropdown |
it-table-column-dropdown | The container for the column dropdown |
it-pagination | The container for the pagination |
it-pagination-per-page-select | The select input field for the number of items per page |
it-pagination-first-page-button | The button to go to the first page |
it-pagination-previous-page-button | The button to go to the previous page |
it-pagination-next-page-button | The button to go to the next page |
it-pagination-last-page-button | The button to go to the last page |