From 9385b54a066b93e91524e0d35ceea986fcea5fc1 Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Thu, 18 Sep 2025 20:27:20 +0700 Subject: [PATCH] feat(datatable): install and configure Rappasoft Laravel Livewire Tables --- app/Traits/Datatable/WithAppendColumn.php | 17 ++ app/Traits/Datatable/WithConfiguration.php | 70 +++++++ composer.json | 1 + composer.lock | 233 ++++++++++++++++++++- config/livewire-tables.php | 132 ++++++++++++ 5 files changed, 452 insertions(+), 1 deletion(-) create mode 100644 app/Traits/Datatable/WithAppendColumn.php create mode 100644 app/Traits/Datatable/WithConfiguration.php create mode 100644 config/livewire-tables.php diff --git a/app/Traits/Datatable/WithAppendColumn.php b/app/Traits/Datatable/WithAppendColumn.php new file mode 100644 index 0000000..cffaef1 --- /dev/null +++ b/app/Traits/Datatable/WithAppendColumn.php @@ -0,0 +1,17 @@ +sortable() + ->hideIf($this->hideCreatedAt ?? true), + ]; + } +} diff --git a/app/Traits/Datatable/WithConfiguration.php b/app/Traits/Datatable/WithConfiguration.php new file mode 100644 index 0000000..b58954e --- /dev/null +++ b/app/Traits/Datatable/WithConfiguration.php @@ -0,0 +1,70 @@ +setPrimaryKey('id') + // Table Configuration + ->setTableWrapperAttributes([ + 'class' => 'overflow-x-auto bg-white shadow ring-1 ring-gray-200 rounded-lg', + ]) + ->setEmptyMessage('Tidak ada data yang ditemukan.') + ->setQueryStringDisabled() + ->setColumnSelectDisabled() + ->setQueryStringStatusForSearch(false) + ->setQueryStringStatusForSort(false) + ->setTableAttributes([ + 'class' => 'table table-bordered table-hover align-middle text-nowrap', + ]) + + // Header + ->setTheadAttributes([ + 'class' => 'bg-gray-100 border-b border-gray-200', + ]) + + // Search + ->setSearchPlaceholder('Cari data...') + ->setSearchFieldAttributes([ + 'class' => 'block w-full max-w-xs px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-0 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm', + ]) + + // Sorting + ->setSortingPillsDisabled() + ->setSingleSortingEnabled() + ->setDefaultSort('created_at', 'desc') + + // Filter + ->setFilterPillsDisabled() + ->setFilterPopoverAttributes( + [ + 'class' => 'w-50', + 'default-width' => false, + 'default-colors' => true, + 'default-styling' => true, + 'x-transition:enter' => 'transition ease-out duration-100', + ] + ) + + // Pagination + ->setPerPageFieldAttributes([ + 'class' => 'block w-full max-w-xs px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-0 focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm', + 'default-colors' => true, + 'default-styles' => true, + ]) + ->setPaginationEnabled(true) + ->setDefaultPerPage(25) + ->setPerPageAccepted([25, 50, 100, 1000]); + } + + public function prependColumns(): array + { + return [ + IncrementColumn::make('#'), + ]; + } +} diff --git a/composer.json b/composer.json index 06b3387..a4069c2 100644 --- a/composer.json +++ b/composer.json @@ -13,6 +13,7 @@ "livewire/flux": "2.2.5", "livewire/flux-pro": "2.2.5", "livewire/livewire": "^3.6", + "rappasoft/laravel-livewire-tables": "^3.7", "spatie/laravel-sluggable": "^3.7" }, "repositories": [ diff --git a/composer.lock b/composer.lock index 6a4a999..d2db205 100644 --- a/composer.lock +++ b/composer.lock @@ -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": "0774ce1c962f0caf811664cfee90d8e5", + "content-hash": "1da73fb9fd2ff8594be181c31d624d7f", "packages": [ { "name": "archtechx/enums", @@ -59,6 +59,156 @@ }, "time": "2025-06-06T23:15:09+00:00" }, + { + "name": "blade-ui-kit/blade-heroicons", + "version": "2.6.0", + "source": { + "type": "git", + "url": "https://github.com/driesvints/blade-heroicons.git", + "reference": "4553b2a1f6c76f0ac7f3bc0de4c0cfa06a097d19" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/driesvints/blade-heroicons/zipball/4553b2a1f6c76f0ac7f3bc0de4c0cfa06a097d19", + "reference": "4553b2a1f6c76f0ac7f3bc0de4c0cfa06a097d19", + "shasum": "" + }, + "require": { + "blade-ui-kit/blade-icons": "^1.6", + "illuminate/support": "^9.0|^10.0|^11.0|^12.0", + "php": "^8.0" + }, + "require-dev": { + "orchestra/testbench": "^7.0|^8.0|^9.0|^10.0", + "phpunit/phpunit": "^9.0|^10.5|^11.0" + }, + "type": "library", + "extra": { + "laravel": { + "providers": [ + "BladeUI\\Heroicons\\BladeHeroiconsServiceProvider" + ] + } + }, + "autoload": { + "psr-4": { + "BladeUI\\Heroicons\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Dries Vints", + "homepage": "https://driesvints.com" + } + ], + "description": "A package to easily make use of Heroicons in your Laravel Blade views.", + "homepage": "https://github.com/blade-ui-kit/blade-heroicons", + "keywords": [ + "Heroicons", + "blade", + "laravel" + ], + "support": { + "issues": "https://github.com/driesvints/blade-heroicons/issues", + "source": "https://github.com/driesvints/blade-heroicons/tree/2.6.0" + }, + "funding": [ + { + "url": "https://github.com/sponsors/driesvints", + "type": "github" + }, + { + "url": "https://www.paypal.com/paypalme/driesvints", + "type": "paypal" + } + ], + "time": "2025-02-13T20:53:33+00:00" + }, + { + "name": "blade-ui-kit/blade-icons", + "version": "1.8.0", + "source": { + "type": "git", + "url": "https://github.com/driesvints/blade-icons.git", + "reference": "7b743f27476acb2ed04cb518213d78abe096e814" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/driesvints/blade-icons/zipball/7b743f27476acb2ed04cb518213d78abe096e814", + "reference": "7b743f27476acb2ed04cb518213d78abe096e814", + "shasum": "" + }, + "require": { + "illuminate/contracts": "^8.0|^9.0|^10.0|^11.0|^12.0", + "illuminate/filesystem": "^8.0|^9.0|^10.0|^11.0|^12.0", + "illuminate/support": "^8.0|^9.0|^10.0|^11.0|^12.0", + "illuminate/view": "^8.0|^9.0|^10.0|^11.0|^12.0", + "php": "^7.4|^8.0", + "symfony/console": "^5.3|^6.0|^7.0", + "symfony/finder": "^5.3|^6.0|^7.0" + }, + "require-dev": { + "mockery/mockery": "^1.5.1", + "orchestra/testbench": "^6.0|^7.0|^8.0|^9.0|^10.0", + "phpunit/phpunit": "^9.0|^10.5|^11.0" + }, + "bin": [ + "bin/blade-icons-generate" + ], + "type": "library", + "extra": { + "laravel": { + "providers": [ + "BladeUI\\Icons\\BladeIconsServiceProvider" + ] + } + }, + "autoload": { + "files": [ + "src/helpers.php" + ], + "psr-4": { + "BladeUI\\Icons\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Dries Vints", + "homepage": "https://driesvints.com" + } + ], + "description": "A package to easily make use of icons in your Laravel Blade views.", + "homepage": "https://github.com/blade-ui-kit/blade-icons", + "keywords": [ + "blade", + "icons", + "laravel", + "svg" + ], + "support": { + "issues": "https://github.com/blade-ui-kit/blade-icons/issues", + "source": "https://github.com/blade-ui-kit/blade-icons" + }, + "funding": [ + { + "url": "https://github.com/sponsors/driesvints", + "type": "github" + }, + { + "url": "https://www.paypal.com/paypalme/driesvints", + "type": "paypal" + } + ], + "time": "2025-02-13T20:35:06+00:00" + }, { "name": "brick/math", "version": "0.14.0", @@ -4401,6 +4551,87 @@ }, "time": "2025-09-04T20:59:21+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": "spatie/laravel-sluggable", "version": "3.7.5", diff --git a/config/livewire-tables.php b/config/livewire-tables.php new file mode 100644 index 0000000..dad9ea4 --- /dev/null +++ b/config/livewire-tables.php @@ -0,0 +1,132 @@ + 'tailwind', + + /** + * Filter Frontend Asset Options + */ + + /** + * Cache Rappasoft Frontend Assets + */ + 'cache_assets' => false, + + /** + * Enable or Disable automatic injection of core assets + */ + 'inject_core_assets_enabled' => true, + + /** + * Enable or Disable automatic injection of third-party assets + */ + 'inject_third_party_assets_enabled' => true, + + /** + * Enable Blade Directives (Not required if automatically injecting or using bundler approaches) + */ + 'enable_blade_directives' => false, + + /** + * Use JSON Translations instead of PHP Array + */ + 'use_json_translations' => false, + + /** + * Customise Script & Styles Paths + */ + 'script_base_path' => '/rappasoft/laravel-livewire-tables', + + /** + * Filter Default Configuration Options + * + * */ + + /** + * Configuration options for DateFilter + */ + 'dateFilter' => [ + 'defaultConfig' => [ + 'format' => 'Y-m-d', + 'pillFormat' => 'd M Y', // Used to display in the Filter Pills + ], + ], + + /** + * Configuration options for DateTimeFilter + */ + 'dateTimeFilter' => [ + 'defaultConfig' => [ + 'format' => 'Y-m-d\TH:i', + 'pillFormat' => 'd M Y - H:i', // Used to display in the Filter Pills + ], + ], + + /** + * Configuration options for DateRangeFilter + */ + 'dateRange' => [ + 'defaultOptions' => [], + 'defaultConfig' => [ + 'allowInput' => true, // Allow manual input of dates + 'altFormat' => 'F j, Y', // Date format that will be displayed once selected + 'ariaDateFormat' => 'F j, Y', // An aria-friendly date format + 'dateFormat' => 'Y-m-d', // Date format that will be received by the filter + 'earliestDate' => null, // The earliest acceptable date + 'latestDate' => null, // The latest acceptable date + 'locale' => 'en', // The default locale + ], + ], + + /** + * Configuration options for NumberRangeFilter + */ + 'numberRange' => [ + 'defaultOptions' => [ + 'min' => 0, // The default start value + 'max' => 100, // The default end value + ], + 'defaultConfig' => [ + 'minRange' => 0, // The minimum possible value + 'maxRange' => 100, // The maximum possible value + 'suffix' => '', // A suffix to append to the values when displayed + 'prefix' => '', // A prefix to prepend to the values when displayed + ], + ], + /** + * Configuration options for SelectFilter + */ + 'selectFilter' => [ + 'defaultOptions' => [], + 'defaultConfig' => [], + ], + /** + * Configuration options for MultiSelectFilter + */ + 'multiSelectFilter' => [ + 'defaultOptions' => [], + 'defaultConfig' => [], + ], + + /** + * Configuration options for MultiSelectDropdownFilter + */ + 'multiSelectDropdownFilter' => [ + 'defaultOptions' => [], + 'defaultConfig' => [], + ], + + /** + * Configuration options for Events + */ + 'events' => [ + /** + * Enable or disable passing the user from Laravel's Auth service to events + */ + 'enableUserForEvent' => true, + ], + +];