DataTables logo
≡

Vue DataTables updates

Wednesday 4th November, 2026
By Allan Jardine

With the recent updates to the React component to introduce a <Column> component for easy configuration of the table in JSX, I wanted to bring that capability to the Vue component as well. The cumulation of that work is the new 4.0.0 release of the datatables.net-vue3 package!

The new package is available now and is fully backwards compatible with v3. If you are already using the Vue DataTables integration you can update your package.json dependencies and update, or if you are just getting started, I'll give a quick run down of how to use the package here.

As part of the update, I've also reworked the Vue DataTables documentation, including a new 60 second quick-start guide, and breaking the documentation down into more manageable parts.

Column component

The major new feature of this release is the <Column> component. With it, you can define and configure the columns that DataTables is to show. This new component is a named export from the datatables.net-vue3 package - i.e. your setupt might look like the following to import DataTables:

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

DataTable.use(DtCore);
</script>

The most common column options are available as top-level properties:

  • data - The data point that should be used for reading the data to display in the column from the row's data source. Maps to columns.data.
  • footer - The text to show in the table footer for the column. Maps to columns.footer.
  • render - Define the rendering function used to display the data. Note that this cannot be used at the same time as a child component (see below).
  • title - The text to show in the table header for the column. Maps to columns.title.

You can also specify any column specific configuration option through the options property.

Consider this simple example:

<template>
    <DataTable ajax="/data.json">
        <Column title="Name" data="name" />
        <Column title="Position" data="position" />
        <Column title="Office" data="office" />
        <Column title="Extn." data="extn" />
        <Column title="Start date" data="start_date" />
        <Column title="Salary" data="salary" />
    </DataTable>
</template>

Here the table is instructed to show six columns, based on the data loaded from data.json. You can see this simple example running here.

Previously, you would need to pass a columns property in to the <DataTable> component to define the columns for the table, but it will now automatically parse the child properties to build the columns array. That said, the old property is still supported for seamless upgrading, as is the ability to define your own <thead> and <tfoot> in the <DataTable>. This is particularly useful if you want to create complex headers / footers with colspan and rowspan attributes.

Columns > named slots

The ease that <Column> provides for defining columns isn't its only major benefit, the other is for rendering Vue components into a column's cells.

In previous versions of this component, it was possible to use named slots to have a Vue component rendered in a cell. This approach still works, but it was never very intuitive. Now if you want to use a Vue component in a column, or even just a calculated value, you can do so by defining children of the <Column> tag (i.e. into its default slot) - e.g.:

<Column title="Buttons" data="id" v-slot="props">
    <Tag :text="props.cellData" />
</Column>

The properties passed in (props above) include the row and cell data and indexes. See the [<Column> documentation for details], and if you are using TypeScript, it is of course fully typed.

To use a computed value in a cell, you can do so as you would anywhere else in Vue - e.g.:

<Column title="Telephone" data="tel" v-slot="{cellData}">
    <a :href="`tel:${cellData}`">{{cellData}}</a>
</Column>

To see this running live, and in a playground where you can experiment with the code, have a look at this StackBlitz example

Putting it all together

If you are just starting out with the Vue DataTables component, install the DataTables core and Vue integration packages:

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

Then set up your .vue file like this (you can, of course, use the composition API if you prefer) to:

  1. Import DataTables
  2. Define the data to display
  3. Load the DataTables stylesheet
  4. Create the DataTable itself and define the columns.
<script setup lang="ts">
import DtCore from 'datatables.net';
import DataTable, { Column } from 'datatables.net-vue3';

DataTable.use(DtCore);

const data = [
    { id: 1, title: 'Designing Data-Intensive Applications', author: 'Martin Kleppmann', releaseDate: '2017-03-16', price: 29.99, finished: true },
    { id: 2, title: 'The Phoenix Project', author: 'Gene Kim et al.', releaseDate: '2013-01-15', price: 14.95, finished: true },
    { id: 3, title: 'Project Hail Mary', author: 'Andy Weir', releaseDate: '2021-05-04', price: 18.00, finished: false },
    { id: 4, title: 'Refactoring (2nd Ed)', author: 'Martin Fowler', releaseDate: '2018-11-20', price: 24.50, finished: false },
    { id: 5, title: 'Staff Engineer', author: 'Will Larson', releaseDate: '2021-03-08', price: 12.99, finished: true },
];
</script>

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

<template>
    <DataTable :data="data" className="display">
        <Column title="Title" data="title" />
        <Column title="Author" data="author" />
        <Column title="Released" data="releaseDate" :render="DtCore.render.date()" />
        <Column title="Price" data="price" :render="DtCore.render.number(null, null, 2, '$')" />
        <Column title="Status" data="finished" v-slot="{cellData}">
            {{cellData ? '✓ Read' : '⏳ Unread'}}
        </Column>
    </DataTable>
</template>

This will create a DataTable, with all of its interactivity, making use of built-in data renderers and a computed value. You can see it running here.

Next steps

The new <Column> component is a significant "quality of life" improvement for the Vue DataTables component. It makes it much easy to work with as well as being more intuitive. To continue, checkout the full Vue DataTables documentation, which includes complete quick-start, installation and usage guides, plus reference documentation.

As always, feedback is welcome - please let me know how you are using the software and if there are improvements you'd like to see for your use case.