### Install Inertia Vue Table Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/getting-started.html Installs the Inertia Vue Table package using Composer for the backend and npm for the frontend. ```bash $ composer require humweb\/inertia-table $ npm i inertia-vue-table ``` -------------------------------- ### Install Inertia Vue Table Package Source: https://github.com/humweb/inertia-vue-table/blob/main/README.md Instructions for installing the inertia-vue-table package using Composer for Laravel and Go get for Go projects, followed by npm installation for frontend integration. ```bash composer require humweb\inertia-table ``` ```go go get github.com/humweb/inertia-go // Checkout https://github.com/humweb/inertia-go for mor info ``` ```npm // Laravel npm i inertia-vue-table@1.04 // Go npm i inertia-vue-table ``` -------------------------------- ### Import Component and Mixin Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/getting-started.html Imports the necessary Table component and HasInertiaTable mixin from the 'inertia-vue-table' library into your Vue component. ```javascript import {Table, HasInertiaTable} from 'inertia-vue-table'; ``` -------------------------------- ### Add Mixin to Component Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/getting-started.html Applies the HasInertiaTable mixin to your Vue component to enable Inertia Table functionality. ```javascript mixins: [HasInertiaTable] ``` -------------------------------- ### Basic HTML Structure Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/index.html This HTML snippet represents the basic navigation and content structure for the Inertia Vue Table documentation page. It includes a skip-to-content link, a header with the project title and search, and a main content area with introductory text and links to get started and view the GitHub repository. ```html Inertia Vue Table Skip to content
Appearance

InertiaVueTable

Laravel, Inertia & Vue Powered Tables

Inertia, Vue, and PHP combined to create a perfect symphony.

Get Started View on GitHub
``` -------------------------------- ### Define User Resource Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/resources.html Example of defining a UserResource class that extends the base Resource class provided by Humweb\Table. It specifies the Eloquent model to be used. ```php class UserResource extends Resource { protected $model = User::class; } ``` -------------------------------- ### Add Table Component to Template Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/getting-started.html Renders the Inertia Vue Table component in your Vue template, binding data and handling sorting events. ```javascript ``` -------------------------------- ### Page Not Found Structure Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/404.html Basic HTML structure for a 404 'Page Not Found' error page, including a title, a quote, and a link back to the homepage. ```html 404 | Inertia Vue Table (()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})(); [Skip to content](#VPContent) [Inertia Vue Table](/inertia-vue-table/) SearchK Appearance 404 PAGE NOT FOUND ============== > But if you don't change your direction, and if you keep looking, you may end up where you are heading. [Take me home](/inertia-vue-table/) ``` -------------------------------- ### Import Component and Mixin Source: https://github.com/humweb/inertia-vue-table/blob/main/README.md Demonstrates how to import the necessary Table component and HasInertiaTable mixin from the inertia-vue-table package into your Vue.js components. ```javascript import {Table, HasInertiaTable} from 'inertia-vue-table'; mixins: [HasInertiaTable] ``` -------------------------------- ### Initialize Theme Appearance Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/index.html This JavaScript snippet initializes the theme appearance based on local storage or system preferences. It checks for the 'vitepress-theme-appearance' item in local storage and applies the 'dark' class to the document's root element if the theme is set to 'dark' or 'auto' and the system prefers dark mode. ```javascript (() => { const e = localStorage.getItem("vitepress-theme-appearance") || "", a = window.matchMedia("(prefers-color-scheme: dark)").matches; (!e || e === "auto" ? a : e === "dark") && document.documentElement.classList.add("dark"); })(); ``` -------------------------------- ### Theme Appearance Initialization Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/what-is-inertiavuetable.html Initializes the theme appearance based on local storage or system preferences. It adds a 'dark' class to the document element if the dark theme is selected or preferred. ```javascript (()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})(); ``` -------------------------------- ### Inertia Vue Table - Theme Initialization Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html Initializes the theme based on local storage or system preference. Adds a 'dark' class to the document element if the theme is set to dark. ```javascript (()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||"auto"===e?a:"dark"===e)&&document.documentElement.classList.add("dark")})(); ``` -------------------------------- ### Inertia Vue Table Field Configuration Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/fields.html Demonstrates how to configure fields in Inertia Vue Table using a fluent API for sorting, visibility, searchability, and actions. ```php ->actions([ ['label' => 'Edit', 'route' => 'admin.roles.edit', 'params' => ['id']] ]); ``` -------------------------------- ### Theme Toggler Script Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/404.html This JavaScript snippet handles the theme toggling logic for the documentation site. It checks local storage for the preferred theme or uses the system's dark mode preference to apply the 'dark' class to the document element. ```javascript (()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})(); ``` -------------------------------- ### Inertia Vue Table Initialization Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/props.html This JavaScript snippet initializes the theme appearance based on local storage or system preferences. It adds a 'dark' class to the document element if the dark theme is selected. ```javascript (()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})(); ``` -------------------------------- ### Add Table Component to Template Source: https://github.com/humweb/inertia-vue-table/blob/main/README.md Shows how to integrate the Inertia Vue Table component into your Vue template, binding it to your data records and pagination information. ```html
``` -------------------------------- ### Define Table Fields Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/resources.html Configures the fields to be displayed in the table, including their labels, corresponding database columns, and whether they are sortable or searchable. ```php public function fields(): FieldCollection { return new FieldCollection([ ID::make('ID', 'id')->sortable()->searchable(), Text::make('Name', 'name')->sortable()->searchable(), Text::make('Email')->sortable()->searchable(), Text::make('Created', 'created_at')->sortable()->searchable(), Text::make('Updated', 'updated_at')->sortable()->searchable(), ]); } ``` -------------------------------- ### Theme Appearance Script Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/resources.html This JavaScript snippet automatically applies the 'dark' class to the document's root element based on user's system preference or local storage setting for theme appearance. ```javascript (()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})(); ``` -------------------------------- ### Implement Global Filter Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/resources.html Provides a global search functionality that queries across multiple fields (ID, name, email) based on the input value. It handles both numeric and string searches. ```php public function globalFilter($query, $value) { return $query->where(function ($query) use ($value) { $query->when(is_numeric($value), function ($query, $bool) use ($value) { $query->orWhere('id', $value); })->when(!is_numeric($value), function ($query, $bool) use ($value) { $query->orWhere('name', 'like', "%{$value}%") ->orWhere('email', 'like', "%{$value}%"); }); }); } ``` -------------------------------- ### Table Props Schema Definition Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/props.html Defines the structure for table configuration, including columns, filters, search parameters, pagination, and sorting. This schema is passed to the table via v-model. ```json { "columns": [ { "component": "text-field", "attribute": "id", "name": "ID", "nullable": false, "sortable": true, "visible": true, "searchable": true, "value": null }, { "component": "text-field", "attribute": "name", "name": "Name", "nullable": false, "sortable": true, "visible": true, "searchable": true, "value": null } ], "filters": [ { "component": "text-filter", "field": "name", "label": "Name", "value": null, "rules": ["alpha"] } ], "search": {}, "page": null, "sort": null, "perPage": null } ``` -------------------------------- ### Transform Data for Display Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/resources.html Defines a transformation closure to format the data for each user record before it's displayed in the table. It specifies how each field should be presented. ```php public function transform() { return fn($user) => [ 'id' => $user->id, 'name' => $user->name, 'email' => $user->email, 'created_at' => $user->created_at->format('Y-m-d'), 'updated_at' => $user->updated_at->format('Y-m-d'), ]; } ``` -------------------------------- ### Theme Appearance Toggle Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/fields.html This JavaScript code snippet checks the user's preferred theme (from local storage or system preferences) and applies the 'dark' class to the document element if necessary. ```javascript (()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})(); ``` -------------------------------- ### Define Single Field Filters Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/resources.html Sets up specific filters for individual fields, such as a text filter for the 'name' field, with options for full-text search and validation rules. ```php public function filters() { return new FilterCollection([ TextFilter::make('name') ->fullSearch() ->rules('alpha'), ]); } ``` -------------------------------- ### Inertia Vue Table - Add Search Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'addSearch' slot facilitates adding dynamic search fields. It offers 'hasSearchRows' to check for enabled search fields, a 'search' array of search configurations, and an 'onAdd' function to enable fields. ```vue ``` -------------------------------- ### Inertia Vue Table - Global Search Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'globalSearch' slot allows for the implementation of a global search input. It provides a 'search' object for accessing the global search value and a 'changeGlobalSearchValue' function to update it. ```vue ``` -------------------------------- ### Inertia Vue Table - Action Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'action' slot is used to define custom actions for each row. It receives the 'record' object for the current row, allowing actions like editing or deleting. ```vue
``` -------------------------------- ### Inertia Vue Table - Search Rows Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'searchRows' slot manages individual row search inputs. It provides 'hasSearches' to check for active searches, a 'search' array of search field configurations, and functions to 'removeSearch' and 'updateValue'. ```vue ``` -------------------------------- ### Inertia Vue Table - Head Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'head' slot allows customization of the table's header row. It receives 'columns' for column definitions and 'sortHandler' to manage column sorting. ```vue
``` -------------------------------- ### Inertia Vue Table - Toggle Columns Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'toggleColumns' slot allows users to toggle column visibility. It provides 'hasColumns' to check for enabled columns, a 'columns' array, and a 'change' function to update column visibility. ```vue ``` -------------------------------- ### Inertia Vue Table - Filters Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'filters' slot enables custom filter UI. It provides a 'hasFilters' helper, a 'filters' array with filter definitions, and a 'changeFilterValue' function to update filter states. ```vue ``` -------------------------------- ### Inertia Vue Table - Body Slot Source: https://github.com/humweb/inertia-vue-table/blob/main/docs/guide/slots.html The 'body' slot customizes the table's body rows. It provides 'records' for row data and 'columns' for column definitions, enabling custom rendering of cells and actions. ```vue
``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.