Logo Beartropy Tables

Beartropy Tables

Settings
General table settings and row manipulation.

Table Configuration

setColumnID(string $id): Define which column acts as the unique identifier for rows (default is 'id').
showColumnToggle(bool $bool): Show/Hide the button that allows users to toggle column visibility.
setButtonVariant(string $variant): Set the style variant for all table buttons (e.g. 'glass', 'outline', 'solid'). Default is 'outline'.
showOptionsOnlyOnRowSelect(bool $bool): If true, the options button (bulk actions) will only be visible when at least one row is selected.
stripRows(bool $bool): Toggle striped rows on or off (default is true).
showOnlyTable(bool $bool): Disable global search, pagination, and column toggle with one setting. 

1$this->setColumnID('uuid');
2$this->showColumnToggle(true);
3$this->setButtonVariant('glass');
4$this->showOptionsOnlyOnRowSelect(true);
5$this->stripRows(true);
6$this->showOnlyTable(false);

Row Manipulation

Helper methods to modify table data at runtime.
addRowToTable(array $row): Adds a new row to the dataset.
removeRowFromTable($id): Removes the row with the specified ID.
updateRowOnTable($id, array $data): Update row data.
toggleBoolean($id, string $column): Toggle a boolean column value. 

1$this->addRowToTable(['id' => 1, 'name' => 'New Row']);
2$this->removeRowFromTable($id);
3$this->updateRowOnTable($id, ['name' => 'Updated Name']);
4$this->toggleBoolean($id, 'is_active');

Expanded Rows

toggleExpandedRow($id, $content, $isComponent = false)
Expand a row to show additional content or a nested Livewire component. 

1$this->toggleExpandedRow($rowId, $viewContent, true);

Caching

setCachePrefix(string $prefix)
Set a prefix for cache keys to avoid collisions when using multiple tables. 

1$this->setCachePrefix('users_table');

Search Label

setSearchLabel(string $label)
Customize the search input placeholder.
useGlobalSearch(bool $bool)
Enable or disable the global search input. 

1$this->setSearchLabel('Search Users...');
2$this->useGlobalSearch(true);

Card View Settings

Configure how the table behaves on mobile devices or if it should render as a card grid.

showCardsOnMobile(bool $bool): Switch to card view on mobile.
useCards(bool $bool): Force card view on all screen sizes.
addCardModalButtons(array $buttons): Add custom buttons to the card details modal. Any action triggered will receive the entire row data as a parameter. 

 1// Force card view on mobile devices
 2$this->showCardsOnMobile(true);
 3 
 4// Force card view on all devices (responsive grid on desktop)
 5$this->useCards(true);
 6 
 7// Add custom action buttons to the mobile card details modal
 8$this->addCardModalButtons([
 9    ["label" => 'Edit', "action" => "editRow", "color" => "blue"],
10    ["label" => 'Delete', "action" => "deleteRow", "color" => "red"]
11]);