DataTables component for Vue 3
This library provides a Vue 3 component for DataTables.net to be used inside a Vue application.
To install:
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 thetable
tag -
options
- The DataTables options for the table. Note that this can includecolumns
,data
andajax
- if they are provided by one of the properties from above that will override a matching option given here.
Templates
The DataTable
component provides a single slot that can be used to define the HTML for the table structure - i.e. the thead
and tfoot
:
<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.
Extensions
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);
Styling
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';