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 dataTable" data-toggle="data-table"></table>
</template>
<script setup>
import { ref } from 'vue'
import useDataTable from '../../hooks/useDatatable'
const tableData = ref([
  { Name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61, start_Date: '2011/04/25', salary: '$320,800' },
  { Name: 'Garrett Winters', position: 'Skin Specialist', office: 'Tokyo', age: 63, start_Date: '2011/07/25', salary: '$170,750' },
]);
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 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