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-danger-button | Applied to the danger button style |
it-default-button | Applied to the default button style |
it-info-button | Applied to the info button style |
it-primary-button | Applied to the primary/info button style (deprecated) |
it-success-button | Applied to the success button style |
it-warning-button | Applied to the warning button style |
it-danger-link | Applied to the danger link style |
it-default-link | Applied to the default link style |
it-info-link | Applied to the info link style |
it-primary-link | Applied to the primary/info link style (deprecated) |
it-success-link | Applied to the success link style |
it-warning-link | Applied to the warning link 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 |