Styling & Theming

Class Overrides

Override Tailwind classes on any element:

React

<InertiaTable
    tableData={servers}
    className="shadow-none"
    classNames={{
        wrapper: 'rounded-xl border-2 border-indigo-200',
        thead: 'bg-indigo-50',
        th: 'px-6 py-4 text-indigo-700 uppercase',
        tr: 'hover:bg-indigo-50',
        td: 'px-6 py-4',
        search: 'rounded-full',
    }}
/>

Vue

<!-- Coming soon -->

ClassNames Keys

Key	Element
wrapper	Outermost container
toolbar	Toolbar row (search + actions)
table	<table> element
thead	<thead>
th	<th> cells
thSortable	Additional classes on sortable headers
thSorted	Additional classes on active sort header
tbody	<tbody>
tr	<tr> rows
trClickable	Additional classes when onRowClick is set
td	<td> cells
search	Search input
pagination	Pagination container
paginationButton	Pagination buttons
paginationInfo	Page info text
empty	Empty state
loadingBar	Loading bar

Dark Mode

All default classes include dark: variants. Dark mode works automatically with your Tailwind configuration - no additional setup needed.

Dynamic Row Styling

React

<InertiaTable
    tableData={servers}
    rowClassName={(row, index) => {
        if (row.status === 'Failed') return 'bg-red-50 dark:bg-red-950';
        return '';
    }}
/>

Vue

<!-- Coming soon -->

Modal Mode

Remove border and shadow for tables embedded in modals or cards:

React

<InertiaTable tableData={servers} modal />

Vue

<!-- Coming soon -->

Loading States

React

<InertiaTable
    tableData={servers}
    isFetching={isFetching}  // reduces opacity, disables pagination
    isLoading={isLoading}     // shows loading bar
/>

Vue

<!-- Coming soon -->