Advanced Data Table Component For Vue.js

Install & Download:

# NPM
$ npm i @andresouzaabreu/vue-data-table --save

Description:

A data table component that adds sorting, filtering, pagination, and data exporting functionalities to your HTML table.

Basic usage:

1. Import and register the data table component.

import DataTable from '@andresouzaabreu/vue-data-table'
import '@andresouzaabreu/vue-data-table/dist/DataTable.css'
Vue.component("data-table", DataTable);

2. Create a basic data table in your app.

<data-table v-bind="parametersTable" @actionTriggered="handleAction" />

export default {
  name: "App",
  computed: {
    parametersTable() {
      return {
        data: tabularData,
        actionMode: "multiple",
        columnKeys: [
          "name",
          "email",
          "gender",
          "country",
          "job",
          "city",
          "created_at"
        ]
      };
    },
  },
  methods: {
    handleAction(actionName, data) {
      console.log(actionName, data);
      window.alert("check out the console to see the logs");
    }
  }
};

3. Default props.

actions: {
  type: Array,
  default: () => ["view", "edit", "delete"],
},
actionComponents: {
  type: Object,
  required: false,
  default: () => ({
      view: ButtonView,
      edit: ButtonEdit,
      delete: ButtonDelete,
  })
},
actionMode: {
  type: String,
  default: "disabled",
  validator: value => ["disabled", "multiple", "single"].includes(value)
},
allowedExports: {
  type: Array,
  default: () => ["xls", "csv", "json", "txt"],
  validator: exports => exports.every(type => ["xls", "csv", "json", "txt"].includes(type)),
},
columns: {
  type: Array,
  required: false,
},
columnKeys: {
  type: Array,
  required: false,
},
data: {
  type: Array,
  required: true,
},
defaultColumn: {
  type: Object,
  required: false,
  default: () => ({
      sortable: true,
      searchable: true,
  })
},
defaultPerPage: {
  type: Number,
  default: 10,
},
perPageSizes: {
  type: Array,
  default: () => [10, 25, 50, 100],
},
lang: {
  type: String,
  default: "en",
},
showEntriesInfo: {
  type: Boolean,
  default: true,
},
showPerPage: {
  type: Boolean,
  default: true,
},
showDownloadButton: {
  type: Boolean,
  default: true,
},
showPagination: {
  type: Boolean,
  default: true,
},
showSearchFilter: {
  type: Boolean,
  default: true,
},
sortingMode: {
  type: String,
  default: "multiple",
  validator: (value) => ["multiple", "single", "disabled"].includes(value),
},
sortingIndexComponent: {
  type: Object,
  default: () => DataTableSortingIndex,
},
sortingIconComponent: {
  type: Object,
  default: () => DataTableSortingIcon,
},
tableClass: {
  type: String,
  default: "table table-striped table-hover",
},
text: {
  type: Object,
  required: false,
},
unsafeHTML: {
  type: Boolean,
  default: false
}