DataTables with Livewire Integration

[kiotipot1]

Hi everyone I am new in laravel, I'm still learning laravel and i want to learn laravel-livewire and integrate yajra datatables is their any sample project or documents you can refer for me in integrating yajra

[backstageel]

If you want datatables on livewire, maybe is better to go with https://livewire-datatables.com/

[yajra]

Here is an example of a VideosDataTable that I am working on with some Livewire codes:

VideosDataTable

    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('status', function (Video $video) {
                return Livewire::mount('video-sync-poll', ['video' => $video])->html();
            })
            ->rawColumns(['status'])
            ->setRowId('id');
    }

    public function html()
    {
        return $this->builder()
                    ->setTableId('videos-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->drawCallbackWithLivewire() // enable livewire integration
                    ->orderBy(3, 'asc')
                    ->selectStyleOS()
                    ->selectSelector('td:first-child')
                    ->buttons([
                        SearchPanesButton::make(),
                        CreateButton::make(),
                        EditButton::make(),
                        RemoveButton::make(),
                        ReloadButton::make(),
                    ])
                    ->editors([
                        Editor::make()
                              ->fields([
                                  Text::make('video_id'),
                                  Text::make('title'),
                                  Select2::make('tags')
                                         ->data('tags[].name')
                                         ->label('Tags')
                                         ->opts([
                                             'multiple' => true,
                                         ])
                                         ->modelOptions(Tag::class, 'name', 'name'),
                              ]),
                    ]);
    }

Livewire Component

class VideoSyncPoll extends Component
{
    public $video;

    public function mount($video)
    {
        $this->video = $video;
    }

    public function render()
    {
        return view('livewire.video-sync-poll');
    }
}

[kiotipot1]

hello yajra i'm using laravel jetstream livewire in my project and i follow the quickstart instruction in your website but the datatable does not display in the webpage. their is also no errors

[yajra]

Unfortunately, the quickstart tutz I have is not updated and I think will not work on jetstream. You first need to learn how blade component works I guess. Here a short layout on how it looks when using Jetstream / blade components:

<x-admin-layout>
    {{ $dataTable->table() }}

    <x-slot name="scripts">
        {{ $dataTable->scripts() }}
    </x-slot>
</x-admin-layout>

[kiotipot1]

hello @yajra i switch to basic laravel 8 with livewire. manage to display the datatables and the livewire delete component but whenever i click the button it doesn't trigger my delete method in livewire. I use the wire:click event

my delete method is just a diedump sorry for being such a noob

[AtefR]

I've tried this and livewire clicks doesn't work, any idea how to make them work?

[poncoherbowo]

can we use ->render() method inside livewire render() ?

[rohitsaini-developer]

public function render(FaqsDataTable $dataTable)
{
return $dataTable->render('livewire.admin.faq.index');
}

error

""render" method on [App\Http\Livewire\Admin\Faq\Index] must return instance of [Illuminate\View\View]"

please tell me what i am doing wrong during integration of yajra datatable in livewire

[Frascth]

any updates? im writing the exact code like yours but im not getting error, just the data is not showing

[yajra]

On Laravel 10, you can use something like:

->addColumn('progress', function (File $file) {
  return Livewire::mount('progress-component', compact('file'));
})