Open utterances-bot opened 3 years ago
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>
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.
Ah, this looks neat. I got to try this on my next project 💪️
will try this
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.
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