High-Performance React Data Grid

A professional data table engineered for performance. Featureful and easy to configure, Bryntum React Grid delivers a top-notch user experience, for simple and complex data tables.

Robert Levin Infra July 14, 2015 $576.28 $321.98 San Francisco Lindsey Bergson Design March 13, 2014 $943.65 Berlin Cristopher Korsgaard Strategy April 28, 2016 January 10, 2015 $275.43 $782.75 Paris Anika Mango Security March 6, 2018 $475.22 Tel Aviv Brandon Vetrovs QA/QC May 14, 2020 June 27, 2019 $778.35 Rome Biz Dev Maria Chiu June 25, 2016 $396.84 $118.12 Toronto

Clear and concise documentation

Feature-rich React data table library

Bryntum React Grid comes with selecting, editing, filtering, sorting, file exporting, and printing features, and so much more! Display and manage data as a tree or nested grid, or in multiple grid instances. Browse our interactive demos:

React Grid component code example


Get a Bryntum React Grid component up and running in just a few minutes using TypeScript or JavaScript. Here is an App.jsx code example.

import { BryntumGrid } from "@bryntum/grid-react";
import "./App.css";

function App() {
  const gridConfig = {
    columns: [
      { text: "Name", field: "name", flex: 2 },
      { text: "Age", field: "age", width: 100, type: "number" },
      { text: "City", field: "city", flex: 1 },
      { text: "Food", field: "food", flex: 1 },
        text: "Color",
        field: "color",
        flex: 1,
        renderer({ cellElement, value }) {
          // set the color based on the value (e.g. "Red" should be red)
 = value;
          return value;
    data: [
        id: 1,
        name: "Don A Taylor",
        firstName: "Don",
        surName: "Taylor",
        city: "Dubai",
        team: "Paris Tigers",
        age: 30,
        food: "Salad",
        color: "Black",
        id: 2,
        name: "John B Adams",
        firstName: "John",
        surName: "Adams",
        city: "Paris",
        team: "Washington Horses",
        age: 64,
        food: "Bolognese",
        color: "Orange",
        id: 3,
        name: "Doug C Jones",
        firstName: "Doug",
        surName: "Jones",
        city: "Stockholm",
        team: "New York Hens",
        age: 30,
        food: "Pancake",
        color: "Pink",
        id: 4,
        name: "James D Davis",
        firstName: "James",
        surName: "Davis",
        city: "Barcelona",
        team: "Dubai Lions",
        age: 87,
        food: "Pancake",
        color: "Green",
        id: 5,
        name: "Mike E Johnson",
        firstName: "Mike",
        surName: "Johnson",
        city: "Dubai",
        team: "New York Roosters",
        age: 14,
        food: "Pancake",
        color: "Green",

  return <BryntumGrid {...gridConfig} />;

export default App;

Exceptional Grid performance

Bryntum React Grid uses several techniques for peak rendering and scrolling performance:

  • Virtual rendering
  • Minimal DOM interactions
  • Extensive element reuse
  • Modern CSS optimizations

Test the Bryntum React Grid performance with our big data set demo.

JSX support

Bryntum React Grid seamlessly integrates with JSX, supporting both inline JSX and JSX in custom React components. Keep conditional logic and markup together and ensure they stay in sync. 

Use JSX in React components to create cell-editing elements, elegant event bars, tooltips, and widgets for your Bryntum React Grid.

But JSX isn’t a requirement. Our Bryntum renderer efficiently implements conditional logic and outputs visually rich cell content.

Themed, customizable, and responsive

Whether you prefer ready-made styles or have your own vision, we’ve got you covered. Bryntum React Grid ships with five elegant themes you can effortlessly adapt, or create a custom theme. 

Display your grid on different devices with our responsive support.

Try it yourself!

Trusted by the world’s leading companies

Ready to get started?