Beartropy Logo

Beartropy Tables

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

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 developer love.