Vue

Vue.js is a front-end Javascript framework that is widely used for creating reactive web-applications. We publish the datatables.net-vue3 package which provides DataTables for use as a component in Vue3 applications.

Installation

Install the datatables.net-vue3 component using your package manager:

# npm
npm install --save datatables.net-vue3

# yarn
yarn add datatables.net-vue3

This package has dependencies on datatables.net and jquery which are automatically bundled in, so you don't need any other packages if you just want to display an interactive table.

To then use the component in your own components, you need to import both it and DataTables core, then assign DataTables core as the library to use in the component like this:

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

This will give you a <DataTable> Vue component you can use in your templates.

Extensions

You can also install DataTables extensions from their own npm packages and use them in the standard manner - e.g. for both Select and Responsive you might use:

# npm
npm install --save \
    datatables.net-select \
    datatables.net-responsive

# yarn
yarn add \
    datatables.net-select \
    datatables.net-responsive

For each extension, you need to import it for it to be registered with DataTables. For example, to use both Select and Responsive:

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import 'datatables.net-select';
import 'datatables.net-responsive';

DataTable.use(DataTablesCore);

Note that you will also need to provide initialisation options for the extensions (e.g. select and responsive in this case). Please see the Use section below for details on passing configuration options.

The same installation applies to all of the other DataTables extensions. Use the download builder to get a list of the npm packages for the extensions you want (and also the styling packages - see below).

Use

Once installed and registered in your component you will have a <DataTable> tag available for use in your Vue template (you can change the name by changing the import statement used above if you prefer something else). It has a single optional slot which can be used to describe the table with headers and footers:

<DataTable class="display">
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
        </tr>
    </thead>
</DataTable>

The <DataTable> component has the following parameters available:

• 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 table tag
• options - The DataTables options for the table. Note that this can include columns, data and ajax - if they are provided by one of the properties from above that will override a matching option given here.

Basic initialisation

The most basic example use of DataTables in a Vue application (Composition API) is:

<script setup>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

const data = [
  [1, 2],
  [3, 4],
];
</script>

<template>
    <DataTable :data="data" class="display">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
            </tr>
        </thead>
    </DataTable>
</template>

You can see this live on Stackblitz.

Ajax data

You might wish to load data for the table to display via Ajax rather than using local Vue data. That can be done with the ajax parameter directed at the URL to load the data from:

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name', title: 'Name' },
  { data: 'position', title: 'Position' },
  { data: 'office', title: 'Office' },
  { data: 'extn', title: 'Extension' },
  { data: 'start_date', title: 'Start date' },
  { data: 'salary', title: 'Salary' },
];
</script>

<template>
    <DataTable
        :columns="columns"
        ajax="/data.json"
        class="display"
    />
</template>

The boiler plate code in the above for brevity. This example has the full code and running example including demonstrating how to use object properties to populate the table via the columns.data option.

Extensions

The installation section above showed how to install and register a DataTables extension. Once they have been installed, they can be used in the standard DataTables way, through their initialisation options. In this example we initialise the Select and Responsive extension using the select option:

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import 'datatables.net-responsive';
import 'datatables.net-select';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name', title: 'Name' },
  { data: 'position', title: 'Position' },
  { data: 'office', title: 'Office' },
  { data: 'extn', title: 'Extension' },
  { data: 'start_date', title: 'Start date' },
  { data: 'salary', title: 'Salary' },
];

const options = {
  responsive: true,
  select: true,
};
</script>

<template>
    <DataTable
        :columns="columns"
        :options="options"
        ajax="/data.json"
        class="display nowrap"
    />
</template>

The full working example can be seen here.

API

When working with DataTables, you will often want to use its API to unlock its full potential. This is possible through the dt() method that the datatables.net-vue3 component provides.

let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component

onMounted(function () {
  dt = table.value.dt;
});

Note, make sure you add ref="table" to the <DataTable> component tag to get the reference to link up. Now you can make use of the API methods.

Reactive data

One for the most exciting and useful parts of Vue is Reactive data. In summary this is where you update data (e.g. variable = 1) the UI will automatically update to reflect this change - however complex that change might be. The datatables.net-vue3 package fully supports Vue's reactive data and will automatically reflect the changes made to the data.

This example demonstrates the use of the DataTables API to dynamically update the table in responsive to Vue's reactive data. Note how we don't need to tell DataTables about the new data through any API method calls - it just updates automatically.

Styling

DataTables' support for various styling libraries is fully supported in the Vue component. As an example, consider that we are using Bootstrap 5 - the rest of our page is Bootstrap 5 style based and our DataTable should reflect that. We have npm packages for DataTables core and all of its extensions that work with Bootstrap 5 (and other styling frameworks) - they end in -bs5 (e.g. datatables.net-bs5 for Bootstrap 5 and DataTables core), while the default styling has a -dt postfix. See the download builder to get the styling packages needs for your preferred framework.

With the default styling simply install the styling package:

# npm
npm install --save datatables.net-dt

# yarn
yarn add datatables.net-dt

And then include it in your <style> tag (note that we are using Vite to build the package here, which will resolve CSS styles from node packages as well as Javascript, allowing this to work):

<style>
@import 'datatables.net-dt';
</style>

For the other styling frameworks, you need to also include a Javascript element, which configures DataTables and its extensions to use the styles and DOM structure suitable for the framework selected - e.g. for Bootstrap 5:

# npm
npm install --save datatables.net-bs5

# yarn
yarn add datatables.net-bs5

And in your Vue component register the style in exactly the same way as you do with the extensions:

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name' },
  { data: 'position' },
  { data: 'office' },
  { data: 'extn' },
  { data: 'start_date' },
  { data: 'salary' },
];
</script>

<style>
@import 'bootstrap';
@import 'datatables.net-bs5';
</style>

You can see Vue + DataTables + Bootstrap 5 in action here.