Inertia js datatable for Laravel

This package is written in vue 3 with the support of Inertia js for Laravel projects.

Features

• Global search
• Sorting column
• Pagination (support for Eloquent)

Compatibility

• Vue 3
• Inertia.js
• Tailwind CSS
• Laravel 9

Limitations

• Not responsive for mobile display

Installation

You can install the package via npm:

npm install @velitsol/inertia-vue-datatable

Usage

Register in app.js

In your app.js file, you can register the component globally to make it available across your entire Vue.js application.

import { InertiaDataTable } from "@velitsol/inertia-vue-datatable";

createApp(App).component("InertiaDataTable", InertiaDataTable).mount("#app");

By registering the component globally, you can use it in any Vue component template without the need for importing it specifically.

Register locally in a Vue component

If you prefer to register the component locally in a specific Vue component, you can do so as follows:

import { InertiaDataTable } from "@velitsol/inertia-vue-datatable";

export default {
  components: {
    InertiaDataTable,
  },
  // ...
};

Props

| Prop | Type | Default | Description | | --------- | -------- | ------------------------- | ---------------------------------- | | records | object | null | Paginated response from Laravel | | columns | object | null | Heading cloumns of table | | actions | array | ['view','edit','delete] | Actions of table | | _route | string | null | Route prop is required for actions |

Slots

| Slot | Return | Description | | ---------- | ----------------- | ------------------- | | heading | column object | Column heading | | row | record object | Table row | | column | record object | Table column | | action | record object | Table action column | | pagination | links object | Table pagination | | empty | No Data Available | Table empty |

Examples

General

<script>
import { reactive } from "vue";

export default {

  props: ["events"],
  setup(props) {

    /**
     *  key should database field name
     *  heading is column heading in datatable
     *  sortable represents a column should sortable or not
     *  format callback : it returns single
     *  _record callback : it returns row
     */
    const dataTableColumns = reactive([
     { key: "name", heading: "event", sortable: 1 },
      {
        key: "start_date",
        heading: "start_date",
        sortable: 1,
        format: function (v) {
          return moment(v).format("MM/DD/YYYY h:mm:ss A");
        },
      },
      {
        key: "end_date",
        heading: "End Date",
        sortable: 1,
        format: function (v) {
          return moment(v).format("MM/DD/YYYY h:mm:ss A");
        },
      {
        key: "published_app",
        heading: "Published App",
        sortable: 1,
      },
      {
        key: "published_web",
        heading: "Published Web",
        sortable: 0,
      },
    ]);

    return { dataTableColumns };
  },
};
</script>

<template>
     <inertia-data-table
          :records="events"
          :columns="dataTableColumns"
          :_route="'events'"
          :actions="['view', 'edit', 'delete']">
      </inertia-data-table>
</template>

Heading slot

<script>
import { reactive } from "vue";

export default {

  props: ["events"],
  setup(props) {

    /**
     *  key should database field name
     *  heading is column heading in datatable
     *  sortable represents a column should sortable or not
     *  format callback : it returns single
     *  _record callback : it returns row
     */
    const dataTableColumns = reactive([
     { key: "name", heading: "event", sortable: 1 },
      {
        key: "start_date",
        heading: "start_date",
        sortable: 1,
        format: function (v) {
          return moment(v).format("MM/DD/YYYY h:mm:ss A");
        },
      },
      {
        key: "end_date",
        heading: "End Date",
        sortable: 1,
        format: function (v) {
          return moment(v).format("MM/DD/YYYY h:mm:ss A");
        },
      {
        key: "published_app",
        heading: "Published App",
        sortable: 1,
      },
      {
        key: "published_web",
        heading: "Published Web",
        sortable: 0,
      },
    ]);

    return { dataTableColumns };
  },
};
</script>

<template>
     <inertia-data-table
          :records="events"
          :columns="dataTableColumns"
          :_route="'events'"
          :actions="['view', 'edit', 'delete']">

             /**
             *  Syntax : #heading-column_key
             *  Return : It returns column object
             *  Description : You can add any icon with column heading.
             */

            <template #heading-name="{ column }"> Event Name </template>
            <template #heading-start_date="{ column }">  Event Start Date </template>

      </inertia-data-table>
</template>

Column slot

<script>
import { reactive } from "vue";

export default {

  props: ["events"],
  setup(props) {

    /**
     *  key should database field name
     *  heading is column heading in datatable
     *  sortable represents a column should sortable or not
     *  format callback : it returns single
     *  _record callback : it returns row
     */
    const dataTableColumns = reactive([
     { key: "name", heading: "event", sortable: 1 },
      {
        key: "start_date",
        heading: "start_date",
        sortable: 1,
        format: function (v) {
          return moment(v).format("MM/DD/YYYY h:mm:ss A");
        },
      },
      {
        key: "end_date",
        heading: "End Date",
        sortable: 1,
        format: function (v) {
          return moment(v).format("MM/DD/YYYY h:mm:ss A");
        },
      {
        key: "published_app",
        heading: "Published App",
        sortable: 1,
      },
      {
        key: "published_web",
        heading: "Published Web",
        sortable: 0,
      },
    ]);

    return { dataTableColumns };
  },
};
</script>

<template>
     <inertia-data-table
          :records="events"
          :columns="dataTableColumns"
          :_route="'events'"
          :actions="['view', 'edit', 'delete']">

             /**
             *  Syntax : #heading-column_key
             *  Return : It returns column object
             *  Description : You can add any icon with column heading.
             */

            <template #heading-name="{ column }"> Event Name </template>
            <template #heading-start_date="{ column }">  Event Start Date </template>

      </inertia-data-table>
</template>

License

This project is licensed under the MIT License. Make sure to mention the license type and provide a link to the full license file.

Credits

If your package includes code or assets from other projects, provide proper attribution or credits to the original authors or sources.

Support

If users encounter any issues or have questions, provide instructions on how they can reach out for support. This can be through a GitHub issue tracker, email, or any other communication channel.