diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f15e8a4..3b9d8b92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,15 @@ All notable changes to `livewire-datatables` will be documented in this file +## 3.2.3 ( 2026-08-11 ) + +### What's Changed + +- Fix overlapping desktop pagination controls that made the hover background appear shifted. +- Give desktop and mobile pagination controls stable sizing, spacing, focus states, and accessible labels. +- Add a Chromium regression that verifies hover and keyboard focus do not move pagination buttons. +- Refresh the README structure, links, badges, compatibility details, and default Apricode-theme screenshot. + ## 3.2.2 ( 2026-08-11 ) ### What's Changed diff --git a/README.md b/README.md index 91b5543e..f05451ee 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,19 @@ +
+ # Livewire Datatables -[![Latest Version on Packagist](https://img.shields.io/packagist/v/arm092/livewire-datatables.svg?style=flat-square)](https://packagist.org/packages/arm092/livewire-datatables) -[![Total Downloads](https://img.shields.io/packagist/dt/arm092/livewire-datatables.svg?style=flat-square)](https://packagist.org/packages/arm092/livewire-datatables) +Build searchable, sortable, filterable and editable admin tables with Laravel, Livewire and Tailwind CSS. + +![Livewire Datatables with the default Apricode theme](resources/images/screenshot.png) + +[![Latest Version](https://img.shields.io/packagist/v/arm092/livewire-datatables.svg?style=for-the-badge)](https://packagist.org/packages/arm092/livewire-datatables) +[![Total Downloads](https://img.shields.io/packagist/dt/arm092/livewire-datatables.svg?style=for-the-badge)](https://packagist.org/packages/arm092/livewire-datatables) +[![GitHub checks](https://img.shields.io/github/checks-status/arm092/livewire-datatables/master?style=for-the-badge)](https://github.com/arm092/livewire-datatables/actions) +[![License](https://img.shields.io/github/license/arm092/livewire-datatables.svg?style=for-the-badge)](LICENSE.md) -### Features +
+ +## What the package does - Use a model or query builder to supply data - Mutate and format columns using preset or custom callbacks - Sort data using column or computed column @@ -13,15 +23,12 @@ - Column groups - Mass Action (Bulk) Support -## [Demo App Repo](https://github.com/MedicOneSystems/demo-livewire-datatables) - -![screenshot](resources/images/screenshot.png "Screenshot") +## Requirements and compatibility -## Requirements -- [Laravel 10|11|12|13](https://laravel.com/docs/13.x) +- [Laravel 10, 11, 12 or 13](https://laravel.com/docs/13.x) - [Livewire 4.3.5+](https://livewire.laravel.com/) - [Tailwind](https://tailwindcss.com/) -- [Alpine JS](https://github.com/alpinejs/alpine) +- [Alpine.js](https://alpinejs.dev/) ## Installation @@ -95,7 +102,7 @@ other as in the example above. | **hideable** | _String_ | gives ability to show/hide columns, accepts strings 'inline', 'buttons', or 'select' | `````` | | **buttonsSlot** | _String_ | blade view to be included immediately after the buttons at the top of the table in the component, which can therefore access public properties | | | **beforeTableSlot** | _String_ | blade view to be included immediately before the table in the component, which can therefore access public properties | | -| **afterTableSlot** | _String_ | blade view to be included immediately after the table in the component, which can therefore access public properties | [demo](https://livewire-datatables.com/complex) | +| **afterTableSlot** | _String_ | blade view to be included immediately after the table in the component, which can therefore access public properties | | --- @@ -575,7 +582,6 @@ Just add ```$complex = true``` to your Datatable Class and all filterable column - Combine rules and groups of rules using AND/OR logic - Drag and drop rules around the interface -![image](https://user-images.githubusercontent.com/7000886/128855344-25035758-ca90-42d2-bd19-518c9de45148.png) --- **Persisting Queries** (Requires AlpineJS v3 with $persist plugin) - Add ```$persistComplexQuery = true``` to your class and queries will be stored in browser localstorage. @@ -679,7 +685,7 @@ class TableWithSaving extends LivewireDatatable # Styling I know it's not cool to provide a package with tons of opionated markup and styling. Most other packages seem to have gone down the route of passing optional classes around as arguments or config variables. My take is that because this is just blade with tailwind, you can publish the templates and do whatever you like to them - it should be obvious where the Livewire and Alpine moving parts are. -There are methods for applying styles to rows and cells. ```rowClasses``` receives the ```$row``` and the [laravel loop variable](https://laravel.com/docs/8.x/blade#the-loop-variable) as parameters. ```cellClasses``` receives the ```$row``` and ```$column``` +There are methods for applying styles to rows and cells. ```rowClasses``` receives the ```$row``` and the [Laravel loop variable](https://laravel.com/docs/13.x/blade#the-loop-variable) as parameters. ```cellClasses``` receives the ```$row``` and ```$column``` For example: ```php @@ -701,7 +707,7 @@ You could also override the render method in your table's class to provide diffe ## Credits and Influences - [Laravel](https://laravel.com/) -- [Laravel Livewire](https://laravel-livewire.com/docs/quickstart/) +- [Laravel Livewire](https://livewire.laravel.com/docs/quickstart) - [Tailwind CSS](https://tailwindcss.com/) -- [AlpineJS](https://github.com/alpinejs/alpine) +- [Alpine.js](https://alpinejs.dev/) - [livewire-datatables by MedicOneSystems](https://github.com/MedicOneSystems/livewire-datatables) diff --git a/playwright.config.mjs b/playwright.config.mjs index 8ddc4a64..bd5a130c 100644 --- a/playwright.config.mjs +++ b/playwright.config.mjs @@ -3,6 +3,12 @@ import { defineConfig } from '@playwright/test'; export default defineConfig({ testDir: './tests/Browser', fullyParallel: false, + workers: 1, + webServer: { + command: 'node tests/Browser/run-test-server.mjs', + url: 'http://127.0.0.1:49187/editable-csp', + reuseExistingServer: false, + }, use: { baseURL: 'http://127.0.0.1:49187', browserName: 'chromium', diff --git a/resources/images/screenshot.png b/resources/images/screenshot.png index 510b7657..edbd1645 100644 Binary files a/resources/images/screenshot.png and b/resources/images/screenshot.png differ diff --git a/resources/views/livewire/datatables/datatable.blade.php b/resources/views/livewire/datatables/datatable.blade.php index dd82c654..2daf0657 100644 --- a/resources/views/livewire/datatables/datatable.blade.php +++ b/resources/views/livewire/datatables/datatable.blade.php @@ -201,11 +201,12 @@ class="ld-button ld-button--success px-3 py-2 text-xs font-medium tracking-wider @unless($this->hidePagination)
-
+
{{-- check if there is any data --}} @if(count($this->results))
- @foreach(config('livewire-datatables.per_page_options', [ 10, 25, 50, 100 ]) as $per_page_option) @endforeach @@ -223,7 +224,7 @@ class="ld-button ld-button--success px-3 py-2 text-xs font-medium tracking-wider
-
+
{{__('Results')}} {{ $this->results->firstItem() }} - {{ $this->results->lastItem() }} {{__('of')}} {{ $this->results->total() }}
diff --git a/resources/views/livewire/datatables/tailwind-pagination.blade.php b/resources/views/livewire/datatables/tailwind-pagination.blade.php index b37ea6c1..c40f31b2 100644 --- a/resources/views/livewire/datatables/tailwind-pagination.blade.php +++ b/resources/views/livewire/datatables/tailwind-pagination.blade.php @@ -1,22 +1,23 @@ -