DOCSEARCHbyAlgolia
Submit Docs

InertiaVueTable

website·Indexed 30 days ago

https://humweb.github.io/inertia-vue-table

A table package built with Laravel on the backend and Inertia and Vue on the frontend. It provides tools for defining resource classes, field types, and table schemas to easily build data tables.

Tokens
2.4K
Snippets
18
Records
26
Agent score
71%

What's inside InertiaVueTable

  2. Overview of InertiaVueTable

    InertiaVueTable is a toolset designed to create data tables by combining Laravel (PHP), Inertia, and Vue. It allows developers to build powerful table interfaces leveraging the strengths of these three technologies.

  3. Define a Table Resource class

    To use Inertia Tables, you must create a Resource class that extends Humweb\Table\Resource. You must specify the underlying Eloquent model by setting the $model protected property.
    class UserResource extends Resource
{
    protected $model = User::class;
}

  4. Integrate Table component and HasInertiaTable mixin

    Import the Table component and the HasInertiaTable mixin from the inertia-vue-table package. The HasInertiaTable mixin should be added to the mixins array of your Vue component to provide the necessary table logic.
    import { Table, HasInertiaTable } from 'inertia-vue-table';

export default {
  mixins: [HasInertiaTable],
  components: {
    Table
  }
}

  6. Customize the table body using the #body slot

    The #body slot allows for a custom implementation of the table rows. It provides access to the records (the data rows) and the columns definitions.
    <Table>
    <template #body="{records, columns}">
        <tr v-for="record in records">
            <td v-for="field in tableData.columns" v-show="field.visible">
                {{ record[field.attribute] }}
            </td>
            <td><button>Edit</button></td>
        </tr>
    </template>
</Table>

  7. Define row actions using the #action slot

    The #action slot is used to render a custom action cell for each row. It provides the record object representing the data for the current row.
    <Table>
    <template #action="{record}">
        <td>
            <button @edit="editRow(record.id)">Edit</button>  
        </td>
    </template>
</Table>

  8. Configure Inertia Vue Table component props

    The Table component accepts the following props:

    • modelValue (Object): The table configuration schema (passed via v-model).
    • records (Array): The data records to be displayed in the table.
    • errors (Object): Error messages associated with filters.
    • showFilters (Boolean, default: true): Determines whether the filters container is visible.
    <Table 
  v-model="tableSchema" 
  :records="dataRecords" 
  :errors="filterErrors" 
  :show-filters="true" 
/>

  9. Configure table columns in the schema

    The columns array in the table schema defines how data attributes are rendered and behaved. Each column object supports properties for visibility, sorting, and searching.
    [
  {
    "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
  }
]

  10. Define the Table schema model

    The table configuration schema is passed via v-model and supports the following fields to manage table state and behavior:

    • columns (Array): Definition of the table columns.
    • filters (Array): Definition of the filter fields.
    • search (Object): Search configuration.
    • page (Number): Current page index.
    • sort (String): Current sorting field.
    • perPage (Number): Number of records per page.

  11. Configure table filter rules in the schema

    The rules (or filters) array in the table schema defines the filter inputs available to the user, including the component type and validation rules (e.g., 'alpha').
    [
  {
    "component": "text-filter",
    "field": "name",
    "label": "Name",
    "value": null,
    "rules": ["alpha"]
  }
]

  12. Transform Resource data for display

    Use the transform() method to define how the model data is formatted before being sent to the frontend. This method should return a closure that takes the model instance and returns an array of formatted values.
    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'),
    ];
}