Next.js and DataTables
Over the course of the last few weeks, I've been working on updating DataTables and all of its extensions to load in a window-less environment. DataTables 3.1 introduced this ability, along with improvements to the ESM and CSS loading when used with bundlers. I didn't write a blog post about it at the time as 3.1 didn't actually introduce any new client-side features to the library, it was all about improving the developer experience when using Vite, WebPack and other bundlers.
Alongside that work, the React component for DataTables has just received a major update, now at v2. I've rewritten the documentation for how to use DataTables in React, and there is now a 60 second quick start guide to get you going if you'd like to try it out.
The obvious question is "Why do all of this"? And the simple answer is Next.js.
In this blog post I'll show how you can very easily use DataTables in a Next.js application, gaining all of the flexibility of DataTables and its ecosystem, in one of the most comprehensive and exciting React Frameworks available.
Next.js
I'm not going to give a tutorial on how to use Next.js here, their own documentation is the place to go if you are new to Next.js. Instead, I'll assume that you know how to create a Next.js app (npx create-next-app@latest) and are comfortable using some basic JSX in React components.
In this example, I'm going to create a DataTable which displays a list of audiobooks. We'll see how to populate the table, use renderers to format the data and also display components in the table's cells. The interface we'll be using for the data is:
export interface Audiobook {
id: number;
title: string;
author: string;
releaseDate: string;
price: number;
finished: boolean;
isFiction: boolean;
}
Setup
The first thing to do in your Next.js project is of course install DataTables and the React DataTables component:
npm install \
datatables.net-dt \
datatables.net-react
Component
Next, let's create a new component in a file called components/audiobooks.tsx. Importantly, in Next.js we need to start this file with 'use client';. This tells Next.js that the execution of the Javascript on the page will happen in the browser. The DataTables Javascript will be loaded at the server by Next.js (thanks to the 3.1 update), then bundled for execution at the client-side (DataTables is, after all, a client-side library!).
From there, we can include the DataTables library as we would for any other React component:
'use client';
import DtCore from 'datatables.net-dt';
import DataTable, { Column } from 'datatables.net-react';
import 'datatables.net-dt/css';
DataTable.use(DtCore);
export interface AudioBooksProps {
data: Audiobook[];
}
export default function AudiobooksTable({ data }: AudioBooksProps) {
return (
<DataTable className="display" data={data}>
{/* ... */}
</DataTable>
);
}
For this component, we have a single data property that can be passed in and this is then propagated on to the DataTable - this is simply an array of the data structure shown above.
Columns
To define columns, we can use the <Column> component that was introduced in v2 of the DataTables React component. You may have spotted that it is imported from datatables.net-react, so it is immediately available for us to use - each instance of it as a child of a <DataTable> is used to define a column, with title and data properties being the most common ones to use - for example
<Column title="Title" data="title" />
<Column title="Author" data="author" />
The title property sets the text to show in the column header, while data points to the data point in the row's source data object. These properties map to DataTables' columns.title and columns.data options, respectively.
Our next two columns are going to display the releaseDate and price properties. For these, we don't just want to display the raw data, but rather display it in a format that the end user expects to see (we software dev's might like ISO8601, but our end users don't!). For this, we'll use the number and date formatters that are built into DataTables core by passing them to the render property for the column:
<Column
title="Released"
data="releaseDate"
render={DtCore.render.date()}
/>
<Column
title="Price"
data="price"
render={DtCore.render.number(null, null, 2, '$')}
/>
Respectively, this will cause the number to display in a locale correct format (i.e. changing the decimal character, depending on the user's browser settings), and the date in a format that they will immediately recognise.
Our final column in this example is going to be the finished property. Rather than just showing a boolean value, we will make use of a child component called <Status> to demonstrate how to use components in a column. It is a trivial component:
export interface StatusProps {
state: boolean;
}
export default function Status({ state }: StatusProps) {
return <span>{(state ? '✓' : '⏳')}</span>;
}
And to use it in our column, we define a function that returns the JSX for the status:
<Column title="Status" data="finished">
{finished => <Status state={finished} />}
</Column>
Combined, this is what our DataTable looks like:
export default function AudiobooksTable({ data }: AudioBooksProps) {
return (
<DataTable className="display" data={data}>
<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">
{(finished) => <Status state={finished} />}
</Column>
</DataTable>
);
}
Data
Awesome, we've got our table component, so now we need some data to populate it with. For this example, I'll use a simple array, but I've wrapped it in an async function so you can readily make use of database calls if you need to. To do this, create a new data.ts file and include:
// Top-level module variable acting as an in-memory store
const audiobooks: Audiobook[] = [
{
id: 1,
title: 'Designing Data-Intensive Applications',
author: 'Martin Kleppmann',
releaseDate: '2017-03-16',
price: 29.99,
finished: true,
isFiction: false,
},
// ...
];
export async function getAudioBooks(): Promise<Audiobook[]> {
return audiobooks;
}
I've only shown one row of data here - see the finished project below for a more complete data set if you'd like to follow along!
Tying it together
The last thing to do is to now place our <AudioBooks> component into the App and apply the data to it. In the demo Next.js you can update page.tsx to be:
import AudioBooks from './components/audiobooks';
import { getAudioBooks } from './data';
export default async function Home() {
const data = await getAudioBooks();
return (
<main className="p-8">
<h1 className="text-2xl font-bold mb-4">DataTables + Next.js Example</h1>
<AudioBooks data={data} />
</main>
);
}
Running the example
There is a fair amount of information to take onboard above! As always, an example is often worth a thousand words, so if you'd like to run the code above and play around with it to suit your need, head over to this StackBlitz where you can see it execute:
Just the start
This post has shown the basics of how to use DataTables in your Next.js application, but it also only scratches the surface. When working with React DataTables, you have access to the huge range of configuration options that DataTables provides, the DataTables API and of course the suite of extensions for advanced filtering and other table controls.
If you'd like one more example, this one showing how to use Buttons and CardView in a Next.js component, take a look at this StackBlitz!
To explore more, have a look at the React DataTables documentation, which goes into more detail for how to configure the table and use components.