Implement Rappasoft Livewire Tables for project list and replace old component

This commit is contained in:
2026-05-12 14:04:07 +02:00
parent 0bc3ca3d3e
commit 4af4387b1e
5 changed files with 201 additions and 5 deletions
+111
View File
@@ -0,0 +1,111 @@
<?php
namespace App\Livewire;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use App\Models\Project;
class ProjectTable extends DataTableComponent
{
protected $model = Project::class;
public function configure(): void
{
$this->setPrimaryKey('id')
->setDefaultSort('created_at', 'desc')
->setTableAttributes(['class' => 'table-auto w-full'])
->setThAttributes(['class' => 'px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'])
->setTdAttributes(['class' => 'px-4 py-2 whitespace-nowrap text-sm text-gray-900']);
$this->addColumn('name', __('Project Name'))
->setSortable()
->setSearchable();
$this->addColumn('address', __('Address'))
->setSortable()
->setSearchable();
$this->addColumn('status', __('Status'))
->setSortable()
->setFilterable(\[
'planning' => __('Planning'),
'in_progress' => __('In progress'),
'paused' => __('Paused'),
'completed' => __('Completed'),
])
->setLabel(fn ($value, $row, $column, $component) =>
match ($value) {
'planning' => '<span class="badge badge-primary">'.__('Planning').'</span>',
'in_progress' => '<span class="badge badge-success">'.__('In progress').'</span>',
'paused' => '<span class="badge badge-warning">'.__('Paused').'</span>',
'completed' => '<span class="badge badge-secondary">'.__('Completed').'</span>',
default => $value
}
);
$this->addColumn('start_date', __('Start Date'))
->setSortable()
->setFormat(fn ($value, $row, $column) => $value ? $value->format('Y-m-d') : '');
$this->addColumn('end_date_estimated', __('Estimated End Date'))
->setSortable()
->setFormat(fn ($value, $row, $column) => $value ? $value->format('Y-m-d') : '');
$this->addColumn('actions', __('Actions'))
->setLabel(fn ($row) => '<div class="flex space-x-2">
<a href="'.route('projects.edit', $row->id).'" class="btn btn-sm btn-primary">'.__('Edit').'</a>
<form action="'.route('projects.destroy', $row->id).'" method="POST" onsubmit="return confirm(''.__('Are you sure you want to delete this project?').'');">
'.csrf_field().'
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-error">'.__('Delete').'</button>
</form>
</div>')
->setHtmlAttribute(['class' => 'text-right']);
}
public function columns(): array
{
return [
Column::make(__('Project Name'), 'name')
->sortable()
->searchable(),
Column::make(__('Address'), 'address')
->sortable()
->searchable(),
Column::make(__('Status'), 'status')
->sortable()
->filterable(\[
'planning' => __('Planning'),
'in_progress' => __('In progress'),
'paused' => __('Paused'),
'completed' => __('Completed'),
])
->label(fn ($value, $row, $column) =>
match ($value) {
'planning' => '<span class="badge badge-primary">'.__('Planning').'</span>',
'in_progress' => '<span class="badge badge-success">'.__('In progress').'</span>',
'paused' => '<span class="badge badge-warning">'.__('Paused').'</span>',
'completed' => '<span class="badge badge-secondary">'.__('Completed').'</span>',
default => $value
}
),
Column::make(__('Start Date'), 'start_date')
->sortable()
->format(fn ($value, $row, $column) => $value ? $value->format('Y-m-d') : ''),
Column::make(__('Estimated End Date'), 'end_date_estimated')
->sortable()
->format(fn ($value, $row, $column) => $value ? $value->format('Y-m-d') : ''),
Column::make(__('Actions'))
->label(fn ($row) => '<div class="flex space-x-2">
<a href="'.route('projects.edit', $row->id).'" class="btn btn-sm btn-primary">'.__('Edit').'</a>
<form action="'.route('projects.destroy', $row->id).'" method="POST" onsubmit="return confirm(''.__('Are you sure you want to delete this project?').'');">
'.csrf_field().'
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-error">'.__('Delete').'</button>
</form>
</div>')
->htmlAttribute(['class' => 'text-right']),
];
}
}
+1
View File
@@ -16,6 +16,7 @@
"livewire/volt": "^1.7.0",
"mansoor/blade-lets-icons": "^1.0",
"phayes/geophp": "^1.2",
"rappasoft/laravel-livewire-tables": "^3.7",
"spatie/laravel-permission": "^6.25"
},
"require-dev": {
Generated
+85 -4
View File
@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "999fac715c03fad372d754fcf1d990f4",
"content-hash": "afa93484318041be0823eb4914a47317",
"packages": [
{
"name": "blade-ui-kit/blade-heroicons",
@@ -3954,6 +3954,87 @@
},
"time": "2025-12-14T04:43:48+00:00"
},
{
"name": "rappasoft/laravel-livewire-tables",
"version": "v3.7.3",
"source": {
"type": "git",
"url": "https://github.com/rappasoft/laravel-livewire-tables.git",
"reference": "74beb4c2672e024000d41ecad8a17b4ab8c934bd"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/rappasoft/laravel-livewire-tables/zipball/74beb4c2672e024000d41ecad8a17b4ab8c934bd",
"reference": "74beb4c2672e024000d41ecad8a17b4ab8c934bd",
"shasum": ""
},
"require": {
"blade-ui-kit/blade-heroicons": "^2.1",
"illuminate/contracts": "^10.0|^11.0|^12.0",
"illuminate/support": "^10.0|^11.0|^12.0",
"livewire/livewire": "^3.0|dev-main",
"php": "^8.1|^8.2|^8.3|^8.4"
},
"require-dev": {
"brianium/paratest": "^5.0|^6.0|^7.0|^8.0|^9.0",
"ext-sqlite3": "*",
"larastan/larastan": "^2.6|^3.0",
"laravel/pint": "^1.10",
"monolog/monolog": "*",
"nunomaduro/collision": "^6.0|^7.0|^8.0|^9.0",
"orchestra/testbench": "^7.0|^8.0|^9.0|^10.0",
"phpunit/phpunit": "^9.0|^10.0|^11.0|^12.0"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"Rappasoft\\LaravelLivewireTables\\LaravelLivewireTablesServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"Rappasoft\\LaravelLivewireTables\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Anthony Rappa",
"email": "rappa819@gmail.com",
"role": "Developer"
},
{
"name": "Joe McElwee",
"email": "joe@lowerrocklabs.com",
"role": "Developer"
}
],
"description": "A dynamic table component for Laravel Livewire",
"homepage": "https://github.com/rappasoft/laravel-livewire-tables",
"keywords": [
"datatables",
"laravel",
"livewire",
"rappasoft",
"tables"
],
"support": {
"issues": "https://github.com/rappasoft/laravel-livewire-tables/issues",
"source": "https://github.com/rappasoft/laravel-livewire-tables/tree/v3.7.3"
},
"funding": [
{
"url": "https://github.com/rappasoft",
"type": "github"
}
],
"time": "2025-05-03T02:24:46+00:00"
},
{
"name": "react/event-loop",
"version": "v1.6.0",
@@ -9757,12 +9838,12 @@
],
"aliases": [],
"minimum-stability": "stable",
"stability-flags": {},
"stability-flags": [],
"prefer-stable": true,
"prefer-lowest": false,
"platform": {
"php": "^8.2"
},
"platform-dev": {},
"plugin-api-version": "2.9.0"
"platform-dev": [],
"plugin-api-version": "2.6.0"
}
@@ -0,0 +1,3 @@
<div>
{{-- Nothing in the world is as soft and yielding as water. --}}
</div>
+1 -1
View File
@@ -6,6 +6,6 @@
<a href="{{ route('projects.create') }}" class="btn btn-primary">+ {{ __('New Project') }}</a>
@endcan
</div>
<livewire:project-list />
<livewire:project-table />
</div>
</x-app-layout>