Logo Beartropy Tables

Beartropy Tables

View Configuration
Customize the visual appearance and structure of the table.

Table Title

You can set a title for the table and customize its styling.

Set Title

setTitle(string $title) 

1$this->setTitle('My Awesome Table');

Show Counter

showCounter(bool $bool)
Show or hide the results counter text "Showing X to Y of Z results". 

1$this->showCounter(false);

Override Title Classes

overrideTitleClasses(string $classes) 

1$this->overrideTitleClasses('text-2xl font-bold text-gray-800 dark:text-gray-100');

Custom Header

setCustomHeader(string $html)
Replaces the default header with custom HTML. 

1$this->setCustomHeader('<div>Custom Header Content</div>');
Styling & Classes

Table Classes

Manage CSS classes for the component wrapper and the table itself. 

1# Wrapper classes
2$this->setComponentClasses('p-4 bg-white dark:bg-gray-800 rounded-lg shadow');
3 
4# Add to existing table classes
5$this->addTableClasses('border-collapse');
6 
7# Override default table classes completely
8$this->setTableClasses('w-full text-sm text-left');

Sticky Header

setStickyHeader()
Makes the table header sticky when scrolling. 

1$this->setStickyHeader();
Theme & Spinner

Table Theme

setTheme(string $theme)
Sets the color theme for the table. 

1$this->setTheme('zinc'); // Options: gray, slate, zinc, neutral, stone

Theme Overrides

setBulkThemeOverride(string $theme)
Sets the color theme for the bulk actions.
setButtonThemeOverride(string $theme)
Sets the color theme for the buttons (pagination, etc).
setInputThemeOverride(string $theme)
Sets the color theme for the inputs (search, etc). 

1$this->setBulkThemeOverride('zinc');
2$this->setButtonThemeOverride('zinc');
3$this->setInputThemeOverride('zinc');

Get Theme Config

getThemeConfig(string $key)
Retrieve a specific configuration value for the current theme. 

// Get the primary color class for the current theme
            $color = $this->getThemeConfig('primary_color');

Loading Spinner


useTableSpinner(bool $bool): Enable/disable the loading spinner.
setTableSpinnerView(string $view): Use a custom view for the spinner.
addTargetsToSpinner(array $targets): Add custom Livewire actions that should trigger the spinner. 

1$this->useTableSpinner(true);
2$this->setTableSpinnerView('components.custom-spinner'); // Optional
3$this->addTargetsToSpinner(['myCustomAction']);
Advanced Views

Modals View

setModalsView(string $view)
Include a custom view for modals used within the table context. 

1$this->setModalsView('livewire.my-custom-modals');

Custom Buttons

addButtons(array $buttons)
Inject custom buttons into the toolbar. 

1$this->addButtons([
2    ['label' => 'Create', 'icon' => 'plus', 'action' => 'createItem']
3]);

Custom View Slots

Inject custom views into specific areas of the table layout. 

1$this->setMostLeftView('components.tables.slots.left');
2$this->setLessLeftView('components.tables.slots.less-left');
3$this->setMostRightView('components.tables.slots.right');
4$this->setLessRightView('components.tables.slots.less-right');