Filament Material Theme

Appearance

See live

Table ​

Material has no data table of its own, so a Filament table is built from what a list gives: a labeled row on the sheet it belongs to, divided from the rows beneath it. Nothing here is a theme method.

A table with a heading, search, sortable columns, badges and row actionsA table with a heading, search, sortable columns, badges and row actions
php
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;

public function table(Table $table): Table
{
    return $table
        ->heading('Table')
        ->description('One rounded sheet whose rows are separated by a divider.')
        ->columns([
            TextColumn::make('name')->searchable()->sortable(),
            TextColumn::make('role')->sortable(),
        ]);
}

The whole table is one card on the pane tone, rounded 12dp, with no elevation. Filament rules off each band of chrome above it; two rules in a row read as two toolbars, so only the one that meets the table is kept.

A table header with its heading, description, header action and search fieldA table header with its heading, description, header action and search field
php
$table
    ->heading('Table')
    ->description('One rounded sheet whose rows are separated by a divider.')
    ->headerActions([
        Action::make('add')->label('Add member')->icon(Heroicon::OutlinedPlus),
    ]);

Header actions are buttons and take every variant. The search field is a search pill.

Rows ​

Table rows separated by dividers, with a sortable header row aboveTable rows separated by dividers, with a sortable header row above
php
TextColumn::make('name')->sortable();
TextColumn::make('status')->badge();
PartWhat it takes
Header rowTransparent, divided by a hairline, cells in title-small on the variant ink
Sort controlA state layer, and the primary color once the column is sorted
RowA state layer on hover, focus and press
Selected rowSecondary container, ink on its on-container pair
CellBody-medium on the plain ink; a cell label body-small on the variant ink

A status column renders as a badge. Images round 8dp, color swatches are circles behind a hairline, and a placeholder takes the outline color.

Row actions ​

Edit and delete icon buttons at the end of a table rowEdit and delete icon buttons at the end of a table row
php
$table->recordActions([
    Action::make('edit')->icon(Heroicon::OutlinedPencil)->iconButton(),
    Action::make('delete')->icon(Heroicon::OutlinedTrash)->iconButton()->color('danger'),
]);
A confirmation modal led by a trash iconA confirmation modal led by a trash icon
php
Action::make('delete')
    ->icon(Heroicon::OutlinedTrash)
    ->iconButton()
    ->color('danger')
    ->requiresConfirmation()
    ->modalIcon(Heroicon::OutlinedTrash)
    ->modalHeading('Permanently delete?');

See modals.

Selection ​

The selection indicator showing how many rows are selected and the bulk actions availableThe selection indicator showing how many rows are selected and the bulk actions available
php
use Filament\Actions\BulkAction;

$table->toolbarActions([
    BulkAction::make('archive')->label('Archive')->icon(Heroicon::OutlinedArchiveBox),
]);

Selecting a row swaps the toolbar for the actions that apply to the selection. The indicator that counts them sits on the secondary container, which is the same tone a selected row takes.

Grouping, summaries and reordering ​

PartWhat it takes
Group headerTitle-small heading, body-small description, divided by a hairline
Summary rowThe pane-header tone, labels in title-small on the variant ink
Reorder handleThe variant ink and a grab cursor
Reorder indicatorThe primary color
Column managerThe menu sheet, its rows sharing the menu's shape
Record collapse controlA fully rounded icon button with a state layer

Empty state ​

A table with rows; the empty state replaces them when there are noneA table with rows; the empty state replaces them when there are none

An empty table drops its own background and centers Filament's empty state: the icon in a surface-container-high circle, the heading in title-medium, the description in body-medium on the variant ink.

Pagination ​

See pagination.