Skip to content

A Vue component for quickly creating inertia JS powered tables.

Notifications You must be signed in to change notification settings

Harmonic/inertia-table-vue

Repository files navigation

Inertia JS Table for Vue

A Vue component for quickly and easily creating Inertia JS powered tables. Suggested usage with Inertia table for Laravel.

Laravel Preset - Click for video

Project setup

Requires Inertia JS to be installed in your project.

npm install --save inertia-table

or

yarn add inertia-table

Using inertia table

Installing globally

In your main js file:

import InertiaTable from 'inertia-table'
Vue.use(InertiaTable);

Using within a component

In your component .vue file

import InertiaTable from 'inertia-table'

export default {
  components: {
	InertiaTable,
	...
  },
  ...

Once installed simply use as any other component:

<inertia-table></inertia-table>

Configuration

The table can be configured with a number of paramaters:

Paramater Required Type Values Default Description
columns No Array ['column1', 'column2'] All columns in data array. The name of the columns (found in the data array) to display in the table.
data Yes Array [ 'column1' => 'value1', 'column2' => 'value2' ] [ 'column1' => 'value3', 'column2' => 'value4' ] None The data that can be displayed in the table.
id No String "ID" id The name of the column that contains a unique ID. Used to identify a unique row for CRUD operations.
routeName Yes String "users" None The name of the Inertia JS route related to the data being displayed.
createLink No String "users.create" null The route name to follow (via an inertia-link) when create button is clicked. Will not display create button if set to null (default).
filters No Object { search: '', trashed: '' } null Data filter information returned from server (see Inertia Table for Laravel server example.)
order No Object { orderColumn: 'column1', orderDirection: 'asc' } null Select a column to order (by column name) and the direction to order (asc or desc).

Custom columns

By default the table will look for the data value in your data array parameter. If you wish to format your column differently, or add additional columns to your table you can do this using Vue's scoped slots. Your slot name will be the column name and the row data is availabe in the column object. A basic example:

<inertia-table 
  :data="users" 
  id="id" 
  :order="order" 
  :filters="filters" 
  :columns="columns" 
  routeName="users" 
  createLink="users.create" 
  @item-selected="show">
    <template slot-scope="column" slot="company">
      {{ column.item.companyName }}
    </template>
</inertia-table>                                                     

In the above example we are creating a new column "company" (as per the slot attribute). The slot-scope attribute contains the column details so we can then display them however we want. You can simplify your code to access just the column item if you prefer:

<inertia-table 
  :data="users" id="id" 
  :order="order" 
  :filters="filters" 
  :columns="columns" 
  routeName="users" 
  createLink="users.create" 
  @item-selected="show">
    <template slot-scope="{ item }" slot="company">
      {{ item.companyName }}
    </template>
</inertia-table>                                                     

This technique allows you to completely customise what is displayed in any column of the table, this may include HTML or other Vue components, eg.

<inertia-table 
  :data="users" id="id" 
  :order="order" 
  :filters="filters" 
  :columns="columns" 
  routeName="users" 
  createLink="users.create" 
  @item-selected="show">
    <a slot-scope="{ item }" slot="subscription" :href="`/subscriptions?search=${item.id}`" class="underline" v-on:click.stop="">View</a>
</inertia-table>   

The above example generates an HTML link to display in a subscription column.

Events

Event Description
item-selected Returns the details of the data row clicked on in the table.

Example

The below example assumes you are using harmonic/inertia-table for Laravel to create a backend controller that handles delivery of a User array and filters/orders the data.

<inertia-table 
  :data="users" 
  id="id" 
  :order="order" 
  :filters="filters" 
  :columns="columns" 
  routeName="users" 
  createLink="users.create" 
  @item-selected="show">
</inertia-table>
<script>
import InertiaTable from 'inertia-table'

export default {
  components: {
    InertiaTable
  },
  props: {
    users: Array,
    filters: Object,
    order: Object,
  },
  data() {
    return {
      columns: ["name", "email"],
    }
  },
  methods: {
    show(user) {
      this.$inertia.replace(this.route('users.edit', user.id));
    }
  },
}
</script>