Beartropy Tables
Defining Columns
Column::make(string label, ?string $field)
In order to render the data the way you need it, you have to create a "columns" function returning an array
of any of the Column objects we provide.
1public function columns(): array { 2return [ 3Column::make('Name','name') 4->styling('text-lg font-bold') 5->hideFromSelector(true), 6 7Column::make('Hex Code','hex'), 8 9Column::make('Color')10->customData(function($row, $value){11return '<span style="color:'.$row['hex'].'">██████████████</span>';12})13->toHtml(),14 15LinkColumn::make('Google it','name')16->href(function($row, $value){17return18"https://www.google.com/search?q=".$value;19 })20 ->text('Google'),21 22 BoolColumn::make('Primary','isPrimary')23 ];24}Column Modifiers
The Column class provides several modifiers to customize your table:
Styling
styling(string $classes)
You can pass classes to add to all <td> in the column. The classes will be
prefixed with ! in order to override other conflicting classes.
1Column::make('Big text column','bigtext')2->styling('text-7xl')Header Styling
thStyling(string $classes): Add classes to the <th> element.
thWrapperStyling(string $classes): Add classes to the inner wrapper div of the header
cell.
1Column::make('Large Header','name')2->thStyling('text-xl text-red-500')3->thWrapperStyling('p-4 border-b-2 border-red-500')Content Alignment
pushLeft() / pushRight()
Quickly align both the header and the content of the column to the left or right. Useful for numeric
data or currency.
1Column::make('Price', 'price')2->pushRight() // Aligns header and content to the right (e.g., for currency)3 4Column::make('Status', 'status')5->pushLeft() // Aligns header and content to the leftCustom Data
customData(Closure $function)
To customize the data of the column you can pass any html in a closure function with
$row and $value variable available.
Tip: if you pass html, you need to add the ->toHtml() modifier.
1Column::make('Upper Name','name') 2->customData(function($row, $value){ 3return strtoupper($value); 4}) 5 6Column::make('Full Name') 7->customData(function($row, $value){ 8return $row['firstname'] . " " . $row['lastname']; 9})10 11Column::make('Big Name','name')12->customData(function($row, $value){13return '<div class="text-3xl">'.$value.'</div>';14})->toHtml()Column View
view(string $view)
Render a custom blade view for the cell content. The view receives the $row,
$value and $column variables.
1Column::make('Status','status')2->view('components.columns.status-pill')Hiding columns
hideWhen(bool $bool)
Hides the column from the view. When true the user cannot access this column at all.
1Column::make('Only Admins','sensitive-row')2->hideWhen(Auth::user()->isAdmin)Hiding columns from selector
hideFromSelector(bool $bool)
Hides the column from the toggle dropdown.
1Column::make('Always visible','force-data')2->hideFromSelector(true)Toggle Visibility Control
disableToggleWhen(Closure $function): Disable the toggle switch in the dropdown based
on a condition.
hideToggleWhen(Closure $function): Hide the toggle switch in the dropdown based on a
condition.
1Column::make('Critical Data','important_field')2->disableToggleWhen(fn() => !Auth::user()->isSuperAdmin())3->hideToggleWhen(fn() => $this->isLocked)Mobile Visibility
hideOnMobile(bool $bool)
Automatically hide this column when viewing on a mobile device.
1Column::make('Description','desc')2->hideOnMobile(true)Collapse On Mobile
collapseOnMobile(bool $bool)
Instead of hiding the column completely on mobile, this option will hide it from the main table view
but show its content in the expanded row details view when the user clicks on a row.
1Column::make('Description','desc')2->collapseOnMobile(true)Hide column by default
isVisible(bool $bool)
By default all columns are visible. IF you set this to true the table will render with
this column hidden, but the user can display it any time with the column toggle switch.
1Column::make('Not so important data','meh-column')2->isVisible(false)Boolean columns
BoolColumn::make(string $label, string $field)
You can use this column to boolean values, they will render in table view as ✔️ and ❌.
You can set what is considered true for a strict comparison with the
trueIs().
Also, you can customize the label/icons to appear in each case with trueLabel() and
falseLabel().
1BoolColumn::make('User status','isActive')2->trueIs('enabled')3->trueLabel('User Active')4->falseLabel('<i class="icon"></i>')Date columns
DateColumn::make(string $label, string $field)
A specialized column for handling date values with custom formatting.
Modifiers:
inputFormat(string $format): The expected input date format from your data source.
outputFormat(string $format): The desired output format for display. Default is Y-m-d.
emptyValue(string $value): Fallback value to display when the date is null or empty.
1DateColumn::make('Created At', 'created_at')2->inputFormat('Y-m-d H:i:s')3->outputFormat('M d, Y')4->emptyValue('Not Found')Link columns
LinkColumn::make(string $label, ?string $field)
Link column takes an destination and generates a link with the closure function.
Modifiers:
text(string|Closure $text): Set the link text.
target(string $target): Set the link target (e.g. _blank).
classes(string $classes): Add classes to the link tag.
popup(array $options): Open link in a popup window. Options: width, height.
1LinkColumn::make('Edit user','id')2->text('Edit')3->href(function($row, $value){4return '/edit/'.$value;5})Sorting and Searching
sortable(bool|Closure $callback = true)
Enable or disable sorting for the column. Default is false.
searchable(bool|Closure $callback = true)
Enable or disable searching for the column. Default is true.
1Column::make('Name', 'name')2->sortable() // Enable sorting3->searchable() // Enable searching4 5Column::make('Sensitive Data', 'field')6->sortable(false)7->searchable(false) // Disable searchingCustom Sorting
sortColumnBy(string $column_key)
Override the column used for sorting when this header is clicked. Useful when displaying a computed
value but sorting by a database field.
1Column::make('Full Name')2->sortColumnBy('lastname')Trigger Action
trigger(string $method)
When a toggle column is clicked, this triggers a method on your Livewire component with signatures
($id, $column).
1// Will trigger the 'myCustomLivewireMethod($id, $column)' method on the component2ToggleColumn::make('Active','is_active')3->trigger('myCustomLivewireMethod')Mobile Card Title
cardTitle(bool $bool)
Sets this column as the primary title for the mobile card view. The title becomes clickable and
opens the details modal.
1Column::make('Name', 'name')->cardTitle()Show on Card Body
showOnCard(bool $bool)
Explicitly includes this column in the body of the mobile card. Columns without this (or
cardTitle) will not be shown on the card itself, but will still appear in the details
modal.
1Column::make('Description', 'desc')->showOnCard()Custom Sorting & Searching
You can define custom logic for sorting and searching, which is useful for calculated columns or complex relationships.
1Column::make('Theme', 'theme_setting') 2->sortable(function($query, $direction) { 3$query->orderBy( 4UserSetting::select('value') 5->whereColumn('user_settings.user_id', 'users.id') 6->where('key', 'theme'), 7$direction 8); 9})10->searchable(function($query, $term) {11$query->orWhereHas('settings', function($q) use ($term) {12$q->where('key', 'theme')->where('value', 'like', "%$term%");13});14});