Notorious Public Menace

    inertia-table

    1.0.8 • Public • Published

    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>

    Keywords

    none

    Install

    npm i inertia-table

    DownloadsWeekly Downloads

    53

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    4.76 MB

    Total Files

    20

    Last publish

    Collaborators

    • craigharman