Data Table

This package contains distribution files required to style DataTables library for jQuery with styling for Bootstrap5. For more details

Installing
npm i datatables.net-bs5
  • For use of data table we create own custom hook with the help of datatables.net-bs5
  • The navigation path of this file are src/hooks/useDatatable.js
  • For the use of datatable hook you want appear in your component please follow the below example code
Data Table component
<template>
    <table id="datatable" ref="tableRef" class="data-tables table custom-table movie_table" data-toggle="data-table"></table>
</template>
          
<script setup>
import { ref } from 'vue';
import useDataTable from '../hooks/useDatatable';

const tableData = ref([
  {
    no: '1',
    title: 'Lorem Ipsum Dolor',
    author: 'Nick Allen',
    description: 'Lorem Ipsum Dolor Sit Amet, Consectetur Adip...',
    created_date: '21 Jul, 2020'
  },
]);

const columns = ref([
  { data: 'no', title: ' No' },
  { data: 'title', title: ' Title' },
  { data: 'author', title: 'Author' },
  { data: null, orderable: false, searchable: false, title: 'Description', render: function (row) {
      return `<p class="mb-0">${row.description}</p>`;
    },
  },
  { data: 'created_date', title: 'Created Date' },
]);

const tableRef = ref(null);
useDataTable({
  tableRef: tableRef,
  columns: columns.value,
  data: tableData.value,
  actionCallback: (data) => {
    switch (data.method) {
      case 'edit':
        showOffcanvas();
        break;
      case 'delete':
        showAlert();
        break;
      default:
        break;
    }
  },
});
</script>
Previous Next