v3-datatable v1.1.1

v3-datatable

A Datatable component for js 3 with the power of searching, sorting, pagination and customization.

It's very easy to install this component in your on-going or new projects. import component and css from the package and just pass required props in component will render the datatable in the view. CLICK HERE TO CHECK THE DEMO

• Installation
• Getting Started
• Usage
• Selectable
• Searchable
• Sortable
• Alignment
• Slot
• CSS
• Props Reference
• License

Installation

# install via npm :

npm install v3-datatable

# or

# install via yarn

yarn add v3-datatable

Getting Started

Import css in main.js

// main.js

import "v3-datatable/css"

Register it globally or just import it in the file where you want to use it.

// register it globally (main.js)
import DataTable from "v3-datatable"

app.component("DataTable", DataTable)

// or

// Import in the specific file
import DataTable from "v3-datatable"

export default {
  components: {
    DataTable
  }
}

Usage

There are 3 props must required to render the datatable.

• unique-key - This will be key name of the object which are unique in all records. ex.: id (Duplicate keys will cause render errors.)
• headers - An array of objects which has definition of headers and records
• Records - An array of object with the set of values to be show on datatable

Check Props Reference section for more info with the other props

<template>
  <Datatable
    unique-key="id"
    :headers="headers"
    :records="records"
    :loading="loading"
  >
  </Datatable>
</template>

import DataTable from "v3-datatable";

export default {
  components: {
    DataTable
  },
  created() {
    this.getDummyJSONData()
  },
  data() {
    return {
      headers: [
        { text: 'Title', key: 'title' },
        { text: 'Price', key: 'price' },
        { text: 'Discount (%)', key: 'discountPercentage' },
        { text: 'Rating', key: 'rating' },
        { text: 'Stock', key: 'stock' },
        { text: 'Action', key: 'action' }
      ],
      records: [],
      loading: false
    }
  },
  methods: {
    getDummyJSONData() {
      this.loading = true;

      fetch("https://dummyjson.com/products?limit=100")
      .then((res) => res.json())
      .then((res) => {
        this.records = res.products
      })
      .catch((err) => {
        console.error(err)
      })
      .finally(() => {
        this.loading = false
      })
    } 
  }
}

Selectable

When you pass :selectable="true" props it will render checkbox in the datatable for selection of rows. by default this props value is false so you will not see any checkbox. Pass v-model props in component to get selected rows.

<template>
  <Datatable
    unique-key="id"
    :headers="headers"
    :records="records"
    :loading="loading"
    :selectable="true"
    v-model="selectedRow"
  >
  </Datatable>
</template>

import DataTable from "v3-datatable";

export default {
  ...,
  data() {
    return {
      ...,
      selectedRow: {}
    }
  },
  ...,
}

By default, v-model value must be an empty object ({}) if you have not pass multiple or set multiple value as false. But, when you pass multiple props values true then v-model value must be an empty array ([]) default.

Searchable

By default v3-datatable provide you a simple searching between the provided records. pass searchable: true in the columns which you want to search and v3-datatable will search when you type in search box or if you pass search value in v-model

Don't forget to pass v-model:search="searchString" props in components it will redner search component in view.

import DataTable from "v3-datatable";

export default {
  ...,
  data() {
    return {
      searchString: "",
      headers: [
        { text: 'Title', key: 'title', searchable: true },
        { text: 'Price', key: 'price', searchable: true },
        { text: 'Discount (%)', key: 'discountPercentage' },
        { text: 'Rating', key: 'rating' },
        { text: 'Stock', key: 'stock', searchable: true },
        { text: 'Action', key: 'action' }
      ],
      ...,
    }
  },
  ...,
}

Sortable

v3-datatable also provide sorting of columns. by passing sortable: true in headers. it will sort the columns in ascending and descending order.

import DataTable from "v3-datatable";

export default {
  ...,
  data() {
    return {
      headers: [
        { text: 'Title', key: 'title', searchable: true },
        { text: 'Price', key: 'price', searchable: true, sortable: true },
        { text: 'Discount (%)', key: 'discountPercentage'},
        { text: 'Rating', key: 'rating', sortable: true },
        { text: 'Stock', key: 'stock', searchable: true },
        { text: 'Action', key: 'action' }
      ],
      ...,
    }
  },
  ...,
}

Alignment

You can also align the columns value by passing align: "left|center|right". by default, it will be left

import DataTable from "v3-datatable";

export default {
  ...,
  data() {
    return {
      headers: [
        { text: 'Title', key: 'title', searchable: true, align: 'left' },
        { text: 'Price', key: 'price', searchable: true, sortable: true, align: 'center' },
        { text: 'Discount (%)', key: 'discountPercentage'},
        { text: 'Rating', key: 'rating', sortable: true },
        { text: 'Stock', key: 'stock', searchable: true, align: 'right' },
        { text: 'Action', key: 'action' }
      ],
      ...,
    }
  },
  ...,
}

Slot

This package provide you to use row.{key} slot to customize specfic columns. which has pass entire row object as item in the value of slots so use can access another property while customization.

<template>
  <Datatable
    unique-key="id"
    :headers="headers"
    :records="records"
    :loading="loading"
  >
    <template v-slot:row.rating="{ item }">
      {{ item.rating }} out of 5 
    </template>

    // you can access other properties in the columns too
    <template v-slot:row.action="{ item }">
      <button v-on:click="deleteRecord(item.id)">Delete</button> 
    </template>
  </Datatable>
</template>

In the first template slot, we just customize the rating columns for better user experience instead of showing only rating value.
While in second template slot, we show the delete button with passing the records id in the function.

CSS

You can also give your custom css and modify the table as per your need. just pass table-class props to table component and it will apply to the datatable.

<template>
  <Datatable
    table-class="customize-table"
    unique-key="id"
    :headers="headers"
    :records="records"
    :loading="loading"
  >
  </Datatable>
</template>

.customize-table tr {}

.customize-table th {}

.customize-table th[data-header-key='{key_name}'] {}

.customize-table td {}

.customize-table td[data-header-key='{key_name}'] {}

.customize-table th.vdt-selectable {}

.customize-table td.vdt-selectable {}

/* customize hover effect */
.customize-table tr:hover {}

.customize-table th:hover {}

.customize-table th[data-header-key='{key_name}']:hover {}

.customize-table td:hover {}

.customize-table td[data-header-key='{key_name}']:hover {}

.customize-table th.vdt-selectable:hover {}

.customize-table td.vdt-selectable:hover {}

Note : use !important in css if some style not apply in datatable

Props Reference

License

MIT