Installation

To make use of DataTables in a Vue app, you need to install both the Vue component, and DataTables itself:

• datatables.net-vue3 - DataTables component for Vue
• datatables.net-dt - DataTables core, with default styling.

Do this with the following npm command:

npm install --save \
    datatables.net-vue3 \
    datatables.net-dt

Once installed, you then import both packages and assign DataTables core as the library to use in your component's setup like this:

<script setup lang="ts">
    import DataTable, { Column } from 'datatables.net-vue3';
    import DtCore from 'datatables.net-dt';

    // Assign DataTables core
    DataTable.use(DtCore);
</script>

This will give you a <DataTable> Vue component you can use in your template, and a <Column> component that can be used to defined columns. Please refer to their documentation for details on the use of each.

Styling options

For styling, simply include the DataTables package in your style element (this can be done in your component, or in a global stylesheet) - e.g.:

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

You might have wondered what the -dt part at the end of the datatables.net-dt package is when installing it, and why the Vue component doesn't just include DataTables core automatically. The reason for this is that DataTables supports a number of different styling frameworks (Bootstrap, Bulma, Foundation, etc), each of which is published as a different package. The styling framework used is denoted by the final section of the package name, in this case -dt is the default DataTables styling.

If you wanted to make use of DataTables' Bootstrap 5 integration you could install the datatables.net-bs5 package and use that (note the use of -bs5 in the DataTables core package name):

<script setup lang="ts">
    import DataTable, { Column } from 'datatables.net-vue3';
    import DtCore from 'datatables.net-bs5';

    // Assign DataTables core
    DataTable.use(DtCore);
</script>

<style>
    @import url('datatables.net-bs5');
</style>

DataTables has a wide range of packages available and it is strongly recommended that you use the download builder to make sure you get the packages you need. Click the "Vue" option in the components list and the download builder will show you the install and include commands you should use.

Extensions

DataTables has a wide range of extensions that expand the capabilities of DataTables core. These extensions can all also be used in a Vue app through the DataTables component.

For example, you might wish to make use of the CardView and Select extensions - for this you would use

npm install --save \
    datatables.net-vue3 \
    datatables.net-dt \
    datatables.net-cardview-dt \
    datatables.net-select-dt

For each extension, you need to import it for it to be registered with DataTables. In this case:

<script setup lang="ts">
    import DataTable, { Column } from 'datatables.net-vue3';
    import DtCore from 'datatables.net-dt';
    import 'datatables.net-cardview-dt';
    import 'datatables.net-select-dt';

    // Assign DataTables core
    DataTable.use(DtCore);
</script>

<style>
    @import url('datatables.net-bs5');
    @import url('datatables.net-cardview-bs5');
    @import url('datatables.net-select-bs5');
</style>

Note that you will also need to provide initialisation options for the extensions to enable them in the DataTable (e.g. cardView and select in this case). For this, see the configuration options selection of the <DataTable> component documentation.

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.