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
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
$2,402.66
Image
No Horizontal
Total
$2,979.19
Striped
Total
$2,670.81
Vertical Lines
Total
$1,959.48
Dense
Row Selection
Card
Scroll with Sticky Header
Badge & Icons
Search & Sort
Fixed Columns
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
$6,260.45