DataTables component for Vue 3
This library provides a Vue 3 component for DataTables.net to be used inside a Vue application.
npm install --save datatables.net-vue
This will automatically install DataTables as a dependency. Other DataTables extensions can also be installed in your application - see below.
In your Vue component you can then:
import DataTable from 'datatables.net-vue'
Which makes a
DataTable component available. It provides the following parameters:
columns- Define the columns array used for DataTables initialisation
data- Data array for DataTables. This is optional and if you are using Ajax to load the DataTable data is not required.
ajax- Ajax option for DataTables - to load data for the table over Ajax.
class- Class name to assign to the
options- The DataTables options for the table. Note that this can include
ajax- if they are provided by one of the properties from above that will override a matching option given here.
DataTable component provides a single slot that can be used to define the HTML for the table structure - i.e. the
<DataTable :data="[[1,2], [3,4]]" class="display"> <thead> <tr> <th>A</th> <th>B</th> </tr> </thead> </DataTable>
IMPORTANT You should not use a Vue
for in the template to display the HTML for the table body! Doing so will cause a conflict between DataTables and Vue both trying to control the same DOM elements. Allow DataTables to build the HTML for the rows.
DataTables provides a wide range of extensions that singificantly expands its abilities. Extensions can be imported from npm and then registered with DataTables through it's
use() method - e.g.:
import DataTable from 'datatables.net-vue' import Select from 'datatables.net-select'; DataTable.use(Select);
The Vue component for DataTables doesn't include any styling by default. We provide support for a number of different styling libraries, and you will need to install those that you require and for any additional extensions you require.
For example, to use Bootstrap 5 styling, you would install the
-bs5 packages for DataTables:
npm install datatables.net-bs5 npm install datatables.net-select-bs5
And in your Vue application's CSS (assuming your are using Vite or some other builder which can resolve the
style property for npm packages):
@import 'datatables.net-dt'; @import 'datatables.net-select-dt';