Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Merklin's avatar

Datatables package for Livewire components

Hi all. I am making a simple package to create datatables for Livewire components, similar to Filament tables. It still in the initial development with just a few columns added but I'll appreciate any feedback and suggestions for the work done so far.

https://github.com/milenmk/laravel-simple-datatables

Ther usage will be like:

  1. Add use HasTable; trait to the component

  2. Define the table like:

public function table(Table $table): Table
    {
        return $table
            ->query(Model::query())
            ->schema([
                TextColumn::make('name')
                    ->label('Name')
                    ->searchable()
                    ->sortable()
                    ->visible(false),
                ProgressColumn::make('progress')
                    ->label('Progress')
                    ->value(59.58)
                    ->description('test'),
                ToggleColumn::make('is_active')
                    ->color('warning')
                    ->value(0),
            ])
            ->striped();
    }
  1. In the component blade file show the table with:
<div>
    {{ $this->table }}
</div>
0 likes
5 replies
jlrdw's avatar

Just a suggest:

I would write my own tables. If you go through the learning curve and learn well you will never need anything like "datatables".

I can do inline edit, add on the fly, and reorder easily. But yes there is a learning curve. If you do use datatables make sure to use server side pagination.

There was actually a user trying to load records in the millions then paginate, a big no no. He was wondering why everything took so long..

Query only what's needed.

2 likes
Merklin's avatar

@jlrdw I am paginating the query as suggested by you:

$table = new Table;

        // Start with the base query defined in the component
        $query = $this->table($table)->getQuery();

        // Apply search filter if there's any input
        if (! empty($this->search)) {
            $query->where(function ($q) use ($table) {
                foreach ($table->getColumns() as $column) {
                    if ($column->searchable) {
                        $q->orWhere($column->key, 'LIKE', "%{$this->search}%");
                    }
                }
            });
        }

        if (! empty($this->sortField)) {
            $query->orderBy($this->sortField, $this->sortDir);
        }

// Ensure the query is paginated before passing it to the table
        $paginatedResults = $query->paginate($this->perPage);

and I'm trying to make things as simple as possible.

Merklin's avatar

@jlrdw Yes, this is one of them but doesn't work well with Laravel 12 as far as I've tested. And the others are either not very popular i.e. you cannot be sure how and for how long they are supported or are very old.

jlrdw's avatar

@Merklin again, try writing your own table, see example https://laracasts.com/discuss/channels/laravel/can-i-redirect-a-get-request-to-a-post-request-for-inertia-partial-reloads?page=1&replyId=905441

Not shown there, but selecting a row brings up inline edit.

I suggest taking the time to learn how it's all done.

I use regular javascript and axios js along with a server fetched partial.

Also look at https://laracasts.com/discuss/channels/laravel/can-i-redirect-a-get-request-to-a-post-request-for-inertia-partial-reloads?page=1&replyId=905775

I didn't style it good for the example, but that is easy to do.

Edit:

I have tried livewire but decided no. But just my preference. I was using fetch js but after trying axios js, I went with it.

https://laracasts.com/series/javascript-techniques-for-server-side-developers/episodes/1

2 likes

Please or to participate in this conversation.