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.

public function columns(): array {
    return [
        Column::make('Name','name')
            ->styling('text-lg font-bold')
            ->hideFromSelector(true),
        Column::make('Hex Code','hex'),
        Column::make('Color')
            ->customData(function($row, $value){
                return '<span style="color:'.$row['hex'].'">██████████████</span>';
            })
            ->toHtml(),
        LinkColumn::make('Google it','name')
            ->href(function($row, $value){
                return "https://www.google.com/search?q=".$value;
            })
            ->text('Google'),
        BoolColumn::make('Primary','isPrimary')
    ];
}

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.

Column::make('Big text column','bigtext')
    ->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.

Column::make('Large Header','name')
    ->thStyling('text-xl text-red-500')
    ->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.

Column::make('Price', 'price')
    ->pushRight() // Aligns header and content to the right (e.g., for currency)
Column::make('Status', 'status')
    ->pushLeft() // Aligns header and content to the left

Custom 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.

Column::make('Upper Name','name')
    ->customData(function($row, $value){
        return strtoupper($value);
    })
Column::make('Full Name')
    ->customData(function($row, $value){
        return $row['firstname'] . " " . $row['lastname'];
    })
Column::make('Big Name','name')
    ->customData(function($row, $value){
        return '<div class="text-3xl">'.$value.'</div>';
    })->toHtml()

Column View

view(string $view)
Render a custom blade view for the cell content. The view receives the $row, $value and $column variables.

Column::make('Status','status')
    ->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.

Column::make('Only Admins','sensitive-row')
    ->hideWhen(Auth::user()->isAdmin)

Hiding columns from selector

hideFromSelector(bool $bool)
Hides the column from the toggle dropdown.

Column::make('Always visible','force-data')
    ->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.

Column::make('Critical Data','important_field')
    ->disableToggleWhen(fn() => !Auth::user()->isSuperAdmin())
    ->hideToggleWhen(fn() => $this->isLocked)

Mobile Visibility

hideOnMobile(bool $bool)
Automatically hide this column when viewing on a mobile device.

Column::make('Description','desc')
    ->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.

Column::make('Description','desc')
    ->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.

Column::make('Not so important data','meh-column')
    ->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().

BoolColumn::make('User status','isActive')
    ->trueIs('enabled')
    ->trueLabel('User Active')
    ->falseLabel('<i class="icon"></i>')

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.

LinkColumn::make('Edit user','id')
    ->text('Edit')
    ->href(function($row, $value){
        return '/edit/'.$value;
    })

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.

Column::make('Name', 'name')
    ->sortable()     // Enable sorting
    ->searchable()   // Enable searching
Column::make('Sensitive Data', 'field')
    ->sortable(false)
    ->searchable(false) // Disable searching

Custom 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.

Column::make('Full Name')
    ->sortColumnBy('lastname')

Trigger Action

trigger(string $method)
When a boolean column is clicked, this triggers a method on your Livewire component with signatures ($id, $column).

// Will trigger the 'myCustomLivewireMethod($id, $column)' method on the component
Column::make('Active','is_active')
    ->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.

Column::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.

Column::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.

Column::make('Theme', 'theme_setting')
    ->sortable(function($query, $direction) {
        $query->orderBy(
            UserSetting::select('value')
                ->whereColumn('user_settings.user_id', 'users.id')
                ->where('key', 'theme'),
            $direction
        );
    })
    ->searchable(function($query, $term) {
        $query->orWhereHas('settings', function($q) use ($term) {
            $q->where('key', 'theme')->where('value', 'like', "%$term%");
        });
    });

Beartropy Tables