Styling

Inertia Table is styled with Tailwind CSS, but every major element also carries a stable it-* prefixed class name so you may override the look and feel from your own stylesheet without touching the template. Buttons, dropdowns, links, the topbar, the table head and body, filters, and pagination are all addressable.

Available Classes

The fastest way to discover these classes is to inspect the table in your browser. The list below is a head start. Every class is prefixed with it- to avoid conflicts with other classes in your app.

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-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-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
it-views-dropdown	The container for the views dropdown

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
it-table-image-wrapper	The wrapper an image or icon in a table cell
it-table-image	The image or icon in a table cell

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