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.
Take note of how the dom
option is configured in the code. We use it to structure the layout of the table.
With the new version of DataTables.net, you can now use custom Vue components in your table.
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.
Total
$2,556.89
Total
$3,624.63
Total
$2,603.67
Total
$2,335.60
Total
$1,343.39
Total
$3,684.60
Total
$19,618.20
Total
$17,629.77
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";
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";
You can reorder the columns by dragging and dropping the column header.
Total
$4,573.37