DataTables logo
≡

Quick Start: React

Let's get interactive data-driven tables into your React app!

Tables in 60 seconds

This quick start guide will get you started in just 60 seconds and then explore how you can make use of DataTables features to customise the data grid for your exact needs.

1. Install

First install DataTables and its React component:

npm install datatables.net-dt datatables.net-react

2. Load

Next, in the component where you want to display a DataTable, import the modules for use:

// Javascript
import DataTable, { Column } from 'datatables.net-react';
import DtCore from 'datatables.net-dt';

// Styling
import 'datatables.net-dt/css';

// Assign DataTables core
DataTable.use(DtCore);

3. Data

You'll have your own data that you want to display, but for this guide, let's use some simple data to show some of the principles of how to use DataTables in React:

export default function App() {
    const [rows, setRows] = useState([
        { 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 },
    ]);

    // DataTable component here...
}

4. Display

Finally, let's get that data displayed in a DataTable:

return (
    <DataTable data={rows} 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">
            {finished => (finished ? '✓ Read' : '⏳ Unread')}
        </Column>
    </DataTable>
);

The end result is a simple React app with the table displayed:

There are a couple of points in the component code used above that are worth detailing to explain their usage so you can build tables that will be driven from your own data:

  • Each column you wish to show is defined by a <Column> component, as a child of the DataTable (more details on columns).
  • The title property is used to define the text for the column header cell.
  • The data property is used to map to the data in the source object for each row.
  • Data renderers can be defined by the render property. 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 uses a child function to compute and display the value to show. This function can also return JSX if you want to show a component here.

Just scratching the surface

You've now created your first DataTable in React - a high performance, fully interactive and dynamic table. Hurrah! This is just the start of your journey though.

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!