blog/livewire-tables-10

[utterances-bot]

Rappasoft | Blog | Livewire Tables 1.0

New features + Tailwind CSS support, multi column sorting, definable filters, bulk actions, and more.

https://rappasoft.com/blog/livewire-tables-10

[jrmypttrsn]

Am I missing something in the documentation? I've got my component built out but when I include the livewire component in my blade view there's nothing there.

<?php

namespace App\Http\Livewire;

use App\Models\Operation;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class OperationsTable extends DataTableComponent
{
    public bool $showSearch = true;

    public function render()
    {
        return view('livewire.operations-table');
    }

    public function rowView(): string
    {
        return 'resources/views/operations/table/row.blade.php';
    }

    public function query(): Builder
    {
        return Operation::query()
            ->when($this->getFilter('search'), fn ($query, $search) => $query->search($search));
    }

    public function columns(): array
    {
        // TODO: Implement columns() method.
    }
}

row.blade.php

<x-livewire-tables::table.cell class="pr-0">
<x-input.checkbox wire:model="selected" value="{{ $operation->operation_id }}"/>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-700 hover:underline font-bold">
        <a href="{{ route('operations.show', $operation) }}">
            {{ $operation->operation_name }}
        </a>
        @if($team->operations->pluck('operation_id')->contains($operation->operation_id))
            <x-icon.badge-check class="text-green-500"/>
        @endif
    </p>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-600">
        {{ $operation->certifier_name }}
    </p>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-600">
        {{ $operation->other_former_names ?? '' }}
    </p>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-{{ $operation->operation_certification_status === 'Certified' ? 'green' : 'red' }}-100 text-{{ $operation->operation_certification_status === 'Certified' ? 'green' : 'red' }}-800 capitalize">
        {{ $operation->operation_certification_status ?? '' }}
    </span>
    <br>
    <span class="text-xs">Effective: {{ isset($operation->effective_date_of_operation_status) ? $operation->effective_date_of_operation_status->format('Y-m-d') : '' }}</span>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-600">
        {{ $operation->contactName ?? '' }}
    </p>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-600">
        {{ $operation->physical_address_city ?? '' }}
    </p>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-600">
        {{ $operation->physical_address_state_province ?? '' }}
    </p>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-600">
        {{ $operation->physical_address_country ?? '' }}
    </p>
</x-livewire-tables::table.cell>
<x-livewire-tables::table.cell>
    <p class="text-gray-600">
        {{ $operation->product_list }}
    </p>
</x-livewire-tables::table.cell>

index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('All Operations') }}
        </h2>
    </x-slot>
    <div class="py-12 space-y-4">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            {{--      Table I built      --}}
            <livewire:operations/>
            {{--      Table built with Livewire Tables     --}}
            <livewire:operations-table/>
        </div>
    </div>
</x-app-layout>

[rappasoft]

Yes, you are missing a few things. You should follow the example table, as well as you're missing your columns definition, you don't need a render() method, and $showSearch is true by default. You should use the issue tracker on the repo as it will be easier for others to answer as well.

[spekulatius]

Ah, this looks neat. I got to try this on my next project 💪️

[lloricode]

will try this

[eugenefvdm]

This is a great piece of software which I only recently discovered after thinking long about ditching Laravel Nova and Intertia type stuff to work more towards the TALL stack...

The one thing I am missing probably because I'm new is how to do badges? I searched high and low and I just don't seem to find information on it. I see loads of custom ways to present data but I kind of hoped doing a badge would be documented. Even just Success, Info, Warning, Error. It seems some of the sample screenshots have something like that in.

Wnen I say badge, I of course mean something like this: https://flowbite.com/docs/components/badge/ or https://tailwindui.com/components/application-ui/elements/badges

Apologies for posting here I realize this is probably the wrong place and would take advice on where I should be asking this noob question.