DEV Community: Michael Turner

Getting Started with Mantine DataTable in React: Building Your First Data Table

Michael Turner — Mon, 12 Jan 2026 10:11:20 +0000

Mantine DataTable is a lightweight, feature-rich data table component built on top of Mantine UI and TanStack Table. It provides essential table functionality like sorting, filtering, pagination, and row selection with a clean, modern API. This guide walks through setting up and creating your first interactive data table using Mantine DataTable with React, from installation to a working implementation. This is part 10 of a series on using Mantine DataTable with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 16.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Mantine UI installed (required dependency)

Installation

First, install Mantine UI core (required dependency):

npm install @mantine/core @mantine/hooks

Then install Mantine DataTable:

npm install mantine-datatable

Or install everything with yarn:

yarn add @mantine/core @mantine/hooks mantine-datatable

Or with pnpm:

pnpm add @mantine/core @mantine/hooks mantine-datatable

After installation, your package.json should include:

{
  "dependencies": {
    "mantine-datatable": "^7.0.0",
    "@mantine/core": "^7.0.0",
    "@mantine/hooks": "^7.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Mantine requires a theme provider. Set up your app with the Mantine provider. Update your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MantineProvider>
      <App />
    </MantineProvider>
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple data table component. Create a new file src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import { DataTable } from 'mantine-datatable';

function DataTable() {
  // Sample data - array of objects
  const records = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, department: 'Engineering' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, department: 'Marketing' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, department: 'Sales' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, department: 'Engineering' }
  ];

  // Column definitions
  const columns = [
    { accessor: 'id', title: 'ID' },
    { accessor: 'name', title: 'Name' },
    { accessor: 'email', title: 'Email' },
    { accessor: 'age', title: 'Age' },
    { accessor: 'department', title: 'Department' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Data Table</h2>
      <DataTable
        records={records}
        columns={columns}
        withTableBorder
        withColumnBorders
        striped
        highlightOnHover
      />
    </div>
  );
}

export default DataTable;

Now, update your App.jsx to use the data table:

// src/App.jsx
import React from 'react';
import { Container, Title } from '@mantine/core';
import DataTable from './DataTable';
import './App.css';

function App() {
  return (
    <Container size="xl" py="xl">
      <Title order={1} mb="lg">Mantine DataTable Example</Title>
      <DataTable />
    </Container>
  );
}

export default App;

This creates a fully functional data table with:

Bordered table and columns
Striped rows for better readability
Hover highlighting
Clean, modern styling from Mantine

Understanding the Basics

Mantine DataTable uses a simple, declarative API where:

records: Array of data objects, where each object represents a table row
columns: Array of column definition objects
accessor: Property key in your data objects
title: Optional column header text (defaults to accessor if not provided)

Key concepts:

Records: Your data array - each object is a row
Columns: Define which fields to display and how
Accessor: Maps to a property in your record objects
Props: Enable features like borders, stripes, hover effects

Here's a simpler example with minimal configuration:

// src/SimpleTable.jsx
import React from 'react';
import { DataTable } from 'mantine-datatable';

function SimpleTable() {
  const records = [
    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 }
  ];

  const columns = [
    { accessor: 'id' },
    { accessor: 'name' },
    { accessor: 'value' }
  ];

  return (
    <DataTable records={records} columns={columns} />
  );
}

export default SimpleTable;

Practical Example / Building Something Real

Let's build a product inventory table with more features:

// src/ProductInventory.jsx
import React, { useState } from 'react';
import { DataTable } from 'mantine-datatable';
import { Text, Badge, Box } from '@mantine/core';

function ProductInventory() {
  const [records, setRecords] = useState([
    { 
      id: 1, 
      name: 'Laptop', 
      category: 'Electronics', 
      price: 999.99, 
      stock: 15, 
      status: 'In Stock' 
    },
    { 
      id: 2, 
      name: 'Mouse', 
      category: 'Electronics', 
      price: 29.99, 
      stock: 8, 
      status: 'Low Stock' 
    },
    { 
      id: 3, 
      name: 'Keyboard', 
      category: 'Electronics', 
      price: 79.99, 
      stock: 12, 
      status: 'In Stock' 
    },
    { 
      id: 4, 
      name: 'Monitor', 
      category: 'Electronics', 
      price: 299.99, 
      stock: 5, 
      status: 'Low Stock' 
    },
    { 
      id: 5, 
      name: 'Desk Chair', 
      category: 'Furniture', 
      price: 199.99, 
      stock: 20, 
      status: 'In Stock' 
    }
  ]);

  const columns = [
    { 
      accessor: 'id', 
      title: 'ID',
      textAlign: 'right',
      width: 80
    },
    { 
      accessor: 'name', 
      title: 'Product Name',
      width: 200
    },
    { 
      accessor: 'category', 
      title: 'Category',
      width: 150
    },
    { 
      accessor: 'price', 
      title: 'Price',
      textAlign: 'right',
      width: 120,
      render: ({ price }) => `$${price.toFixed(2)}`
    },
    { 
      accessor: 'stock', 
      title: 'Stock',
      textAlign: 'right',
      width: 100,
      render: ({ stock }) => (
        <Text 
          fw={stock < 10 ? 700 : 400} 
          c={stock < 10 ? 'red' : 'inherit'}
        >
          {stock}
        </Text>
      )
    },
    { 
      accessor: 'status', 
      title: 'Status',
      width: 120,
      render: ({ status }) => (
        <Badge 
          color={status === 'In Stock' ? 'green' : 'orange'}
          variant="light"
        >
          {status}
        </Badge>
      )
    }
  ];

  return (
    <Box p="xl">
      <Text size="xl" fw={700} mb="md">Product Inventory</Text>
      <DataTable
        records={records}
        columns={columns}
        withTableBorder
        borderRadius="sm"
        withColumnBorders
        striped
        highlightOnHover
        minHeight={200}
        onRowClick={({ record }) => {
          console.log('Clicked row:', record);
        }}
      />
    </Box>
  );
}

export default ProductInventory;

This example demonstrates:

Custom cell rendering with React components (Badge, Text)
Conditional styling based on data values
Right-aligned numeric columns
Custom formatting (currency for price)
Row click handling
Column width specification
Status badges with color coding

Common Issues / Troubleshooting

Table not rendering: Ensure you've wrapped your app with MantineProvider from @mantine/core and imported the Mantine CSS (@mantine/core/styles.css).
Data not displaying: Verify that your records array contains objects and that columns accessors match the property names in your records.
Styling issues: Make sure you've imported Mantine's CSS. The DataTable component relies on Mantine's styling system.
TypeScript errors: If using TypeScript, ensure you have proper type definitions. Mantine DataTable has built-in TypeScript support.
Missing Mantine components: If you use Mantine components (like Badge, Text) in custom renders, make sure @mantine/core is installed.

Next Steps

Now that you have a basic understanding of Mantine DataTable:

Learn about advanced features like sorting, filtering, and pagination
Explore row selection and bulk operations
Implement server-side data loading
Add custom cell renderers and formatters
Discover column resizing and reordering
Check the official documentation: https://icflorescu.github.io/mantine-datatable/
Look for part 11 of this series for more advanced topics

Summary

You've successfully set up Mantine DataTable in your React application and created your first interactive data table. The component provides a clean, simple API for building data-rich interfaces with essential table functionality, all styled with Mantine's modern design system.

Advanced Data Table Implementation with ka-table in React

Michael Turner — Mon, 12 Jan 2026 10:09:59 +0000

ka-table is a powerful, flexible table component for React that provides advanced features including sorting, filtering, grouping, editing, and virtualization. It's designed with a plugin-based architecture that allows extensive customization and extension. This guide walks through implementing advanced table features using ka-table with React, covering complex data manipulation, custom plugins, and enterprise-grade implementations. This is part 9 of a series on using ka-table with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Advanced understanding of React hooks, context API, and state management
Familiarity with TypeScript (highly recommended)
Knowledge of functional programming concepts

Installation

Install ka-table and its dependencies:

npm install ka-table

Or with yarn:

yarn add ka-table

Or with pnpm:

pnpm add ka-table

Your package.json should include:

{
  "dependencies": {
    "ka-table": "^9.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

ka-table requires minimal setup. Import the necessary components and styles:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'ka-table/style.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a basic table component. Create src/DataTable.jsx:

// src/DataTable.jsx
import React, { useState } from 'react';
import { Table } from 'ka-table';
import {
  DataType,
  SortingMode,
  FilteringMode,
  PagingPosition
} from 'ka-table/enums';
import { kaPropsUtils } from 'ka-table/utils';

function DataTable() {
  const [data, setData] = useState([
    { id: 1, name: 'John Doe', age: 28, email: 'john@example.com', department: 'Engineering' },
    { id: 2, name: 'Jane Smith', age: 32, email: 'jane@example.com', department: 'Marketing' },
    { id: 3, name: 'Bob Johnson', age: 45, email: 'bob@example.com', department: 'Sales' },
    { id: 4, name: 'Alice Williams', age: 29, email: 'alice@example.com', department: 'Engineering' }
  ]);

  const columns = [
    { key: 'id', title: 'ID', dataType: DataType.Number, width: 80 },
    { key: 'name', title: 'Name', dataType: DataType.String, width: 200 },
    { key: 'age', title: 'Age', dataType: DataType.Number, width: 100 },
    { key: 'email', title: 'Email', dataType: DataType.String, width: 250 },
    { key: 'department', title: 'Department', dataType: DataType.String, width: 150 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>ka-table Data Table</h2>
      <Table
        columns={columns}
        data={data}
        rowKeyField="id"
        sortingMode={SortingMode.Single}
        filteringMode={FilteringMode.HeaderFilter}
        paging={{ enabled: true, pageSize: 10 }}
      />
    </div>
  );
}

export default DataTable;

Understanding the Basics

ka-table uses a plugin-based architecture where:

columns: Array of column definition objects
data: Array of row data objects
rowKeyField: Unique identifier field for rows
Plugins: Enable features like sorting, filtering, paging, etc.

Key concepts for advanced usage:

Enums: Use enums for data types, sorting modes, filtering modes
Plugins: Extend functionality with custom plugins
Actions: Dispatch actions to modify table state
Props Utils: Utility functions for working with table props

Here's an example with editing and custom cell rendering:

// src/EditableTable.jsx
import React, { useState } from 'react';
import { Table } from 'ka-table';
import {
  DataType,
  SortingMode,
  FilteringMode,
  EditingMode
} from 'ka-table/enums';

function EditableTable() {
  const [data, setData] = useState([
    { id: 1, product: 'Laptop', price: 999.99, stock: 15, category: 'Electronics' },
    { id: 2, product: 'Mouse', price: 29.99, stock: 8, category: 'Electronics' },
    { id: 3, product: 'Keyboard', price: 79.99, stock: 12, category: 'Electronics' }
  ]);

  const columns = [
    { key: 'id', title: 'ID', dataType: DataType.Number, width: 80 },
    { 
      key: 'product', 
      title: 'Product', 
      dataType: DataType.String, 
      width: 200,
      editor: (props) => (
        <input
          type="text"
          value={props.value}
          onChange={(e) => props.onValueChange(e.target.value)}
        />
      )
    },
    { 
      key: 'price', 
      title: 'Price', 
      dataType: DataType.Number, 
      width: 120,
      format: (value) => `$${value.toFixed(2)}`
    },
    { 
      key: 'stock', 
      title: 'Stock', 
      dataType: DataType.Number, 
      width: 100,
      style: (value) => ({
        backgroundColor: value < 10 ? '#ffebee' : 'transparent'
      })
    },
    { key: 'category', title: 'Category', dataType: DataType.String, width: 150 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Editable Table</h2>
      <Table
        columns={columns}
        data={data}
        rowKeyField="id"
        editingMode={EditingMode.Cell}
        sortingMode={SortingMode.Single}
        filteringMode={FilteringMode.HeaderFilter}
      />
    </div>
  );
}

export default EditableTable;

Practical Example / Building Something Real

Let's build a comprehensive admin dashboard table with advanced features:

// src/AdminDashboard.jsx
import React, { useState, useCallback } from 'react';
import { Table } from 'ka-table';
import {
  DataType,
  SortingMode,
  FilteringMode,
  EditingMode,
  PagingPosition,
  ActionType
} from 'ka-table/enums';
import { kaPropsUtils } from 'ka-table/utils';

function AdminDashboard() {
  const [data, setData] = useState([
    { 
      id: 1, 
      name: 'Sarah Johnson', 
      email: 'sarah@example.com',
      department: 'Engineering', 
      salary: 95000, 
      startDate: '2020-01-15',
      status: 'Active',
      role: 'Senior Developer'
    },
    { 
      id: 2, 
      name: 'Michael Chen', 
      email: 'michael@example.com',
      department: 'Marketing', 
      salary: 75000, 
      startDate: '2019-06-20',
      status: 'Active',
      role: 'Marketing Manager'
    },
    { 
      id: 3, 
      name: 'Emily Davis', 
      email: 'emily@example.com',
      department: 'Sales', 
      salary: 65000, 
      startDate: '2021-03-10',
      status: 'Active',
      role: 'Sales Representative'
    },
    { 
      id: 4, 
      name: 'David Wilson', 
      email: 'david@example.com',
      department: 'Engineering', 
      salary: 110000, 
      startDate: '2018-09-05',
      status: 'Active',
      role: 'Tech Lead'
    }
  ]);

  const [tableProps, changeTableProps] = useState({
    columns: [
      { 
        key: 'id', 
        title: 'ID', 
        dataType: DataType.Number, 
        width: 80,
        style: { textAlign: 'center' }
      },
      { 
        key: 'name', 
        title: 'Employee Name', 
        dataType: DataType.String, 
        width: 200,
        filterRowValue: '',
        editor: (props) => (
          <input
            type="text"
            value={props.value || ''}
            onChange={(e) => props.onValueChange(e.target.value)}
            style={{ width: '100%' }}
          />
        )
      },
      { 
        key: 'email', 
        title: 'Email', 
        dataType: DataType.String, 
        width: 250,
        filterRowValue: ''
      },
      { 
        key: 'department', 
        title: 'Department', 
        dataType: DataType.String, 
        width: 150,
        filterRowValue: '',
        editor: (props) => (
          <select
            value={props.value || ''}
            onChange={(e) => props.onValueChange(e.target.value)}
            style={{ width: '100%' }}
          >
            <option value="Engineering">Engineering</option>
            <option value="Marketing">Marketing</option>
            <option value="Sales">Sales</option>
            <option value="HR">HR</option>
          </select>
        )
      },
      { 
        key: 'role', 
        title: 'Role', 
        dataType: DataType.String, 
        width: 180,
        filterRowValue: ''
      },
      { 
        key: 'salary', 
        title: 'Salary', 
        dataType: DataType.Number, 
        width: 120,
        format: (value) => `$${value.toLocaleString()}`,
        style: (value) => ({
          backgroundColor: value > 100000 ? '#e8f5e9' : 'transparent',
          fontWeight: value > 100000 ? 'bold' : 'normal'
        }),
        editor: (props) => (
          <input
            type="number"
            value={props.value || 0}
            onChange={(e) => props.onValueChange(parseFloat(e.target.value) || 0)}
            style={{ width: '100%' }}
          />
        )
      },
      { 
        key: 'startDate', 
        title: 'Start Date', 
        dataType: DataType.Date, 
        width: 120,
        format: (value) => {
          if (!value) return '';
          const date = new Date(value);
          return date.toLocaleDateString('en-US');
        }
      },
      { 
        key: 'status', 
        title: 'Status', 
        dataType: DataType.String, 
        width: 120,
        filterRowValue: '',
        style: (value) => ({
          color: value === 'Active' ? '#28a745' : '#dc3545',
          fontWeight: 'bold'
        }),
        editor: (props) => (
          <select
            value={props.value || 'Active'}
            onChange={(e) => props.onValueChange(e.target.value)}
            style={{ width: '100%' }}
          >
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select>
        )
      }
    ],
    data: data,
    rowKeyField: 'id',
    sortingMode: SortingMode.Single,
    filteringMode: FilteringMode.HeaderFilter,
    editingMode: EditingMode.Cell,
    paging: {
      enabled: true,
      pageSize: 10,
      pageIndex: 0,
      position: PagingPosition.Bottom
    }
  });

  const dispatch = useCallback((action) => {
    changeTableProps((prevState) => {
      switch (action.type) {
        case ActionType.UpdateCellValue:
          const updatedData = prevState.data.map((row) => {
            if (row[prevState.rowKeyField] === action.rowKeyValue) {
              return { ...row, [action.columnKey]: action.value };
            }
            return row;
          });
          setData(updatedData);
          return { ...prevState, data: updatedData };
        case ActionType.UpdateFilterRowValue:
          return kaPropsUtils.updateFilterRowValue(prevState, action);
        case ActionType.UpdateSortDirection:
          return kaPropsUtils.updateSortDirection(prevState, action);
        case ActionType.UpdatePageIndex:
          return kaPropsUtils.updatePageIndex(prevState, action);
        default:
          return prevState;
      }
    });
  }, []);

  const handleAddRow = () => {
    const newRow = {
      id: Math.max(...data.map(d => d.id)) + 1,
      name: 'New Employee',
      email: 'new@example.com',
      department: 'Engineering',
      role: 'Developer',
      salary: 50000,
      startDate: new Date().toISOString().split('T')[0],
      status: 'Active'
    };
    setData([...data, newRow]);
    changeTableProps(prev => ({ ...prev, data: [...data, newRow] }));
  };

  const handleDeleteRow = () => {
    const selectedRows = kaPropsUtils.getSelectedRows(tableProps);
    if (selectedRows.length > 0) {
      const newData = data.filter(row => 
        !selectedRows.some(selected => selected.id === row.id)
      );
      setData(newData);
      changeTableProps(prev => ({ ...prev, data: newData }));
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px', alignItems: 'center' }}>
        <h2>Admin Dashboard</h2>
        <button
          onClick={handleAddRow}
          style={{
            padding: '8px 16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Add Row
        </button>
        <button
          onClick={handleDeleteRow}
          style={{
            padding: '8px 16px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Delete Selected
        </button>
      </div>
      <Table
        {...tableProps}
        dispatch={dispatch}
        childComponents={{
          cell: {
            content: (props) => {
              if (props.column.key === 'status') {
                return (
                  <span style={{ 
                    color: props.value === 'Active' ? '#28a745' : '#dc3545',
                    fontWeight: 'bold'
                  }}>
                    {props.value}
                  </span>
                );
              }
              return props.value;
            }
          }
        }}
      />
    </div>
  );
}

export default AdminDashboard;

This advanced example demonstrates:

Cell editing with custom editors (text input, select dropdown, number input)
Custom cell rendering with conditional styling
Filtering with header filters
Sorting functionality
Pagination
Row selection and deletion
Real-time data updates
Custom formatting (currency, dates)
Conditional styling based on cell values

Common Issues / Troubleshooting

Table not rendering: Ensure you've imported the CSS file (ka-table/style.css). Verify that your data array and columns array are properly structured.
Editing not working: Set editingMode={EditingMode.Cell} and implement custom editors in column definitions. Make sure you're handling the dispatch action for UpdateCellValue.
Filtering not working: Enable filteringMode={FilteringMode.HeaderFilter} and set filterRowValue: '' in column definitions. Implement the UpdateFilterRowValue action handler.
Sorting not working: Set sortingMode={SortingMode.Single} or SortingMode.Multiple and implement the UpdateSortDirection action handler using kaPropsUtils.updateSortDirection.
Performance issues: For large datasets, ensure virtualization is enabled (default) and consider implementing server-side pagination.
TypeScript errors: Install type definitions if available. ka-table has built-in TypeScript support, so ensure your column and data types match the expected interfaces.

Next Steps

Now that you've mastered ka-table:

Explore advanced plugins and custom extensions
Implement server-side data loading and pagination
Add custom action handlers and event listeners
Learn about row grouping and aggregation
Explore custom cell templates and renderers
Add export functionality (CSV, Excel)
Check the official repository: https://github.com/komarovalexander/ka-table
Look for part 10 of this series for more advanced topics

Summary

You've learned how to implement advanced data table features with ka-table, including cell editing, custom rendering, filtering, sorting, and pagination. The plugin-based architecture provides extensive flexibility for building enterprise-grade data management interfaces with excellent performance and customization options.

Building Feature-Rich Data Tables with jQWidgets React Grid

Michael Turner — Mon, 12 Jan 2026 10:08:57 +0000

jQWidgets React Grid is a comprehensive data grid component for React that provides enterprise-grade functionality including sorting, filtering, grouping, editing, and virtualization. It's part of the jQWidgets suite, offering a rich set of features for building complex data management interfaces. This guide walks through creating advanced, interactive data tables using jQWidgets React Grid, covering setup, configuration, and practical implementation patterns. This is part 8 of a series on using jQWidgets React Grid with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 14.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Basic understanding of React hooks (useState, useRef, useEffect)
Familiarity with JavaScript/TypeScript

Installation

Install jQWidgets React Grid package:

npm install jqwidgets-scripts

Or with yarn:

yarn add jqwidgets-scripts

Or with pnpm:

pnpm add jqwidgets-scripts

Your package.json should include:

{
  "dependencies": {
    "jqwidgets-scripts": "^15.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

jQWidgets requires CSS and JavaScript files to be imported. Add them to your main application file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a basic data grid component. Create src/DataGrid.jsx:

// src/DataGrid.jsx
import React, { useRef, useEffect } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material.css';

function DataGrid() {
  const gridRef = useRef(null);

  // Column definitions
  const columns = [
    { text: 'ID', datafield: 'id', width: 80 },
    { text: 'First Name', datafield: 'firstName', width: 150 },
    { text: 'Last Name', datafield: 'lastName', width: 150 },
    { text: 'Email', datafield: 'email', width: 200 },
    { text: 'Role', datafield: 'role', width: 120 }
  ];

  // Row data
  const source = {
    localdata: [
      { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com', role: 'Admin' },
      { id: 2, firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com', role: 'User' },
      { id: 3, firstName: 'Bob', lastName: 'Johnson', email: 'bob@example.com', role: 'User' },
      { id: 4, firstName: 'Alice', lastName: 'Williams', email: 'alice@example.com', role: 'Admin' }
    ],
    datatype: 'array'
  };

  useEffect(() => {
    if (gridRef.current && window.jqx) {
      // Initialize the grid
      window.jqx(gridRef.current, {
        width: '100%',
        height: 400,
        source: source,
        columns: columns,
        sortable: true,
        filterable: true,
        pageable: true,
        pagesize: 10
      });
    }
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h2>jQWidgets Data Grid</h2>
      <div ref={gridRef}></div>
    </div>
  );
}

export default DataGrid;

For a more React-friendly approach using the React wrapper component:

// src/DataGrid.jsx
import React from 'react';
import JqxGrid from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material.css';

function DataGrid() {
  const columns = [
    { text: 'ID', datafield: 'id', width: 80 },
    { text: 'First Name', datafield: 'firstName', width: 150 },
    { text: 'Last Name', datafield: 'lastName', width: 150 },
    { text: 'Email', datafield: 'email', width: 200 },
    { text: 'Role', datafield: 'role', width: 120 }
  ];

  const source = {
    localdata: [
      { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com', role: 'Admin' },
      { id: 2, firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com', role: 'User' },
      { id: 3, firstName: 'Bob', lastName: 'Johnson', email: 'bob@example.com', role: 'User' },
      { id: 4, firstName: 'Alice', lastName: 'Williams', email: 'alice@example.com', role: 'Admin' }
    ],
    datatype: 'array'
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>jQWidgets Data Grid</h2>
      <JqxGrid
        width={'100%'}
        height={400}
        source={source}
        columns={columns}
        sortable={true}
        filterable={true}
        pageable={true}
        pagesize={10}
      />
    </div>
  );
}

export default DataGrid;

Understanding the Basics

jQWidgets React Grid uses a configuration-based approach where:

columns: Array of column definition objects
source: Data source configuration with local data or remote URL
datafield: Maps to a property in your row data
text: Column header text
width: Column width in pixels

Key concepts:

Data Source: Can be local (array) or remote (URL/API)
Column Definitions: Define structure, behavior, and appearance
Features: Enable/disable features like sorting, filtering, pagination
Themes: Multiple built-in themes (material, dark, etc.)

Here's an example with editable cells and row selection:

// src/EditableGrid.jsx
import React, { useState } from 'react';
import JqxGrid from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material.css';

function EditableGrid() {
  const [selectedRowIndex, setSelectedRowIndex] = useState(null);

  const columns = [
    { text: 'ID', datafield: 'id', width: 80, editable: false },
    { text: 'Name', datafield: 'name', width: 200, editable: true },
    { text: 'Email', datafield: 'email', width: 250, editable: true },
    { text: 'Role', datafield: 'role', width: 150, editable: true }
  ];

  const source = {
    localdata: [
      { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
      { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
      { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' }
    ],
    datatype: 'array'
  };

  const handleCellEndEdit = (event) => {
    console.log('Cell edited:', event.args);
    // Update your data source here
  };

  const handleRowSelect = (event) => {
    setSelectedRowIndex(event.args.rowindex);
    console.log('Row selected:', event.args.row);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Editable Data Grid</h2>
      {selectedRowIndex !== null && (
        <p>Selected row index: {selectedRowIndex}</p>
      )}
      <JqxGrid
        width={'100%'}
        height={400}
        source={source}
        columns={columns}
        editable={true}
        selectionmode={'singlerow'}
        onCellendedit={handleCellEndEdit}
        onRowselect={handleRowSelect}
        sortable={true}
        filterable={true}
      />
    </div>
  );
}

export default EditableGrid;

Practical Example / Building Something Real

Let's build a comprehensive employee management table with advanced features:

// src/EmployeeManagement.jsx
import React, { useState, useRef } from 'react';
import JqxGrid from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material.css';

function EmployeeManagement() {
  const gridRef = useRef(null);
  const [data, setData] = useState([
    { id: 1, name: 'Sarah Johnson', department: 'Engineering', salary: 95000, status: 'Active' },
    { id: 2, name: 'Michael Chen', department: 'Marketing', salary: 75000, status: 'Active' },
    { id: 3, name: 'Emily Davis', department: 'Sales', salary: 65000, status: 'Active' },
    { id: 4, name: 'David Wilson', department: 'Engineering', salary: 110000, status: 'Active' },
    { id: 5, name: 'Lisa Anderson', department: 'HR', salary: 70000, status: 'Active' }
  ]);

  const columns = [
    { 
      text: 'ID', 
      datafield: 'id', 
      width: 80,
      pinned: true
    },
    { 
      text: 'Name', 
      datafield: 'name', 
      width: 200,
      editable: true,
      sortable: true
    },
    { 
      text: 'Department', 
      datafield: 'department', 
      width: 150,
      editable: true,
      filtertype: 'checkedlist'
    },
    { 
      text: 'Salary', 
      datafield: 'salary', 
      width: 120,
      editable: true,
      cellsformat: 'c2',
      cellsalign: 'right',
      filtertype: 'number'
    },
    { 
      text: 'Status', 
      datafield: 'status', 
      width: 120,
      editable: true,
      columntype: 'dropdownlist',
      filtertype: 'checkedlist'
    }
  ];

  const source = {
    localdata: data,
    datatype: 'array',
    datafields: [
      { name: 'id', type: 'number' },
      { name: 'name', type: 'string' },
      { name: 'department', type: 'string' },
      { name: 'salary', type: 'number' },
      { name: 'status', type: 'string' }
    ]
  };

  const handleAddRow = () => {
    const newRow = {
      id: data.length + 1,
      name: 'New Employee',
      department: 'Engineering',
      salary: 50000,
      status: 'Active'
    };
    setData([...data, newRow]);
  };

  const handleDeleteRow = () => {
    if (gridRef.current) {
      const selectedRowIndex = gridRef.current.getselectedrowindex();
      if (selectedRowIndex >= 0) {
        const newData = data.filter((_, index) => index !== selectedRowIndex);
        setData(newData);
      }
    }
  };

  const handleExport = () => {
    if (gridRef.current) {
      gridRef.current.exportdata('csv', 'employees');
    }
  };

  const handleCellEndEdit = (event) => {
    const { rowindex, datafield, value } = event.args;
    const newData = [...data];
    newData[rowindex][datafield] = value;
    setData(newData);
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px', alignItems: 'center' }}>
        <h2>Employee Management</h2>
        <JqxButton onClick={handleAddRow} width={100} height={30}>
          Add Row
        </JqxButton>
        <JqxButton onClick={handleDeleteRow} width={100} height={30}>
          Delete Row
        </JqxButton>
        <JqxButton onClick={handleExport} width={100} height={30}>
          Export CSV
        </JqxButton>
      </div>
      <JqxGrid
        ref={gridRef}
        width={'100%'}
        height={500}
        source={source}
        columns={columns}
        editable={true}
        selectionmode={'singlerow'}
        sortable={true}
        filterable={true}
        showfilterrow={true}
        pageable={true}
        pagesize={10}
        groupable={true}
        onCellendedit={handleCellEndEdit}
        theme={'material'}
      />
    </div>
  );
}

export default EmployeeManagement;

This example demonstrates:

Editable cells with different editor types
Row selection and deletion
Filtering with different filter types
Sorting and grouping
Pagination
Export functionality
Pinned columns
Custom cell formatting (currency for salary)
Dropdown editors for status field

Common Issues / Troubleshooting

Grid not rendering: Ensure you've imported both CSS files (jqx.base.css and a theme CSS like jqx.material.css). Also verify that jQWidgets scripts are loaded.
Data not displaying: Check that your source object has the correct structure with localdata array and datatype: 'array'. Verify that datafields match your column datafield values.
Editing not working: Set editable: true in your grid configuration and ensure individual columns have editable: true if you want specific columns editable.
Filtering not working: Enable filterable: true and showfilterrow: true in your grid configuration. Set appropriate filtertype in column definitions.
Performance issues: For large datasets, consider using remote data source with server-side pagination instead of loading all data at once.

Next Steps

Now that you understand jQWidgets React Grid:

Explore advanced features like grouping, aggregation, and pivoting
Implement custom cell renderers and editors
Add server-side data loading with remote data source
Learn about column resizing, reordering, and pinning
Explore different themes and customization options
Add export functionality (Excel, PDF, CSV)
Check the official documentation: https://www.jqwidgets.com/react/react-grid/
Look for part 9 of this series for more advanced topics

Summary

You've learned how to set up jQWidgets React Grid and create feature-rich data tables with sorting, filtering, editing, and pagination. The library provides comprehensive functionality for building enterprise-grade data management interfaces with excellent performance and extensive customization options.

Getting Started with ReactGrid in React: Building Your First Spreadsheet

Michael Turner — Mon, 12 Jan 2026 10:03:48 +0000

ReactGrid is a powerful, flexible spreadsheet component for React that provides Excel-like functionality with cell editing, formulas, and data manipulation. It's designed to be lightweight and easy to use while offering essential spreadsheet features for building data-intensive applications. This guide walks through setting up and creating your first interactive spreadsheet using ReactGrid with React, from installation to a working implementation. This is part 7 of a series on using ReactGrid with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install ReactGrid using your preferred package manager:

npm install @silevis/reactgrid

Or with yarn:

yarn add @silevis/reactgrid

Or with pnpm:

pnpm add @silevis/reactgrid

After installation, your package.json should include:

{
  "dependencies": {
    "@silevis/reactgrid": "^7.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

ReactGrid requires CSS styles to be imported. Add the styles to your main application file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@silevis/reactgrid/styles.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple spreadsheet component. Create a new file src/Spreadsheet.jsx:

// src/Spreadsheet.jsx
import React, { useState } from 'react';
import ReactGrid from '@silevis/reactgrid';
import '@silevis/reactgrid/styles.css';

function Spreadsheet() {
  // Define the initial data structure
  const [data, setData] = useState(() => {
    const rows = [
      [
        { type: 'header', text: 'Name' },
        { type: 'header', text: 'Age' },
        { type: 'header', text: 'City' }
      ],
      [
        { type: 'text', text: 'John Doe' },
        { type: 'number', value: 25 },
        { type: 'text', text: 'New York' }
      ],
      [
        { type: 'text', text: 'Jane Smith' },
        { type: 'number', value: 30 },
        { type: 'text', text: 'London' }
      ],
      [
        { type: 'text', text: 'Bob Johnson' },
        { type: 'number', value: 35 },
        { type: 'text', text: 'Paris' }
      ]
    ];
    return rows;
  });

  // Handle cell changes
  const handleChanges = (changes) => {
    setData((prevData) => {
      const newData = [...prevData];
      changes.forEach(({ rowId, columnId, newCell }) => {
        newData[rowId][columnId] = newCell;
      });
      return newData;
    });
  };

  return (
    <div style={{ height: '400px', width: '100%' }}>
      <ReactGrid
        rows={data}
        enableRangeSelection
        enableFillHandle
        enableRowSelection
        onChanges={handleChanges}
      />
    </div>
  );
}

export default Spreadsheet;

Now, update your App.jsx to use the spreadsheet:

// src/App.jsx
import React from 'react';
import Spreadsheet from './Spreadsheet';
import './App.css';

function App() {
  return (
    <div className="App" style={{ padding: '20px' }}>
      <h1>ReactGrid Example</h1>
      <Spreadsheet />
    </div>
  );
}

export default App;

This creates a basic spreadsheet with three columns (Name, Age, City) and three rows of data. You can click on cells to edit them, and the data will update in real-time.

Understanding the Basics

ReactGrid uses a cell-based data structure where each cell is an object with:

type: The cell type ('text', 'number', 'header', etc.)
text: Text content for text cells
value: Numeric value for number cells
style: Optional styling properties

Key concepts:

Rows: Array of row arrays, where each row contains cell objects
Cell Types: Different cell types for different data (text, number, date, etc.)
Changes Handler: Function that receives cell changes and updates the data
Features: Enable features like range selection, fill handle, and row selection

Here's a simpler example with just text data:

// src/SimpleSpreadsheet.jsx
import React, { useState } from 'react';
import ReactGrid from '@silevis/reactgrid';
import '@silevis/reactgrid/styles.css';

function SimpleSpreadsheet() {
  const [data, setData] = useState([
    [
      { type: 'header', text: 'A' },
      { type: 'header', text: 'B' },
      { type: 'header', text: 'C' }
    ],
    [
      { type: 'text', text: 'A1' },
      { type: 'text', text: 'B1' },
      { type: 'text', text: 'C1' }
    ],
    [
      { type: 'text', text: 'A2' },
      { type: 'text', text: 'B2' },
      { type: 'text', text: 'C2' }
    ]
  ]);

  const handleChanges = (changes) => {
    setData((prevData) => {
      const newData = [...prevData];
      changes.forEach(({ rowId, columnId, newCell }) => {
        newData[rowId][columnId] = newCell;
      });
      return newData;
    });
  };

  return (
    <div style={{ height: '300px', width: '100%' }}>
      <ReactGrid rows={data} onChanges={handleChanges} />
    </div>
  );
}

export default SimpleSpreadsheet;

Practical Example / Building Something Real

Let's build a budget tracker spreadsheet with calculations:

// src/BudgetTracker.jsx
import React, { useState } from 'react';
import ReactGrid from '@silevis/reactgrid';
import '@silevis/reactgrid/styles.css';

function BudgetTracker() {
  const [data, setData] = useState(() => {
    return [
      [
        { type: 'header', text: 'Category' },
        { type: 'header', text: 'Budgeted' },
        { type: 'header', text: 'Spent' },
        { type: 'header', text: 'Remaining' }
      ],
      [
        { type: 'text', text: 'Food' },
        { type: 'number', value: 500 },
        { type: 'number', value: 320 },
        { type: 'number', value: 180, style: { backgroundColor: '#d4edda' } }
      ],
      [
        { type: 'text', text: 'Transportation' },
        { type: 'number', value: 200 },
        { type: 'number', value: 150 },
        { type: 'number', value: 50, style: { backgroundColor: '#d4edda' } }
      ],
      [
        { type: 'text', text: 'Entertainment' },
        { type: 'number', value: 300 },
        { type: 'number', value: 280 },
        { type: 'number', value: 20, style: { backgroundColor: '#d4edda' } }
      ],
      [
        { type: 'text', text: 'Total', style: { fontWeight: 'bold' } },
        { type: 'number', value: 1000, style: { fontWeight: 'bold' } },
        { type: 'number', value: 750, style: { fontWeight: 'bold' } },
        { type: 'number', value: 250, style: { fontWeight: 'bold', backgroundColor: '#d4edda' } }
      ]
    ];
  });

  const calculateRemaining = (rowIndex) => {
    if (rowIndex === 0 || rowIndex === data.length - 1) return; // Skip header and total row

    const budgeted = data[rowIndex][1]?.value || 0;
    const spent = data[rowIndex][2]?.value || 0;
    const remaining = budgeted - spent;

    setData((prevData) => {
      const newData = [...prevData];
      newData[rowIndex][3] = {
        ...newData[rowIndex][3],
        value: remaining,
        style: {
          backgroundColor: remaining >= 0 ? '#d4edda' : '#f8d7da'
        }
      };
      return newData;
    });
  };

  const calculateTotals = () => {
    let totalBudgeted = 0;
    let totalSpent = 0;

    for (let i = 1; i < data.length - 1; i++) {
      totalBudgeted += data[i][1]?.value || 0;
      totalSpent += data[i][2]?.value || 0;
    }

    const totalRemaining = totalBudgeted - totalSpent;

    setData((prevData) => {
      const newData = [...prevData];
      const lastRow = newData.length - 1;
      newData[lastRow][1] = { ...newData[lastRow][1], value: totalBudgeted };
      newData[lastRow][2] = { ...newData[lastRow][2], value: totalSpent };
      newData[lastRow][3] = {
        ...newData[lastRow][3],
        value: totalRemaining,
        style: {
          backgroundColor: totalRemaining >= 0 ? '#d4edda' : '#f8d7da'
        }
      };
      return newData;
    });
  };

  const handleChanges = (changes) => {
    setData((prevData) => {
      const newData = prevData.map(row => [...row]);
      changes.forEach(({ rowId, columnId, newCell }) => {
        newData[rowId][columnId] = newCell;
      });

      // Recalculate remaining for changed rows
      changes.forEach(({ rowId }) => {
        if (rowId > 0 && rowId < newData.length - 1) {
          const budgeted = newData[rowId][1]?.value || 0;
          const spent = newData[rowId][2]?.value || 0;
          newData[rowId][3] = {
            ...newData[rowId][3],
            value: budgeted - spent,
            style: {
              backgroundColor: (budgeted - spent) >= 0 ? '#d4edda' : '#f8d7da'
            }
          };
        }
      });

      // Recalculate totals
      let totalBudgeted = 0;
      let totalSpent = 0;
      for (let i = 1; i < newData.length - 1; i++) {
        totalBudgeted += newData[i][1]?.value || 0;
        totalSpent += newData[i][2]?.value || 0;
      }
      const lastRow = newData.length - 1;
      newData[lastRow][1] = { ...newData[lastRow][1], value: totalBudgeted };
      newData[lastRow][2] = { ...newData[lastRow][2], value: totalSpent };
      newData[lastRow][3] = {
        ...newData[lastRow][3],
        value: totalBudgeted - totalSpent,
        style: {
          backgroundColor: (totalBudgeted - totalSpent) >= 0 ? '#d4edda' : '#f8d7da'
        }
      };

      return newData;
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Monthly Budget Tracker</h2>
      <div style={{ height: '400px', width: '100%', border: '1px solid #ccc' }}>
        <ReactGrid
          rows={data}
          enableRangeSelection
          enableFillHandle
          onChanges={handleChanges}
        />
      </div>
    </div>
  );
}

export default BudgetTracker;

This example demonstrates:

Header row with column titles
Editable number cells for budget and spent amounts
Automatic calculation of remaining amounts
Conditional styling (green for positive, red for negative)
Total row with sum calculations
Real-time updates when cells are edited

Common Issues / Troubleshooting

Spreadsheet not displaying: Make sure you've imported the CSS file (@silevis/reactgrid/styles.css). The container div must have an explicit height.
Cell editing not working: Ensure you're handling the onChanges event and updating your state properly. The changes handler receives an array of change objects.
Data structure errors: Remember that ReactGrid expects a 2D array structure (rows of cells). Each cell must be an object with at least a type property.
Style not applying: Cell styles should be included in the cell object's style property. Make sure you're spreading existing styles when updating cells.
Performance with large datasets: For very large spreadsheets, consider implementing virtualization or pagination. ReactGrid handles moderate-sized datasets well, but extremely large grids may need optimization.

Next Steps

Now that you have a basic understanding of ReactGrid:

Learn about advanced cell types (date, checkbox, dropdown)
Explore formula support and calculations
Implement custom cell renderers
Add data validation and formatting
Learn about row and column operations
Check the official repository: https://github.com/silevis/reactgrid
Look for part 8 of this series for more advanced topics

Summary

You've successfully set up ReactGrid in your React application and created your first interactive spreadsheet. ReactGrid provides a straightforward way to build Excel-like interfaces with cell editing, calculations, and data manipulation, making it perfect for building data-intensive applications.

Advanced Spreadsheet Implementation with RevoGrid in React

Michael Turner — Mon, 12 Jan 2026 10:00:18 +0000

RevoGrid is a high-performance, virtualized spreadsheet component for React that can handle millions of rows and columns with smooth scrolling and editing capabilities. Built with Web Components and optimized for performance, it's ideal for enterprise applications requiring Excel-like functionality. This guide walks through implementing advanced spreadsheet features using RevoGrid with React, covering virtual scrolling, custom cell editors, and complex data manipulation. This is part 6 of a series on using RevoGrid with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Advanced understanding of React hooks, refs, and performance optimization
Familiarity with Web Components and virtualization concepts
Knowledge of TypeScript (highly recommended)

Installation

Install RevoGrid React wrapper:

npm install @revolist/revogrid-react

Or with yarn:

yarn add @revolist/revogrid-react

Or with pnpm:

pnpm add @revolist/revogrid-react

Your package.json should include:

{
  "dependencies": {
    "@revolist/revogrid-react": "^6.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

RevoGrid requires minimal setup. Import the component and styles in your application:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@revolist/revogrid/dist/revogrid.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a basic RevoGrid component. Create src/Spreadsheet.jsx:

// src/Spreadsheet.jsx
import React, { useRef, useEffect } from 'react';
import { RevoGrid } from '@revolist/revogrid-react';
import '@revolist/revogrid/dist/revogrid.css';

function Spreadsheet() {
  const gridRef = useRef(null);

  // Column definitions
  const columns = [
    { prop: 'id', name: 'ID', size: 100 },
    { prop: 'name', name: 'Name', size: 200 },
    { prop: 'email', name: 'Email', size: 250 },
    { prop: 'role', name: 'Role', size: 150 }
  ];

  // Row data
  const rows = [
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Admin' }
  ];

  useEffect(() => {
    if (gridRef.current) {
      const grid = gridRef.current;
      // Set data after component mounts
      grid.columns = columns;
      grid.source = rows;
    }
  }, []);

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <RevoGrid ref={gridRef} />
    </div>
  );
}

export default Spreadsheet;

Understanding the Basics

RevoGrid uses a column-based configuration where:

prop: Maps to a property in your row data
name: Column header text
size: Column width in pixels
editor: Custom cell editor component
cellTemplate: Custom cell renderer

Key concepts for advanced usage:

Virtualization: Automatically handles large datasets through virtual scrolling
Web Components: Built on Web Components standard for performance
Refs: Use refs to access grid API and methods
Event Handlers: Respond to cell edits, selections, and other interactions

Here's an example with editable cells:

// src/EditableSpreadsheet.jsx
import React, { useRef, useEffect, useState } from 'react';
import { RevoGrid } from '@revolist/revogrid-react';
import '@revolist/revogrid/dist/revogrid.css';

function EditableSpreadsheet() {
  const gridRef = useRef(null);
  const [data, setData] = useState([
    { id: 1, product: 'Laptop', price: 999.99, stock: 15 },
    { id: 2, product: 'Mouse', price: 29.99, stock: 8 },
    { id: 3, product: 'Keyboard', price: 79.99, stock: 12 }
  ]);

  const columns = [
    { prop: 'id', name: 'ID', size: 80, readonly: true },
    { prop: 'product', name: 'Product', size: 200, editor: 'string' },
    { 
      prop: 'price', 
      name: 'Price', 
      size: 120, 
      editor: 'number',
      cellTemplate: (h, { value }) => `$${value.toFixed(2)}`
    },
    { prop: 'stock', name: 'Stock', size: 100, editor: 'number' }
  ];

  useEffect(() => {
    if (gridRef.current) {
      const grid = gridRef.current;
      grid.columns = columns;
      grid.source = data;

      // Handle cell editing
      grid.addEventListener('beforecellfocus', (e) => {
        console.log('Cell focus:', e.detail);
      });

      grid.addEventListener('aftercellfocus', (e) => {
        console.log('Cell edited:', e.detail);
        // Update data state
        const { row, prop, val } = e.detail;
        setData(prev => prev.map((item, idx) => 
          idx === row ? { ...item, [prop]: val } : item
        ));
      });
    }
  }, [data]);

  return (
    <div style={{ height: '400px', width: '100%', border: '1px solid #ddd' }}>
      <RevoGrid ref={gridRef} />
    </div>
  );
}

export default EditableSpreadsheet;

Practical Example / Building Something Real

Let's build a comprehensive financial data spreadsheet with formulas, formatting, and advanced features:

// src/FinancialSpreadsheet.jsx
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { RevoGrid } from '@revolist/revogrid-react';
import '@revolist/revogrid/dist/revogrid.css';

function FinancialSpreadsheet() {
  const gridRef = useRef(null);
  const [data, setData] = useState([]);

  // Initialize with sample financial data
  useEffect(() => {
    const initialData = [
      { month: 'January', revenue: 50000, expenses: 30000, profit: 20000 },
      { month: 'February', revenue: 55000, expenses: 32000, profit: 23000 },
      { month: 'March', revenue: 60000, expenses: 35000, profit: 25000 },
      { month: 'April', revenue: 58000, expenses: 33000, profit: 25000 },
      { month: 'May', revenue: 62000, expenses: 36000, profit: 26000 },
      { month: 'June', revenue: 65000, expenses: 38000, profit: 27000 }
    ];
    setData(initialData);
  }, []);

  const columns = [
    { 
      prop: 'month', 
      name: 'Month', 
      size: 150,
      pinned: 'left',
      readonly: true
    },
    { 
      prop: 'revenue', 
      name: 'Revenue', 
      size: 150,
      editor: 'number',
      cellTemplate: (h, { value }) => {
        return h('span', { style: { color: '#28a745', fontWeight: 'bold' } }, `$${value.toLocaleString()}`);
      }
    },
    { 
      prop: 'expenses', 
      name: 'Expenses', 
      size: 150,
      editor: 'number',
      cellTemplate: (h, { value }) => {
        return h('span', { style: { color: '#dc3545', fontWeight: 'bold' } }, `$${value.toLocaleString()}`);
      }
    },
    { 
      prop: 'profit', 
      name: 'Profit', 
      size: 150,
      editor: 'number',
      readonly: true,
      cellTemplate: (h, { value }) => {
        const color = value > 0 ? '#28a745' : '#dc3545';
        return h('span', { style: { color, fontWeight: 'bold' } }, `$${value.toLocaleString()}`);
      }
    },
    {
      prop: 'margin',
      name: 'Margin %',
      size: 120,
      readonly: true,
      cellTemplate: (h, { row }) => {
        const margin = ((row.profit / row.revenue) * 100).toFixed(2);
        const color = parseFloat(margin) > 30 ? '#28a745' : parseFloat(margin) > 20 ? '#ffc107' : '#dc3545';
        return h('span', { style: { color, fontWeight: 'bold' } }, `${margin}%`);
      }
    }
  ];

  useEffect(() => {
    if (gridRef.current && data.length > 0) {
      const grid = gridRef.current;

      // Calculate profit automatically when revenue or expenses change
      const updatedData = data.map(row => ({
        ...row,
        profit: row.revenue - row.expenses
      }));

      grid.columns = columns;
      grid.source = updatedData;

      // Handle cell editing
      const handleCellEdit = (e) => {
        const { row, prop, val } = e.detail;
        const newData = [...data];

        if (newData[row]) {
          newData[row] = { ...newData[row], [prop]: parseFloat(val) || 0 };
          // Recalculate profit
          newData[row].profit = newData[row].revenue - newData[row].expenses;
          setData(newData);
        }
      };

      grid.addEventListener('aftercellfocus', handleCellEdit);

      return () => {
        grid.removeEventListener('aftercellfocus', handleCellEdit);
      };
    }
  }, [data, columns]);

  const handleExport = useCallback(() => {
    if (gridRef.current) {
      const grid = gridRef.current;
      // Export functionality would be implemented here
      console.log('Exporting data:', data);
    }
  }, [data]);

  const handleAddRow = useCallback(() => {
    setData(prev => [...prev, {
      month: `Month ${prev.length + 1}`,
      revenue: 0,
      expenses: 0,
      profit: 0
    }]);
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
        <h2>Financial Data Spreadsheet</h2>
        <button
          onClick={handleAddRow}
          style={{
            padding: '8px 16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Add Row
        </button>
        <button
          onClick={handleExport}
          style={{
            padding: '8px 16px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Export
        </button>
      </div>
      <div style={{ height: '600px', width: '100%', border: '1px solid #ddd' }}>
        <RevoGrid 
          ref={gridRef}
          theme="material"
          range={true}
          resize={true}
          rowHeaders={true}
          columnHeaders={true}
        />
      </div>
    </div>
  );
}

export default FinancialSpreadsheet;

This advanced example demonstrates:

Automatic formula calculation (profit = revenue - expenses)
Custom cell templates with conditional styling
Pinned columns (month column stays fixed)
Real-time data updates
Cell editing with validation
Dynamic row addition
Export functionality preparation
Material theme styling

Common Issues / Troubleshooting

Grid not rendering: Ensure you've imported the CSS file (@revolist/revogrid/dist/revogrid.css). The grid requires explicit height on the container div.
Data not displaying: Make sure you're setting both columns and source properties on the grid ref after it mounts. Use useEffect to ensure the ref is available.
Cell editing not working: Verify that you've set editor property in column definitions and are handling the aftercellfocus event properly.
Performance issues: RevoGrid handles virtualization automatically, but for extremely large datasets (millions of rows), consider implementing data pagination or lazy loading.
TypeScript errors: Install type definitions if available, or create your own type declarations for the RevoGrid component and its API.
Event listeners not firing: Ensure you're adding event listeners in useEffect and cleaning them up properly to avoid memory leaks.

Next Steps

Now that you've mastered RevoGrid basics:

Explore advanced features like row grouping and aggregation
Implement custom cell editors and renderers
Add formula support and calculation engine
Learn about column resizing and reordering
Implement server-side data loading
Add export/import functionality (CSV, Excel)
Explore theming and customization options
Check the official repository: https://github.com/revolist/revogrid
Look for part 7 of this series for more advanced topics

Summary

You've learned how to implement advanced spreadsheet functionality with RevoGrid, including virtual scrolling, custom cell rendering, formula calculations, and real-time data updates. RevoGrid provides excellent performance for large datasets and offers extensive customization options for building enterprise-grade spreadsheet applications.

Building Interactive Data Tables with React Data Grid

Michael Turner — Mon, 12 Jan 2026 09:55:05 +0000

eact Data Grid (by Adazzle) is a powerful, feature-rich data grid component for React that provides Excel-like functionality with virtualization, sorting, filtering, and cell editing. It's designed to handle large datasets efficiently while maintaining smooth performance. This guide walks through creating interactive, performant data tables using React Data Grid, covering setup, configuration, and practical implementation patterns. This is part 5 of a series on using React Data Grid with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Basic understanding of React hooks (useState, useCallback)
Familiarity with TypeScript (optional but recommended)

Installation

Install React Data Grid using your preferred package manager:

npm install react-data-grid

Or with yarn:

yarn add react-data-grid

Or with pnpm:

pnpm add react-data-grid

For TypeScript support, types are included in the package. Your package.json should include:

{
  "dependencies": {
    "react-data-grid": "^7.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Data Grid requires CSS styles to be imported. Add the styles to your main application file or component:

// src/index.js or src/App.jsx
import 'react-data-grid/lib/styles.css';

If you're using a module bundler that doesn't handle CSS imports, you may need to configure it or import the CSS in your HTML file.

First Example / Basic Usage

Let's create a basic data grid component. Create src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import { DataGrid } from 'react-data-grid';
import 'react-data-grid/lib/styles.css';

// Define the row type
interface Row {
  id: number;
  title: string;
  count: number;
  status: string;
}

// Define columns
const columns = [
  { key: 'id', name: 'ID', width: 80 },
  { key: 'title', name: 'Title', resizable: true },
  { key: 'count', name: 'Count', width: 100 },
  { key: 'status', name: 'Status', width: 120 }
];

// Sample data
const rows: Row[] = [
  { id: 0, title: 'Task 1', count: 10, status: 'Active' },
  { id: 1, title: 'Task 2', count: 5, status: 'Pending' },
  { id: 2, title: 'Task 3', count: 15, status: 'Active' },
  { id: 3, title: 'Task 4', count: 8, status: 'Completed' },
  { id: 4, title: 'Task 5', count: 20, status: 'Active' }
];

function DataTable() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid columns={columns} rows={rows} />
    </div>
  );
}

export default DataTable;

If you're not using TypeScript, you can use JavaScript:

// src/DataTable.jsx
import React from 'react';
import { DataGrid } from 'react-data-grid';
import 'react-data-grid/lib/styles.css';

const columns = [
  { key: 'id', name: 'ID', width: 80 },
  { key: 'title', name: 'Title', resizable: true },
  { key: 'count', name: 'Count', width: 100 },
  { key: 'status', name: 'Status', width: 120 }
];

const rows = [
  { id: 0, title: 'Task 1', count: 10, status: 'Active' },
  { id: 1, title: 'Task 2', count: 5, status: 'Pending' },
  { id: 2, title: 'Task 3', count: 15, status: 'Active' },
  { id: 3, title: 'Task 4', count: 8, status: 'Completed' },
  { id: 4, title: 'Task 5', count: 20, status: 'Active' }
];

function DataTable() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid columns={columns} rows={rows} />
    </div>
  );
}

export default DataTable;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DataTable from './DataTable';
import './App.css';

function App() {
  return (
    <div className="App" style={{ padding: '20px' }}>
      <h1>React Data Grid Example</h1>
      <DataTable />
    </div>
  );
}

export default App;

This creates a basic data grid with resizable columns. You can drag column borders to resize them.

Understanding the Basics

React Data Grid uses a column-based configuration where each column defines:

key: Unique identifier that maps to a property in your row objects
name: Display header text
width: Column width in pixels (optional)
resizable: Allow column resizing (default: false)
sortable: Enable sorting (default: false)
editable: Enable cell editing (default: false)

Key concepts:

Columns: Define the structure and behavior of each column
Rows: Array of data objects where each object represents a table row
Virtualization: Automatically handles large datasets efficiently
Row Key Getter: Function to provide unique identifiers for rows (important for selection and updates)

Here's an example with sorting and row selection:

// src/SortableTable.jsx
import React, { useState } from 'react';
import { DataGrid, SelectColumn } from 'react-data-grid';
import 'react-data-grid/lib/styles.css';

const columns = [
  SelectColumn,
  { key: 'id', name: 'ID', width: 80, sortable: true },
  { key: 'name', name: 'Name', width: 200, sortable: true, resizable: true },
  { key: 'email', name: 'Email', width: 250, sortable: true },
  { key: 'role', name: 'Role', width: 150, sortable: true }
];

const rows = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
  { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Admin' }
];

function SortableTable() {
  const [sortColumns, setSortColumns] = useState([]);
  const [selectedRows, setSelectedRows] = useState(new Set());

  const sortedRows = React.useMemo(() => {
    if (sortColumns.length === 0) return rows;

    return [...rows].sort((a, b) => {
      for (const sort of sortColumns) {
        const aValue = a[sort.columnKey];
        const bValue = b[sort.columnKey];
        const comp = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
        return sort.direction === 'ASC' ? comp : -comp;
      }
      return 0;
    });
  }, [sortColumns]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        columns={columns}
        rows={sortedRows}
        rowKeyGetter={(row) => row.id}
        selectedRows={selectedRows}
        onSelectedRowsChange={setSelectedRows}
        sortColumns={sortColumns}
        onSortColumnsChange={setSortColumns}
      />
    </div>
  );
}

export default SortableTable;

Practical Example / Building Something Real

Let's build a comprehensive task management table with editing, filtering, and custom rendering:

// src/TaskManager.jsx
import React, { useState, useMemo } from 'react';
import { DataGrid } from 'react-data-grid';
import 'react-data-grid/lib/styles.css';

const columns = [
  { 
    key: 'id', 
    name: 'ID', 
    width: 60,
    frozen: true
  },
  { 
    key: 'title', 
    name: 'Title', 
    width: 200,
    resizable: true,
    editable: true,
    sortable: true
  },
  { 
    key: 'priority', 
    name: 'Priority', 
    width: 120,
    editable: true,
    renderCell: ({ row }) => {
      const colors = {
        High: '#dc3545',
        Medium: '#ffc107',
        Low: '#28a745'
      };
      return (
        <span style={{ 
          color: colors[row.priority] || '#6c757d',
          fontWeight: 'bold'
        }}>
          {row.priority}
        </span>
      );
    },
    renderEditCell: ({ row, onRowChange }) => {
      return (
        <select
          value={row.priority}
          onChange={(e) => onRowChange({ ...row, priority: e.target.value })}
          style={{ width: '100%', padding: '4px' }}
        >
          <option value="High">High</option>
          <option value="Medium">Medium</option>
          <option value="Low">Low</option>
        </select>
      );
    }
  },
  { 
    key: 'status', 
    name: 'Status', 
    width: 120,
    editable: true,
    renderCell: ({ row }) => {
      const statusColors = {
        'To Do': '#6c757d',
        'In Progress': '#007bff',
        'Done': '#28a745'
      };
      return (
        <span style={{ 
          color: statusColors[row.status] || '#6c757d',
          fontWeight: 'bold'
        }}>
          {row.status}
        </span>
      );
    }
  },
  { 
    key: 'assignee', 
    name: 'Assignee', 
    width: 150,
    editable: true,
    sortable: true
  },
  { 
    key: 'dueDate', 
    name: 'Due Date', 
    width: 120,
    editable: true,
    renderCell: ({ row }) => {
      if (!row.dueDate) return '-';
      const date = new Date(row.dueDate);
      return date.toLocaleDateString();
    },
    renderEditCell: ({ row, onRowChange }) => {
      return (
        <input
          type="date"
          value={row.dueDate || ''}
          onChange={(e) => onRowChange({ ...row, dueDate: e.target.value })}
          style={{ width: '100%', padding: '4px' }}
        />
      );
    }
  }
];

const initialRows = [
  { id: 1, title: 'Implement user authentication', priority: 'High', status: 'In Progress', assignee: 'John Doe', dueDate: '2024-12-31' },
  { id: 2, title: 'Design database schema', priority: 'Medium', status: 'Done', assignee: 'Jane Smith', dueDate: '2024-12-15' },
  { id: 3, title: 'Write API documentation', priority: 'Low', status: 'To Do', assignee: 'Bob Johnson', dueDate: '2025-01-10' },
  { id: 4, title: 'Setup CI/CD pipeline', priority: 'High', status: 'In Progress', assignee: 'Alice Williams', dueDate: '2024-12-20' },
  { id: 5, title: 'Code review and testing', priority: 'Medium', status: 'To Do', assignee: 'John Doe', dueDate: '2025-01-05' }
];

function TaskManager() {
  const [rows, setRows] = useState(initialRows);
  const [sortColumns, setSortColumns] = useState([]);
  const [filter, setFilter] = useState('');

  const filteredRows = useMemo(() => {
    if (!filter) return rows;
    const lowerFilter = filter.toLowerCase();
    return rows.filter(row => 
      Object.values(row).some(value => 
        String(value).toLowerCase().includes(lowerFilter)
      )
    );
  }, [rows, filter]);

  const sortedRows = useMemo(() => {
    if (sortColumns.length === 0) return filteredRows;

    return [...filteredRows].sort((a, b) => {
      for (const sort of sortColumns) {
        const aValue = a[sort.columnKey];
        const bValue = b[sort.columnKey];
        const comp = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
        return sort.direction === 'ASC' ? comp : -comp;
      }
      return 0;
    });
  }, [filteredRows, sortColumns]);

  const handleRowChange = (newRow) => {
    setRows(rows.map(row => row.id === newRow.id ? newRow : row));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Task Management</h2>
      <div style={{ marginBottom: '16px' }}>
        <input
          type="text"
          placeholder="Search tasks..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          style={{
            padding: '8px',
            width: '300px',
            border: '1px solid #ddd',
            borderRadius: '4px'
          }}
        />
      </div>
      <div style={{ height: 500, width: '100%', border: '1px solid #ddd' }}>
        <DataGrid
          columns={columns}
          rows={sortedRows}
          rowKeyGetter={(row) => row.id}
          onRowsChange={setRows}
          sortColumns={sortColumns}
          onSortColumnsChange={setSortColumns}
          defaultColumnOptions={{
            resizable: true,
            sortable: true
          }}
        />
      </div>
    </div>
  );
}

export default TaskManager;

This example demonstrates:

Editable cells with custom editors (dropdown, date picker)
Custom cell rendering with conditional styling
Frozen columns (ID column stays fixed)
Sorting functionality
Global search/filtering
Row updates with state management
Resizable columns

Common Issues / Troubleshooting

Styles not loading: Make sure you've imported 'react-data-grid/lib/styles.css' in your component or main entry file. Without styles, the grid won't display correctly.
Row selection not working: Implement rowKeyGetter prop to provide unique identifiers for each row. This is required for selection features.
Sorting not working: Ensure you're managing sortColumns state and implementing the sorting logic yourself, or use a library that handles it. React Data Grid doesn't sort automatically.
Performance with large datasets: React Data Grid uses virtualization by default, but for very large datasets (10,000+ rows), consider implementing server-side pagination or filtering.
TypeScript errors: Make sure you're using the correct types from react-data-grid. The library exports TypeScript types, so ensure your column and row types match the expected interfaces.

Next Steps

Now that you understand React Data Grid basics:

Explore advanced features like row grouping and aggregation
Implement custom cell editors and renderers
Add row expansion for nested data
Learn about column pinning and reordering
Implement server-side data loading
Add export functionality (CSV, Excel)
Check the official repository: https://github.com/adazzle/react-data-grid
Look for part 6 of this series for more advanced topics

Summary

You've learned how to set up React Data Grid and create interactive data tables with sorting, filtering, editing, and custom rendering. The library provides excellent performance for large datasets through virtualization and offers extensive customization options for building sophisticated data management interfaces.

Getting Started with MUI X Data Grid in React: Building Your First Data Table

Michael Turner — Mon, 12 Jan 2026 09:51:04 +0000

MUI X Data Grid is a powerful, feature-rich data grid component from Material-UI that provides Excel-like functionality for displaying and manipulating tabular data in React applications. It offers built-in features like sorting, filtering, pagination, and cell editing, making it perfect for building data-intensive interfaces. This guide walks through setting up and creating your first interactive data table using MUI X Data Grid with React, from installation to a working implementation. This is part 4 of a series on using MUI X Data Grid with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Material-UI core installed (required dependency)

Installation

First, install Material-UI core components and icons (required dependencies):

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Then install MUI X Data Grid:

npm install @mui/x-data-grid

Or install everything with yarn:

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-data-grid

Or with pnpm:

pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-data-grid

After installation, your package.json should include:

{
  "dependencies": {
    "@mui/x-data-grid": "^6.0.0",
    "@mui/material": "^5.0.0",
    "@mui/icons-material": "^5.0.0",
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

MUI X Data Grid uses Material-UI's theming system. Set up your app with the Material-UI theme provider. Update your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import App from './App';

const theme = createTheme();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple data grid component. Create a new file src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

function DataTable() {
  // Define columns - structure of your table
  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    { field: 'firstName', headerName: 'First name', width: 150 },
    { field: 'lastName', headerName: 'Last name', width: 150 },
    {
      field: 'age',
      headerName: 'Age',
      type: 'number',
      width: 110,
    },
    {
      field: 'email',
      headerName: 'Email',
      width: 200,
    },
  ];

  // Define rows - the data to display
  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35, email: 'jon.snow@example.com' },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42, email: 'cersei.lannister@example.com' },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45, email: 'jaime.lannister@example.com' },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16, email: 'arya.stark@example.com' },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null, email: 'daenerys.targaryen@example.com' },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150, email: 'melisandre@example.com' },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44, email: 'ferrara.clifford@example.com' },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36, email: 'rossini.frances@example.com' },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65, email: 'harvey.roxie@example.com' },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  );
}

export default DataTable;

Now, update your App.jsx to use the data table:

// src/App.jsx
import React from 'react';
import { Container, Typography, Box } from '@mui/material';
import DataTable from './DataTable';
import './App.css';

function App() {
  return (
    <Container maxWidth="lg">
      <Box sx={{ my: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          MUI X Data Grid Example
        </Typography>
        <DataTable />
      </Box>
    </Container>
  );
}

export default App;

This creates a fully functional data grid with:

Sortable columns (click column headers)
Pagination (5 rows per page)
Row selection with checkboxes
Responsive layout

Understanding the Basics

MUI X Data Grid uses a column-based configuration where each column is defined with:

field: The property name in your row data objects
headerName: The text displayed in the column header
width: Column width in pixels
type: Data type ('string', 'number', 'date', etc.)

The rows prop accepts an array of objects where each object represents a table row. Each object must have an id field that uniquely identifies the row.

Key props:

rows: Array of row data objects
columns: Array of column definition objects
pageSize: Number of rows per page
checkboxSelection: Enable row selection with checkboxes
disableSelectionOnClick: Prevent row selection when clicking cells

Here's a simpler example with just a few columns:

// src/SimpleTable.jsx
import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

function SimpleTable() {
  const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'name', headerName: 'Name', width: 200 },
    { field: 'value', headerName: 'Value', width: 130, type: 'number' },
  ];

  const rows = [
    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 },
  ];

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

export default SimpleTable;

Practical Example / Building Something Real

Let's build a product inventory table with more features:

// src/ProductInventory.jsx
import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { Box, Typography, Paper } from '@mui/material';

function ProductInventory() {
  const [selectionModel, setSelectionModel] = useState([]);

  const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { 
      field: 'name', 
      headerName: 'Product Name', 
      width: 200,
      editable: true
    },
    { 
      field: 'category', 
      headerName: 'Category', 
      width: 150,
      editable: true
    },
    { 
      field: 'price', 
      headerName: 'Price', 
      type: 'number',
      width: 130,
      editable: true,
      valueFormatter: (params) => {
        return `$${params.value.toFixed(2)}`;
      }
    },
    { 
      field: 'stock', 
      headerName: 'Stock', 
      type: 'number',
      width: 100,
      editable: true,
      cellClassName: (params) => {
        if (params.value < 10) {
          return 'low-stock';
        }
        return '';
      }
    },
    { 
      field: 'status', 
      headerName: 'Status', 
      width: 120,
      renderCell: (params) => {
        const status = params.value;
        const color = status === 'Active' ? 'green' : 'gray';
        return (
          <span style={{ color, fontWeight: 'bold' }}>
            {status}
          </span>
        );
      }
    }
  ];

  const rows = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15, status: 'Active' },
    { id: 2, name: 'Mouse', category: 'Electronics', price: 29.99, stock: 8, status: 'Active' },
    { id: 3, name: 'Keyboard', category: 'Electronics', price: 79.99, stock: 12, status: 'Active' },
    { id: 4, name: 'Monitor', category: 'Electronics', price: 299.99, stock: 5, status: 'Active' },
    { id: 5, name: 'Desk Chair', category: 'Furniture', price: 199.99, stock: 20, status: 'Active' },
    { id: 6, name: 'Desk', category: 'Furniture', price: 349.99, stock: 3, status: 'Active' },
    { id: 7, name: 'Lamp', category: 'Furniture', price: 49.99, stock: 25, status: 'Active' },
  ];

  const handleCellEditCommit = (params) => {
    console.log('Cell edited:', params);
    // Here you would typically update your data source
    // For example: updateProduct(params.id, params.field, params.value);
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h5" component="h2" gutterBottom>
        Product Inventory
      </Typography>
      <Typography variant="body2" color="text.secondary" gutterBottom>
        {selectionModel.length} product(s) selected
      </Typography>
      <Paper sx={{ height: 400, width: '100%' }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          rowsPerPageOptions={[5, 10, 20]}
          checkboxSelection
          disableSelectionOnClick
          selectionModel={selectionModel}
          onSelectionModelChange={(newSelection) => {
            setSelectionModel(newSelection);
          }}
          onCellEditCommit={handleCellEditCommit}
          sx={{
            '& .low-stock': {
              backgroundColor: '#ffebee',
              color: '#c62828',
              fontWeight: 'bold',
            },
          }}
        />
      </Paper>
    </Box>
  );
}

export default ProductInventory;

This example demonstrates:

Editable cells (double-click to edit)
Custom cell rendering for status
Conditional styling for low stock items
Row selection with state management
Value formatting for currency
Cell edit event handling

Common Issues / Troubleshooting

Grid not rendering: Ensure you've wrapped your app with ThemeProvider from @mui/material/styles and imported the necessary Material-UI dependencies.
Missing styles: Make sure you've installed @emotion/react and @emotion/styled as they're required for Material-UI styling.
"id" field required: Each row object must have a unique id field. If your data uses a different identifier, map it to id before passing to the grid.
Editable cells not working: Set editable: true in your column definitions and handle the onCellEditCommit event to persist changes.
TypeScript errors: If using TypeScript, ensure you're using the correct types from @mui/x-data-grid for columns and rows.

Next Steps

Now that you have a basic understanding of MUI X Data Grid:

Learn about advanced features like filtering, sorting, and column resizing
Explore server-side pagination for large datasets
Implement custom cell renderers and editors
Add export functionality (CSV, Excel)
Discover row grouping and aggregation features
Check the official documentation: https://mui.com/x/react-data-grid/
Look for part 5 of this series for more advanced topics

Summary

You've successfully set up MUI X Data Grid in your React application and created your first interactive data table. The component provides a solid foundation for building data-rich interfaces with built-in features like sorting, filtering, pagination, and cell editing, all styled with Material-UI's design system.

Advanced Data Management with GigaTables React: Building Enterprise-Grade Tables

Michael Turner — Mon, 12 Jan 2026 09:48:17 +0000

GigaTables React is a powerful, feature-rich table component library for React that provides advanced data management capabilities including server-side processing, real-time updates, complex filtering, and custom rendering. It's designed for enterprise applications that require sophisticated data manipulation and presentation. This guide walks through implementing advanced table features using GigaTables React, covering server-side data loading, custom components, and complex interactions. This is part 3 of a series on using GigaTables React with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Advanced understanding of React hooks, context API, and state management
Familiarity with async operations and API integration
Knowledge of TypeScript (optional but recommended)

Installation

Install GigaTables React and its dependencies:

npm install gigatables-react

Or with yarn:

yarn add gigatables-react

Or with pnpm:

pnpm add gigatables-react

For TypeScript support, you may also need type definitions:

npm install --save-dev @types/react @types/react-dom

Your package.json should include:

{
  "dependencies": {
    "gigatables-react": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0"
  }
}

Project Setup

GigaTables React requires minimal setup. Create a configuration file for table settings:

// src/config/tableConfig.js
export const defaultTableConfig = {
  ajax: {
    url: '/api/data',
    type: 'GET'
  },
  columns: [],
  pagination: {
    enabled: true,
    pageSize: 10,
    position: 'bottom'
  },
  sorting: {
    enabled: true,
    multiColumn: true
  },
  filtering: {
    enabled: true,
    global: true
  }
};

First Example / Basic Usage

Let's create a basic table component. Create src/components/DataTable.jsx:

// src/components/DataTable.jsx
import React, { useState, useEffect } from 'react';
import { GigaTables } from 'gigatables-react';

function DataTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate API call
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch('/api/users');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  const columns = [
    {
      name: 'id',
      title: 'ID',
      sortable: true,
      width: 80
    },
    {
      name: 'name',
      title: 'Name',
      sortable: true,
      filterable: true
    },
    {
      name: 'email',
      title: 'Email',
      sortable: true,
      filterable: true
    },
    {
      name: 'role',
      title: 'Role',
      sortable: true,
      filterable: true
    },
    {
      name: 'status',
      title: 'Status',
      sortable: true,
      render: (value) => (
        <span style={{ 
          color: value === 'active' ? 'green' : 'red',
          fontWeight: 'bold'
        }}>
          {value}
        </span>
      )
    }
  ];

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ padding: '20px' }}>
      <h2>User Management Table</h2>
      <GigaTables
        data={data}
        columns={columns}
        pagination={{
          enabled: true,
          pageSize: 10
        }}
        sorting={{
          enabled: true
        }}
        filtering={{
          enabled: true
        }}
      />
    </div>
  );
}

export default DataTable;

Understanding the Basics

GigaTables React uses a column-based configuration system where each column defines:

name: Property key in your data objects
title: Display header text
sortable: Enable sorting for the column
filterable: Enable filtering
render: Custom render function for cell content
width: Fixed column width

Key concepts for advanced usage:

Server-side processing: Load data asynchronously from APIs
Custom renderers: Create complex cell content with React components
Event handlers: Respond to user interactions (sort, filter, paginate)
State management: Integrate with Redux, Context API, or local state

Here's an example with server-side data loading:

// src/components/ServerSideTable.jsx
import React, { useState, useCallback } from 'react';
import { GigaTables } from 'gigatables-react';

function ServerSideTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    page: 1,
    pageSize: 10,
    total: 0
  });
  const [filters, setFilters] = useState({});
  const [sorting, setSorting] = useState({});

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        page: pagination.page.toString(),
        pageSize: pagination.pageSize.toString(),
        ...filters,
        ...sorting
      });

      const response = await fetch(`/api/data?${params}`);
      const result = await response.json();

      setData(result.data);
      setPagination(prev => ({
        ...prev,
        total: result.total
      }));
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setLoading(false);
    }
  }, [pagination.page, pagination.pageSize, filters, sorting]);

  React.useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handlePageChange = (page) => {
    setPagination(prev => ({ ...prev, page }));
  };

  const handleSort = (column, direction) => {
    setSorting({ [column]: direction });
  };

  const handleFilter = (column, value) => {
    setFilters(prev => ({
      ...prev,
      [column]: value
    }));
  };

  const columns = [
    { name: 'id', title: 'ID', sortable: true },
    { name: 'name', title: 'Name', sortable: true, filterable: true },
    { name: 'email', title: 'Email', sortable: true, filterable: true },
    { name: 'created', title: 'Created', sortable: true }
  ];

  return (
    <GigaTables
      data={data}
      columns={columns}
      loading={loading}
      pagination={{
        enabled: true,
        page: pagination.page,
        pageSize: pagination.pageSize,
        total: pagination.total,
        onPageChange: handlePageChange
      }}
      sorting={{
        enabled: true,
        onSort: handleSort
      }}
      filtering={{
        enabled: true,
        onFilter: handleFilter
      }}
    />
  );
}

export default ServerSideTable;

Practical Example / Building Something Real

Let's build a comprehensive admin dashboard table with advanced features:

// src/components/AdminDashboardTable.jsx
import React, { useState, useEffect, useCallback } from 'react';
import { GigaTables } from 'gigatables-react';

function AdminDashboardTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]);
  const [pagination, setPagination] = useState({
    page: 1,
    pageSize: 20,
    total: 0
  });
  const [filters, setFilters] = useState({});
  const [sorting, setSorting] = useState({ column: 'id', direction: 'asc' });

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const queryParams = new URLSearchParams({
        page: pagination.page.toString(),
        limit: pagination.pageSize.toString(),
        sortBy: sorting.column,
        sortOrder: sorting.direction,
        ...Object.entries(filters).reduce((acc, [key, value]) => {
          if (value) acc[key] = value;
          return acc;
        }, {})
      });

      const response = await fetch(`/api/admin/users?${queryParams}`);
      const result = await response.json();

      setData(result.users);
      setPagination(prev => ({
        ...prev,
        total: result.total
      }));
    } catch (error) {
      console.error('Failed to fetch data:', error);
    } finally {
      setLoading(false);
    }
  }, [pagination.page, pagination.pageSize, filters, sorting]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handleBulkAction = async (action) => {
    if (selectedRows.length === 0) return;

    try {
      const response = await fetch('/api/admin/users/bulk', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action,
          ids: selectedRows
        })
      });

      if (response.ok) {
        setSelectedRows([]);
        fetchData();
      }
    } catch (error) {
      console.error('Bulk action failed:', error);
    }
  };

  const columns = [
    {
      name: 'id',
      title: 'ID',
      width: 80,
      sortable: true,
      render: (value, row) => (
        <input
          type="checkbox"
          checked={selectedRows.includes(row.id)}
          onChange={(e) => {
            if (e.target.checked) {
              setSelectedRows([...selectedRows, row.id]);
            } else {
              setSelectedRows(selectedRows.filter(id => id !== row.id));
            }
          }}
        />
      )
    },
    {
      name: 'avatar',
      title: 'Avatar',
      width: 80,
      render: (value) => (
        <img
          src={value || '/default-avatar.png'}
          alt="Avatar"
          style={{
            width: '40px',
            height: '40px',
            borderRadius: '50%',
            objectFit: 'cover'
          }}
        />
      )
    },
    {
      name: 'name',
      title: 'Full Name',
      sortable: true,
      filterable: true,
      render: (value, row) => (
        <div>
          <strong>{value}</strong>
          <div style={{ fontSize: '12px', color: '#666' }}>
            {row.email}
          </div>
        </div>
      )
    },
    {
      name: 'role',
      title: 'Role',
      sortable: true,
      filterable: true,
      render: (value) => {
        const colors = {
          admin: '#dc3545',
          manager: '#ffc107',
          user: '#28a745'
        };
        return (
          <span
            style={{
              padding: '4px 8px',
              borderRadius: '4px',
              backgroundColor: colors[value] || '#6c757d',
              color: 'white',
              fontSize: '12px',
              fontWeight: 'bold'
            }}
          >
            {value.toUpperCase()}
          </span>
        );
      }
    },
    {
      name: 'status',
      title: 'Status',
      sortable: true,
      filterable: true,
      render: (value) => (
        <span
          style={{
            display: 'inline-block',
            width: '10px',
            height: '10px',
            borderRadius: '50%',
            backgroundColor: value === 'active' ? '#28a745' : '#dc3545',
            marginRight: '8px'
          }}
        />
      )
    },
    {
      name: 'lastLogin',
      title: 'Last Login',
      sortable: true,
      render: (value) => {
        if (!value) return 'Never';
        const date = new Date(value);
        return date.toLocaleDateString('en-US', {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        });
      }
    },
    {
      name: 'actions',
      title: 'Actions',
      width: 150,
      render: (value, row) => (
        <div>
          <button
            onClick={() => handleEdit(row.id)}
            style={{
              marginRight: '8px',
              padding: '4px 8px',
              border: '1px solid #007bff',
              backgroundColor: 'white',
              color: '#007bff',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Edit
          </button>
          <button
            onClick={() => handleDelete(row.id)}
            style={{
              padding: '4px 8px',
              border: '1px solid #dc3545',
              backgroundColor: 'white',
              color: '#dc3545',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Delete
          </button>
        </div>
      )
    }
  ];

  const handleEdit = (id) => {
    console.log('Edit user:', id);
    // Implement edit logic
  };

  const handleDelete = async (id) => {
    if (window.confirm('Are you sure you want to delete this user?')) {
      try {
        await fetch(`/api/admin/users/${id}`, { method: 'DELETE' });
        fetchData();
      } catch (error) {
        console.error('Delete failed:', error);
      }
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h2>Admin Dashboard</h2>
        <div>
          {selectedRows.length > 0 && (
            <>
              <button
                onClick={() => handleBulkAction('activate')}
                style={{ marginRight: '8px', padding: '8px 16px' }}
              >
                Activate Selected ({selectedRows.length})
              </button>
              <button
                onClick={() => handleBulkAction('deactivate')}
                style={{ marginRight: '8px', padding: '8px 16px' }}
              >
                Deactivate Selected
              </button>
              <button
                onClick={() => handleBulkAction('delete')}
                style={{ padding: '8px 16px', backgroundColor: '#dc3545', color: 'white', border: 'none' }}
              >
                Delete Selected
              </button>
            </>
          )}
        </div>
      </div>

      <GigaTables
        data={data}
        columns={columns}
        loading={loading}
        pagination={{
          enabled: true,
          page: pagination.page,
          pageSize: pagination.pageSize,
          total: pagination.total,
          onPageChange: (page) => setPagination(prev => ({ ...prev, page }))
        }}
        sorting={{
          enabled: true,
          column: sorting.column,
          direction: sorting.direction,
          onSort: (column, direction) => setSorting({ column, direction })
        }}
        filtering={{
          enabled: true,
          filters: filters,
          onFilter: (column, value) => {
            setFilters(prev => ({
              ...prev,
              [column]: value
            }));
            setPagination(prev => ({ ...prev, page: 1 }));
          }}
        }}
      />
    </div>
  );
}

export default AdminDashboardTable;

This advanced example demonstrates:

Server-side data loading with pagination, sorting, and filtering
Custom cell renderers with complex components
Row selection and bulk actions
Real-time data updates
Custom action buttons per row
Loading states and error handling
Responsive design considerations

Common Issues / Troubleshooting

Data not loading: Ensure your API endpoints return data in the expected format. Check network requests in browser DevTools and verify CORS settings if calling external APIs.
Sorting/filtering not working: Verify that your column definitions have sortable: true or filterable: true set, and that your data handler functions are properly connected to the table events.
Performance issues with large datasets: Implement server-side processing instead of loading all data at once. Use pagination and lazy loading for better performance.
Custom renderers not updating: Make sure your render functions are pure and don't depend on external state that might not trigger re-renders. Use React.memo for expensive render functions.
TypeScript errors: Install proper type definitions and ensure your column definitions match the expected interface structure.

Next Steps

Now that you've mastered advanced GigaTables React features:

Explore custom plugins and extensions
Implement real-time data synchronization with WebSockets
Add advanced filtering with multiple conditions
Create custom export functionality (CSV, Excel, PDF)
Integrate with state management libraries (Redux, Zustand)
Build reusable table components and hooks
Check the official repository: https://github.com/GigaTables/reactables
Look for part 4 of this series for more advanced topics

Summary

You've learned how to implement advanced data management features with GigaTables React, including server-side processing, custom rendering, bulk operations, and complex interactions. The library provides a robust foundation for building enterprise-grade data tables with sophisticated functionality and excellent performance.

Building Advanced Data Tables with AG Grid in React

Michael Turner — Mon, 12 Jan 2026 09:45:25 +0000

AG Grid is a powerful, feature-rich data grid library for React that provides enterprise-grade functionality including sorting, filtering, pagination, cell editing, and much more. It's designed to handle large datasets efficiently while maintaining excellent performance. This guide walks through creating advanced, interactive data tables using AG Grid with React, covering setup, configuration, and practical implementation patterns. This is part 2 of a series on using AG Grid with React.

Prerequisites

Before you begin, ensure you have:

Node.js version 16.0 or higher
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) with hooks support
Basic understanding of React hooks (useState, useRef, useCallback)
Familiarity with JavaScript/TypeScript

Installation

Install AG Grid React package and its community styles:

npm install ag-grid-react ag-grid-community

Or with yarn:

yarn add ag-grid-react ag-grid-community

Or with pnpm:

pnpm add ag-grid-react ag-grid-community

Your package.json should now include:

{
  "dependencies": {
    "ag-grid-react": "^31.0.0",
    "ag-grid-community": "^31.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

AG Grid requires CSS styles to be imported. Add the grid styles and a theme to your main application file:

// src/index.js or src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Available themes include:

ag-theme-quartz (modern, default)
ag-theme-alpine (classic)
ag-theme-balham (dark)

First Example / Basic Usage

Let's create a basic data grid component. Create src/DataGrid.jsx:

// src/DataGrid.jsx
import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

function DataGrid() {
  // Row data - the data to be displayed
  const [rowData] = useState([
    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
    { make: 'BMW', model: '3 Series', price: 41500, electric: false },
    { make: 'Nissan', model: 'Leaf', price: 28140, electric: true }
  ]);

  // Column definitions - defines the columns structure
  const [columnDefs] = useState([
    { field: 'make', sortable: true, filter: true },
    { field: 'model', sortable: true, filter: true },
    { 
      field: 'price', 
      sortable: true, 
      filter: 'agNumberColumnFilter',
      valueFormatter: params => '$' + params.value.toLocaleString()
    },
    { 
      field: 'electric',
      cellRenderer: params => params.value ? '⚡ Yes' : 'No'
    }
  ]);

  // Default column properties applied to all columns
  const defaultColDef = {
    sortable: true,
    filter: true,
    flex: 1,
    resizable: true
  };

  return (
    <div className="ag-theme-quartz" style={{ height: 500, width: '100%' }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        pagination={true}
        paginationPageSize={10}
      />
    </div>
  );
}

export default DataGrid;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DataGrid from './DataGrid';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>AG Grid Data Table</h1>
      <DataGrid />
    </div>
  );
}

export default App;

This creates a fully functional data grid with sorting, filtering, and pagination. Users can click column headers to sort, use the filter icons, and navigate through pages.

Understanding the Basics

AG Grid uses a declarative approach where you define:

rowData: An array of objects representing table rows
columnDefs: An array defining column structure, properties, and behavior
defaultColDef: Default properties applied to all columns

Key concepts:

Field: Maps to a property in your row data object
Cell Renderer: Custom component or function to render cell content
Value Formatter: Formats the displayed value without changing the data
Filters: Built-in filters (text, number, date) or custom filters
Sorting: Enable sorting per column or globally

Here's an example with editable cells and row selection:

// src/EditableGrid.jsx
import React, { useState, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

function EditableGrid() {
  const [rowData, setRowData] = useState([
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28 },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32 },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45 }
  ]);

  const [columnDefs] = useState([
    { 
      field: 'id', 
      checkboxSelection: true, 
      headerCheckboxSelection: true,
      width: 100
    },
    { field: 'name', editable: true, sortable: true },
    { field: 'email', editable: true, filter: 'agTextColumnFilter' },
    { 
      field: 'age', 
      editable: true, 
      filter: 'agNumberColumnFilter',
      cellEditor: 'agNumberCellEditor'
    }
  ]);

  const defaultColDef = {
    flex: 1,
    sortable: true,
    filter: true
  };

  const onCellValueChanged = useCallback((event) => {
    console.log('Cell value changed:', event.data);
    // Update your state or sync with backend
    const updatedData = rowData.map(row => 
      row.id === event.data.id ? event.data : row
    );
    setRowData(updatedData);
  }, [rowData]);

  return (
    <div className="ag-theme-quartz" style={{ height: 400, width: '100%' }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        rowSelection="multiple"
        onCellValueChanged={onCellValueChanged}
        animateRows={true}
      />
    </div>
  );
}

export default EditableGrid;

Practical Example / Building Something Real

Let's build a comprehensive employee management table with advanced features:

// src/EmployeeTable.jsx
import React, { useState, useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

function EmployeeTable() {
  const gridRef = useRef();
  const [rowData] = useState([
    { 
      id: 1, 
      name: 'Sarah Johnson', 
      department: 'Engineering', 
      salary: 95000, 
      startDate: '2020-01-15',
      status: 'Active'
    },
    { 
      id: 2, 
      name: 'Michael Chen', 
      department: 'Marketing', 
      salary: 75000, 
      startDate: '2019-06-20',
      status: 'Active'
    },
    { 
      id: 3, 
      name: 'Emily Davis', 
      department: 'Sales', 
      salary: 65000, 
      startDate: '2021-03-10',
      status: 'Active'
    },
    { 
      id: 4, 
      name: 'David Wilson', 
      department: 'Engineering', 
      salary: 110000, 
      startDate: '2018-09-05',
      status: 'Active'
    },
    { 
      id: 5, 
      name: 'Lisa Anderson', 
      department: 'HR', 
      salary: 70000, 
      startDate: '2022-01-08',
      status: 'Active'
    }
  ]);

  const [columnDefs] = useState([
    { 
      field: 'id', 
      headerName: 'ID',
      width: 80,
      checkboxSelection: true,
      headerCheckboxSelection: true
    },
    { 
      field: 'name', 
      headerName: 'Employee Name',
      sortable: true,
      filter: 'agTextColumnFilter',
      editable: true
    },
    { 
      field: 'department', 
      headerName: 'Department',
      sortable: true,
      filter: 'agSetColumnFilter',
      editable: true,
      cellEditor: 'agSelectCellEditor',
      cellEditorParams: {
        values: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance']
      }
    },
    { 
      field: 'salary', 
      headerName: 'Salary',
      sortable: true,
      filter: 'agNumberColumnFilter',
      editable: true,
      cellEditor: 'agNumberCellEditor',
      valueFormatter: params => '$' + params.value.toLocaleString(),
      cellStyle: params => {
        if (params.value > 100000) {
          return { backgroundColor: '#d4edda' };
        }
        return null;
      }
    },
    { 
      field: 'startDate', 
      headerName: 'Start Date',
      sortable: true,
      filter: 'agDateColumnFilter',
      valueFormatter: params => {
        const date = new Date(params.value);
        return date.toLocaleDateString('en-US');
      }
    },
    { 
      field: 'status', 
      headerName: 'Status',
      sortable: true,
      filter: 'agSetColumnFilter',
      cellRenderer: params => {
        const status = params.value;
        const color = status === 'Active' ? 'green' : 'red';
        return `<span style="color: ${color}; font-weight: bold;">${status}</span>`;
      }
    }
  ]);

  const defaultColDef = {
    flex: 1,
    sortable: true,
    filter: true,
    resizable: true
  };

  const onGridReady = useCallback((params) => {
    console.log('Grid ready with', params.api.getDisplayedRowCount(), 'rows');
    // Auto-size columns to fit content
    params.api.sizeColumnsToFit();
  }, []);

  const onSelectionChanged = useCallback(() => {
    const selectedRows = gridRef.current.api.getSelectedRows();
    console.log('Selected rows:', selectedRows);
  }, []);

  const onExportClick = useCallback(() => {
    gridRef.current.api.exportDataAsCsv({
      fileName: 'employees.csv',
      onlySelected: false
    });
  }, []);

  const onFilterChanged = useCallback(() => {
    const rowCount = gridRef.current.api.getDisplayedRowCount();
    console.log('Filtered rows:', rowCount);
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px' }}>
        <h2>Employee Management Table</h2>
        <button 
          onClick={onExportClick}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Export to CSV
        </button>
      </div>
      <div 
        className="ag-theme-quartz" 
        style={{ height: 600, width: '100%' }}
      >
        <AgGridReact
          ref={gridRef}
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          rowSelection="multiple"
          pagination={true}
          paginationPageSize={10}
          animateRows={true}
          onGridReady={onGridReady}
          onSelectionChanged={onSelectionChanged}
          onFilterChanged={onFilterChanged}
        />
      </div>
    </div>
  );
}

export default EmployeeTable;

This example demonstrates:

Multi-row selection with checkboxes
Editable cells with validation
Custom cell renderers and formatters
Conditional cell styling
Export functionality
Advanced filtering (text, number, date, set filters)
Event handling for grid interactions

Common Issues / Troubleshooting

Grid not displaying: Ensure you've imported both CSS files (ag-grid.css and a theme CSS). The container div must have an explicit height.
Styling issues: Make sure you're applying the theme class (ag-theme-quartz) to the container div, not just importing the CSS.
Performance with large datasets: For datasets with 1000+ rows, consider enabling virtualization (enabled by default) or using the server-side row model for better performance.
TypeScript errors: If using TypeScript, install @types/react and ensure your column definitions match the ColDef type from ag-grid-community.
Cell editing not working: Verify that editable: true is set in column definitions and that you're handling onCellValueChanged events if needed.

Next Steps

Now that you understand the basics of AG Grid:

Explore advanced features like custom cell renderers, cell editors, and value getters
Learn about server-side row model for handling large datasets
Implement custom filters and sorting logic
Add row grouping and aggregation features
Explore the enterprise features (if using AG Grid Enterprise)
Check the official documentation: https://www.ag-grid.com/react-data-grid/
Look for part 3 of this series for more advanced topics

Summary

You've learned how to set up AG Grid in React and create feature-rich data tables with sorting, filtering, pagination, and editing capabilities. AG Grid provides a robust foundation for building enterprise-grade data management interfaces with excellent performance and extensive customization options.

Getting Started with Fortune Sheet in React: Building Your First Spreadsheet

Michael Turner — Mon, 12 Jan 2026 09:43:13 +0000

Fortune Sheet is a powerful, open-source spreadsheet component for React that provides Excel-like functionality directly in your web application. It offers features like cell editing, formulas, formatting, and data manipulation, making it perfect for building data-intensive applications. This guide walks through setting up and creating your first interactive spreadsheet using Fortune Sheet with React, from installation to a working implementation. This is part 1 of a series on using Fortune Sheet with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 16.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)

Installation

Install Fortune Sheet and its dependencies using your preferred package manager:

npm install fortune-sheet

Or with yarn:

yarn add fortune-sheet

Or with pnpm:

pnpm add fortune-sheet

After installation, your package.json should include the dependency:

{
  "dependencies": {
    "fortune-sheet": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Fortune Sheet requires CSS styles to be imported. Create or update your main entry file (typically src/index.js or src/main.jsx) to include the necessary styles:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'fortune-sheet/dist/fortune-sheet.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

If you're using a CSS-in-JS solution or want to import styles differently, you can also import the CSS in your component file.

First Example / Basic Usage

Let's create a simple spreadsheet component to get started. Create a new file src/Spreadsheet.jsx:

// src/Spreadsheet.jsx
import React, { useRef, useEffect } from 'react';
import FortuneSheet from 'fortune-sheet';

function Spreadsheet() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      // Initialize Fortune Sheet
      const sheet = new FortuneSheet(containerRef.current, {
        data: [
          [
            { v: 'Name', ct: { fa: 'General', t: 'g' } },
            { v: 'Age', ct: { fa: 'General', t: 'g' } },
            { v: 'City', ct: { fa: 'General', t: 'g' } }
          ],
          [
            { v: 'John', ct: { fa: 'General', t: 'g' } },
            { v: 25, ct: { fa: 'General', t: 'n' } },
            { v: 'New York', ct: { fa: 'General', t: 'g' } }
          ],
          [
            { v: 'Jane', ct: { fa: 'General', t: 'g' } },
            { v: 30, ct: { fa: 'General', t: 'n' } },
            { v: 'London', ct: { fa: 'General', t: 'g' } }
          ]
        ],
        defaultRowHeight: 25,
        defaultColWidth: 100
      });

      // Cleanup on unmount
      return () => {
        if (sheet && sheet.destroy) {
          sheet.destroy();
        }
      };
    }
  }, []);

  return (
    <div 
      ref={containerRef} 
      style={{ width: '100%', height: '500px' }}
    />
  );
}

export default Spreadsheet;

Now, update your App.jsx to use the spreadsheet:

// src/App.jsx
import React from 'react';
import Spreadsheet from './Spreadsheet';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Fortune Sheet Example</h1>
      <Spreadsheet />
    </div>
  );
}

export default App;

This creates a basic spreadsheet with three columns (Name, Age, City) and two rows of data. The spreadsheet is fully interactive - you can click on cells to edit them, navigate with arrow keys, and resize columns.

Understanding the Basics

Fortune Sheet uses a data structure where each cell is represented as an object with:

v: The cell value (can be a string, number, or formula)
ct: Cell type information with format (fa) and type (t)
- t: 'g' for general/text
- t: 'n' for numbers

The component initializes with a container DOM element and a configuration object. The configuration includes:

data: A 2D array of cell objects representing the spreadsheet data
defaultRowHeight: Height of rows in pixels
defaultColWidth: Width of columns in pixels

Here's a simpler example with just text data:

// src/SimpleSpreadsheet.jsx
import React, { useRef, useEffect } from 'react';
import FortuneSheet from 'fortune-sheet';

function SimpleSpreadsheet() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      const sheet = new FortuneSheet(containerRef.current, {
        data: [
          [{ v: 'A1' }, { v: 'B1' }, { v: 'C1' }],
          [{ v: 'A2' }, { v: 'B2' }, { v: 'C2' }],
          [{ v: 'A3' }, { v: 'B3' }, { v: 'C3' }]
        ]
      });

      return () => {
        if (sheet && sheet.destroy) {
          sheet.destroy();
        }
      };
    }
  }, []);

  return (
    <div 
      ref={containerRef} 
      style={{ 
        width: '100%', 
        height: '400px',
        border: '1px solid #ddd'
      }}
    />
  );
}

export default SimpleSpreadsheet;

Practical Example / Building Something Real

Let's build a more practical example - a budget tracker spreadsheet. This will demonstrate how to work with formulas and handle user interactions:

// src/BudgetTracker.jsx
import React, { useRef, useEffect, useState } from 'react';
import FortuneSheet from 'fortune-sheet';
import 'fortune-sheet/dist/fortune-sheet.css';

function BudgetTracker() {
  const containerRef = useRef(null);
  const [sheetInstance, setSheetInstance] = useState(null);

  useEffect(() => {
    if (containerRef.current) {
      const sheet = new FortuneSheet(containerRef.current, {
        data: [
          [
            { v: 'Category', ct: { fa: 'General', t: 'g' } },
            { v: 'Budgeted', ct: { fa: 'General', t: 'g' } },
            { v: 'Spent', ct: { fa: 'General', t: 'g' } },
            { v: 'Remaining', ct: { fa: 'General', t: 'g' } }
          ],
          [
            { v: 'Food', ct: { fa: 'General', t: 'g' } },
            { v: 500, ct: { fa: 'General', t: 'n' } },
            { v: 320, ct: { fa: 'General', t: 'n' } },
            { v: '=B2-C2', ct: { fa: 'General', t: 'g' } }
          ],
          [
            { v: 'Transportation', ct: { fa: 'General', t: 'g' } },
            { v: 200, ct: { fa: 'General', t: 'n' } },
            { v: 150, ct: { fa: 'General', t: 'n' } },
            { v: '=B3-C3', ct: { fa: 'General', t: 'g' } }
          ],
          [
            { v: 'Entertainment', ct: { fa: 'General', t: 'g' } },
            { v: 300, ct: { fa: 'General', t: 'n' } },
            { v: 280, ct: { fa: 'General', t: 'n' } },
            { v: '=B4-C4', ct: { fa: 'General', t: 'g' } }
          ],
          [
            { v: 'Total', ct: { fa: 'General', t: 'g' } },
            { v: '=SUM(B2:B4)', ct: { fa: 'General', t: 'g' } },
            { v: '=SUM(C2:C4)', ct: { fa: 'General', t: 'g' } },
            { v: '=SUM(D2:D4)', ct: { fa: 'General', t: 'g' } }
          ]
        ],
        defaultRowHeight: 30,
        defaultColWidth: 120,
        allowEdit: true
      });

      setSheetInstance(sheet);

      return () => {
        if (sheet && sheet.destroy) {
          sheet.destroy();
        }
      };
    }
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Monthly Budget Tracker</h2>
      <div 
        ref={containerRef} 
        style={{ 
          width: '100%', 
          height: '400px',
          border: '1px solid #ccc',
          borderRadius: '4px'
        }}
      />
    </div>
  );
}

export default BudgetTracker;

This example creates a functional budget tracker with:

Headers for categories and columns
Budgeted and spent amounts
Formulas to calculate remaining amounts
A total row with SUM formulas
Full editing capabilities

Common Issues / Troubleshooting

Spreadsheet not rendering: Make sure you've imported the CSS file (fortune-sheet/dist/fortune-sheet.css). Without the styles, the spreadsheet may not display correctly.
Container has no height: The container div must have an explicit height. Use inline styles or CSS to set a height (e.g., height: '500px').
Memory leaks: Always clean up the sheet instance in the useEffect cleanup function by calling sheet.destroy() to prevent memory leaks.
Data format errors: Ensure your data array follows the correct structure with cell objects containing v (value) and ct (cell type) properties.

Next Steps

Now that you have a basic understanding of Fortune Sheet:

Learn about advanced features like cell formatting, conditional formatting, and data validation
Explore how to save and load spreadsheet data
Discover how to customize the appearance and add custom functions
Check out the official repository: https://github.com/ruilisi/fortune-sheet
Look for part 2 of this series for more advanced topics

Summary

You've successfully set up Fortune Sheet in your React application and created your first interactive spreadsheet. You can now create spreadsheets with editable cells, formulas, and custom data structures. The library provides a solid foundation for building data-intensive applications with Excel-like functionality.