DataTables logo
≡

Quick Start: ES Modules / Bundlers

If you've got a JavaScript or TypeScript program that you are building with Vite, webpack, Bun or any other module bundler or build tool and you'd like to add super-fast, feature-rich data grids to your application, you are in the right place!

Modules in 60 Seconds

This guide will walk you through a super-fast introduction of how to install, include, initialise and configure DataTables for your application.

If you don't yet have an application that contains a table, but you'd like to follow along with this guide, open this StackBlitz to get a very simple starter app that you can edit and see the effects of your changes immediately.

1. Install

The first thing we need to do is install DataTables. The software is available in the central npm repository which you can install with npm, yarn, pnpm or any other package manager that can read npm packages (for brevity, this guide will use npm):

npm install datatables.net-dt

2. Load

Next, in the Javascript file where you want to use DataTables, import the library:

import DataTable from 'datatables.net-dt';

And in your CSS files you can use:

@import url('datatables.net-dt');

3. Table

In your HTML where you want the DataTable to appear, you'll need a table element (DataTables uses semantically correct HTML). You can include data in the table, or thead / tfoot elements if you want to define the header and footer.

For this example, we are going to load JSON data via Ajax and define the columns in the initialisation, so let's just create an empty table:

<table id="audiobooks" class="display"></table>

4. Data

You'll have your own data you want to show of course, most likely using a server-side script to read the data from a database (check out the server-side libraries for DataTables to help with that), but for this example, let's use a JSON file that has this data structure:

{
  "data": [
        {
            "id": 1,
            "title": "Designing Data-Intensive Applications",
            "author": "Martin Kleppmann",
            "releaseDate": "2017-03-16",
            "price": 29.99,
            "finished": true,
            "isFiction": false
        }
    ]
}

Note that the JSON contains a top-level data property - this is optional (you can use ajax.dataSrc to remove the need for that, or change the name), but it is useful as it allows other data to be returned from the server as well as the rows to show in the table.

The data array contains an object per row for the table.

5. Initialise

Finally, create the DataTable! This is done by using new DataTable(), passing in the first argument as a selector for the table you want to enhance and a second argument for customisation of the table.

Let's dive into the code and then we'll break it down:

new DataTable('#audiobooks', {
    ajax: './data.json',
    columns: [
        { data: 'title', title: 'Title' },
        { data: 'author', title: 'Author' },
        {
            data: 'releaseDate',
            title: 'Release Date',
            render: DataTable.render.date()
        },
        {
            data: 'price',
            title: 'Price',
            render: DataTable.render.number(null, null, 2, '$')
        },
        {
            data: 'finished',
            title: 'Finished',
            render: finished => finished ? '✓' : '⏳'
        }
    ]
});

First up, of course, we create the DataTable itself, picking out the element which has an id of audiobooks. Next, we use ajax and set it to point at the address we'll load the data from.

Now consider the columns for the table. You'll have noticed that the JSON structure above uses an object for the row data, so we need to tell each column which property in the object to use as its data source to display - this is done with columns.data. Furthermore, columns.title is used to define the title for each column.

There is data in the source JSON that, when displayed, we want to localise so the end user is immediately familiar with the format that it is shown in. For dates and numbers, this can be done with DataTables' built in rendering methods attached to a column using columns.render. In this case date and number formatters are used to make sure the information is displayed in a format suitable for the user's locale.

The final column also makes use of columns.render, but in this case uses a custom renderer to display the boolean value in a style that the end user is going to understand.

Activate!

That's it - you've created your first DataTable! The completed example can be seen here:

This is just the start

You've seen here how you can quickly add interactivity to a static HTML table, and how you can create a dynamic table loaded via Ajax with ease! But this only scratches the surface of what DataTables can do.

For your next steps:

This quick start guide is new! If you've followed along and have any feedback, please get in touch, so it can be improved to help others as well!