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

<InertiaTable
    :table-data="servers"
    class="shadow-none"
    :class-names="{
        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',
    }"
/>

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

Dark Mode

All default classes include dark: variants. Dark mode works automatically with your Tailwind configuration - no additional setup needed. See Dark Mode for detailed configuration, overrides, and examples.

Dynamic Row Styling

React

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

Vue

<InertiaTable
    :table-data="servers"
    :row-class-name="(row, index) => {
        if (row.status === 'Failed') return 'bg-red-50 dark:bg-red-950';
        return '';
    }"
/>

Modal Mode

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

React

<InertiaTable tableData={servers} modal />

Vue

<InertiaTable :table-data="servers" modal />

Loading States

The table automatically detects Inertia navigations (sorting, searching, pagination) and shows a loading state - the table content fades to 50% opacity and becomes non-interactive until the new data arrives. No configuration needed.

You can also trigger this manually with the isFetching prop:

React

<InertiaTable
    tableData={servers}
    isFetching={isFetching}  // reduces opacity, disables interaction
/>

Vue

<InertiaTable
    :table-data="servers"
    :is-fetching="isFetching"
/>