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')); })

[girishpadia]

Hi,

I have followed the steps mentioned at https://yajrabox.com/docs/laravel-datatables/12.0/quick-starter. There is an image at the bottom of the page. The image shows User data on the dataTables with buttons (for New,and export buttons) shown at the top of the table.

I am getting data from User model but I don't see those buttons. What is wrong? A help in this regard is much appreciated. Thanks.

[yajra]

Dom option is deprecated on DataTables 2.x and I thnk the js plugin still uses it. Try adding the scripts below:

$.extend(true, $.fn.DataTable.defaults, { layout: { topStart: null, topEnd: null, top: ['pageLength', 'info', 'paging'], top1: ['search', 'buttons'], bottomStart: null, bottomEnd: null, } });