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-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";

// @ts-ignore
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:

• Buttons
• Responsive
• SearchBuilder
• Select

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.9/pdfmake.min.js" },
        { src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/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.