Columns

Defining Columns

use Forjed\InertiaTable\Column;

Column::make('name', 'Name')         // visible column
Column::data('id')                    // hidden data-only column
Column::data('can_edit', fn ($m) => $m->canEdit())  // computed hidden column

Fluent Methods

Column::make('name', 'Name')
    ->sortable()                     // allow sorting
    ->hidden()                       // include data but don't render
    ->accessor('users.name')         // override DB column for sorting/extraction
    ->value(fn ($m) => strtoupper($m->name))  // custom value resolver

Display Modifiers

Display modifiers configure how a cell is rendered. Chain multiple modifiers to compose renderers in a single cell:

Column::make('name', 'Name')
    ->icon('user_icon')    // renders icon first
    ->text()               // then text beside it

Modifier	Description
->text()	Plain text
->badge($value, $colorField, $variant, $tooltip)	Styled badge
->date($value, $format)	Formatted date
->link($route, $params, $value, $prefetch)	Inertia link
->copyable()	Click-to-copy
->icon($icon)	Named icon from registry
->component($name)	Custom component from registry
->enum()	Enum integration (badge with getText/getColor)

Value Convention

All modifiers accepting a $value parameter follow this convention:

Type	Behaviour
null	Uses the column's own value
string	References another field from the row
Closure	Computed server-side - receives the model, result added to row

Column::make('status', 'Status')->badge()                      // column's own value
Column::make('status', 'Status')->badge('status_label')        // different field
Column::make('status', 'Status')->badge(fn ($m) => $m->label)  // server-computed

Hidden Data Columns

Pass data to the frontend without rendering a visible column:

Column::data('id'),
Column::data('can_delete', fn ($m) => $m->canBeDeleted()),
Column::data('project_id'),

Hidden column data is accessible in actions, cell overrides, onRowClick, etc:

React

<InertiaTable
    tableData={servers}
    actions={(row) => (
        // row.id and row.can_delete are available here
        row.can_delete && <button onClick={() => deleteServer(row.id)}>Delete</button>
    )}
/>

Vue

<!-- Coming soon -->