Beartropy Logo

Beartropy Tables

Open Source Laravel Package

A powerful, flexible, and fully customizable data table component for Laravel Livewire. Built with a focus on developer experience and UI consistency.

Get Started
composer require beartropy/tables
Show Code
Data Table
+ Select a theme...
#
Name
Hex Code
Color
Google it
Primary
Category
Created at
1
Red #FF0000 ██████████████ Search in google ✔ Warm 2026-03-25
2
Green #00FF00 ██████████████ Search in google ✔ Cool 2026-03-24
3
Blue #0000FF ██████████████ Search in google ✔ Cool 2026-03-23
4
Yellow #FFFF00 ██████████████ Search in google ✕ Warm 2026-03-22
5
Purple #800080 ██████████████ Search in google ✕ Cool 2026-03-21
6
Orange #FFA500 ██████████████ Search in google ✕ Warm 2026-03-20
7
Pink #FFC0CB ██████████████ Search in google ✕ Warm 2026-03-19
8
Black #000000 ██████████████ Search in google ✕ Neutral 2026-03-18
9
White #FFFFFF ██████████████ Search in google ✕ Neutral 2026-03-17
10
Cyan #00FFFF ██████████████ Search in google ✕ Cool 2026-03-16
Mostrando 1 A 10 De 30 Registros 
  1<?php
  2 
  3namespace App\Livewire\Tables;
  4 
  5use Beartropy\Tables\Classes\Columns\BoolColumn;
  6use Beartropy\Tables\Classes\Columns\Column;
  7use Beartropy\Tables\Classes\Columns\DateColumn;
  8use Beartropy\Tables\Classes\Columns\LinkColumn;
  9use Beartropy\Tables\Classes\Filters\FilterBool;
 10use Beartropy\Tables\Classes\Filters\FilterDateRange;
 11use Beartropy\Tables\Classes\Filters\FilterSelectMagic;
 12use Beartropy\Tables\Classes\Filters\FilterString;
 13use Beartropy\Tables\YATBaseTable;
 14 
 15class DemoTable extends YATBaseTable
 16{
 17    public $tableName = 'DemoTableColors';
 18 
 19    public string $theme = 'gray';
 20 
 21    public function settings(): void
 22    {
 23        $this->hasBulk(true);
 24        $this->useStateHandler(false);
 25        $this->showColumnToggle(false);
 26    }
 27 
 28    public function data(): array
 29    {
 30        return [
 31            ['id' => 1, 'name' => 'Red', 'hex' => '#FF0000', 'is_primary' => true, 'category' => 'Warm', 'created_at' => now()->subDays(1)->format('Y-m-d H:i:s')],
 32            ['id' => 2, 'name' => 'Green', 'hex' => '#00FF00', 'is_primary' => true, 'category' => 'Cool', 'created_at' => now()->subDays(2)->format('Y-m-d H:i:s')],
 33            ['id' => 3, 'name' => 'Blue', 'hex' => '#0000FF', 'is_primary' => true, 'category' => 'Cool', 'created_at' => now()->subDays(3)->format('Y-m-d H:i:s')],
 34            ['id' => 4, 'name' => 'Yellow', 'hex' => '#FFFF00', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(4)->format('Y-m-d H:i:s')],
 35            ['id' => 5, 'name' => 'Purple', 'hex' => '#800080', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(5)->format('Y-m-d H:i:s')],
 36            ['id' => 6, 'name' => 'Orange', 'hex' => '#FFA500', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(6)->format('Y-m-d H:i:s')],
 37            ['id' => 7, 'name' => 'Pink', 'hex' => '#FFC0CB', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(7)->format('Y-m-d H:i:s')],
 38            ['id' => 8, 'name' => 'Black', 'hex' => '#000000', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(8)->format('Y-m-d H:i:s')],
 39            ['id' => 9, 'name' => 'White', 'hex' => '#FFFFFF', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(9)->format('Y-m-d H:i:s')],
 40            ['id' => 10, 'name' => 'Cyan', 'hex' => '#00FFFF', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(10)->format('Y-m-d H:i:s')],
 41            ['id' => 11, 'name' => 'Magenta', 'hex' => '#FF00FF', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(12)->format('Y-m-d H:i:s')],
 42            ['id' => 12, 'name' => 'Lime', 'hex' => '#32CD32', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(14)->format('Y-m-d H:i:s')],
 43            ['id' => 13, 'name' => 'Teal', 'hex' => '#008080', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(16)->format('Y-m-d H:i:s')],
 44            ['id' => 14, 'name' => 'Brown', 'hex' => '#A52A2A', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(18)->format('Y-m-d H:i:s')],
 45            ['id' => 15, 'name' => 'Gray', 'hex' => '#808080', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(20)->format('Y-m-d H:i:s')],
 46            ['id' => 16, 'name' => 'Navy', 'hex' => '#000080', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(22)->format('Y-m-d H:i:s')],
 47            ['id' => 17, 'name' => 'Maroon', 'hex' => '#800000', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(24)->format('Y-m-d H:i:s')],
 48            ['id' => 18, 'name' => 'Silver', 'hex' => '#C0C0C0', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(26)->format('Y-m-d H:i:s')],
 49            ['id' => 19, 'name' => 'Gold', 'hex' => '#FFD700', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(28)->format('Y-m-d H:i:s')],
 50            ['id' => 20, 'name' => 'Olive', 'hex' => '#808000', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(30)->format('Y-m-d H:i:s')],
 51            ['id' => 21, 'name' => 'Turquoise', 'hex' => '#40E0D0', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(35)->format('Y-m-d H:i:s')],
 52            ['id' => 22, 'name' => 'Lavender', 'hex' => '#E6E6FA', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(38)->format('Y-m-d H:i:s')],
 53            ['id' => 23, 'name' => 'Beige', 'hex' => '#F5F5DC', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(41)->format('Y-m-d H:i:s')],
 54            ['id' => 24, 'name' => 'Indigo', 'hex' => '#4B0082', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(44)->format('Y-m-d H:i:s')],
 55            ['id' => 25, 'name' => 'Coral', 'hex' => '#FF7F50', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(47)->format('Y-m-d H:i:s')],
 56            ['id' => 26, 'name' => 'Crimson', 'hex' => '#DC143C', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(50)->format('Y-m-d H:i:s')],
 57            ['id' => 27, 'name' => 'Sky Blue', 'hex' => '#87CEEB', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(53)->format('Y-m-d H:i:s')],
 58            ['id' => 28, 'name' => 'Violet', 'hex' => '#EE82EE', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(56)->format('Y-m-d H:i:s')],
 59            ['id' => 29, 'name' => 'Salmon', 'hex' => '#FA8072', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(58)->format('Y-m-d H:i:s')],
 60            ['id' => 30, 'name' => 'Slate', 'hex' => '#708090', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(60)->format('Y-m-d H:i:s')],
 61        ];
 62    }
 63 
 64    public function columns(): array
 65    {
 66        return [
 67            Column::make('Name', 'name')
 68                ->styling('text-lg font-bold')
 69                ->hideFromSelector(true),
 70 
 71            Column::make('Hex Code', 'hex')
 72                ->collapseOnMobile(true),
 73 
 74            Column::make('Color')
 75                ->customData(function ($row, $value) {
 76                    return '<span style="color:'.$row['hex'].'">██████████████</span>';
 77                })
 78                ->toHtml()
 79                ->collapseOnMobile(true),
 80 
 81            LinkColumn::make('Google it')
 82                ->href(function ($row) {
 83                    return 'https://www.google.com/search?q='.$row['name'];
 84                })
 85                ->text('Search in google')
 86                ->target('_blank')
 87                ->collapseOnMobile(true),
 88 
 89            BoolColumn::make('Primary', 'is_primary')
 90                ->collapseOnMobile(true),
 91 
 92            Column::make('Category', 'category')
 93                ->collapseOnMobile(true),
 94 
 95            DateColumn::make('Created at', 'created_at')
 96                ->outputFormat('Y-m-d')
 97                ->collapseOnMobile(true),
 98        ];
 99    }
100 
101    public function filters(): array
102    {
103        return [
104            FilterBool::make('Primary'),
105            FilterString::make('name'),
106            FilterSelectMagic::make('Category'),
107            FilterDateRange::make('Created at', 'created_at'),
108        ];
109    }
110 
111    public function options(): array
112    {
113        return [
114            'export_selected' => ['label' => 'Export selected rows', 'icon' => '☑️'],
115            'export_filtered' => ['label' => 'Export filtered rows', 'icon' => '🔍'],
116            'export_all' => ['label' => 'Export all rows', 'icon' => '📗'],
117            'remove' => ['label' => 'Delete selected rows', 'icon' => '🗑️'],
118        ];
119    }
120 
121    public function export_all(): \Symfony\Component\HttpFoundation\BinaryFileResponse
122    {
123        $allData = $this->getAllData();
124 
125        return \Maatwebsite\Excel\Facades\Excel::download(new \Beartropy\Tables\Exports\GenericExport($allData, strip_tags: true), $this->tableName.'.xlsx');
126    }
127 
128    public function export_filtered(): \Symfony\Component\HttpFoundation\BinaryFileResponse
129    {
130        $filteredData = $this->getAfterFiltersData();
131 
132        return \Maatwebsite\Excel\Facades\Excel::download(new \Beartropy\Tables\Exports\GenericExport($filteredData, strip_tags: true), $this->tableName.'.xlsx');
133    }
134 
135    public function export_selected(): ?\Symfony\Component\HttpFoundation\BinaryFileResponse
136    {
137        $selected_rows = $this->getSelectedData();
138        if ($selected_rows) {
139            return \Maatwebsite\Excel\Facades\Excel::download(new \Beartropy\Tables\Exports\GenericExport($selected_rows, strip_tags: true), $this->tableName.'.xlsx');
140        }
141 
142        return null;
143    }
144 
145    public function remove(): void
146    {
147        foreach ($this->getSelectedRows() as $id) {
148            $this->removeRowFromTable($id);
149        }
150    }
151}
Show Code
Card View
+ Select a theme...
Red
Hex Code #FF0000
Color ██████████████
Category Warm
Green
Hex Code #00FF00
Color ██████████████
Category Cool
Blue
Hex Code #0000FF
Color ██████████████
Category Cool
Yellow
Hex Code #FFFF00
Color ██████████████
Category Warm
Purple
Hex Code #800080
Color ██████████████
Category Cool
Orange
Hex Code #FFA500
Color ██████████████
Category Warm
Pink
Hex Code #FFC0CB
Color ██████████████
Category Warm
Black
Hex Code #000000
Color ██████████████
Category Neutral
White
Hex Code #FFFFFF
Color ██████████████
Category Neutral
Cyan
Hex Code #00FFFF
Color ██████████████
Category Cool
Mostrando 1 A 10 De 30 Registros 
  1<?php
  2 
  3namespace App\Livewire\Tables;
  4 
  5use Beartropy\Tables\Classes\Columns\BoolColumn;
  6use Beartropy\Tables\Classes\Columns\Column;
  7use Beartropy\Tables\Classes\Columns\LinkColumn;
  8use Beartropy\Tables\Classes\Filters\FilterBool;
  9use Beartropy\Tables\Classes\Filters\FilterDateRange;
 10use Beartropy\Tables\Classes\Filters\FilterSelectMagic;
 11use Beartropy\Tables\Classes\Filters\FilterString;
 12use Beartropy\Tables\YATBaseTable;
 13 
 14class DemoTableCards extends YATBaseTable
 15{
 16    public $tableName = 'DemoTableCards';
 17 
 18    public string $theme = 'gray';
 19 
 20    public function settings(): void
 21    {
 22        $this->hasBulk(true);
 23        $this->useCards(true);
 24        $this->useStateHandler(false);
 25        $this->showColumnToggle(false);
 26 
 27        $this->addCardModalButtons([
 28            ['label' => 'Edit', 'action' => 'editRow', 'color' => 'blue'],
 29            ['label' => 'Delete', 'action' => 'removeRow', 'color' => 'red'],
 30        ]);
 31    }
 32 
 33    public function data(): array
 34    {
 35        return [
 36            ['id' => 1, 'name' => 'Red', 'hex' => '#FF0000', 'is_primary' => true, 'category' => 'Warm', 'created_at' => now()->subDays(1)->format('Y-m-d H:i:s')],
 37            ['id' => 2, 'name' => 'Green', 'hex' => '#00FF00', 'is_primary' => true, 'category' => 'Cool', 'created_at' => now()->subDays(2)->format('Y-m-d H:i:s')],
 38            ['id' => 3, 'name' => 'Blue', 'hex' => '#0000FF', 'is_primary' => true, 'category' => 'Cool', 'created_at' => now()->subDays(3)->format('Y-m-d H:i:s')],
 39            ['id' => 4, 'name' => 'Yellow', 'hex' => '#FFFF00', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(4)->format('Y-m-d H:i:s')],
 40            ['id' => 5, 'name' => 'Purple', 'hex' => '#800080', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(5)->format('Y-m-d H:i:s')],
 41            ['id' => 6, 'name' => 'Orange', 'hex' => '#FFA500', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(6)->format('Y-m-d H:i:s')],
 42            ['id' => 7, 'name' => 'Pink', 'hex' => '#FFC0CB', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(7)->format('Y-m-d H:i:s')],
 43            ['id' => 8, 'name' => 'Black', 'hex' => '#000000', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(8)->format('Y-m-d H:i:s')],
 44            ['id' => 9, 'name' => 'White', 'hex' => '#FFFFFF', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(9)->format('Y-m-d H:i:s')],
 45            ['id' => 10, 'name' => 'Cyan', 'hex' => '#00FFFF', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(10)->format('Y-m-d H:i:s')],
 46            ['id' => 11, 'name' => 'Magenta', 'hex' => '#FF00FF', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(12)->format('Y-m-d H:i:s')],
 47            ['id' => 12, 'name' => 'Lime', 'hex' => '#32CD32', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(14)->format('Y-m-d H:i:s')],
 48            ['id' => 13, 'name' => 'Teal', 'hex' => '#008080', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(16)->format('Y-m-d H:i:s')],
 49            ['id' => 14, 'name' => 'Brown', 'hex' => '#A52A2A', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(18)->format('Y-m-d H:i:s')],
 50            ['id' => 15, 'name' => 'Gray', 'hex' => '#808080', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(20)->format('Y-m-d H:i:s')],
 51            ['id' => 16, 'name' => 'Navy', 'hex' => '#000080', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(22)->format('Y-m-d H:i:s')],
 52            ['id' => 17, 'name' => 'Maroon', 'hex' => '#800000', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(24)->format('Y-m-d H:i:s')],
 53            ['id' => 18, 'name' => 'Silver', 'hex' => '#C0C0C0', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(26)->format('Y-m-d H:i:s')],
 54            ['id' => 19, 'name' => 'Gold', 'hex' => '#FFD700', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(28)->format('Y-m-d H:i:s')],
 55            ['id' => 20, 'name' => 'Olive', 'hex' => '#808000', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(30)->format('Y-m-d H:i:s')],
 56            ['id' => 21, 'name' => 'Turquoise', 'hex' => '#40E0D0', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(35)->format('Y-m-d H:i:s')],
 57            ['id' => 22, 'name' => 'Lavender', 'hex' => '#E6E6FA', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(38)->format('Y-m-d H:i:s')],
 58            ['id' => 23, 'name' => 'Beige', 'hex' => '#F5F5DC', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(41)->format('Y-m-d H:i:s')],
 59            ['id' => 24, 'name' => 'Indigo', 'hex' => '#4B0082', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(44)->format('Y-m-d H:i:s')],
 60            ['id' => 25, 'name' => 'Coral', 'hex' => '#FF7F50', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(47)->format('Y-m-d H:i:s')],
 61            ['id' => 26, 'name' => 'Crimson', 'hex' => '#DC143C', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(50)->format('Y-m-d H:i:s')],
 62            ['id' => 27, 'name' => 'Sky Blue', 'hex' => '#87CEEB', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(53)->format('Y-m-d H:i:s')],
 63            ['id' => 28, 'name' => 'Violet', 'hex' => '#EE82EE', 'is_primary' => false, 'category' => 'Cool', 'created_at' => now()->subDays(56)->format('Y-m-d H:i:s')],
 64            ['id' => 29, 'name' => 'Salmon', 'hex' => '#FA8072', 'is_primary' => false, 'category' => 'Warm', 'created_at' => now()->subDays(58)->format('Y-m-d H:i:s')],
 65            ['id' => 30, 'name' => 'Slate', 'hex' => '#708090', 'is_primary' => false, 'category' => 'Neutral', 'created_at' => now()->subDays(60)->format('Y-m-d H:i:s')],
 66        ];
 67    }
 68 
 69    public function columns(): array
 70    {
 71        return [
 72            Column::make('Name', 'name')
 73                ->styling('text-lg font-bold')
 74                ->hideFromSelector(true)
 75                ->cardTitle(true),
 76 
 77            Column::make('Hex Code', 'hex')
 78                ->showOnCard(),
 79 
 80            Column::make('Color', 'color')
 81                ->customData(function ($row, $value) {
 82                    return '<span style="color:'.$row['hex'].'">██████████████</span>';
 83                })
 84                ->toHtml()
 85                ->showOnCard(),
 86 
 87            LinkColumn::make('Google it', 'google_it')
 88                ->href(function ($row) {
 89                    return 'https://www.google.com/search?q='.$row['name'];
 90                })
 91                ->text('Search in google')
 92                ->target('_blank'),
 93 
 94            BoolColumn::make('Primary', 'is_primary'),
 95 
 96            Column::make('Category', 'category')
 97                ->showOnCard(),
 98 
 99            Column::make('Created at', 'created_at'),
100        ];
101    }
102 
103    public function filters(): array
104    {
105        return [
106            FilterBool::make('Primary'),
107            FilterString::make('name'),
108            FilterSelectMagic::make('Category'),
109            FilterDateRange::make('Created at', 'created_at'),
110        ];
111    }
112 
113    public function options(): array
114    {
115        return [
116            'export_selected' => ['label' => 'Export selected rows', 'icon' => '☑️'],
117            'export_filtered' => ['label' => 'Export filtered rows', 'icon' => '🔍'],
118            'export_all' => ['label' => 'Export all rows', 'icon' => '📗'],
119            'remove' => ['label' => 'Delete selected rows', 'icon' => '🗑️'],
120        ];
121    }
122 
123    public function export_all(): \Symfony\Component\HttpFoundation\BinaryFileResponse
124    {
125        $allData = $this->getAllData();
126 
127        return \Maatwebsite\Excel\Facades\Excel::download(new \Beartropy\Tables\Exports\GenericExport($allData, strip_tags: true), $this->tableName.'.xlsx');
128    }
129 
130    public function export_filtered(): \Symfony\Component\HttpFoundation\BinaryFileResponse
131    {
132        $filteredData = $this->getAfterFiltersData();
133 
134        return \Maatwebsite\Excel\Facades\Excel::download(new \Beartropy\Tables\Exports\GenericExport($filteredData, strip_tags: true), $this->tableName.'.xlsx');
135    }
136 
137    public function export_selected(): ?\Symfony\Component\HttpFoundation\BinaryFileResponse
138    {
139        $selected_rows = $this->getSelectedData();
140        if ($selected_rows) {
141            return \Maatwebsite\Excel\Facades\Excel::download(new \Beartropy\Tables\Exports\GenericExport($selected_rows, strip_tags: true), $this->tableName.'.xlsx');
142        }
143 
144        return null;
145    }
146 
147    public function remove(): void
148    {
149        foreach ($this->getSelectedRows() as $id) {
150            $this->removeRowFromTable($id);
151        }
152    }
153 
154    public function editRow($row): void
155    {
156        // Edit logic here
157    }
158 
159    public function removeRow($row): void
160    {
161        $this->removeRowFromTable($row['id']);
162    }
163}

Built for Developers

Fast & Reactive

Built on Livewire 3, offering snappy real-time interactions without writing complex JavaScript.

Themable

Switch between preset themes or customize every aspect of the UI to match your brand identity.

Fluent API

Define columns, filters, and options using a clean, chainable PHP API that developers love.