Skip to content

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

ClassDescription
it-buttonApplied to all buttons
it-danger-buttonApplied to the danger button style
it-default-buttonApplied to the default button style
it-info-buttonApplied to the info button style
it-primary-buttonApplied to the primary/info button style (deprecated)
it-success-buttonApplied to the success button style
it-warning-buttonApplied to the warning button style
it-danger-linkApplied to the danger link style
it-default-linkApplied to the default link style
it-info-linkApplied to the info link style
it-primary-linkApplied to the primary/info link style (deprecated)
it-success-linkApplied to the success link style
it-warning-linkApplied to the warning link style
it-dropdownThe container for the a dropdown
it-dropdown-itemsThe container for the a dropdown items
it-dropdown-headerThe header for the dropdown
it-dropdown-itemThe item in the dropdown
it-dropdown-separatorThe separator for the dropdown
it-popoverThe container for the popover
it-popover-panelThe panel for the popover
it-confirm-dialogThe container for the confirm dialog
it-confirm-dialog-backdropThe backdrop for the confirm dialog
it-confirm-dialog-contentThe content for the confirm dialog
it-confirm-dialog-icon-wrapperThe wrapper for the custom icon in the confirm dialog
it-text-inputThe text input field for the search and filters
it-select-inputThe select input field for the filters
it-checkbox-inputThe checkbox input field for the filters
it-dynamic-iconThe dynamic icon component for custom icons

Action and Filter Classes

ClassDescription
it-topbarThe container for the header with the search input and actions
it-actions-dropdownThe container for the actions dropdown
it-actions-dropdown-iconThe custom icon for the actions dropdown
it-add-filter-dropdownThe container for the add filter dropdown
it-toggle-column-dropdownThe container for the toggle column dropdown
it-filtersThe container for the active filters
it-filter-popoverThe container for the filter popover
it-filter-clause-select-inputThe select input field for the filter clauses
it-filter-input-containerThe container for the filter input field

Table-specific Classes

ClassDescription
it-wrapperThe wrapper div that contains the table
it-tableThe table element itself
it-table-headThe table head element
it-table-bodyThe table body element
it-toggle-item-checkboxThe checkbox to toggle a single row
it-toggle-all-checkboxThe checkbox to toggle all rows
it-loading-spinnerThe container for the loading spinner
it-boolean-iconThe boolean column icon
it-boolean-true-iconThe icon for a true boolean value
it-boolean-false-iconThe icon for a false boolean value
it-row-actionsThe container for the row actions
it-row-actions-linkThe row link or action that is styled as a link
it-row-actions-iconThe row action custom icon
it-row-actions-dropdownThe container for the row actions dropdown
it-row-actions-dropdown-iconThe custom icon for the row actions dropdown
it-table-column-dropdownThe container for the column dropdown
it-paginationThe container for the pagination
it-pagination-per-page-selectThe select input field for the number of items per page
it-pagination-first-page-buttonThe button to go to the first page
it-pagination-previous-page-buttonThe button to go to the previous page
it-pagination-next-page-buttonThe button to go to the next page
it-pagination-last-page-buttonThe button to go to the last page