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="table table-striped dataTable" data-toggle="data-table"></table>
    <table id="datatable" ref="columnTableRef" class="table dataTable" data-toggle="data-table"></table>
    <table id="datatable" ref="inputTableRef" class="table dataTable" data-toggle="data-table"></table>
    <table id="datatable" ref="langTableRef" class="table dataTable" data-toggle="data-table"></table>
</template>
          
<script setup>
import { ref } from 'vue'
import useDataTable from '../../hooks/useDatatable'

const tableData = ref([
  { Name: 'Airi Satou', position: 'Accountant	', office: 'Tokyo', age: '33', start_Date: '2008/11/28', salary: '$162,700' },
  { Name: 'Angelica Ramos', position: 'Chief Executive Officer (CEO)	', office: 'London', age: '47', start_Date: '2009/10/09', salary: '$1,200,000' },
  { Name: 'Ashton Cox', position: 'Junior Technical Author	', office: 'San Francisco', age: '66', start_Date: '2009/01/12', salary: '$86,000' },
])
const columns = ref([
  { data: 'Name', title: ' Name' },
  { data: 'position', title: 'Position' },
  { data: 'office', title: 'Office' },
  { data: 'age', title: 'Age' },
  { data: 'start_Date', title: 'Start Date' },
  { data: 'salary', title: 'Salary' }
])

const generatePath = (path) => {
  return window.origin + process.env.BASE_URL + path
}

const tableRef = ref(null)
useDataTable({
  tableRef: tableRef,
  columns: columns.value,
  data: tableData.value
})

const columnTableRef = ref(null)
useDataTable({
  tableRef: columnTableRef,
  columns: columns.value,
  data: tableData.value,
  isColumnHidden: true,
  isColumnHiddenClass: '.toggle-vis'
})

const inputTableRef = ref(null)
useDataTable({
  tableRef: inputTableRef,
  columns: columns.value,
  data: tableData.value,
  isFilterColumn: true
})

const langTableRef = ref(null)
useDataTable({
  tableRef: langTableRef,
  columns: columns.value,
  data: tableData.value,
  isMultilang: true
})
</script>
Previous Source & Credits