React Table and Data Grid

The table below is a live Tabulator instance. Sort columns, drag them around, edit cells, filter by name and page through the data. This is the same library you can drop into your React project.

Why Tabulator for React?

Tabulator is a feature‑rich JavaScript table and data grid library with zero dependencies. Because it is plain JavaScript, it slots neatly into any React component, so you stay in control of your data and rendering while Tabulator handles sorting, filtering, inline editing, grouping, pagination, virtual DOM rendering and much more.

• Works with any React version: functional components and hooks, or class components.
• No heavyweight dependencies: just install one package.
• Reactive data: keep the grid in sync with your component state.
• Virtual DOM: smoothly render very large datasets.
• Free & open source: MIT licensed, no per‑seat fees.

1. Install Tabulator

Add Tabulator to your React project with your package manager of choice:

npm install tabulator-tables

That installs the current release (tabulator-tables@6.5.0). See the full install guide for yarn, CDN and custom build options.

2. Create a React table component

Import the library and stylesheet, then instantiate Tabulator inside a useEffect against a ref. This functional‑component pattern works in any modern React app:

import { useEffect, useRef } from "react";
import { TabulatorFull as Tabulator } from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css";          //import Tabulator stylesheet

const data = [
  { id: 1, name: "Oli Bob", age: 12, col: "red", dob: "19/02/1984" },
  { id: 2, name: "Mary May", age: 1, col: "blue", dob: "14/05/1982" },
  { id: 3, name: "Christine Lobowski", age: 42, col: "green", dob: "22/05/1982" },
  { id: 4, name: "Brendon Philips", age: 25, col: "orange", dob: "01/08/1980" },
];

const columns = [
  { title: "Name", field: "name", editor: "input" },
  { title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
  { title: "Favourite Color", field: "col" },
  { title: "Date Of Birth", field: "dob", hozAlign: "center", sorter: "date" },
];

export default function DataGrid() {
  const el = useRef(null);

  useEffect(() => {
    const table = new Tabulator(el.current, {
      data,                    //load data into the table
      reactiveData: true,      //keep the table in sync with the data
      layout: "fitColumns",    //fit columns to the width of the table
      columns,                 //define the table columns
    });

    return () => table.destroy(); //tidy up when the component unmounts
  }, []);

  return <div ref={el} />;
}

Prefer a ready‑made wrapper?

The community‑maintained react‑tabulator component wraps the library in a React‑friendly API:

npm install react-tabulator

import "react-tabulator/lib/styles.css";
import { ReactTabulator } from "react-tabulator";

<ReactTabulator data={data} columns={columns} layout="fitColumns" />

Either way you get the full Tabulator feature set. See the React documentation for more detail.

Everything you need in a data grid

Tabulator ships with the features you would otherwise stitch together yourself. A few highlights are linked above the demo. Explore the full set in the documentation.