In just a short month after the successful release of version 2 of Livewire Tables, there have been 4 minor releases with a few cool additions to note:

#v2.1

#Added missing table row click functionality

This was a missing feature from version 1 that allowed you to click a row and navigate to a URL.

This is actually implemented as cell clicks that all together make the entire row clickable. I did it this way so that we could exclude certain cells from the click functionality in case there is another clickable item inside that cell.

From the docs:

 1public function configure(): void
 2{
 3    $this->setPrimaryKey('id')
 4        ->setTableRowUrl(function($row) {
 5            return route('admin.users.show', $row);
 6        })
 7        ->setTableRowUrlTarget(function($row) {
 8            if ($row->isExternal()) {
 9                return '_blank';
10            }
11 
12            return '_self';
13        });
14}

#Added ability to mark column as unclickable if you need a cell to have another clickable element with clickable rows turned on.

As stated above, you can exclude certain cells from the click functionality:

1Column::make('Name')
2    ->unclickable(),

#v2.2

#Add custom markup at the end of the component

You can now implement this method on the component and it will load your view right before the ending component tag. Good for loading modals.

From the docs:

1public function customView(): string
2{
3    return 'includes.custom';
4}

#Disable columns from column select by default

Previously, there was no way to have a column hidden from column select by default. You can now specify:

1Column::make('Address', 'address.address')
2    ->deselected(),

#Number Filter

A new filter based on the HTML number input.

 1public function filters(): array
 2{
 3    return [
 4        NumberFilter::make('Amount')
 5            ->config([
 6                'min' => 0,
 7                'max' => 100,
 8            ])
 9            ->filter(function(Builder $builder, string $value) {
10                $builder->where('amount', '<', $value);
11            }),
12    ];
13}

#v2.3

#Ability to define additional select statements outside of columns

Sometimes you need to select columns that you don't have physical columns for. For example you probably don't want an ID column but you may need the ID selected to have action buttons or whatnot.

So you can now specify additional selects on the configuration:

1public function configure(): void
2{
3  $this->setAdditionalSelects(['users.id as id']);
4}

#Added 8 configurable areas

You can now specify configurable areas around the table to add your own components to the toolbar and such.

Read the docs for full details

#v2.4

#Added 4 table event listeners to hook into

You can now fire events from other components on the page to sort and filter the datatable:

From the docs:

1$this->emit('setSort', 'name', 'asc');

#Text Filters

A new filter based on the HTML text field:

 1public function filters(): array
 2{
 3    return [
 4        TextFilter::make('Search Name')
 5            ->config([
 6                'placeholder' => 'Search Name',
 7                'maxlength' => '25',
 8            ])
 9            ->filter(function(Builder $builder, string $value) {
10                $builder->where('users.name', 'like', '%'.$value.'%');
11            }),
12    ];
13}

#setThSortButtonAttributes() to set attributes for th sort button

Previously, these classes were locked and uneditable. You can now configure them:

 1public function configure(): void
 2{
 3  // Takes a callback that gives you the current column.
 4  $this->setThSortButtonAttributes(function(Column $column) {
 5    if ($column->isField('name')) {
 6      return [
 7        'class' => 'bg-green-500',
 8      ];
 9    }
10 
11    return [];
12  });
13}

#setHideConfigurableAreasWhenReorderingStatus() to hide configurable areas when reordering status which now defaults to true

Configurable areas are now hidden by default when reordering, but you can set the status yourself:

1public function configure(): void
2{
3  $this->setHideConfigurableAreasWhenReorderingStatus(true);
4  $this->setHideConfigurableAreasWhenReorderingStatus(false);
5}

#Fix issue with passing parameters to builder() and columns()

Parameters passed into the component are now correctly available in the builder() and columns() methods.

#Other minor changes

• Reworked query builder to fix mount parameter problems with lifecycle event order.
• Fixed possible bug with bulk actions dropdown on Tailwind when bulk actions are hidden until a selection is made.
• Fixed filter dropdown opening on sort
• Fixed issue with Postgres and quotes
• Update filter docs
• Update getTdAttributes to take 4th missing argument
• Add filters in the config section
• Update some docs formatting
• Turkish translation
• Events documentation
• Added $row as second parameter to BooleanColumn setCallback().