DataTable
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
Source code
Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add datatable
Adding this component will also add a plugin called datatables.client.ts with the following content:
import DataTablesCore from "datatables.net";
import DataTable from "datatables.net-vue3";
import JSZip from "jszip";
import "datatables.net-buttons";
import "datatables.net-buttons-dt";
import "datatables.net-buttons/js/buttons.colVis.mjs";
import "datatables.net-buttons/js/buttons.html5.mjs";
import "datatables.net-buttons/js/buttons.print.mjs";
import "datatables.net-responsive-dt";
import "datatables.net-searchbuilder-dt";
import "datatables.net-select-dt";
import "datatables.net-fixedcolumns-dt";
import "datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css";
import "datatables.net-fixedheader-dt";
import "datatables.net-fixedheader-dt/css/fixedHeader.dataTables.css";
// @ts-expect-error - We are not creating a declaration file for this library
window.JSZip = JSZip;
DataTable.use(DataTablesCore);
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("DataTable", DataTable);
});
This plugin will register the following extensions from the DataTables.net library:
Feel free to remove any of these extensions if you don't need them.
It will also update your nuxt.config.ts file with the following content:
app: {
head: {
script: [
// Add pdfmake scripts for DataTables.net export buttons
{ src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/pdfmake.min.js" },
{ src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.12/vfs_fonts.min.js" },
],
},
},
If you are not going to use the PDF export feature, you can remove the script tags from your nuxt.config.ts file.
Usage
Dom
Take note of how the dom option is configured in the code. We use it to structure the layout of the table.
Custom component
With the new version of DataTables.net, you can now use custom Vue components in your table.
Layout
The new version of DataTables.net also allows you to use custom layouts for your table.
You can read more about it here
For this, you will actually need to add some custom classes for things to look how you want.
Simple
Total
$1,713.58
Image
No Horizontal
Total
$3,111.29
Striped
Total
$2,971.45
Vertical Lines
Total
$3,952.78
Dense
Row Selection
Total
$3,374.71
Card
Total
$4,054.69
Scroll with Sticky Header
Total
$18,024.42
Badge & Icons
Total
$16,135.42
Search & Sort
Fixed Columns
this requires the fixedColumns plugin to be installed.
npm install --save datatables.net-fixedcolumns-dt
Then add the following to your datatables plugin file
import "datatables.net-fixedcolumns-dt";
import "datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css";
Column ReOrder
This requires the fixedColumns plugin to be installed.
npm install --save datatables.net-colreorder-dt
Then add the following to your datatables plugin file
import "datatables.net-colreorder-dt";
import "datatables.net-colreorder-dt/css/colReorder.dataTables.css";
Column Reorder
You can reorder the columns by dragging and dropping the column header.
Total
$4,558.82