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

Empty State Classes

Class	Description
it-empty-state	The container for the empty state
it-empty-state-icon-wrapper	The wrapper for the icon at the top
it-empty-state-actions	The container for the action buttons
it-empty-state-action-button	A button in the action buttons container
it-empty-state-action-button-icon	The icon for an action button