├── app ├── public │ ├── favicon.ico │ ├── robots.txt │ ├── .htaccess │ └── index.php ├── database │ ├── .gitignore │ ├── seeders │ │ └── DatabaseSeeder.php │ ├── factories │ │ ├── CompanyFactory.php │ │ └── UserFactory.php │ └── migrations │ │ ├── 2022_06_28_193425_create_companies_table.php │ │ └── 2014_10_12_000000_create_users_table.php ├── bootstrap │ ├── cache │ │ └── .gitignore │ └── app.php ├── storage │ ├── logs │ │ └── .gitignore │ ├── app │ │ ├── public │ │ │ └── .gitignore │ │ └── .gitignore │ └── framework │ │ ├── sessions │ │ └── .gitignore │ │ ├── testing │ │ └── .gitignore │ │ ├── views │ │ └── .gitignore │ │ ├── cache │ │ ├── data │ │ │ └── .gitignore │ │ └── .gitignore │ │ └── .gitignore ├── tests │ ├── Browser │ │ ├── console │ │ │ └── .gitignore │ │ ├── source │ │ │ └── .gitignore │ │ ├── screenshots │ │ │ └── .gitignore │ │ ├── CustomTableTest.php │ │ ├── ColumnTest.php │ │ ├── FilterTest.php │ │ ├── GlobalSearchTest.php │ │ ├── InputSearchTest.php │ │ ├── SortTest.php │ │ └── AutoFillTest.php │ ├── TestCase.php │ ├── CreatesApplication.php │ └── DuskTestCase.php ├── resources │ ├── css │ │ └── app.css │ ├── js │ │ ├── Layouts │ │ │ └── Guest.vue │ │ ├── Pages │ │ │ ├── TwoTables.vue │ │ │ ├── CustomTable.vue │ │ │ ├── DragDropTest.vue │ │ │ ├── Users.vue │ │ │ └── Dashboard.vue │ │ ├── app.js │ │ └── ssr.js │ └── views │ │ └── app.blade.php ├── postcss.config.js ├── app │ ├── Models │ │ ├── Company.php │ │ └── User.php │ ├── Providers │ │ ├── BroadcastServiceProvider.php │ │ ├── AppServiceProvider.php │ │ ├── AuthServiceProvider.php │ │ ├── EventServiceProvider.php │ │ └── RouteServiceProvider.php │ ├── Http │ │ ├── Middleware │ │ │ ├── EncryptCookies.php │ │ │ ├── VerifyCsrfToken.php │ │ │ ├── PreventRequestsDuringMaintenance.php │ │ │ ├── TrustHosts.php │ │ │ ├── TrimStrings.php │ │ │ ├── Authenticate.php │ │ │ ├── TrustProxies.php │ │ │ ├── RedirectIfAuthenticated.php │ │ │ └── HandleInertiaRequests.php │ │ ├── Resources │ │ │ └── UserResource.php │ │ ├── TwoTablesEloquent.php │ │ ├── TwoTablesSpatie.php │ │ ├── Kernel.php │ │ ├── UserTableView.php │ │ ├── UserTableWithCustomExport.php │ │ ├── MultipleTablesView.php │ │ └── UserTableWithExcelExport.php │ ├── Console │ │ └── Kernel.php │ └── Exceptions │ │ └── Handler.php ├── .gitattributes ├── jsconfig.json ├── .gitignore ├── .editorconfig ├── lang │ └── en │ │ ├── pagination.php │ │ ├── auth.php │ │ └── passwords.php ├── tailwind.config.js ├── package.json ├── webpack.ssr.mix.js ├── config │ ├── cors.php │ ├── services.php │ ├── view.php │ ├── inertia.php │ ├── hashing.php │ ├── broadcasting.php │ ├── sanctum.php │ ├── filesystems.php │ ├── queue.php │ ├── cache.php │ ├── auth.php │ ├── mail.php │ └── logging.php ├── phpunit.xml ├── .env.example ├── routes │ └── web.php ├── vite.config.js ├── artisan ├── composer-l9.json └── composer.json ├── php ├── Traits │ ├── HasCsvExport.php │ └── ExportsQueryBuilder.php ├── Exports │ └── QueryBuilderExport.php ├── Filters │ ├── Filterable.php │ ├── ToggleFilter.php │ ├── DateFilter.php │ ├── Filter.php │ ├── NumberFilter.php │ └── NumberRangeFilter.php ├── SearchInput.php ├── QueryBuilderFilters │ ├── FiltersNumberRange.php │ ├── FiltersDate.php │ └── FiltersNumber.php ├── InertiaTableServiceProvider.php ├── Column.php └── InertiaTableCollection.php ├── .github ├── FUNDING.yml └── workflows │ ├── coding-standards.yml │ └── php.yml ├── js ├── Components │ ├── TableWrapper.vue │ ├── OnClickOutside.vue │ ├── BulkActions.vue │ ├── ColumnToggle.vue │ ├── TableAddSearchRow.vue │ ├── TableReset.vue │ ├── TableGlobalSearch.vue │ ├── PerPageSelector.vue │ ├── TableColumns.vue │ ├── TableFilters │ │ └── ToggleFilter.vue │ ├── ButtonWithDropdown.vue │ └── HeaderCell.vue ├── composables │ └── usePopper.js ├── main.js ├── helpers.js └── translations.js ├── .gitignore ├── vite.config.js ├── phpunit.xml.dist ├── LICENSE ├── examples ├── migrations │ └── create_demo_items_table.php ├── seeders │ └── DemoItemsSeeder.php └── ColumnDragDropExample.vue ├── composer.json ├── package.json ├── .php-cs-fixer.php ├── CONTRIBUTING.md └── tests ├── exportButton.test.js ├── columnResize.test.js └── CustomExportCallbackTest.php /app/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /php/Traits/HasCsvExport.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/database/.gitignore: -------------------------------------------------------------------------------- 1 | *.sqlite* 2 | -------------------------------------------------------------------------------- /php/Exports/QueryBuilderExport.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /php/Traits/ExportsQueryBuilder.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [AdesinFr] 2 | -------------------------------------------------------------------------------- /app/bootstrap/cache/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /app/storage/logs/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/storage/app/public/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/tests/Browser/console/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/tests/Browser/source/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/storage/app/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !public/ 3 | !.gitignore 4 | -------------------------------------------------------------------------------- /app/storage/framework/sessions/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/storage/framework/testing/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/storage/framework/views/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/tests/Browser/screenshots/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/storage/framework/cache/data/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /app/storage/framework/cache/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !data/ 3 | !.gitignore 4 | -------------------------------------------------------------------------------- /app/resources/css/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /app/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /php/Filters/Filterable.php: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 |
7 | 8 | -------------------------------------------------------------------------------- /app/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 4 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.{yml,yaml}] 15 | indent_size = 2 16 | 17 | [docker-compose.yml] 18 | indent_size = 4 19 | -------------------------------------------------------------------------------- /app/app/Providers/BroadcastServiceProvider.php: -------------------------------------------------------------------------------- 1 | 13 | */ 14 | protected $except = [ 15 | // 16 | ]; 17 | } 18 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/VerifyCsrfToken.php: -------------------------------------------------------------------------------- 1 | 13 | */ 14 | protected $except = [ 15 | // 16 | ]; 17 | } 18 | -------------------------------------------------------------------------------- /js/Components/TableWrapper.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/PreventRequestsDuringMaintenance.php: -------------------------------------------------------------------------------- 1 | 13 | */ 14 | protected $except = [ 15 | // 16 | ]; 17 | } 18 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/TrustHosts.php: -------------------------------------------------------------------------------- 1 | 13 | */ 14 | public function hosts() 15 | { 16 | return [ 17 | $this->allSubdomainsOfApplicationUrl(), 18 | ]; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/TrimStrings.php: -------------------------------------------------------------------------------- 1 | 13 | */ 14 | protected $except = [ 15 | 'current_password', 16 | 'password', 17 | 'password_confirmation', 18 | ]; 19 | } 20 | -------------------------------------------------------------------------------- /app/tests/CreatesApplication.php: -------------------------------------------------------------------------------- 1 | make(Kernel::class)->bootstrap(); 19 | 20 | return $app; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app/database/seeders/DatabaseSeeder.php: -------------------------------------------------------------------------------- 1 | count(100)->create(); 19 | CompanyFactory::new()->count(100)->create(); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /app/resources/views/app.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ config('app.name', 'Laravel') }} 8 | 9 | @routes 10 | @vite(['resources/css/app.css', 'resources/js/app.js']) 11 | @inertiaHead 12 | 13 | 14 | @inertia 15 | 16 | 17 | -------------------------------------------------------------------------------- /php/SearchInput.php: -------------------------------------------------------------------------------- 1 | $this->key, 20 | 'label' => $this->label, 21 | 'value' => $this->value, 22 | ]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | 24 | # PHP 25 | build 26 | composer.lock 27 | docs 28 | vendor 29 | coverage 30 | .phpunit.result.cache 31 | app/public/css/app.css 32 | app/public/js/app.js 33 | app/public/mix-manifest.json 34 | 35 | AdesinFr-inertiajs-tables-laravel-query-builder-*.tgz 36 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/Authenticate.php: -------------------------------------------------------------------------------- 1 | expectsJson()) { 18 | return route('login'); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /php/QueryBuilderFilters/FiltersNumberRange.php: -------------------------------------------------------------------------------- 1 | whereBetween($property, $value); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/app/Providers/AppServiceProvider.php: -------------------------------------------------------------------------------- 1 | 9 | */ 10 | class CompanyFactory extends Factory 11 | { 12 | /** 13 | * Define the model's default state. 14 | * 15 | * @return array 16 | */ 17 | public function definition() 18 | { 19 | return [ 20 | 'name' => $this->faker->company(), 21 | 'address' => $this->faker->streetAddress(), 22 | ]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/lang/en/pagination.php: -------------------------------------------------------------------------------- 1 | '« Previous', 17 | 'next' => 'Next »', 18 | 19 | ]; 20 | -------------------------------------------------------------------------------- /app/resources/js/Pages/TwoTables.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 18 | -------------------------------------------------------------------------------- /app/tests/Browser/CustomTableTest.php: -------------------------------------------------------------------------------- 1 | browse(function (Browser $browser) { 15 | $browser->visit('/custom') 16 | ->waitFor('table') 17 | ->assertSeeIn('th:nth-child(1)', 'User') 18 | ->assertSeeIn('tr:first-child td:nth-child(1)', User::first()->name) 19 | ->assertPresent('@pagination-1'); 20 | }); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /php/Filters/ToggleFilter.php: -------------------------------------------------------------------------------- 1 | $this->key, 21 | 'label' => $this->label, 22 | 'value' => $this->value, 23 | 'type' => self::TYPE, 24 | ]; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /app/public/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | 3 | Options -MultiViews -Indexes 4 | 5 | 6 | RewriteEngine On 7 | 8 | # Handle Authorization Header 9 | RewriteCond %{HTTP:Authorization} . 10 | RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] 11 | 12 | # Redirect Trailing Slashes If Not A Folder... 13 | RewriteCond %{REQUEST_FILENAME} !-d 14 | RewriteCond %{REQUEST_URI} (.+)/$ 15 | RewriteRule ^ %1 [L,R=301] 16 | 17 | # Send Requests To Front Controller... 18 | RewriteCond %{REQUEST_FILENAME} !-d 19 | RewriteCond %{REQUEST_FILENAME} !-f 20 | RewriteRule ^ index.php [L] 21 | 22 | -------------------------------------------------------------------------------- /app/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | const defaultTheme = require('tailwindcss/defaultTheme'); 3 | 4 | module.exports = { 5 | content: [ 6 | './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', 7 | './storage/framework/views/*.php', 8 | './resources/views/**/*.blade.php', 9 | './resources/js/**/*.vue', 10 | '../js/Components/**/*.vue', 11 | '../js/*.js', 12 | // Explicit exclusions to avoid loops 13 | '!./node_modules/**/*', 14 | '!../node_modules/**/*', 15 | '!../**/node_modules/**/*', 16 | ], 17 | 18 | plugins: [require('@tailwindcss/forms')], 19 | }; 20 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/TrustProxies.php: -------------------------------------------------------------------------------- 1 | |string|null 14 | */ 15 | protected $proxies; 16 | 17 | /** 18 | * The headers that should be used to detect proxies. 19 | * 20 | * @var int 21 | */ 22 | protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO | Request::HEADER_X_FORWARDED_AWS_ELB; 23 | } 24 | -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": false, 3 | "scripts": { 4 | "dev": "vite", 5 | "build": "vite build" 6 | }, 7 | "devDependencies": { 8 | "@tailwindcss/forms": "^0.5.0", 9 | "@vitejs/plugin-vue": "^3.0", 10 | "autoprefixer": "^10.4.2", 11 | "axios": "^0.25", 12 | "eslint": "^8.18.0", 13 | "eslint-plugin-vue": "^9.1.1", 14 | "laravel-vite-plugin": "^0.5.0", 15 | "lodash": "^4.17.19", 16 | "postcss": "^8.4.6", 17 | "tailwindcss": "^3.1.0", 18 | "vite": "^3.0", 19 | "vue": "^3.2.31" 20 | }, 21 | "dependencies": { 22 | "@inertiajs/vue3": "^1.0.2", 23 | "@popperjs/core": "^2.11.8" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /app/app/Providers/AuthServiceProvider.php: -------------------------------------------------------------------------------- 1 | 13 | */ 14 | protected $policies = [ 15 | // 'App\Models\Model' => 'App\Policies\ModelPolicy', 16 | ]; 17 | 18 | /** 19 | * Register any authentication / authorization services. 20 | * 21 | * @return void 22 | */ 23 | public function boot() 24 | { 25 | $this->registerPolicies(); 26 | 27 | // 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /app/lang/en/auth.php: -------------------------------------------------------------------------------- 1 | 'These credentials do not match our records.', 17 | 'password' => 'The provided password is incorrect.', 18 | 'throttle' => 'Too many login attempts. Please try again in :seconds seconds.', 19 | 20 | ]; 21 | -------------------------------------------------------------------------------- /app/app/Console/Kernel.php: -------------------------------------------------------------------------------- 1 | command('inspire')->hourly(); 19 | } 20 | 21 | /** 22 | * Register the commands for the application. 23 | * 24 | * @return void 25 | */ 26 | protected function commands() 27 | { 28 | $this->load(__DIR__ . '/Commands'); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /app/database/migrations/2022_06_28_193425_create_companies_table.php: -------------------------------------------------------------------------------- 1 | id(); 17 | $table->string('name'); 18 | $table->string('address'); 19 | }); 20 | } 21 | 22 | /** 23 | * Reverse the migrations. 24 | * 25 | * @return void 26 | */ 27 | public function down() 28 | { 29 | Schema::dropIfExists('companies'); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /app/resources/js/app.js: -------------------------------------------------------------------------------- 1 | import { createApp, h } from "vue"; 2 | import { createInertiaApp } from "@inertiajs/vue3"; 3 | import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; 4 | 5 | const appName = window.document.getElementsByTagName("title")[0]?.innerText || "Laravel"; 6 | 7 | createInertiaApp({ 8 | progress: { 9 | color: "#4B5563" 10 | }, 11 | title: (title) => `${title} - ${appName}`, 12 | resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue")), 13 | setup({ el, App, props, plugin }) { 14 | return createApp({ render: () => h(App, props) }) 15 | .use(plugin) 16 | .provide("themeVariables", {}) 17 | .mixin({ methods: { route } }) 18 | .mount(el); 19 | }, 20 | }); 21 | -------------------------------------------------------------------------------- /app/webpack.ssr.mix.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix'); 2 | const webpackNodeExternals = require('webpack-node-externals'); 3 | const path = require('path'); 4 | 5 | mix.js('resources/js/ssr.js', 'public/js') 6 | .vue({ 7 | version: 3, 8 | useVueStyleLoader: true, 9 | options: { optimizeSSR: true }, 10 | }) 11 | .alias({ 12 | '@': 'resources/js', 13 | ziggy: 'vendor/tightenco/ziggy/dist/index', 14 | }) 15 | .webpackConfig({ 16 | target: 'node', 17 | externals: [webpackNodeExternals()], 18 | resolve: { 19 | symlinks: false, 20 | alias: { 21 | vue: path.resolve("./node_modules/vue"), 22 | }, 23 | } 24 | }) 25 | .options({ 26 | legacyNodePolyfills: false 27 | }) 28 | -------------------------------------------------------------------------------- /php/InertiaTableServiceProvider.php: -------------------------------------------------------------------------------- 1 | props['queryBuilderProps'] ?? []; 14 | }); 15 | 16 | InertiaResponse::macro('table', function (callable $withTableBuilder = null) { 17 | $tableBuilder = new InertiaTable(request()); 18 | 19 | if ($withTableBuilder) { 20 | $withTableBuilder($tableBuilder); 21 | } 22 | 23 | return $tableBuilder->applyTo($this); 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /app/lang/en/passwords.php: -------------------------------------------------------------------------------- 1 | 'Your password has been reset!', 17 | 'sent' => 'We have emailed your password reset link!', 18 | 'throttled' => 'Please wait before retrying.', 19 | 'token' => 'This password reset token is invalid.', 20 | 'user' => "We can't find a user with that email address.", 21 | 22 | ]; 23 | -------------------------------------------------------------------------------- /app/app/Http/Resources/UserResource.php: -------------------------------------------------------------------------------- 1 | $this->id, 19 | 'name' => $this->name, 20 | 'email' => $this->email, 21 | 'score' => $this->score, 22 | 'language_code' => $this->language_code, 23 | 'created_at' => $this->created_at, 24 | 'updated_at' => $this->updated_at, 25 | ]; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /app/database/factories/UserFactory.php: -------------------------------------------------------------------------------- 1 | 9 | */ 10 | class UserFactory extends Factory 11 | { 12 | /** 13 | * Define the model's default state. 14 | * 15 | * @return array 16 | */ 17 | public function definition() 18 | { 19 | return [ 20 | 'name' => $this->faker->name(), 21 | 'score' => $this->faker->numberBetween(1, 100), 22 | 'email' => $this->faker->unique()->safeEmail(), 23 | 'language_code' => $this->faker->randomElement(['en', 'nl']), 24 | 'is_admin' => $this->faker->boolean(50), // 20% chance to be admin 25 | ]; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /js/composables/usePopper.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted, watchEffect } from "vue"; 2 | import { createPopper } from "@popperjs/core"; 3 | 4 | export function usePopper(options) { 5 | let reference = ref(null); 6 | let popper = ref(null); 7 | 8 | onMounted(() => { 9 | watchEffect((onInvalidate) => { 10 | if (!popper.value) return; 11 | if (!reference.value) return; 12 | 13 | let popperEl = popper.value.el || popper.value; 14 | let referenceEl = reference.value.el || reference.value; 15 | 16 | if (!(referenceEl instanceof HTMLElement)) return; 17 | if (!(popperEl instanceof HTMLElement)) return; 18 | 19 | let { destroy } = createPopper(referenceEl, popperEl, options); 20 | 21 | onInvalidate(destroy); 22 | }); 23 | }); 24 | 25 | return [reference, popper]; 26 | } 27 | -------------------------------------------------------------------------------- /app/resources/js/Pages/CustomTable.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 29 | -------------------------------------------------------------------------------- /js/Components/OnClickOutside.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from "path"; 2 | import { defineConfig } from "vite"; 3 | import vue from "@vitejs/plugin-vue"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue()], 8 | 9 | build: { 10 | lib: { 11 | entry: resolve(__dirname, "js/main.js"), 12 | name: "Inertia.js Tables for Laravel Query Builder", 13 | fileName: (format) => `inertiajs-tables-laravel-query-builder.${format}.js` 14 | }, 15 | rollupOptions: { 16 | external: [ 17 | /^@inertiajs.*/, 18 | /^@popperjs.*/, 19 | /^lodash-es.*/, 20 | "qs", 21 | "vue", 22 | "vuedraggable" 23 | ], 24 | output: { 25 | globals: { 26 | vue: "Vue", 27 | vuedraggable: "vuedraggable" 28 | } 29 | } 30 | } 31 | } 32 | }) 33 | -------------------------------------------------------------------------------- /app/config/cors.php: -------------------------------------------------------------------------------- 1 | ['api/*', 'sanctum/csrf-cookie'], 19 | 20 | 'allowed_methods' => ['*'], 21 | 22 | 'allowed_origins' => ['*'], 23 | 24 | 'allowed_origins_patterns' => [], 25 | 26 | 'allowed_headers' => ['*'], 27 | 28 | 'exposed_headers' => [], 29 | 30 | 'max_age' => 0, 31 | 32 | 'supports_credentials' => false, 33 | 34 | ]; 35 | -------------------------------------------------------------------------------- /app/database/migrations/2014_10_12_000000_create_users_table.php: -------------------------------------------------------------------------------- 1 | id(); 17 | $table->string('name'); 18 | $table->tinyInteger('score'); 19 | $table->string('email')->unique(); 20 | $table->string('language_code', 2); 21 | $table->boolean('is_admin')->default(false); 22 | $table->timestamps(); 23 | }); 24 | } 25 | 26 | /** 27 | * Reverse the migrations. 28 | * 29 | * @return void 30 | */ 31 | public function down() 32 | { 33 | Schema::dropIfExists('users'); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /app/tests/Browser/ColumnTest.php: -------------------------------------------------------------------------------- 1 | browse(function (Browser $browser) { 15 | $users = User::query() 16 | ->select(['id', 'name', 'email']) 17 | ->orderBy('name') 18 | ->get(); 19 | 20 | $browser->visit('/users/eloquent') 21 | ->waitFor('table') 22 | ->assertSeeIn('tr:first-child td:nth-child(2)', $users->get(0)->email) 23 | ->press('@columns-dropdown') 24 | ->press('@toggle-column-email') 25 | ->waitUntilMissingText($users->get(0)->email) 26 | ->press('@toggle-column-email') 27 | ->waitForTextIn('tr:first-child td:nth-child(2)', $users->get(0)->email); 28 | }); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /phpunit.xml.dist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tests 6 | 7 | 8 | 9 | 10 | php/ 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /php/Column.php: -------------------------------------------------------------------------------- 1 | $this->key, 24 | 'label' => $this->label, 25 | 'can_be_hidden' => $this->canBeHidden, 26 | 'hidden' => $this->hidden, 27 | 'sortable' => $this->sortable, 28 | 'sorted' => $this->sorted, 29 | 'header_class' => $this->headerClass, 30 | 'body_class' => $this->bodyClass, 31 | ]; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/RedirectIfAuthenticated.php: -------------------------------------------------------------------------------- 1 | check()) { 26 | return redirect(RouteServiceProvider::HOME); 27 | } 28 | } 29 | 30 | return $next($request); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /php/Filters/DateFilter.php: -------------------------------------------------------------------------------- 1 | $this->key, 24 | 'label' => $this->label, 25 | 'value' => $this->value, 26 | 'format' => $this->format, 27 | 'type' => self::TYPE, 28 | ]; 29 | } 30 | 31 | public static function getQueryBuilderFilter($column) 32 | { 33 | return AllowedFilter::custom($column, new FiltersDate); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /php/Filters/Filter.php: -------------------------------------------------------------------------------- 1 | options; 23 | 24 | if ($this->noFilterOption) { 25 | $options = Arr::prepend($options, $this->noFilterOptionLabel, ''); 26 | } 27 | 28 | return [ 29 | 'key' => $this->key, 30 | 'label' => $this->label, 31 | 'options' => $options, 32 | 'value' => $this->value, 33 | 'type' => $this->type, 34 | ]; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /app/app/Providers/EventServiceProvider.php: -------------------------------------------------------------------------------- 1 | > 16 | */ 17 | protected $listen = [ 18 | Registered::class => [ 19 | SendEmailVerificationNotification::class, 20 | ], 21 | ]; 22 | 23 | /** 24 | * Register any events for your application. 25 | * 26 | * @return void 27 | */ 28 | public function boot() 29 | { 30 | // 31 | } 32 | 33 | /** 34 | * Determine if events and listeners should be automatically discovered. 35 | * 36 | * @return bool 37 | */ 38 | public function shouldDiscoverEvents() 39 | { 40 | return false; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /app/config/services.php: -------------------------------------------------------------------------------- 1 | [ 18 | 'domain' => env('MAILGUN_DOMAIN'), 19 | 'secret' => env('MAILGUN_SECRET'), 20 | 'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'), 21 | 'scheme' => 'https', 22 | ], 23 | 24 | 'postmark' => [ 25 | 'token' => env('POSTMARK_TOKEN'), 26 | ], 27 | 28 | 'ses' => [ 29 | 'key' => env('AWS_ACCESS_KEY_ID'), 30 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 31 | 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 32 | ], 33 | 34 | ]; 35 | -------------------------------------------------------------------------------- /app/tests/Browser/FilterTest.php: -------------------------------------------------------------------------------- 1 | browse(function (Browser $browser) { 15 | User::orderBy('name')->first()->forceFill([ 16 | 'language_code' => 'en', 17 | ])->save(); 18 | 19 | $users = User::query() 20 | ->orderBy('name') 21 | ->get(); 22 | 23 | $firstDutchUser = $users->firstWhere('language_code', 'nl'); 24 | 25 | $browser->visit('/users/eloquent') 26 | ->waitFor('table') 27 | ->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name) 28 | ->press('@filters-dropdown') 29 | ->select('language_code', 'nl') 30 | ->waitUntilMissingText($users->get(0)->name) 31 | ->assertSeeIn('tr:first-child td:nth-child(1)', $firstDutchUser->name); 32 | }); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /app/resources/js/ssr.js: -------------------------------------------------------------------------------- 1 | import { createSSRApp, h } from "vue"; 2 | import { renderToString } from "@vue/server-renderer"; 3 | import { createInertiaApp } from "@inertiajs/vue3"; 4 | import createServer from "@inertiajs/vue3/server"; 5 | import route from "ziggy"; 6 | 7 | const appName = "Laravel"; 8 | 9 | createServer((page) => 10 | createInertiaApp({ 11 | page, 12 | render: renderToString, 13 | title: (title) => `${title} - ${appName}`, 14 | resolve: (name) => require(`./Pages/${name}.vue`), 15 | setup({ app, props, plugin }) { 16 | return createSSRApp({ render: () => h(app, props) }) 17 | .use(plugin) 18 | .mixin({ 19 | methods: { 20 | route: (name, params, absolute) => { 21 | return route(name, params, absolute, { 22 | ...page.props.ziggy, 23 | location: new URL(page.props.ziggy.url), 24 | }); 25 | }, 26 | }, 27 | }); 28 | }, 29 | }) 30 | ); 31 | -------------------------------------------------------------------------------- /app/phpunit.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | ./tests/Unit 10 | 11 | 12 | ./tests/Feature 13 | 14 | 15 | 16 | 17 | ./app 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /app/config/view.php: -------------------------------------------------------------------------------- 1 | [ 17 | resource_path('views'), 18 | ], 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Compiled View Path 23 | |-------------------------------------------------------------------------- 24 | | 25 | | This option determines where all the compiled Blade templates will be 26 | | stored for your application. Typically, this is within the storage 27 | | directory. However, as usual, you are free to change this value. 28 | | 29 | */ 30 | 31 | 'compiled' => env( 32 | 'VIEW_COMPILED_PATH', 33 | realpath(storage_path('framework/views')) 34 | ), 35 | 36 | ]; 37 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | import ButtonWithDropdown from "./Components/ButtonWithDropdown.vue"; 2 | import HeaderCell from "./Components/HeaderCell.vue"; 3 | import OnClickOutside from "./Components/OnClickOutside.vue"; 4 | import Pagination from "./Components/Pagination.vue"; 5 | import Table from "./Components/Table.vue"; 6 | import TableAddSearchRow from "./Components/TableAddSearchRow.vue"; 7 | import TableColumns from "./Components/TableColumns.vue"; 8 | import TableFilter from "./Components/TableFilter.vue"; 9 | import TableGlobalSearch from "./Components/TableGlobalSearch.vue"; 10 | import TableReset from "./Components/TableReset.vue"; 11 | import TableSearchRows from "./Components/TableSearchRows.vue"; 12 | import TableWrapper from "./Components/TableWrapper.vue"; 13 | import { getTranslations, setTranslation, setTranslations } from "./translations"; 14 | 15 | export { 16 | ButtonWithDropdown, 17 | HeaderCell, 18 | OnClickOutside, 19 | Pagination, 20 | Table, 21 | TableAddSearchRow, 22 | TableColumns, 23 | TableFilter, 24 | TableGlobalSearch, 25 | TableReset, 26 | TableSearchRows, 27 | TableWrapper, 28 | getTranslations, 29 | setTranslation, 30 | setTranslations 31 | }; -------------------------------------------------------------------------------- /php/Filters/NumberFilter.php: -------------------------------------------------------------------------------- 1 | $this->key, 26 | 'label' => $this->label, 27 | 'value' => $this->value, 28 | 'prefix' => $this->prefix, 29 | 'suffix' => $this->suffix, 30 | 'step' => $this->step, 31 | 'type' => self::TYPE, 32 | ]; 33 | } 34 | 35 | public static function getQueryBuilderFilter($column) 36 | { 37 | return AllowedFilter::custom($column, new FiltersNumber); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /app/.env.example: -------------------------------------------------------------------------------- 1 | APP_NAME=Laravel 2 | APP_ENV=local 3 | APP_KEY=base64:Ianw0xnfJCVCZsjGZOu8phM+yL2R1sP7y5TQAEKat0M= 4 | APP_DEBUG=true 5 | APP_URL=http://127.0.0.1:8000 6 | ASSET_URL=http://127.0.0.1:8000 7 | 8 | LOG_CHANNEL=stack 9 | LOG_DEPRECATIONS_CHANNEL=null 10 | LOG_LEVEL=debug 11 | 12 | DB_CONNECTION=sqlite 13 | DB_HOST=127.0.0.1 14 | DB_PORT=3306 15 | DB_DATABASE= 16 | DB_USERNAME=root 17 | DB_PASSWORD= 18 | 19 | BROADCAST_DRIVER=log 20 | CACHE_DRIVER=file 21 | FILESYSTEM_DISK=local 22 | QUEUE_CONNECTION=sync 23 | SESSION_DRIVER=file 24 | SESSION_LIFETIME=120 25 | 26 | MEMCACHED_HOST=127.0.0.1 27 | 28 | REDIS_HOST=127.0.0.1 29 | REDIS_PASSWORD=null 30 | REDIS_PORT=6379 31 | 32 | MAIL_MAILER=smtp 33 | MAIL_HOST=mailhog 34 | MAIL_PORT=1025 35 | MAIL_USERNAME=null 36 | MAIL_PASSWORD=null 37 | MAIL_ENCRYPTION=null 38 | MAIL_FROM_ADDRESS="hello@example.com" 39 | MAIL_FROM_NAME="${APP_NAME}" 40 | 41 | AWS_ACCESS_KEY_ID= 42 | AWS_SECRET_ACCESS_KEY= 43 | AWS_DEFAULT_REGION=us-east-1 44 | AWS_BUCKET= 45 | AWS_USE_PATH_STYLE_ENDPOINT=false 46 | 47 | PUSHER_APP_ID= 48 | PUSHER_APP_KEY= 49 | PUSHER_APP_SECRET= 50 | PUSHER_APP_CLUSTER=mt1 51 | 52 | MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" 53 | MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" 54 | -------------------------------------------------------------------------------- /app/app/Http/Middleware/HandleInertiaRequests.php: -------------------------------------------------------------------------------- 1 | [ 39 | 'user' => $request->user(), 40 | ], 41 | 'ziggy' => function () { 42 | return (new Ziggy)->toArray(); 43 | }, 44 | ]); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/migrations/create_demo_items_table.php: -------------------------------------------------------------------------------- 1 | id(); 18 | $table->string('name'); 19 | $table->string('email')->unique(); 20 | $table->enum('status', ['active', 'pending', 'inactive'])->default('active'); 21 | $table->text('description')->nullable(); 22 | $table->decimal('price', 10, 2)->nullable(); 23 | $table->integer('quantity')->default(0); 24 | $table->timestamps(); 25 | }); 26 | } 27 | } 28 | 29 | /** 30 | * Reverse the migrations. 31 | */ 32 | public function down(): void 33 | { 34 | Schema::dropIfExists('demo_items'); 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /app/app/Exceptions/Handler.php: -------------------------------------------------------------------------------- 1 | , \Psr\Log\LogLevel::*> 14 | */ 15 | protected $levels = [ 16 | // 17 | ]; 18 | 19 | /** 20 | * A list of the exception types that are not reported. 21 | * 22 | * @var array> 23 | */ 24 | protected $dontReport = [ 25 | // 26 | ]; 27 | 28 | /** 29 | * A list of the inputs that are never flashed to the session on validation exceptions. 30 | * 31 | * @var array 32 | */ 33 | protected $dontFlash = [ 34 | 'current_password', 35 | 'password', 36 | 'password_confirmation', 37 | ]; 38 | 39 | /** 40 | * Register the exception handling callbacks for the application. 41 | * 42 | * @return void 43 | */ 44 | public function register() 45 | { 46 | $this->reportable(function (Throwable $e) { 47 | // 48 | }); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /js/Components/BulkActions.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 36 | -------------------------------------------------------------------------------- /app/tests/Browser/GlobalSearchTest.php: -------------------------------------------------------------------------------- 1 | browse(function (Browser $browser) { 15 | User::first()->forceFill([ 16 | 'name' => 'Pascal Baljet', 17 | 'email' => 'pascal@protone.media', 18 | ])->save(); 19 | 20 | $users = User::query() 21 | ->select(['id', 'name', 'email']) 22 | ->orderBy('name') 23 | ->get(); 24 | 25 | $browser->visit('/users/eloquent') 26 | ->waitFor('table') 27 | // First user 28 | ->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name) 29 | ->assertDontSee('Pascal Baljet') 30 | ->type('global', 'Pascal Baljet') 31 | ->waitForText('pascal@protone.media') 32 | ->type('global', ' ') 33 | ->waitUntilMissingText('pascal@protone.media') 34 | ->type('global', 'pascal@protone.media') 35 | ->waitForText('Pascal Baljet'); 36 | }); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/app/Http/TwoTablesEloquent.php: -------------------------------------------------------------------------------- 1 | orderBy('name') 18 | ->paginate(perPage: 10, pageName: 'companiesPage') 19 | ->withQueryString(); 20 | 21 | $users = User::query() 22 | ->orderBy('name') 23 | ->paginate(perPage: 10, pageName: 'usersPage') 24 | ->withQueryString(); 25 | 26 | return Inertia::render('TwoTables', [ 27 | 'companies' => $companies, 28 | 'users' => $users, 29 | ])->table(function (InertiaTable $inertiaTable) { 30 | $inertiaTable 31 | ->name('users') 32 | ->pageName('usersPage') 33 | ->column('name') 34 | ->column('email'); 35 | })->table(function (InertiaTable $inertiaTable) { 36 | $inertiaTable 37 | ->name('companies') 38 | ->pageName('companiesPage') 39 | ->column('name') 40 | ->column('address'); 41 | }); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /php/Filters/NumberRangeFilter.php: -------------------------------------------------------------------------------- 1 | $this->key, 28 | 'label' => $this->label, 29 | 'max' => $this->max, 30 | 'min' => $this->min, 31 | 'prefix' => $this->prefix, 32 | 'suffix' => $this->suffix, 33 | 'step' => $this->step, 34 | 'value' => $this->value ?? [$this->min, $this->max], 35 | 'type' => self::TYPE, 36 | ]; 37 | } 38 | 39 | public static function getQueryBuilderFilter($column) 40 | { 41 | return AllowedFilter::custom($column, new FiltersNumberRange); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /app/app/Providers/RouteServiceProvider.php: -------------------------------------------------------------------------------- 1 | configureRateLimiting(); 30 | 31 | $this->routes(function () { 32 | Route::middleware('web') 33 | ->group(base_path('routes/web.php')); 34 | }); 35 | } 36 | 37 | /** 38 | * Configure the rate limiters for the application. 39 | * 40 | * @return void 41 | */ 42 | protected function configureRateLimiting() 43 | { 44 | RateLimiter::for('api', function (Request $request) { 45 | return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip()); 46 | }); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "adesin-fr/inertiajs-tables-laravel-query-builder", 3 | "description": "Inertia.js Front-end Components for Spatie's Laravel Query Builder", 4 | "homepage": "https://github.com/Adesin-Fr/inertiajs-tables-laravel-query-builder", 5 | "type": "library", 6 | "license": "MIT", 7 | "authors": [ 8 | { 9 | "name": "Adesin-Fr", 10 | "email": "ludovic@adesin.fr" 11 | } 12 | ], 13 | "require": { 14 | "php": "^8.2", 15 | "illuminate/support": "^10.0|^11.0|^12.0" 16 | }, 17 | "require-dev": { 18 | "friendsofphp/php-cs-fixer": "^3.8", 19 | "inertiajs/inertia-laravel": "^1.0|^2.0" 20 | }, 21 | "autoload": { 22 | "psr-4": { 23 | "AdesinFr\\LaravelQueryBuilderInertiaJs\\": "php" 24 | } 25 | }, 26 | "autoload-dev": { 27 | "psr-4": { 28 | "AdesinFr\\LaravelQueryBuilderInertiaJs\\Tests\\": "tests" 29 | } 30 | }, 31 | "scripts": { 32 | "php-cs-fixer": "vendor/bin/php-cs-fixer fix --config=.php-cs-fixer.php --verbose" 33 | }, 34 | "config": { 35 | "sort-packages": true 36 | }, 37 | "minimum-stability": "dev", 38 | "prefer-stable": true, 39 | "extra": { 40 | "laravel": { 41 | "providers": [ 42 | "AdesinFr\\LaravelQueryBuilderInertiaJs\\InertiaTableServiceProvider" 43 | ] 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /app/tests/Browser/InputSearchTest.php: -------------------------------------------------------------------------------- 1 | browse(function (Browser $browser) { 15 | User::first()->forceFill([ 16 | 'name' => 'Pascal Baljet', 17 | 'email' => 'pascal@protone.media', 18 | ])->save(); 19 | 20 | $users = User::query() 21 | ->select(['id', 'name', 'email']) 22 | ->orderBy('name') 23 | ->get(); 24 | 25 | $browser->visit('/users/eloquent') 26 | ->waitFor('table') 27 | // First user 28 | ->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name) 29 | ->assertDontSee('Pascal Baljet') 30 | ->press('@add-search-row-dropdown') 31 | ->press('@add-search-row-name') 32 | ->type('name', 'Pascal Baljet') 33 | ->waitForText('pascal@protone.media') 34 | ->press('@remove-search-row-name') 35 | ->waitUntilMissingText('pascal@protone.media') 36 | ->press('@add-search-row-dropdown') 37 | ->press('@add-search-row-email') 38 | ->type('email', 'pascal@protone.media') 39 | ->waitForText('Pascal Baljet'); 40 | }); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /js/helpers.js: -------------------------------------------------------------------------------- 1 | import { twMerge } from "tailwind-merge"; 2 | 3 | export function get_theme_part(keys, fallbackTheme, themeVariables, ui) { 4 | let currentFallbackTheme = fallbackTheme ? { ...fallbackTheme } : {}; 5 | let fallbackThemeClasses = null; 6 | let currentThemeVariables = themeVariables ? { ...themeVariables } : {}; 7 | let themeVariableClasses = null; 8 | let currentUi = ui ? { ...ui } : {}; 9 | let uiClasses = null; 10 | for (const key of keys) { 11 | if (fallbackThemeClasses === null) { 12 | if (key in currentFallbackTheme) { 13 | currentFallbackTheme = currentFallbackTheme[key]; 14 | if (typeof currentFallbackTheme === "string") { 15 | fallbackThemeClasses = currentFallbackTheme; 16 | } 17 | } 18 | } 19 | if (themeVariableClasses === null) { 20 | if (key in currentThemeVariables) { 21 | currentThemeVariables = currentThemeVariables[key]; 22 | if (typeof currentThemeVariables === "string") { 23 | themeVariableClasses = currentThemeVariables; 24 | } 25 | } 26 | } 27 | if (uiClasses === null) { 28 | if (key in currentUi) { 29 | currentUi = currentUi[key]; 30 | if (typeof currentUi === "string") { 31 | uiClasses = currentUi; 32 | } 33 | } 34 | } 35 | } 36 | return twMerge(fallbackThemeClasses, themeVariableClasses, uiClasses); 37 | } -------------------------------------------------------------------------------- /php/QueryBuilderFilters/FiltersDate.php: -------------------------------------------------------------------------------- 1 | whereDate($property, Carbon::parse($date)); 26 | } 27 | break; 28 | 29 | case 'before': 30 | if ($date) { 31 | $query->whereDate($property, '<', Carbon::parse($date)); 32 | } 33 | break; 34 | 35 | case 'after': 36 | if ($date) { 37 | $query->whereDate($property, '>', Carbon::parse($date)); 38 | } 39 | break; 40 | 41 | case 'between': 42 | if ($startDate && $endDate) { 43 | $query->whereBetween($property, [ 44 | Carbon::parse($startDate)->startOfDay(), 45 | Carbon::parse($endDate)->endOfDay() 46 | ]); 47 | } 48 | break; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /examples/seeders/DemoItemsSeeder.php: -------------------------------------------------------------------------------- 1 | $faker->name(), 26 | 'email' => $faker->unique()->safeEmail(), 27 | 'status' => $faker->randomElement(['active', 'pending', 'inactive']), 28 | 'description' => $faker->paragraph(), 29 | 'price' => $faker->randomFloat(2, 10, 1000), 30 | 'quantity' => $faker->numberBetween(0, 100), 31 | 'created_at' => $faker->dateTimeBetween('-1 year', 'now'), 32 | 'updated_at' => now(), 33 | ]; 34 | 35 | // Insert in batches of 50 for better performance 36 | if ($i % 50 === 0) { 37 | DB::table('demo_items')->insert($items); 38 | $items = []; 39 | } 40 | } 41 | 42 | // Insert remaining items 43 | if (!empty($items)) { 44 | DB::table('demo_items')->insert($items); 45 | } 46 | 47 | $this->command->info('Created 250 demo items for infinite scrolling demonstration.'); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /app/routes/web.php: -------------------------------------------------------------------------------- 1 | $table(resource: false, paginateMethod: 'paginate')); 13 | 14 | Route::get('/custom', function () { 15 | return Inertia::render('CustomTable', [ 16 | 'users' => User::query()->paginate(10), 17 | ]); 18 | }); 19 | 20 | Route::get('/two-tables/eloquent', TwoTablesEloquent::class); 21 | Route::get('/two-tables/spatie', TwoTablesSpatie::class); 22 | 23 | Route::get('/users/eloquent', fn() => $table(resource: false, paginateMethod: 'paginate')); 24 | Route::get('/users/resource', fn() => $table(resource: true, paginateMethod: 'paginate')); 25 | Route::get('/users/eloquent/simple', fn() => $table(resource: false, paginateMethod: 'simplePaginate')); 26 | Route::get('/users/resource/simple', fn() => $table(resource: true, paginateMethod: 'simplePaginate')); 27 | Route::get('/users/eloquent/cursor', fn() => $table(resource: false, paginateMethod: 'cursorPaginate')); 28 | Route::get('/users/resource/cursor', fn() => $table(resource: true, paginateMethod: 'cursorPaginate')); 29 | 30 | // Routes pour les exemples d'export personnalisé 31 | Route::get('/users/custom-export', function () { 32 | return (new App\Http\UserTableWithCustomExport)(); 33 | }); 34 | 35 | Route::get('/users/excel-export', function () { 36 | return (new App\Http\UserTableWithExcelExport)(); 37 | }); 38 | 39 | // Route for multiple tables example 40 | Route::get('/dashboard', \App\Http\MultipleTablesView::class)->name('dashboard'); 41 | -------------------------------------------------------------------------------- /app/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import laravel from "laravel-vite-plugin"; 3 | import vue from "@vitejs/plugin-vue"; 4 | import { resolve } from 'path'; 5 | 6 | export default defineConfig({ 7 | plugins: [ 8 | laravel([ 9 | "resources/css/app.css", 10 | "resources/js/app.js", 11 | ]), 12 | vue({ 13 | template: { 14 | transformAssetUrls: { 15 | base: null, 16 | includeAbsolute: false, 17 | }, 18 | }, 19 | }), 20 | ], 21 | resolve: { 22 | alias: { 23 | '@inertiajs-tables': resolve(__dirname, '../js'), 24 | }, 25 | }, 26 | server: { 27 | watch: { 28 | // Exclude folders that can cause memory issues 29 | ignored: [ 30 | '**/node_modules/**', 31 | '**/vendor/**', 32 | '**/storage/**', 33 | '**/bootstrap/cache/**', 34 | '**/.git/**', 35 | '../node_modules/**', 36 | '../vendor/**' 37 | ] 38 | }, 39 | fs: { 40 | // Limit folder access to avoid recursive inclusions 41 | allow: [ 42 | // Dossier courant 43 | '.', 44 | // Dossier parent pour les composants 45 | '../js' 46 | ] 47 | } 48 | }, 49 | optimizeDeps: { 50 | // Limit dependencies to optimize to reduce memory usage 51 | include: [ 52 | 'vue', 53 | '@inertiajs/vue3', 54 | 'lodash-es', 55 | 'qs' 56 | ] 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /app/config/inertia.php: -------------------------------------------------------------------------------- 1 | [ 20 | 21 | 'enabled' => true, 22 | 23 | 'url' => 'http://127.0.0.1:13714/render', 24 | 25 | ], 26 | 27 | /* 28 | |-------------------------------------------------------------------------- 29 | | Testing 30 | |-------------------------------------------------------------------------- 31 | | 32 | | The values described here are used to locate Inertia components on the 33 | | filesystem. For instance, when using `assertInertia`, the assertion 34 | | attempts to locate the component as a file relative to any of the 35 | | paths AND with any of the extensions specified here. 36 | | 37 | */ 38 | 39 | 'testing' => [ 40 | 41 | 'ensure_pages_exist' => true, 42 | 43 | 'page_paths' => [ 44 | 45 | resource_path('js/Pages'), 46 | 47 | ], 48 | 49 | 'page_extensions' => [ 50 | 51 | 'js', 52 | 'jsx', 53 | 'svelte', 54 | 'ts', 55 | 'tsx', 56 | 'vue', 57 | 58 | ], 59 | 60 | ], 61 | 62 | ]; 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@adesin-fr/inertiajs-tables-laravel-query-builder", 3 | "version": "3.3.9", 4 | "description": "Inertia.js Front-end Components for Spatie's Laravel Query Builder", 5 | "private": false, 6 | "author": "AdesinFr ", 7 | "license": "MIT", 8 | "type": "module", 9 | "main": "./dist/inertiajs-tables-laravel-query-builder.umd.js", 10 | "module": "./dist/inertiajs-tables-laravel-query-builder.es.js", 11 | "files": [ 12 | "dist" 13 | ], 14 | "exports": { 15 | ".": { 16 | "import": "./dist/inertiajs-tables-laravel-query-builder.es.js", 17 | "require": "./dist/inertiajs-tables-laravel-query-builder.umd.js" 18 | } 19 | }, 20 | "scripts": { 21 | "dev": "vite build --watch", 22 | "build": "vite build", 23 | "eslint": "./node_modules/.bin/eslint app/resources/js/ js/ --ext .js,.vue --fix" 24 | }, 25 | "peerDependencies": { 26 | "@inertiajs/vue3": "*", 27 | "tailwind-merge": "*", 28 | "vue": "^3.4.27", 29 | "vuedraggable": "^4.1.0" 30 | }, 31 | "dependencies": { 32 | "@popperjs/core": "^2.11.5", 33 | "lodash-es": "^4.17.21", 34 | "qs": "^6.10.5" 35 | }, 36 | "devDependencies": { 37 | "@vitejs/plugin-vue": "^3.0", 38 | "eslint": "^8.18.0", 39 | "eslint-plugin-vue": "^9.1.1", 40 | "vite": "^3.0" 41 | }, 42 | "repository": { 43 | "type": "git", 44 | "url": "git+https://github.com/Adesin-Fr/inertiajs-tables-laravel-query-builder.git" 45 | }, 46 | "keywords": [ 47 | "inertiajs-tables-laravel-query-builder" 48 | ], 49 | "bugs": { 50 | "url": "https://github.com/Adesin-Fr/inertiajs-tables-laravel-query-builder/issues" 51 | }, 52 | "homepage": "https://github.com/Adesin-Fr/inertiajs-tables-laravel-query-builder#readme" 53 | } 54 | -------------------------------------------------------------------------------- /app/config/hashing.php: -------------------------------------------------------------------------------- 1 | 'bcrypt', 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Bcrypt Options 23 | |-------------------------------------------------------------------------- 24 | | 25 | | Here you may specify the configuration options that should be used when 26 | | passwords are hashed using the Bcrypt algorithm. This will allow you 27 | | to control the amount of time it takes to hash the given password. 28 | | 29 | */ 30 | 31 | 'bcrypt' => [ 32 | 'rounds' => env('BCRYPT_ROUNDS', 10), 33 | ], 34 | 35 | /* 36 | |-------------------------------------------------------------------------- 37 | | Argon Options 38 | |-------------------------------------------------------------------------- 39 | | 40 | | Here you may specify the configuration options that should be used when 41 | | passwords are hashed using the Argon algorithm. These will allow you 42 | | to control the amount of time it takes to hash the given password. 43 | | 44 | */ 45 | 46 | 'argon' => [ 47 | 'memory' => 65536, 48 | 'threads' => 1, 49 | 'time' => 4, 50 | ], 51 | 52 | ]; 53 | -------------------------------------------------------------------------------- /js/translations.js: -------------------------------------------------------------------------------- 1 | const translationsObject = { 2 | translations: { 3 | next: "Next", 4 | no_results_found: "No results found", 5 | of: "of", 6 | per_page: "per page", 7 | previous: "Previous", 8 | results: "results", 9 | to: "to", 10 | reset: "Reset", 11 | search: "Search...", 12 | noLineSelected: "No line selected", 13 | lineSelected: "line(s) selected", 14 | // Date filter translations 15 | filter_type: "Filter type", 16 | no_filter: "No filter", 17 | exact_date: "Exact date", 18 | before_date: "Before", 19 | after_date: "After", 20 | date_range: "Date range", 21 | start_date: "Start date", 22 | end_date: "End date", 23 | reset_filter: "Reset filter", 24 | // Number filter translations 25 | exact_number: "Exact value", 26 | less_than: "Less than", 27 | greater_than: "Greater than", 28 | less_than_or_equal: "Less than or equal", 29 | greater_than_or_equal: "Greater than or equal", 30 | number_range: "Between", 31 | start_number: "Start value", 32 | end_number: "End value", 33 | // UI translations 34 | export_csv: "Export CSV", 35 | add_search_fields: "Add search field", 36 | show_hide_columns: "Show / Hide columns", 37 | grouped_reset: "Reset", 38 | } 39 | }; 40 | 41 | export default translationsObject.translations; 42 | 43 | export function getTranslations() { 44 | return translationsObject.translations; 45 | } 46 | 47 | export function setTranslation(key, value) { 48 | translationsObject.translations[key] = value; 49 | } 50 | 51 | export function setTranslations(translations) { 52 | translationsObject.translations = translations; 53 | } -------------------------------------------------------------------------------- /app/bootstrap/app.php: -------------------------------------------------------------------------------- 1 | singleton( 30 | Illuminate\Contracts\Http\Kernel::class, 31 | App\Http\Kernel::class 32 | ); 33 | 34 | $app->singleton( 35 | Illuminate\Contracts\Console\Kernel::class, 36 | App\Console\Kernel::class 37 | ); 38 | 39 | $app->singleton( 40 | Illuminate\Contracts\Debug\ExceptionHandler::class, 41 | App\Exceptions\Handler::class 42 | ); 43 | 44 | /* 45 | |-------------------------------------------------------------------------- 46 | | Return The Application 47 | |-------------------------------------------------------------------------- 48 | | 49 | | This script returns the application instance. The instance is given to 50 | | the calling script so we can separate the building of the instances 51 | | from the actual running of the application and sending responses. 52 | | 53 | */ 54 | 55 | return $app; 56 | -------------------------------------------------------------------------------- /app/artisan: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env php 2 | make(Illuminate\Contracts\Console\Kernel::class); 34 | 35 | $status = $kernel->handle( 36 | $input = new Symfony\Component\Console\Input\ArgvInput, 37 | new Symfony\Component\Console\Output\ConsoleOutput 38 | ); 39 | 40 | /* 41 | |-------------------------------------------------------------------------- 42 | | Shutdown The Application 43 | |-------------------------------------------------------------------------- 44 | | 45 | | Once Artisan has finished running, we will fire off the shutdown events 46 | | so that any final work may be done by the application before we shut 47 | | down the process. This is the last thing to happen to the request. 48 | | 49 | */ 50 | 51 | $kernel->terminate($input, $status); 52 | 53 | exit($status); 54 | -------------------------------------------------------------------------------- /app/public/index.php: -------------------------------------------------------------------------------- 1 | make(Kernel::class); 50 | 51 | $response = $kernel->handle( 52 | $request = Request::capture() 53 | )->send(); 54 | 55 | $kernel->terminate($request, $response); 56 | -------------------------------------------------------------------------------- /app/resources/js/Pages/DragDropTest.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 46 | -------------------------------------------------------------------------------- /app/tests/Browser/SortTest.php: -------------------------------------------------------------------------------- 1 | browse(function (Browser $browser) { 15 | $users = User::query() 16 | ->select(['id', 'name', 'email']) 17 | ->orderBy('name') 18 | ->get(); 19 | 20 | $usersByEmail = $users->sortBy->email->values(); 21 | 22 | $browser->visit('/users/eloquent') 23 | ->waitFor('table') 24 | // First user 25 | ->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name) 26 | ->assertSeeIn('tr:last-child td:nth-child(1)', $users->get(9)->name) 27 | 28 | // Sort desc 29 | ->press('@sort-name') 30 | ->waitUntilMissingText($users->get(0)->name) 31 | ->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(99)->name) 32 | ->assertSeeIn('tr:last-child td:nth-child(1)', $users->get(90)->name) 33 | 34 | // Restore asc sort 35 | ->press('@sort-name') 36 | ->waitUntilMissingText($users->get(99)->name) 37 | ->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name) 38 | ->assertSeeIn('tr:last-child td:nth-child(1)', $users->get(9)->name) 39 | 40 | // Sort by other column 41 | ->press('@sort-email') 42 | ->waitForTextIn('tr:first-child td:nth-child(2)', $usersByEmail->get(0)->email) 43 | ->assertSeeIn('tr:first-child td:nth-child(2)', $usersByEmail->get(0)->email) 44 | ->assertSeeIn('tr:last-child td:nth-child(2)', $usersByEmail->get(9)->email); 45 | }); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /js/Components/ColumnToggle.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 44 | -------------------------------------------------------------------------------- /app/app/Http/TwoTablesSpatie.php: -------------------------------------------------------------------------------- 1 | defaultSort('name') 19 | ->allowedSorts(['name', 'email']) 20 | ->allowedFilters(['name', 'email']) 21 | ->paginate(perPage: 10, pageName: 'companiesPage') 22 | ->withQueryString(); 23 | 24 | InertiaTable::updateQueryBuilderParameters('users'); 25 | 26 | $users = QueryBuilder::for(User::query()) 27 | ->defaultSort('name') 28 | ->allowedSorts(['name', 'email']) 29 | ->allowedFilters(['name', 'email']) 30 | ->paginate(perPage: 10, pageName: 'usersPage') 31 | ->withQueryString(); 32 | 33 | return Inertia::render('TwoTables', [ 34 | 'companies' => $companies, 35 | 'users' => $users, 36 | ])->table(function (InertiaTable $inertiaTable) { 37 | $inertiaTable 38 | ->name('users') 39 | ->pageName('usersPage') 40 | ->searchInput('name') 41 | ->searchInput('email') 42 | ->defaultSort('name') 43 | ->column(key: 'name', sortable: true) 44 | ->column(key: 'email', sortable: true); 45 | })->table(function (InertiaTable $inertiaTable) { 46 | $inertiaTable 47 | ->name('companies') 48 | ->pageName('companiesPage') 49 | ->searchInput('name') 50 | ->defaultSort('name') 51 | ->column(key: 'name', sortable: true) 52 | ->column(key: 'address', sortable: true); 53 | }); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /examples/ColumnDragDropExample.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 40 | -------------------------------------------------------------------------------- /js/Components/TableAddSearchRow.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 79 | -------------------------------------------------------------------------------- /php/QueryBuilderFilters/FiltersNumber.php: -------------------------------------------------------------------------------- 1 | where($property, '=', (float) $number); 25 | } 26 | break; 27 | 28 | case 'less_than': 29 | if ($number !== null && $number !== '') { 30 | $query->where($property, '<', (float) $number); 31 | } 32 | break; 33 | 34 | case 'greater_than': 35 | if ($number !== null && $number !== '') { 36 | $query->where($property, '>', (float) $number); 37 | } 38 | break; 39 | 40 | case 'less_than_or_equal': 41 | if ($number !== null && $number !== '') { 42 | $query->where($property, '<=', (float) $number); 43 | } 44 | break; 45 | 46 | case 'greater_than_or_equal': 47 | if ($number !== null && $number !== '') { 48 | $query->where($property, '>=', (float) $number); 49 | } 50 | break; 51 | 52 | case 'between': 53 | if ($startNumber !== null && $startNumber !== '' && $endNumber !== null && $endNumber !== '') { 54 | $query->whereBetween($property, [(float) $startNumber, (float) $endNumber]); 55 | } 56 | break; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /app/tests/DuskTestCase.php: -------------------------------------------------------------------------------- 1 | addArguments(collect([ 38 | $this->shouldStartMaximized() ? '--start-maximized' : '--window-size=1920,1080', 39 | ])->unless($this->hasHeadlessDisabled(), function ($items) { 40 | return $items->merge([ 41 | '--disable-gpu', 42 | '--headless', 43 | ]); 44 | })->all()); 45 | 46 | return RemoteWebDriver::create( 47 | $_ENV['DUSK_DRIVER_URL'] ?? 'http://localhost:9515', 48 | DesiredCapabilities::chrome()->setCapability( 49 | ChromeOptions::CAPABILITY, 50 | $options 51 | ) 52 | ); 53 | } 54 | 55 | /** 56 | * Determine whether the Dusk command has disabled headless mode. 57 | * 58 | * @return bool 59 | */ 60 | protected function hasHeadlessDisabled() 61 | { 62 | return isset($_SERVER['DUSK_HEADLESS_DISABLED']) || isset($_ENV['DUSK_HEADLESS_DISABLED']); 63 | } 64 | 65 | /** 66 | * Determine if the browser window should start maximized. 67 | * 68 | * @return bool 69 | */ 70 | protected function shouldStartMaximized() 71 | { 72 | return isset($_SERVER['DUSK_START_MAXIMIZED']) || isset($_ENV['DUSK_START_MAXIMIZED']); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /js/Components/TableReset.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 71 | -------------------------------------------------------------------------------- /js/Components/TableGlobalSearch.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 73 | -------------------------------------------------------------------------------- /app/config/broadcasting.php: -------------------------------------------------------------------------------- 1 | env('BROADCAST_DRIVER', 'null'), 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Broadcast Connections 23 | |-------------------------------------------------------------------------- 24 | | 25 | | Here you may define all of the broadcast connections that will be used 26 | | to broadcast events to other systems or over websockets. Samples of 27 | | each available type of connection are provided inside this array. 28 | | 29 | */ 30 | 31 | 'connections' => [ 32 | 33 | 'pusher' => [ 34 | 'driver' => 'pusher', 35 | 'key' => env('PUSHER_APP_KEY'), 36 | 'secret' => env('PUSHER_APP_SECRET'), 37 | 'app_id' => env('PUSHER_APP_ID'), 38 | 'options' => [ 39 | 'host' => env('PUSHER_HOST', 'api-' . env('PUSHER_APP_CLUSTER', 'mt1') . '.pusher.com'), 40 | 'port' => env('PUSHER_PORT', 443), 41 | 'scheme' => env('PUSHER_SCHEME', 'https'), 42 | 'encrypted' => true, 43 | 'useTLS' => env('PUSHER_SCHEME', 'https') === 'https', 44 | ], 45 | 'client_options' => [ 46 | // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html 47 | ], 48 | ], 49 | 50 | 'ably' => [ 51 | 'driver' => 'ably', 52 | 'key' => env('ABLY_KEY'), 53 | ], 54 | 55 | 'redis' => [ 56 | 'driver' => 'redis', 57 | 'connection' => 'default', 58 | ], 59 | 60 | 'log' => [ 61 | 'driver' => 'log', 62 | ], 63 | 64 | 'null' => [ 65 | 'driver' => 'null', 66 | ], 67 | 68 | ], 69 | 70 | ]; 71 | -------------------------------------------------------------------------------- /app/composer-l9.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laravel/laravel", 3 | "type": "project", 4 | "description": "The Laravel Framework.", 5 | "keywords": [ 6 | "framework", 7 | "laravel" 8 | ], 9 | "license": "MIT", 10 | "require": { 11 | "php": "^8.1|^8.2", 12 | "guzzlehttp/guzzle": "^7.2", 13 | "inertiajs/inertia-laravel": "^0.6.9", 14 | "laravel/breeze": "^1.9", 15 | "laravel/dusk": "^6.24", 16 | "laravel/framework": "^9.37", 17 | "laravel/sanctum": "^2.8", 18 | "laravel/tinker": "^2.7", 19 | "adesin-fr/inertiajs-tables-laravel-query-builder": "@dev", 20 | "spatie/laravel-query-builder": "^5.0", 21 | "tightenco/ziggy": "^1.0" 22 | }, 23 | "require-dev": { 24 | "fakerphp/faker": "^1.9.1", 25 | "friendsofphp/php-cs-fixer": "^3.8", 26 | "mockery/mockery": "^1.4.4", 27 | "nunomaduro/collision": "^6.1", 28 | "phpunit/phpunit": "^9.5.10", 29 | "spatie/laravel-ignition": "^1.0" 30 | }, 31 | "repositories": [ 32 | { 33 | "type": "path", 34 | "url": "../" 35 | } 36 | ], 37 | "autoload": { 38 | "psr-4": { 39 | "App\\": "app/", 40 | "Database\\Factories\\": "database/factories/", 41 | "Database\\Seeders\\": "database/seeders/" 42 | } 43 | }, 44 | "autoload-dev": { 45 | "psr-4": { 46 | "Tests\\": "tests/" 47 | } 48 | }, 49 | "scripts": { 50 | "post-autoload-dump": [ 51 | "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", 52 | "@php artisan package:discover --ansi" 53 | ], 54 | "post-update-cmd": [ 55 | "@php artisan vendor:publish --tag=laravel-assets --ansi --force" 56 | ], 57 | "post-root-package-install": [ 58 | "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" 59 | ], 60 | "post-create-project-cmd": [ 61 | "@php artisan key:generate --ansi" 62 | ] 63 | }, 64 | "extra": { 65 | "laravel": { 66 | "dont-discover": [] 67 | } 68 | }, 69 | "config": { 70 | "optimize-autoloader": true, 71 | "preferred-install": "dist", 72 | "sort-packages": true 73 | }, 74 | "minimum-stability": "dev", 75 | "prefer-stable": true 76 | } 77 | -------------------------------------------------------------------------------- /app/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laravel/laravel", 3 | "type": "project", 4 | "description": "The Laravel Framework.", 5 | "keywords": [ 6 | "framework", 7 | "laravel" 8 | ], 9 | "license": "MIT", 10 | "require": { 11 | "php": "^8.1|^8.2", 12 | "guzzlehttp/guzzle": "^7.2", 13 | "inertiajs/inertia-laravel": "^0.6.9", 14 | "laravel/breeze": "^1.9", 15 | "laravel/dusk": "^7.0", 16 | "laravel/framework": "^10.0", 17 | "laravel/sanctum": "^2.8|^3.0", 18 | "laravel/tinker": "^2.7", 19 | "adesin-fr/inertiajs-tables-laravel-query-builder": "@dev", 20 | "spatie/laravel-query-builder": "^5.0", 21 | "tightenco/ziggy": "^1.0" 22 | }, 23 | "require-dev": { 24 | "fakerphp/faker": "^1.9.1", 25 | "friendsofphp/php-cs-fixer": "^3.8", 26 | "mockery/mockery": "^1.4.4", 27 | "nunomaduro/collision": "^6.1", 28 | "phpunit/phpunit": "^9.5.10", 29 | "spatie/laravel-ignition": "^1.0|^2.0" 30 | }, 31 | "repositories": [ 32 | { 33 | "type": "path", 34 | "url": "../" 35 | } 36 | ], 37 | "autoload": { 38 | "psr-4": { 39 | "App\\": "app/", 40 | "Database\\Factories\\": "database/factories/", 41 | "Database\\Seeders\\": "database/seeders/" 42 | } 43 | }, 44 | "autoload-dev": { 45 | "psr-4": { 46 | "Tests\\": "tests/" 47 | } 48 | }, 49 | "scripts": { 50 | "post-autoload-dump": [ 51 | "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", 52 | "@php artisan package:discover --ansi" 53 | ], 54 | "post-update-cmd": [ 55 | "@php artisan vendor:publish --tag=laravel-assets --ansi --force" 56 | ], 57 | "post-root-package-install": [ 58 | "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" 59 | ], 60 | "post-create-project-cmd": [ 61 | "@php artisan key:generate --ansi" 62 | ] 63 | }, 64 | "extra": { 65 | "laravel": { 66 | "dont-discover": [] 67 | } 68 | }, 69 | "config": { 70 | "optimize-autoloader": true, 71 | "preferred-install": "dist", 72 | "sort-packages": true 73 | }, 74 | "minimum-stability": "dev", 75 | "prefer-stable": true 76 | } 77 | -------------------------------------------------------------------------------- /js/Components/PerPageSelector.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 93 | -------------------------------------------------------------------------------- /js/Components/TableColumns.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 73 | 74 | 88 | -------------------------------------------------------------------------------- /app/config/sanctum.php: -------------------------------------------------------------------------------- 1 | explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf( 19 | '%s%s', 20 | 'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1', 21 | env('APP_URL') ? ',' . parse_url(env('APP_URL'), PHP_URL_HOST) : '' 22 | ))), 23 | 24 | /* 25 | |-------------------------------------------------------------------------- 26 | | Sanctum Guards 27 | |-------------------------------------------------------------------------- 28 | | 29 | | This array contains the authentication guards that will be checked when 30 | | Sanctum is trying to authenticate a request. If none of these guards 31 | | are able to authenticate the request, Sanctum will use the bearer 32 | | token that's present on an incoming request for authentication. 33 | | 34 | */ 35 | 36 | 'guard' => ['web'], 37 | 38 | /* 39 | |-------------------------------------------------------------------------- 40 | | Expiration Minutes 41 | |-------------------------------------------------------------------------- 42 | | 43 | | This value controls the number of minutes until an issued token will be 44 | | considered expired. If this value is null, personal access tokens do 45 | | not expire. This won't tweak the lifetime of first-party sessions. 46 | | 47 | */ 48 | 49 | 'expiration' => null, 50 | 51 | /* 52 | |-------------------------------------------------------------------------- 53 | | Sanctum Middleware 54 | |-------------------------------------------------------------------------- 55 | | 56 | | When authenticating your first-party SPA with Sanctum you may need to 57 | | customize some of the middleware Sanctum uses while processing the 58 | | request. You may change the middleware listed below as required. 59 | | 60 | */ 61 | 62 | 'middleware' => [ 63 | 'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class, 64 | 'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class, 65 | ], 66 | 67 | ]; 68 | -------------------------------------------------------------------------------- /app/tests/Browser/AutoFillTest.php: -------------------------------------------------------------------------------- 1 | browse(function (Browser $browser) { 16 | $browser->visit('/users/eloquent') 17 | ->waitFor('table') 18 | // Header names 19 | ->assertSeeIn('th:nth-child(1)', Str::upper('Name')) 20 | ->assertSeeIn('th:nth-child(2)', Str::upper('Email')) 21 | ->assertSeeIn('th:nth-child(3)', Str::upper('Language')) 22 | ->assertSeeIn('th:nth-child(4)', Str::upper('Actions')) 23 | 24 | // Sort buttons 25 | ->assertPresent('th:nth-child(1) button') 26 | ->assertPresent('th:nth-child(2) button') 27 | ->assertNotPresent('th:nth-child(3) button') 28 | ->assertNotPresent('th:nth-child(4) button'); 29 | }); 30 | } 31 | 32 | /** @test */ 33 | public function it_generates_the_table_body_with_a_custom_action_column() 34 | { 35 | $this->browse(function (Browser $browser) { 36 | $users = User::orderBy('name')->limit(10)->get(); 37 | 38 | $browser->visit('/users/eloquent') 39 | ->waitFor('table') 40 | // First user 41 | ->assertSeeIn('tr:first-child td:nth-child(1)', $users->first()->name) 42 | ->assertSeeIn('tr:first-child td:nth-child(2)', $users->first()->email) 43 | ->assertSeeIn('tr:first-child td:nth-child(3)', $users->first()->language_code) 44 | ->within('tr:first-child td:nth-child(4)', function (Browser $browser) use ($users) { 45 | $browser->assertSeeLink('Edit') 46 | ->assertAttribute('a', 'href', "/users/{$users->first()->id}/edit"); 47 | }) 48 | 49 | // Last user 50 | ->assertSeeIn('tr:last-child td:nth-child(1)', $users->last()->name) 51 | ->assertSeeIn('tr:last-child td:nth-child(2)', $users->last()->email) 52 | ->assertSeeIn('tr:last-child td:nth-child(3)', $users->last()->language_code) 53 | ->within('tr:last-child td:nth-child(4)', function (Browser $browser) use ($users) { 54 | $browser->assertSeeLink('Edit') 55 | ->assertAttribute('a', 'href', "/users/{$users->last()->id}/edit"); 56 | }); 57 | }); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /php/InertiaTableCollection.php: -------------------------------------------------------------------------------- 1 | view = $view; 18 | $this->props = $props; 19 | $this->request = $request; 20 | } 21 | 22 | /** 23 | * Add a table to the collection. 24 | * 25 | * @param string $name 26 | * @param callable $callback 27 | * @return self 28 | */ 29 | public function table(string $name, callable $callback): self 30 | { 31 | $table = new InertiaTable($this->request); 32 | $table->name($name); 33 | 34 | $callback($table); 35 | 36 | $this->tables[$name] = $table; 37 | 38 | return $this; 39 | } 40 | 41 | /** 42 | * Render the view with all tables. 43 | * 44 | * @return \Inertia\Response|\Symfony\Component\HttpFoundation\Response 45 | */ 46 | public function render() 47 | { 48 | // Save current QueryBuilder parameters 49 | $originalConfig = config('query-builder.parameters'); 50 | 51 | // Check if any table should handle export 52 | foreach ($this->tables as $name => $table) { 53 | if ($table->shouldHandleExport($name)) { 54 | // Set the correct parameters for this table 55 | InertiaTable::updateQueryBuilderParameters($name); 56 | $result = $table->handleCsvExport(); 57 | // Restore original parameters 58 | config(['query-builder.parameters' => $originalConfig]); 59 | return $result; 60 | } 61 | } 62 | 63 | // Render normal view with all tables data 64 | $tablesData = []; 65 | foreach ($this->tables as $name => $table) { 66 | // Set the correct parameters for this table 67 | InertiaTable::updateQueryBuilderParameters($name); 68 | $tablesData[$name] = $table->getTableData(); 69 | } 70 | 71 | // Restore original parameters 72 | config(['query-builder.parameters' => $originalConfig]); 73 | 74 | $response = Inertia::render($this->view, array_merge($this->props, $tablesData)); 75 | 76 | // Apply query builder props for all tables 77 | foreach ($this->tables as $table) { 78 | $response = $table->applyTo($response); 79 | } 80 | 81 | return $response; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /app/config/filesystems.php: -------------------------------------------------------------------------------- 1 | env('FILESYSTEM_DISK', 'local'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Filesystem Disks 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Here you may configure as many filesystem "disks" as you wish, and you 24 | | may even configure multiple disks of the same driver. Defaults have 25 | | been set up for each driver as an example of the required values. 26 | | 27 | | Supported Drivers: "local", "ftp", "sftp", "s3" 28 | | 29 | */ 30 | 31 | 'disks' => [ 32 | 33 | 'local' => [ 34 | 'driver' => 'local', 35 | 'root' => storage_path('app'), 36 | 'throw' => false, 37 | ], 38 | 39 | 'public' => [ 40 | 'driver' => 'local', 41 | 'root' => storage_path('app/public'), 42 | 'url' => env('APP_URL') . '/storage', 43 | 'visibility' => 'public', 44 | 'throw' => false, 45 | ], 46 | 47 | 's3' => [ 48 | 'driver' => 's3', 49 | 'key' => env('AWS_ACCESS_KEY_ID'), 50 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 51 | 'region' => env('AWS_DEFAULT_REGION'), 52 | 'bucket' => env('AWS_BUCKET'), 53 | 'url' => env('AWS_URL'), 54 | 'endpoint' => env('AWS_ENDPOINT'), 55 | 'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false), 56 | 'throw' => false, 57 | ], 58 | 59 | ], 60 | 61 | /* 62 | |-------------------------------------------------------------------------- 63 | | Symbolic Links 64 | |-------------------------------------------------------------------------- 65 | | 66 | | Here you may configure the symbolic links that will be created when the 67 | | `storage:link` Artisan command is executed. The array keys should be 68 | | the locations of the links and the values should be their targets. 69 | | 70 | */ 71 | 72 | 'links' => [ 73 | public_path('storage') => storage_path('app/public'), 74 | ], 75 | 76 | ]; 77 | -------------------------------------------------------------------------------- /.github/workflows/coding-standards.yml: -------------------------------------------------------------------------------- 1 | name: "Coding Standards" 2 | on: [push] 3 | jobs: 4 | coding-standards: 5 | runs-on: ubuntu-latest 6 | 7 | strategy: 8 | matrix: 9 | php-version: 10 | - "8.2" 11 | node-version: 12 | - 20.14.0 13 | 14 | steps: 15 | - name: Checkout code 16 | uses: actions/checkout@v3 17 | with: 18 | ref: ${{ github.head_ref }} 19 | 20 | - name: "Install Node" 21 | uses: actions/setup-node@v1 22 | with: 23 | node-version: "${{ matrix.node-version }}" 24 | 25 | - name: "Install PHP with extensions" 26 | uses: "shivammathur/setup-php@v2" 27 | with: 28 | coverage: "none" 29 | php-version: "${{ matrix.php-version }}" 30 | 31 | - name: Cache node modules 32 | id: cache-npm 33 | uses: actions/cache@v3 34 | env: 35 | cache-name: cache-node-modules 36 | with: 37 | # npm cache files are stored in `~/.npm` on Linux/macOS 38 | path: ~/.npm 39 | key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} 40 | restore-keys: | 41 | ${{ runner.os }}-build-${{ env.cache-name }}- 42 | ${{ runner.os }}-build- 43 | ${{ runner.os }}- 44 | 45 | - if: ${{ steps.cache-npm.outputs.cache-hit == 'false' }} 46 | name: List the state of node modules 47 | continue-on-error: true 48 | run: npm list 49 | 50 | - name: "Install locked dependencies with npm" 51 | run: "npm ci --ignore-scripts" 52 | 53 | - name: "Cache dependencies installed with composer" 54 | uses: "actions/cache@v2" 55 | with: 56 | path: "~/.composer/cache" 57 | key: "php-${{ matrix.php-version }}-composer-${{ hashFiles('composer.lock') }}" 58 | restore-keys: "php-${{ matrix.php-version }}-composer-" 59 | 60 | - name: "Install locked dependencies with composer" 61 | run: "composer install --no-interaction --no-progress --no-suggest" 62 | 63 | - name: "Create cache directory for friendsofphp/php-cs-fixer" 64 | run: mkdir -p .build/php-cs-fixer 65 | 66 | - name: "Cache cache directory for friendsofphp/php-cs-fixer" 67 | uses: "actions/cache@v2" 68 | with: 69 | path: "~/.build/php-cs-fixer" 70 | key: "php-${{ matrix.php-version }}-php-cs-fixer-${{ github.sha }}" 71 | restore-keys: "php-${{ matrix.php-version }}-php-cs-fixer-" 72 | 73 | - name: "Run eslint" 74 | run: "npm run eslint" 75 | 76 | - name: "Run friendsofphp/php-cs-fixer" 77 | run: "composer php-cs-fixer" 78 | 79 | - name: Commit changes 80 | uses: stefanzweifel/git-auto-commit-action@v4 81 | with: 82 | commit_message: Fix styling 83 | -------------------------------------------------------------------------------- /.php-cs-fixer.php: -------------------------------------------------------------------------------- 1 | in([ 5 | __DIR__ . '/php', 6 | __DIR__ . '/app/app', 7 | __DIR__ . '/app/config', 8 | __DIR__ . '/app/database', 9 | __DIR__ . '/app/lang', 10 | __DIR__ . '/app/routes', 11 | __DIR__ . '/app/tests', 12 | ]) 13 | ->name('*.php') 14 | ->ignoreDotFiles(true) 15 | ->ignoreVCS(true); 16 | 17 | return (new PhpCsFixer\Config()) 18 | ->setRules([ 19 | '@PHP70Migration' => true, 20 | '@PHP71Migration' => true, 21 | '@PHP73Migration' => true, 22 | '@PHP74Migration' => true, 23 | '@PHP80Migration' => true, 24 | '@PSR2' => true, 25 | 'array_indentation' => true, 26 | 'binary_operator_spaces' => ['default' => 'align_single_space_minimal'], 27 | 'blank_line_before_statement' => ['statements' => ['break', 'continue', 'declare', 'return', 'throw', 'try']], 28 | 'class_attributes_separation' => ['elements' => ['method' => 'one']], 29 | 'concat_space' => ['spacing' => 'one'], 30 | 'increment_style' => ['style' => 'post'], 31 | 'method_argument_space' => ['on_multiline' => 'ensure_fully_multiline', 'keep_multiple_spaces_after_comma' => true], 32 | 'method_chaining_indentation' => true, 33 | 'multiline_whitespace_before_semicolons' => ['strategy' => 'no_multi_line'], 34 | 'no_extra_blank_lines' => true, 35 | 'no_trailing_comma_in_singleline_array' => true, 36 | 'no_unused_imports' => true, 37 | 'no_whitespace_before_comma_in_array' => true, 38 | 'not_operator_with_successor_space' => false, 39 | 'ordered_imports' => true, 40 | 'phpdoc_scalar' => true, 41 | 'phpdoc_single_line_var_spacing' => true, 42 | 'phpdoc_var_without_name' => true, 43 | 'return_type_declaration' => ['space_before' => 'none'], 44 | 'semicolon_after_instruction' => false, 45 | 'simple_to_complex_string_variable' => true, 46 | 'strict_comparison' => true, 47 | 'ternary_operator_spaces' => true, 48 | 'trailing_comma_in_multiline' => true, 49 | 'trim_array_spaces' => true, 50 | 'unary_operator_spaces' => true, 51 | 'yoda_style' => false, 52 | ]) 53 | ->setFinder($finder) 54 | ->setRiskyAllowed(true) 55 | ->setUsingCache(false); 56 | -------------------------------------------------------------------------------- /app/app/Http/Kernel.php: -------------------------------------------------------------------------------- 1 | 15 | */ 16 | protected $middleware = [ 17 | // \App\Http\Middleware\TrustHosts::class, 18 | \App\Http\Middleware\TrustProxies::class, 19 | \Illuminate\Http\Middleware\HandleCors::class, 20 | \App\Http\Middleware\PreventRequestsDuringMaintenance::class, 21 | \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, 22 | \App\Http\Middleware\TrimStrings::class, 23 | \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, 24 | ]; 25 | 26 | /** 27 | * The application's route middleware groups. 28 | * 29 | * @var array> 30 | */ 31 | protected $middlewareGroups = [ 32 | 'web' => [ 33 | \App\Http\Middleware\EncryptCookies::class, 34 | \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, 35 | \Illuminate\Session\Middleware\StartSession::class, 36 | \Illuminate\View\Middleware\ShareErrorsFromSession::class, 37 | \App\Http\Middleware\VerifyCsrfToken::class, 38 | \Illuminate\Routing\Middleware\SubstituteBindings::class, 39 | \App\Http\Middleware\HandleInertiaRequests::class, 40 | ], 41 | 42 | 'api' => [ 43 | // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, 44 | 'throttle:api', 45 | \Illuminate\Routing\Middleware\SubstituteBindings::class, 46 | ], 47 | ]; 48 | 49 | /** 50 | * The application's route middleware. 51 | * 52 | * These middleware may be assigned to groups or used individually. 53 | * 54 | * @var array 55 | */ 56 | protected $routeMiddleware = [ 57 | 'auth' => \App\Http\Middleware\Authenticate::class, 58 | 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 59 | 'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class, 60 | 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class, 61 | 'can' => \Illuminate\Auth\Middleware\Authorize::class, 62 | 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, 63 | 'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class, 64 | 'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class, 65 | 'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class, 66 | 'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class, 67 | ]; 68 | } 69 | -------------------------------------------------------------------------------- /app/app/Http/UserTableView.php: -------------------------------------------------------------------------------- 1 | where(function ($query) use ($value) { 22 | Collection::wrap($value)->each(function ($value) use ($query) { 23 | $query 24 | ->orWhere('name', 'LIKE', "%{$value}%") 25 | ->orWhere('email', 'LIKE', "%{$value}%"); 26 | }); 27 | }); 28 | }); 29 | 30 | $queryBuilder = QueryBuilder::for(User::query()) 31 | ->defaultSort('name') 32 | ->allowedSorts(['name', 'email', 'language_code', 'created_at', 'score']) 33 | ->allowedFilters([ 34 | 'name', 35 | 'email', 36 | 'language_code', 37 | $globalSearch, 38 | AllowedFilter::custom('created_at', new FiltersDate()), 39 | NumberFilter::getQueryBuilderFilter('score') 40 | ]); 41 | 42 | return InertiaTable::make() 43 | ->name('users-table') 44 | ->resourceName('users') 45 | ->withQueryBuilder($queryBuilder) 46 | // ->paginateMethod($paginateMethod) 47 | // ->withResource($resource ? UserResource::class : null) 48 | ->withGlobalSearch() 49 | ->defaultSort('name') 50 | ->column(key: 'name', searchable: true, sortable: true, canBeHidden: false) 51 | ->column(key: 'email', searchable: true, sortable: true, headerClass: 'hidden md:table-cell', bodyClass: 'hidden md:table-cell') 52 | ->column(key: 'score', searchable: true, sortable: true, headerClass: 'hidden md:table-cell', bodyClass: 'hidden md:table-cell') 53 | ->column(key: 'language_code', label: 'Language', sortable: true) 54 | ->column(key: 'created_at', sortable: true, label: 'Created at') 55 | ->column(label: 'Actions') 56 | ->dateFilter(key: 'created_at', label: 'Date de création', format: 'Y-m-d') 57 | ->selectFilter(key: 'language_code', options: [ 58 | 'en' => 'English', 59 | 'nl' => 'Dutch', 60 | ], label: 'Language') 61 | ->numberFilter(key: 'score', label: 'Filtrer le score') 62 | ->withInfiniteScrolling() 63 | ->render('Users'); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | Please read and understand the contribution guide before creating an issue or pull request. 6 | 7 | ## Etiquette 8 | 9 | This project is open source, and as such, the maintainers give their free time to build and maintain the source code 10 | held within. They make the code freely available in the hope that it will be of use to other developers. It would be 11 | extremely unfair for them to suffer abuse or anger for their hard work. 12 | 13 | Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the 14 | world that developers are civilized and selfless people. 15 | 16 | It's the duty of the maintainer to ensure that all submissions to the project are of sufficient 17 | quality to benefit the project. Many developers have different skillsets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used. 18 | 19 | ## Viability 20 | 21 | When requesting or submitting new features, first consider whether it might be useful to others. Open 22 | source projects are used by many developers, who may have entirely different needs to your own. Think about 23 | whether or not your feature is likely to be used by other users of the project. 24 | 25 | ## Procedure 26 | 27 | Before filing an issue: 28 | 29 | - Attempt to replicate the problem, to ensure that it wasn't a coincidental incident. 30 | - Check to make sure your feature suggestion isn't already present within the project. 31 | - Check the pull requests tab to ensure that the bug doesn't have a fix in progress. 32 | - Check the pull requests tab to ensure that the feature isn't already in progress. 33 | 34 | Before submitting a pull request: 35 | 36 | - Check the codebase to ensure that your feature doesn't already exist. 37 | - Check the pull requests to ensure that another person hasn't already submitted the feature or fix. 38 | 39 | ## Requirements 40 | 41 | If the project maintainer has any additional requirements, you will find them listed here. 42 | 43 | - **[PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md)** - The easiest way to apply the conventions is to install [PHP Code Sniffer](https://pear.php.net/package/PHP_CodeSniffer). 44 | 45 | - **Add tests!** - Your patch won't be accepted if it doesn't have tests. 46 | 47 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 48 | 49 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](https://semver.org/). Randomly breaking public APIs is not an option. 50 | 51 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 52 | 53 | - **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](https://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting. 54 | 55 | **Happy coding**! 56 | -------------------------------------------------------------------------------- /js/Components/TableFilters/ToggleFilter.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 97 | -------------------------------------------------------------------------------- /app/config/queue.php: -------------------------------------------------------------------------------- 1 | env('QUEUE_CONNECTION', 'sync'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Queue Connections 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Here you may configure the connection information for each server that 24 | | is used by your application. A default configuration has been added 25 | | for each back-end shipped with Laravel. You are free to add more. 26 | | 27 | | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null" 28 | | 29 | */ 30 | 31 | 'connections' => [ 32 | 33 | 'sync' => [ 34 | 'driver' => 'sync', 35 | ], 36 | 37 | 'database' => [ 38 | 'driver' => 'database', 39 | 'table' => 'jobs', 40 | 'queue' => 'default', 41 | 'retry_after' => 90, 42 | 'after_commit' => false, 43 | ], 44 | 45 | 'beanstalkd' => [ 46 | 'driver' => 'beanstalkd', 47 | 'host' => 'localhost', 48 | 'queue' => 'default', 49 | 'retry_after' => 90, 50 | 'block_for' => 0, 51 | 'after_commit' => false, 52 | ], 53 | 54 | 'sqs' => [ 55 | 'driver' => 'sqs', 56 | 'key' => env('AWS_ACCESS_KEY_ID'), 57 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 58 | 'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'), 59 | 'queue' => env('SQS_QUEUE', 'default'), 60 | 'suffix' => env('SQS_SUFFIX'), 61 | 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 62 | 'after_commit' => false, 63 | ], 64 | 65 | 'redis' => [ 66 | 'driver' => 'redis', 67 | 'connection' => 'default', 68 | 'queue' => env('REDIS_QUEUE', 'default'), 69 | 'retry_after' => 90, 70 | 'block_for' => null, 71 | 'after_commit' => false, 72 | ], 73 | 74 | ], 75 | 76 | /* 77 | |-------------------------------------------------------------------------- 78 | | Failed Queue Jobs 79 | |-------------------------------------------------------------------------- 80 | | 81 | | These options configure the behavior of failed queue job logging so you 82 | | can control which database and table are used to store the jobs that 83 | | have failed. You may change them to any database / table you wish. 84 | | 85 | */ 86 | 87 | 'failed' => [ 88 | 'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'), 89 | 'database' => env('DB_CONNECTION', 'mysql'), 90 | 'table' => 'failed_jobs', 91 | ], 92 | 93 | ]; 94 | -------------------------------------------------------------------------------- /app/resources/js/Pages/Users.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 76 | -------------------------------------------------------------------------------- /.github/workflows/php.yml: -------------------------------------------------------------------------------- 1 | name: run-tests 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | strategy: 9 | fail-fast: true 10 | matrix: 11 | php: [8.2, 8.1] 12 | laravel: ["11"] 13 | dependency-version: [prefer-lowest, prefer-stable] 14 | 15 | name: L${{ matrix.laravel}} - P${{ matrix.php }} - ${{ matrix.dependency-version }} 16 | 17 | steps: 18 | - name: Checkout code 19 | uses: actions/checkout@v2 20 | 21 | - name: Cache node modules 22 | id: cache-npm 23 | uses: actions/cache@v3 24 | env: 25 | cache-name: cache-node-modules 26 | with: 27 | # npm cache files are stored in `~/.npm` on Linux/macOS 28 | path: ~/.npm 29 | key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} 30 | restore-keys: | 31 | ${{ runner.os }}-build-${{ env.cache-name }}- 32 | ${{ runner.os }}-build- 33 | ${{ runner.os }}- 34 | 35 | - if: ${{ steps.cache-npm.outputs.cache-hit == 'false' }} 36 | name: List the state of node modules 37 | continue-on-error: true 38 | run: npm list 39 | 40 | - name: "Install locked dependencies with npm" 41 | run: | 42 | npm ci --ignore-scripts 43 | 44 | - name: Build package 45 | run: | 46 | npm run build 47 | npm pack 48 | 49 | - name: Setup PHP 50 | uses: shivammathur/setup-php@v2 51 | with: 52 | php-version: ${{ matrix.php }} 53 | extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv, imagick, mysql, mysqli, pdo_mysql 54 | coverage: none 55 | 56 | - name: Downgrade to Laravel 9 57 | run: | 58 | cd app 59 | rm composer.json 60 | mv composer-l9.json composer.json 61 | if: "matrix.laravel == '9'" 62 | 63 | - name: Prepare demo app 64 | run: | 65 | cd app 66 | cp .env.example .env 67 | composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction --no-suggest 68 | npm ci --ignore-scripts 69 | npm run build 70 | touch database/database.sqlite 71 | php artisan migrate:fresh --seed 72 | php artisan dusk:chrome-driver `/opt/google/chrome/chrome --version | cut -d " " -f3 | cut -d "." -f1` 73 | 74 | - name: Start Chrome Driver 75 | run: | 76 | cd app 77 | ./vendor/laravel/dusk/bin/chromedriver-linux & 78 | 79 | - name: Run Laravel Server 80 | run: | 81 | cd app 82 | php artisan serve & 83 | 84 | - name: Execute tests 85 | run: | 86 | cd app 87 | php artisan dusk 88 | 89 | - name: Upload Screenshots 90 | if: failure() 91 | uses: actions/upload-artifact@v2 92 | with: 93 | name: screenshots 94 | path: app/tests/Browser/screenshots 95 | 96 | - name: Upload Console Logs 97 | if: failure() 98 | uses: actions/upload-artifact@v2 99 | with: 100 | name: console 101 | path: app/tests/Browser/console 102 | 103 | - name: Upload Logs 104 | if: failure() 105 | uses: actions/upload-artifact@v2 106 | with: 107 | name: logs 108 | path: app/storage/logs 109 | -------------------------------------------------------------------------------- /app/app/Http/UserTableWithCustomExport.php: -------------------------------------------------------------------------------- 1 | where(function ($query) use ($value) { 17 | Collection::wrap($value)->each(function ($value) use ($query) { 18 | $query 19 | ->orWhere('name', 'LIKE', "%{$value}%") 20 | ->orWhere('email', 'LIKE', "%{$value}%"); 21 | }); 22 | }); 23 | }); 24 | 25 | $queryBuilder = QueryBuilder::for(User::query()) 26 | ->defaultSort('name') 27 | ->allowedSorts(['name', 'email', 'created_at']) 28 | ->allowedFilters([ 29 | 'name', 30 | 'email', 31 | $globalSearch, 32 | ]); 33 | 34 | return InertiaTable::make() 35 | ->withQueryBuilder($queryBuilder) 36 | ->withGlobalSearch() 37 | ->defaultSort('name') 38 | ->column(key: 'name', searchable: true, sortable: true) 39 | ->column(key: 'email', searchable: true, sortable: true) 40 | ->column(key: 'created_at', sortable: true, label: 'Created at') 41 | ->column(label: 'Actions') 42 | // Exemple d'export personnalisé 43 | ->withExportCallback(function ($queryBuilder) { 44 | // Le callback recoit le QueryBuilder avec tous les filtres appliqués 45 | $data = $queryBuilder->get(); 46 | 47 | // Traitement personnalisé des données 48 | $processedData = $data->map(function ($user) { 49 | return [ 50 | 'ID' => $user->id, 51 | 'Nom complet' => strtoupper($user->name), 52 | 'Email' => $user->email, 53 | 'Date de création' => $user->created_at->format('d/m/Y'), 54 | 'Status' => $user->email_verified_at ? 'Vérifié' : 'Non vérifié', 55 | ]; 56 | }); 57 | 58 | // Génération du CSV personnalisé 59 | $csv = "\xEF\xBB\xBF"; // UTF-8 BOM 60 | 61 | // En-têtes 62 | if ($processedData->isNotEmpty()) { 63 | $headers = array_keys($processedData->first()); 64 | $csv .= implode(';', array_map(function ($header) { 65 | return '"' . str_replace('"', '""', $header) . '"'; 66 | }, $headers)) . "\n"; 67 | 68 | // Données 69 | foreach ($processedData as $row) { 70 | $csvRow = array_map(function ($value) { 71 | return '"' . str_replace('"', '""', $value) . '"'; 72 | }, array_values($row)); 73 | $csv .= implode(';', $csvRow) . "\n"; 74 | } 75 | } 76 | 77 | $filename = 'users-export-custom-' . now()->format('Y-m-d-H-i-s') . '.csv'; 78 | 79 | return response($csv) 80 | ->header('Content-Type', 'text/csv; charset=utf-8') 81 | ->header('Content-Disposition', 'attachment; filename="' . $filename . '"') 82 | ->header('Cache-Control', 'no-cache, no-store, must-revalidate') 83 | ->header('Pragma', 'no-cache') 84 | ->header('Expires', '0'); 85 | }) 86 | ->render('Users/Index'); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /tests/exportButton.test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils'; 2 | import { describe, test, expect, vi } from 'vitest'; 3 | import Table from '../js/Components/Table.vue'; 4 | import Pagination from '../js/Components/Pagination.vue'; 5 | 6 | // Mock the Inertia.js dependencies 7 | vi.mock('@inertiajs/vue3', () => ({ 8 | router: { 9 | visit: vi.fn() 10 | }, 11 | usePage: () => ({ 12 | props: { 13 | queryBuilderProps: {} 14 | } 15 | }) 16 | })); 17 | 18 | describe('Export Button Slot', () => { 19 | const defaultProps = { 20 | resource: { 21 | data: [ 22 | { id: 1, name: 'User 1' }, 23 | { id: 2, name: 'User 2' } 24 | ], 25 | meta: { 26 | current_page: 1, 27 | last_page: 1, 28 | per_page: 15, 29 | total: 2, 30 | from: 1, 31 | to: 2 32 | } 33 | }, 34 | showExportButton: true, 35 | name: 'test-table' 36 | }; 37 | 38 | test('renders default export button when no slot provided', () => { 39 | const wrapper = mount(Table, { 40 | props: defaultProps, 41 | global: { 42 | stubs: { 43 | Transition: false 44 | } 45 | } 46 | }); 47 | 48 | // The default export button should be rendered in the pagination 49 | const pagination = wrapper.findComponent(Pagination); 50 | expect(pagination.exists()).toBe(true); 51 | }); 52 | 53 | test('renders custom export button when slot provided', () => { 54 | const wrapper = mount(Table, { 55 | props: defaultProps, 56 | slots: { 57 | exportButton: ` 58 | 63 | ` 64 | }, 65 | global: { 66 | stubs: { 67 | Transition: false 68 | } 69 | } 70 | }); 71 | 72 | // Should render custom button instead of default 73 | const customButton = wrapper.find('.custom-export-btn'); 74 | expect(customButton.exists()).toBe(true); 75 | expect(customButton.text()).toBe('Custom Export'); 76 | }); 77 | 78 | test('pagination component passes exportUrl and translations to slot', () => { 79 | const testExportUrl = '/export/test'; 80 | const wrapper = mount(Pagination, { 81 | props: { 82 | showExportButton: true, 83 | exportUrl: testExportUrl, 84 | hasData: true, 85 | meta: { 86 | current_page: 1, 87 | last_page: 1, 88 | per_page: 15, 89 | total: 2, 90 | from: 1, 91 | to: 2 92 | } 93 | }, 94 | slots: { 95 | exportButton: ` 96 | 101 | ` 102 | } 103 | }); 104 | 105 | const slotElement = wrapper.find('.slot-test'); 106 | expect(slotElement.exists()).toBe(true); 107 | expect(slotElement.text()).toContain(testExportUrl); 108 | }); 109 | }); 110 | -------------------------------------------------------------------------------- /app/config/cache.php: -------------------------------------------------------------------------------- 1 | env('CACHE_DRIVER', 'file'), 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Cache Stores 23 | |-------------------------------------------------------------------------- 24 | | 25 | | Here you may define all of the cache "stores" for your application as 26 | | well as their drivers. You may even define multiple stores for the 27 | | same cache driver to group types of items stored in your caches. 28 | | 29 | | Supported drivers: "apc", "array", "database", "file", 30 | | "memcached", "redis", "dynamodb", "octane", "null" 31 | | 32 | */ 33 | 34 | 'stores' => [ 35 | 36 | 'apc' => [ 37 | 'driver' => 'apc', 38 | ], 39 | 40 | 'array' => [ 41 | 'driver' => 'array', 42 | 'serialize' => false, 43 | ], 44 | 45 | 'database' => [ 46 | 'driver' => 'database', 47 | 'table' => 'cache', 48 | 'connection' => null, 49 | 'lock_connection' => null, 50 | ], 51 | 52 | 'file' => [ 53 | 'driver' => 'file', 54 | 'path' => storage_path('framework/cache/data'), 55 | ], 56 | 57 | 'memcached' => [ 58 | 'driver' => 'memcached', 59 | 'persistent_id' => env('MEMCACHED_PERSISTENT_ID'), 60 | 'sasl' => [ 61 | env('MEMCACHED_USERNAME'), 62 | env('MEMCACHED_PASSWORD'), 63 | ], 64 | 'options' => [ 65 | // Memcached::OPT_CONNECT_TIMEOUT => 2000, 66 | ], 67 | 'servers' => [ 68 | [ 69 | 'host' => env('MEMCACHED_HOST', '127.0.0.1'), 70 | 'port' => env('MEMCACHED_PORT', 11211), 71 | 'weight' => 100, 72 | ], 73 | ], 74 | ], 75 | 76 | 'redis' => [ 77 | 'driver' => 'redis', 78 | 'connection' => 'cache', 79 | 'lock_connection' => 'default', 80 | ], 81 | 82 | 'dynamodb' => [ 83 | 'driver' => 'dynamodb', 84 | 'key' => env('AWS_ACCESS_KEY_ID'), 85 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 86 | 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 87 | 'table' => env('DYNAMODB_CACHE_TABLE', 'cache'), 88 | 'endpoint' => env('DYNAMODB_ENDPOINT'), 89 | ], 90 | 91 | 'octane' => [ 92 | 'driver' => 'octane', 93 | ], 94 | 95 | ], 96 | 97 | /* 98 | |-------------------------------------------------------------------------- 99 | | Cache Key Prefix 100 | |-------------------------------------------------------------------------- 101 | | 102 | | When utilizing the APC, database, memcached, Redis, or DynamoDB cache 103 | | stores there might be other applications using the same cache. For 104 | | that reason, you may prefix every cache key to avoid collisions. 105 | | 106 | */ 107 | 108 | 'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_') . '_cache_'), 109 | 110 | ]; 111 | -------------------------------------------------------------------------------- /app/app/Http/MultipleTablesView.php: -------------------------------------------------------------------------------- 1 | where(function ($query) use ($value) { 20 | Collection::wrap($value)->each(function ($value) use ($query) { 21 | $query 22 | ->orWhere('name', 'LIKE', "%{$value}%") 23 | ->orWhere('email', 'LIKE', "%{$value}%"); 24 | }); 25 | }); 26 | }); 27 | 28 | return InertiaTable::view('Dashboard', [ 29 | 'title' => 'Multi-Tables Dashboard' 30 | ]) 31 | ->table('users', function ($table) use ($globalSearch) { 32 | $table 33 | ->withQueryBuilderCallback(function () use ($globalSearch) { 34 | return QueryBuilder::for(User::query()) 35 | ->defaultSort('name') 36 | ->allowedSorts(['name', 'email', 'created_at', 'score']) 37 | ->allowedFilters([ 38 | 'name', 39 | 'email', 40 | $globalSearch, 41 | AllowedFilter::custom('created_at', new FiltersDate()), 42 | NumberFilter::getQueryBuilderFilter('score') 43 | ]); 44 | }) 45 | ->paginateMethod('paginate') 46 | ->withResource(UserResource::class) 47 | ->withGlobalSearch() 48 | ->defaultSort('name') 49 | ->column(key: 'name', searchable: true, sortable: true, canBeHidden: false) 50 | ->column(key: 'email', searchable: true, sortable: true) 51 | ->column(key: 'score', searchable: true, sortable: true) 52 | ->column(key: 'created_at', sortable: true, label: 'Created at') 53 | ->dateFilter(key: 'created_at', label: 'Date de création', format: 'Y-m-d') 54 | ->numberFilter(key: 'score', label: 'Filtrer le score'); 55 | }) 56 | ->table('admins', function ($table) use ($globalSearch) { 57 | $table 58 | ->withQueryBuilderCallback(function () use ($globalSearch) { 59 | return QueryBuilder::for(User::query()->where('is_admin', true)) 60 | ->defaultSort('name') 61 | ->allowedSorts(['name', 'email', 'created_at']) 62 | ->allowedFilters([ 63 | 'name', 64 | 'email', 65 | $globalSearch, 66 | AllowedFilter::custom('created_at', new FiltersDate()) 67 | ]); 68 | }) 69 | ->paginateMethod('paginate') 70 | ->withGlobalSearch() 71 | ->defaultSort('name') 72 | ->column(key: 'name', searchable: true, sortable: true, canBeHidden: false) 73 | ->column(key: 'email', searchable: true, sortable: true) 74 | ->column(key: 'created_at', sortable: true, label: 'Created at') 75 | ->dateFilter(key: 'created_at', label: 'Date de création', format: 'Y-m-d'); 76 | }) 77 | ->render(); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /tests/columnResize.test.js: -------------------------------------------------------------------------------- 1 | import { useColumnResize } from '../js/composables/useColumnResize.js'; 2 | 3 | // Tests for useColumnResize composable 4 | describe('useColumnResize', () => { 5 | const tableName = 'test-table'; 6 | let columnResize; 7 | 8 | beforeEach(() => { 9 | // Clear localStorage 10 | localStorage.clear(); 11 | columnResize = useColumnResize(tableName); 12 | }); 13 | 14 | afterEach(() => { 15 | localStorage.clear(); 16 | }); 17 | 18 | test('initializes with default values', () => { 19 | expect(columnResize.isResizing.value).toBe(false); 20 | expect(columnResize.resizingColumn.value).toBeNull(); 21 | expect(Object.keys(columnResize.columnWidths)).toHaveLength(0); 22 | }); 23 | 24 | test('sets and gets a column width', () => { 25 | const columnKey = 'test-column'; 26 | const width = 200; 27 | 28 | columnResize.setColumnWidth(columnKey, width); 29 | 30 | expect(columnResize.getColumnWidth(columnKey)).toBe(width); 31 | }); 32 | 33 | test('returns "auto" for a column without a defined width', () => { 34 | const columnKey = 'undefined-column'; 35 | 36 | expect(columnResize.getColumnWidth(columnKey)).toBe('auto'); 37 | }); 38 | 39 | test('saves and loads widths from localStorage', () => { 40 | const columnKey = 'test-column'; 41 | const width = 150; 42 | 43 | // Set a width 44 | columnResize.setColumnWidth(columnKey, width); 45 | 46 | // Verify it's saved in localStorage 47 | const saved = JSON.parse(localStorage.getItem(`table-column-widths-${tableName}`)); 48 | expect(saved[columnKey]).toBe(width); 49 | 50 | // Create a new instance to test loading 51 | const newColumnResize = useColumnResize(tableName); 52 | newColumnResize.loadColumnWidths(); 53 | 54 | expect(newColumnResize.getColumnWidth(columnKey)).toBe(width); 55 | }); 56 | 57 | test('resets all widths', () => { 58 | const column1 = 'column1'; 59 | const column2 = 'column2'; 60 | 61 | // Set widths 62 | columnResize.setColumnWidth(column1, 100); 63 | columnResize.setColumnWidth(column2, 200); 64 | 65 | // Verify they are set 66 | expect(columnResize.getColumnWidth(column1)).toBe(100); 67 | expect(columnResize.getColumnWidth(column2)).toBe(200); 68 | 69 | // Reset 70 | columnResize.resetColumnWidths(); 71 | 72 | // Verify they are reset 73 | expect(columnResize.getColumnWidth(column1)).toBe('auto'); 74 | expect(columnResize.getColumnWidth(column2)).toBe('auto'); 75 | expect(localStorage.getItem(`table-column-widths-${tableName}`)).toBeNull(); 76 | }); 77 | 78 | test('handles minimum width during resize', () => { 79 | // This test would require DOM event simulation 80 | // For now, we just test the minimum width logic 81 | const minimumWidth = 50; 82 | const startWidth = 100; 83 | const deltaX = -60; // Attempt to reduce to 40px 84 | 85 | const newWidth = Math.max(minimumWidth, startWidth + deltaX); 86 | 87 | expect(newWidth).toBe(minimumWidth); 88 | }); 89 | }); 90 | 91 | // Tests for ColumnResizeHandle component 92 | describe('ColumnResizeHandle', () => { 93 | test('emits resize start event', () => { 94 | // This test would require Vue Test Utils to test the component 95 | // Mock test for documentation 96 | const mockOnResize = jest.fn(); 97 | const columnKey = 'test-column'; 98 | const mockEvent = new MouseEvent('mousedown'); 99 | 100 | // Simulate function call 101 | mockOnResize(mockEvent, columnKey); 102 | 103 | expect(mockOnResize).toHaveBeenCalledWith(mockEvent, columnKey); 104 | }); 105 | }); 106 | 107 | console.log('Column resize tests - OK'); 108 | console.log('To run real tests, use Jest with Vue Test Utils'); 109 | -------------------------------------------------------------------------------- /js/Components/ButtonWithDropdown.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 124 | -------------------------------------------------------------------------------- /app/config/auth.php: -------------------------------------------------------------------------------- 1 | [ 17 | 'guard' => 'web', 18 | 'passwords' => 'users', 19 | ], 20 | 21 | /* 22 | |-------------------------------------------------------------------------- 23 | | Authentication Guards 24 | |-------------------------------------------------------------------------- 25 | | 26 | | Next, you may define every authentication guard for your application. 27 | | Of course, a great default configuration has been defined for you 28 | | here which uses session storage and the Eloquent user provider. 29 | | 30 | | All authentication drivers have a user provider. This defines how the 31 | | users are actually retrieved out of your database or other storage 32 | | mechanisms used by this application to persist your user's data. 33 | | 34 | | Supported: "session" 35 | | 36 | */ 37 | 38 | 'guards' => [ 39 | 'web' => [ 40 | 'driver' => 'session', 41 | 'provider' => 'users', 42 | ], 43 | ], 44 | 45 | /* 46 | |-------------------------------------------------------------------------- 47 | | User Providers 48 | |-------------------------------------------------------------------------- 49 | | 50 | | All authentication drivers have a user provider. This defines how the 51 | | users are actually retrieved out of your database or other storage 52 | | mechanisms used by this application to persist your user's data. 53 | | 54 | | If you have multiple user tables or models you may configure multiple 55 | | sources which represent each model / table. These sources may then 56 | | be assigned to any extra authentication guards you have defined. 57 | | 58 | | Supported: "database", "eloquent" 59 | | 60 | */ 61 | 62 | 'providers' => [ 63 | 'users' => [ 64 | 'driver' => 'eloquent', 65 | 'model' => App\Models\User::class, 66 | ], 67 | 68 | // 'users' => [ 69 | // 'driver' => 'database', 70 | // 'table' => 'users', 71 | // ], 72 | ], 73 | 74 | /* 75 | |-------------------------------------------------------------------------- 76 | | Resetting Passwords 77 | |-------------------------------------------------------------------------- 78 | | 79 | | You may specify multiple password reset configurations if you have more 80 | | than one user table or model in the application and you want to have 81 | | separate password reset settings based on the specific user types. 82 | | 83 | | The expire time is the number of minutes that each reset token will be 84 | | considered valid. This security feature keeps tokens short-lived so 85 | | they have less time to be guessed. You may change this as needed. 86 | | 87 | */ 88 | 89 | 'passwords' => [ 90 | 'users' => [ 91 | 'provider' => 'users', 92 | 'table' => 'password_resets', 93 | 'expire' => 60, 94 | 'throttle' => 60, 95 | ], 96 | ], 97 | 98 | /* 99 | |-------------------------------------------------------------------------- 100 | | Password Confirmation Timeout 101 | |-------------------------------------------------------------------------- 102 | | 103 | | Here you may define the amount of seconds before a password confirmation 104 | | times out and the user is prompted to re-enter their password via the 105 | | confirmation screen. By default, the timeout lasts for three hours. 106 | | 107 | */ 108 | 109 | 'password_timeout' => 10800, 110 | 111 | ]; 112 | -------------------------------------------------------------------------------- /app/config/mail.php: -------------------------------------------------------------------------------- 1 | env('MAIL_MAILER', 'smtp'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Mailer Configurations 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Here you may configure all of the mailers used by your application plus 24 | | their respective settings. Several examples have been configured for 25 | | you and you are free to add your own as your application requires. 26 | | 27 | | Laravel supports a variety of mail "transport" drivers to be used while 28 | | sending an e-mail. You will specify which one you are using for your 29 | | mailers below. You are free to add additional mailers as required. 30 | | 31 | | Supported: "smtp", "sendmail", "mailgun", "ses", 32 | | "postmark", "log", "array", "failover" 33 | | 34 | */ 35 | 36 | 'mailers' => [ 37 | 'smtp' => [ 38 | 'transport' => 'smtp', 39 | 'host' => env('MAIL_HOST', 'smtp.mailgun.org'), 40 | 'port' => env('MAIL_PORT', 587), 41 | 'encryption' => env('MAIL_ENCRYPTION', 'tls'), 42 | 'username' => env('MAIL_USERNAME'), 43 | 'password' => env('MAIL_PASSWORD'), 44 | 'timeout' => null, 45 | 'local_domain' => env('MAIL_EHLO_DOMAIN'), 46 | ], 47 | 48 | 'ses' => [ 49 | 'transport' => 'ses', 50 | ], 51 | 52 | 'mailgun' => [ 53 | 'transport' => 'mailgun', 54 | ], 55 | 56 | 'postmark' => [ 57 | 'transport' => 'postmark', 58 | ], 59 | 60 | 'sendmail' => [ 61 | 'transport' => 'sendmail', 62 | 'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'), 63 | ], 64 | 65 | 'log' => [ 66 | 'transport' => 'log', 67 | 'channel' => env('MAIL_LOG_CHANNEL'), 68 | ], 69 | 70 | 'array' => [ 71 | 'transport' => 'array', 72 | ], 73 | 74 | 'failover' => [ 75 | 'transport' => 'failover', 76 | 'mailers' => [ 77 | 'smtp', 78 | 'log', 79 | ], 80 | ], 81 | ], 82 | 83 | /* 84 | |-------------------------------------------------------------------------- 85 | | Global "From" Address 86 | |-------------------------------------------------------------------------- 87 | | 88 | | You may wish for all e-mails sent by your application to be sent from 89 | | the same address. Here, you may specify a name and address that is 90 | | used globally for all e-mails that are sent by your application. 91 | | 92 | */ 93 | 94 | 'from' => [ 95 | 'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'), 96 | 'name' => env('MAIL_FROM_NAME', 'Example'), 97 | ], 98 | 99 | /* 100 | |-------------------------------------------------------------------------- 101 | | Markdown Mail Settings 102 | |-------------------------------------------------------------------------- 103 | | 104 | | If you are using Markdown based email rendering, you may configure your 105 | | theme and component paths here, allowing you to customize the design 106 | | of the emails. Or, you may simply stick with the Laravel defaults! 107 | | 108 | */ 109 | 110 | 'markdown' => [ 111 | 'theme' => 'default', 112 | 113 | 'paths' => [ 114 | resource_path('views/vendor/mail'), 115 | ], 116 | ], 117 | 118 | ]; 119 | -------------------------------------------------------------------------------- /app/resources/js/Pages/Dashboard.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 71 | -------------------------------------------------------------------------------- /app/config/logging.php: -------------------------------------------------------------------------------- 1 | env('LOG_CHANNEL', 'stack'), 21 | 22 | /* 23 | |-------------------------------------------------------------------------- 24 | | Deprecations Log Channel 25 | |-------------------------------------------------------------------------- 26 | | 27 | | This option controls the log channel that should be used to log warnings 28 | | regarding deprecated PHP and library features. This allows you to get 29 | | your application ready for upcoming major versions of dependencies. 30 | | 31 | */ 32 | 33 | 'deprecations' => [ 34 | 'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'), 35 | 'trace' => false, 36 | ], 37 | 38 | /* 39 | |-------------------------------------------------------------------------- 40 | | Log Channels 41 | |-------------------------------------------------------------------------- 42 | | 43 | | Here you may configure the log channels for your application. Out of 44 | | the box, Laravel uses the Monolog PHP logging library. This gives 45 | | you a variety of powerful log handlers / formatters to utilize. 46 | | 47 | | Available Drivers: "single", "daily", "slack", "syslog", 48 | | "errorlog", "monolog", 49 | | "custom", "stack" 50 | | 51 | */ 52 | 53 | 'channels' => [ 54 | 'stack' => [ 55 | 'driver' => 'stack', 56 | 'channels' => ['single'], 57 | 'ignore_exceptions' => false, 58 | ], 59 | 60 | 'single' => [ 61 | 'driver' => 'single', 62 | 'path' => storage_path('logs/laravel.log'), 63 | 'level' => env('LOG_LEVEL', 'debug'), 64 | ], 65 | 66 | 'daily' => [ 67 | 'driver' => 'daily', 68 | 'path' => storage_path('logs/laravel.log'), 69 | 'level' => env('LOG_LEVEL', 'debug'), 70 | 'days' => 14, 71 | ], 72 | 73 | 'slack' => [ 74 | 'driver' => 'slack', 75 | 'url' => env('LOG_SLACK_WEBHOOK_URL'), 76 | 'username' => 'Laravel Log', 77 | 'emoji' => ':boom:', 78 | 'level' => env('LOG_LEVEL', 'critical'), 79 | ], 80 | 81 | 'papertrail' => [ 82 | 'driver' => 'monolog', 83 | 'level' => env('LOG_LEVEL', 'debug'), 84 | 'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class), 85 | 'handler_with' => [ 86 | 'host' => env('PAPERTRAIL_URL'), 87 | 'port' => env('PAPERTRAIL_PORT'), 88 | 'connectionString' => 'tls://' . env('PAPERTRAIL_URL') . ':' . env('PAPERTRAIL_PORT'), 89 | ], 90 | ], 91 | 92 | 'stderr' => [ 93 | 'driver' => 'monolog', 94 | 'level' => env('LOG_LEVEL', 'debug'), 95 | 'handler' => StreamHandler::class, 96 | 'formatter' => env('LOG_STDERR_FORMATTER'), 97 | 'with' => [ 98 | 'stream' => 'php://stderr', 99 | ], 100 | ], 101 | 102 | 'syslog' => [ 103 | 'driver' => 'syslog', 104 | 'level' => env('LOG_LEVEL', 'debug'), 105 | ], 106 | 107 | 'errorlog' => [ 108 | 'driver' => 'errorlog', 109 | 'level' => env('LOG_LEVEL', 'debug'), 110 | ], 111 | 112 | 'null' => [ 113 | 'driver' => 'monolog', 114 | 'handler' => NullHandler::class, 115 | ], 116 | 117 | 'emergency' => [ 118 | 'path' => storage_path('logs/laravel.log'), 119 | ], 120 | ], 121 | 122 | ]; 123 | -------------------------------------------------------------------------------- /js/Components/HeaderCell.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 88 | 89 | -------------------------------------------------------------------------------- /app/app/Http/UserTableWithExcelExport.php: -------------------------------------------------------------------------------- 1 | where(function ($query) use ($value) { 17 | Collection::wrap($value)->each(function ($value) use ($query) { 18 | $query 19 | ->orWhere('name', 'LIKE', "%{$value}%") 20 | ->orWhere('email', 'LIKE', "%{$value}%"); 21 | }); 22 | }); 23 | }); 24 | 25 | $queryBuilder = QueryBuilder::for(User::query()) 26 | ->defaultSort('name') 27 | ->allowedSorts(['name', 'email', 'created_at']) 28 | ->allowedFilters([ 29 | 'name', 30 | 'email', 31 | $globalSearch, 32 | ]); 33 | 34 | return InertiaTable::make() 35 | ->withQueryBuilder($queryBuilder) 36 | ->withGlobalSearch() 37 | ->defaultSort('name') 38 | ->column(key: 'name', searchable: true, sortable: true) 39 | ->column(key: 'email', searchable: true, sortable: true) 40 | ->column(key: 'created_at', sortable: true, label: 'Created at') 41 | ->column(label: 'Actions') 42 | // Exemple d'export Excel personnalisé (nécessite maatwebsite/excel) 43 | ->withExportCallback(function ($queryBuilder) { 44 | // Si vous utilisez Laravel Excel (maatwebsite/excel) 45 | // return Excel::download(new UsersExport($queryBuilder), 'users-export.xlsx'); 46 | 47 | // Exemple simple d'export JSON personnalisé 48 | $data = $queryBuilder->get(); 49 | 50 | // Vous pourriez aussi appeler un service d'export personnalisé 51 | $exportService = app(UserExportService::class); 52 | return $exportService->exportToJson($data); 53 | 54 | // Ou retourner les données dans un format différent 55 | $exportData = [ 56 | 'metadata' => [ 57 | 'exported_at' => now()->toISOString(), 58 | 'total_records' => $data->count(), 59 | 'filters_applied' => request()->get('filter', []), 60 | ], 61 | 'data' => $data->map(function ($user) { 62 | return [ 63 | 'id' => $user->id, 64 | 'name' => $user->name, 65 | 'email' => $user->email, 66 | 'created_at' => $user->created_at->toISOString(), 67 | 'profile_url' => route('users.show', $user->id), 68 | ]; 69 | }), 70 | ]; 71 | 72 | return response()->json($exportData) 73 | ->header('Content-Disposition', 'attachment; filename="users-export-' . now()->format('Y-m-d-H-i-s') . '.json"'); 74 | }) 75 | ->render('Users/Index'); 76 | } 77 | } 78 | 79 | // Service d'export exemple (optionnel) 80 | class UserExportService 81 | { 82 | public function exportToJson($data) 83 | { 84 | $processedData = $data->map(function ($user) { 85 | return [ 86 | 'user_id' => $user->id, 87 | 'full_name' => $user->name, 88 | 'email_address' => $user->email, 89 | 'registration_date' => $user->created_at->format('Y-m-d'), 90 | 'is_verified' => !is_null($user->email_verified_at), 91 | ]; 92 | }); 93 | 94 | return response()->json([ 95 | 'export_info' => [ 96 | 'format' => 'json', 97 | 'exported_at' => now()->toISOString(), 98 | 'record_count' => $processedData->count(), 99 | ], 100 | 'users' => $processedData, 101 | ])->header('Content-Disposition', 'attachment; filename="users-export-' . now()->format('Y-m-d-H-i-s') . '.json"'); 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /tests/CustomExportCallbackTest.php: -------------------------------------------------------------------------------- 1 | count(3)->create(); 21 | 22 | $queryBuilder = QueryBuilder::for(User::query()) 23 | ->allowedSorts(['name']); 24 | 25 | $customExportCalled = false; 26 | $receivedQueryBuilder = null; 27 | 28 | $table = InertiaTable::make() 29 | ->withQueryBuilder($queryBuilder) 30 | ->column('name', 'Name') 31 | ->withExportCallback(function ($queryBuilder) use (&$customExportCalled, &$receivedQueryBuilder) { 32 | $customExportCalled = true; 33 | $receivedQueryBuilder = $queryBuilder; 34 | 35 | // Return a simple response for testing 36 | return response('Custom export data') 37 | ->header('Content-Type', 'text/plain') 38 | ->header('Content-Disposition', 'attachment; filename="test-export.txt"'); 39 | }); 40 | 41 | // Simulate export request 42 | request()->merge(['do_export' => '1']); 43 | 44 | $response = $table->handleCsvExport(); 45 | 46 | $this->assertTrue($customExportCalled, 'Custom export callback should have been called'); 47 | $this->assertInstanceOf(QueryBuilder::class, $receivedQueryBuilder, 'Callback should receive QueryBuilder instance'); 48 | $this->assertEquals('Custom export data', $response->getContent()); 49 | $this->assertEquals('text/plain', $response->headers->get('Content-Type')); 50 | $this->assertStringContainsString('test-export.txt', $response->headers->get('Content-Disposition')); 51 | } 52 | 53 | /** @test */ 54 | public function it_falls_back_to_default_export_when_no_callback_defined() 55 | { 56 | // Create some test users 57 | User::factory()->count(2)->create([ 58 | 'name' => 'Test User', 59 | 'email' => 'test@example.com' 60 | ]); 61 | 62 | $queryBuilder = QueryBuilder::for(User::query()); 63 | 64 | $table = InertiaTable::make() 65 | ->withQueryBuilder($queryBuilder) 66 | ->column('name', 'Name') 67 | ->column('email', 'Email'); 68 | // No custom export callback defined 69 | 70 | // Simulate export request 71 | request()->merge(['do_export' => '1']); 72 | 73 | $response = $table->handleCsvExport(); 74 | 75 | // Should use default CSV export 76 | $this->assertStringContainsString('text/csv', $response->headers->get('Content-Type')); 77 | $this->assertStringContainsString('attachment', $response->headers->get('Content-Disposition')); 78 | 79 | $content = $response->getContent(); 80 | // Should contain CSV headers and UTF-8 BOM 81 | $this->assertStringStartsWith("\xEF\xBB\xBF", $content); 82 | $this->assertStringContainsString('"Name"', $content); 83 | $this->assertStringContainsString('"Email"', $content); 84 | } 85 | 86 | /** @test */ 87 | public function custom_export_callback_receives_filtered_query_builder() 88 | { 89 | // Create users with different names 90 | User::factory()->create(['name' => 'Alice']); 91 | User::factory()->create(['name' => 'Bob']); 92 | User::factory()->create(['name' => 'Charlie']); 93 | 94 | $queryBuilder = QueryBuilder::for(User::query()) 95 | ->allowedFilters(['name']); 96 | 97 | $receivedData = null; 98 | 99 | $table = InertiaTable::make() 100 | ->withQueryBuilder($queryBuilder) 101 | ->column('name', 'Name') 102 | ->withExportCallback(function ($queryBuilder) use (&$receivedData) { 103 | $receivedData = $queryBuilder->get(); 104 | 105 | return response('OK'); 106 | }); 107 | 108 | // Simulate filtered export request 109 | request()->merge([ 110 | 'do_export' => '1', 111 | 'filter' => ['name' => 'Alice'] 112 | ]); 113 | 114 | $table->handleCsvExport(); 115 | 116 | $this->assertNotNull($receivedData); 117 | $this->assertCount(1, $receivedData, 'Should only receive filtered data'); 118 | $this->assertEquals('Alice', $receivedData->first()->name); 119 | } 120 | } 121 | --------------------------------------------------------------------------------