Datatable: DataTables 3, self contained and themed

The Datatable component has been rebuilt on DataTables 3.

What changed

• Runs on DataTables 3 and every extension's latest major version. jQuery is no longer needed
• The component file is self contained. It imports the DataTables CSS for the core and for each extension, so there is nothing to add to your CSS
• The old hand copied stylesheet is gone. The official stylesheets are used and their CSS variables are mapped to your shadcn tokens, so light mode, dark mode and theme-* classes work out of the box
• Sort and expand icons no longer load from the network
• PDF export no longer needs the pdfmake CDN scripts in nuxt.config.ts. The library is loaded the first time a PDF is created
• Added the RowGroup and RowReorder extensions
• The examples use the layout option instead of dom

New examples

Column search, row group, row reorder, child rows, export buttons, Ajax, reactive data and custom layout, plus two server-side examples that send search, sorting, paging and an external filter to an API (DummyJSON), with a note on mapping the same request to Strapi.

Upgrading

• Replace your copy of the component, then run npx ui-thing@latest add datatable to install the new packages
• dom still works but is the legacy way to describe the layout. Use layout instead
• If you wrote custom CSS, rename the selectors: .dataTables_wrapper is now .dt-container, .dataTables_filter is .dt-search, .paginate_button is .dt-paging-button and so on. The docs list them all
• You can remove the pdfmake <script> tags the CLI added to your nuxt.config.ts and the jquery package if nothing else uses it
• SearchPanes and StateRestore are not available for DataTables 3 yet

npx ui-thing@latest add datatable