Beartropy Tables

View Configuration

Customize the visual appearance and layout of the table — titles, styling, themes, spinners, buttons, and view slots.

Title & Header

Configure the table title and header area.

Set Title

setTitle(string $title) — Display a title above the table.

1$this->setTitle('My Awesome Table');

Results Counter

showCounter(bool $bool) — Show or hide the "Showing X to Y of Z results" text.

1$this->showCounter(false);

Title Classes

overrideTitleClasses(string $classes) — Replace the default title styling with custom Tailwind classes.

1$this->overrideTitleClasses('text-2xl font-bold text-gray-800 dark:text-gray-100');

Custom Header

setCustomHeader(string $html) — Replace the entire default header with custom HTML content.

1$this->setCustomHeader('<div>Custom Header Content</div>');

Styling & Classes

Control CSS classes on the component wrapper and table element.

Table Classes

setComponentClasses(string $classes) — Set classes on the outermost component wrapper.
addTableClasses(string $classes) — Append classes to the <table> element.
setTableClasses(string $classes) — Replace all <table> classes entirely.

1$this->setComponentClasses('p-4 bg-white dark:bg-gray-800 rounded-lg shadow');
2$this->addTableClasses('border-collapse');
3$this->setTableClasses('w-full text-sm text-left');

Sticky Header

setStickyHeader() — Makes the table header stick to the top when scrolling through long tables.

1$this->setStickyHeader();

Theme

Apply color themes to the table and its sub-elements.

Set Theme

setTheme(string $theme) — Apply a color theme to the entire table. Themes affect the header, buttons, inputs, and highlights.

1$this->setTheme('zinc');

Theme Overrides

Override themes for specific UI elements:

setBulkThemeOverride(string $theme) — Theme for bulk action checkboxes.
setButtonThemeOverride(string $theme) — Theme for buttons (pagination, toolbar).
setInputThemeOverride(string $theme) — Theme for inputs (search, filters).

1$this->setButtonThemeOverride('zinc');
2$this->setInputThemeOverride('zinc');

Access Theme Config

getThemeConfig(string $theme) — Retrieve the full configuration array for a given theme name. The current theme config is also available via $this->themeConfig.

1// Get the full config array for the 'blue' theme
2$config = $this->getThemeConfig('blue');
3 
4// Access a specific key from the current theme
5$color = $this->themeConfig['primary_color'];

Loading Spinner

Configure the loading overlay shown during Livewire requests.

Spinner Settings

useTableSpinner(bool $bool) — Enable or disable the loading spinner overlay.
setTableSpinnerView(string $view) — Use a custom Blade view for the spinner.
addTargetsToSpinner(array $targets) — Add custom Livewire actions that should trigger the spinner.

1$this->useTableSpinner(true);
2$this->setTableSpinnerView('components.custom-spinner');
3$this->addTargetsToSpinner(['myCustomAction', 'anotherAction']);

Buttons & Modals

Add custom toolbar buttons and modal views.

Custom Buttons

addButtons(array $buttons) — Inject custom buttons into the toolbar. Each button can have a label, icon, action (Livewire method), and color.

1$this->addButtons([
2    ['label' => 'Create', 'icon' => 'plus', 'action' => 'createItem', "color" => "blue"]
3]);

Modals View

setModalsView(string $view) — Include a custom Blade view for modals rendered within the table context.

1$this->setModalsView('livewire.my-custom-modals');

Custom View Slots

Inject custom views into specific positions of the table toolbar.

View Slots

Four named slots are available for injecting content into the toolbar:

setMostLeftView(string $view) — Far left of the toolbar.
setLessLeftView(string $view) — Left, but after the default left content.
setMostRightView(string $view) — Far right of the toolbar.
setLessRightView(string $view) — Right, but before the default right content.

1$this->setMostLeftView('components.tables.slots.left');
2$this->setLessLeftView('components.tables.slots.less-left');
3$this->setMostRightView('components.tables.slots.right');
4$this->setLessRightView('components.tables.slots.less-right');

Examples

Playground tables demonstrating view configuration.

ThemedTable.php

A table using the 'blue' theme with a title and minimal UI (no search or column toggle).

 1use Beartropy\Tables\Classes\Columns\Column;
 2use Beartropy\Tables\YATBaseTable;
 3 
 4class ThemedTable extends YATBaseTable
 5{
 6    public function columns(): array
 7    {
 8        return [
 9            Column::make('#', 'id')->sortable(),
10            Column::make('Name', 'name')->sortable()->searchable(),
11            Column::make('Role', 'role')->sortable(),
12        ];
13    }
14 
15    public function data(): array
16    {
17        return [
18            ['id' => 1, 'name' => 'Alice Johnson', 'role' => 'Admin'],
19            ['id' => 2, 'name' => 'Bob Smith', 'role' => 'Editor'],
20            ['id' => 3, 'name' => 'Carol White', 'role' => 'Viewer'],
21            ['id' => 4, 'name' => 'David Brown', 'role' => 'Editor'],
22            ['id' => 5, 'name' => 'Eva Martinez', 'role' => 'Admin'],
23        ];
24    }
25 
26    public function settings(): void
27    {
28        $this->usePagination(false);
29        $this->setTheme('blue');
30        $this->setTitle('Blue Theme');
31        $this->useGlobalSearch(false);
32        $this->showColumnToggle(false);
33    }
34}

StickyHeaderTable.php

A table with 30 rows and a sticky header — scroll down and the column headers stay pinned to the top.

 1use Beartropy\Tables\Classes\Columns\Column;
 2use Beartropy\Tables\YATBaseTable;
 3 
 4class StickyHeaderTable extends YATBaseTable
 5{
 6    public function columns(): array
 7    {
 8        return [
 9            Column::make('#', 'id')->sortable(),
10            Column::make('Item', 'item')->sortable()->searchable(),
11            Column::make('Category', 'category')->sortable(),
12            Column::make('Status', 'status')->sortable(),
13        ];
14    }
15 
16    public function data(): array
17    {
18        $items = [];
19        for ($i = 1; $i <= 30; $i++) {
20            $items[] = [
21                'id' => $i,
22                'item' => "Item #{$i}",
23                'category' => ['Alpha', 'Beta', 'Gamma', 'Delta'][($i - 1) % 4],
24                'status' => ['Active', 'Pending', 'Completed', 'Archived'][($i - 1) % 4],
25            ];
26        }
27        return $items;
28    }
29 
30    public function settings(): void
31    {
32        $this->usePagination(false);
33        $this->setStickyHeader();
34        $this->setTitle('Sticky Header');
35        $this->useGlobalSearch(false);
36        $this->showColumnToggle(false);
37    }
38}

Live Demos

Try them — interact with themed and sticky header tables.

Blue Theme Table

Blue Theme

#	#	Name	Role
1	1	Alice Johnson	Admin
2	2	Bob Smith	Editor
3	3	Carol White	Viewer
4	4	David Brown	Editor
5	5	Eva Martinez	Admin

1<livewire:tables.demos.demo-themed-table />

Sticky Header Table

Sticky Header

#	#	Item	Category	Status
1	1	Item #1	Alpha	Active
2	2	Item #2	Beta	Pending
3	3	Item #3	Gamma	Completed
4	4	Item #4	Delta	Archived
5	5	Item #5	Alpha	Active
6	6	Item #6	Beta	Pending
7	7	Item #7	Gamma	Completed
8	8	Item #8	Delta	Archived
9	9	Item #9	Alpha	Active
10	10	Item #10	Beta	Pending
11	11	Item #11	Gamma	Completed
12	12	Item #12	Delta	Archived
13	13	Item #13	Alpha	Active
14	14	Item #14	Beta	Pending
15	15	Item #15	Gamma	Completed
16	16	Item #16	Delta	Archived
17	17	Item #17	Alpha	Active
18	18	Item #18	Beta	Pending
19	19	Item #19	Gamma	Completed
20	20	Item #20	Delta	Archived
21	21	Item #21	Alpha	Active
22	22	Item #22	Beta	Pending
23	23	Item #23	Gamma	Completed
24	24	Item #24	Delta	Archived
25	25	Item #25	Alpha	Active

1<livewire:tables.demos.demo-sticky-table />

Current version: 2.9.6