DEV Community: Nathan Collins

Building Feature-Rich Data Tables with KendoReact Grid

Nathan Collins — Fri, 16 Jan 2026 13:57:26 +0000

KendoReact Grid is a powerful, enterprise-grade data grid component from Telerik that provides comprehensive functionality including sorting, filtering, pagination, editing, grouping, and virtualization. It's part of the KendoReact UI suite, offering a rich set of features for building complex data management interfaces with excellent performance. This guide walks through creating advanced, interactive data tables using KendoReact Grid with React, covering setup, configuration, and practical implementation patterns. This is part 20 of a series on using KendoReact 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, useCallback)
Familiarity with JavaScript/TypeScript
KendoReact license (required for commercial use)

Installation

Install KendoReact Grid package:

npm install @progress/kendo-react-grid

For styling, also install the theme package:

npm install @progress/kendo-theme-default

Or install everything with yarn:

yarn add @progress/kendo-react-grid @progress/kendo-theme-default

Or with pnpm:

pnpm add @progress/kendo-react-grid @progress/kendo-theme-default

Your package.json should include:

{
  "dependencies": {
    "@progress/kendo-react-grid": "^6.0.0",
    "@progress/kendo-theme-default": "^6.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

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

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@progress/kendo-theme-default/dist/all.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 grid component. Create src/DataGrid.jsx:

// src/DataGrid.jsx
import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

function DataGrid() {
  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Grid
        data={data}
        style={{ height: '400px' }}
      >
        <GridColumn field="id" title="ID" width="80px" />
        <GridColumn field="name" title="Name" />
        <GridColumn field="email" title="Email" />
        <GridColumn field="age" title="Age" width="100px" />
        <GridColumn field="city" title="City" />
      </Grid>
    </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>KendoReact Grid Example</h1>
      <DataGrid />
    </div>
  );
}

export default App;

This creates a basic data grid with sortable columns (click column headers to sort).

Understanding the Basics

KendoReact Grid uses a column-based structure where:

Grid: Main component that wraps the table
GridColumn: Defines each table column
field: Property key in your row data objects
title: Column header text
width: Column width (pixels or percentage)
data: Array of row data objects

Key concepts:

Columns: Define table structure using GridColumn components
Data: Array of objects where each object represents a table row
Features: Enable features like sorting, filtering, pagination through props
Styling: Built-in themes with customization options

Here's an example with sorting and pagination:

// src/SortableGrid.jsx
import React, { useState } from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { GridPDFExport } from '@progress/kendo-react-pdf';

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

  const [sort, setSort] = useState([]);
  const gridPDFExport = React.useRef(null);

  return (
    <div style={{ padding: '20px' }}>
      <button
        onClick={() => gridPDFExport.current.save(data)}
        style={{ marginBottom: '16px', padding: '8px 16px' }}
      >
        Export to PDF
      </button>
      <Grid
        data={data}
        sortable={true}
        sort={sort}
        onSortChange={(e) => setSort(e.sort)}
        style={{ height: '400px' }}
      >
        <GridColumn field="id" title="ID" width="80px" />
        <GridColumn field="name" title="Product Name" />
        <GridColumn field="category" title="Category" />
        <GridColumn field="price" title="Price" format="{0:c}" />
        <GridColumn field="stock" title="Stock" />
      </Grid>
      <GridPDFExport ref={gridPDFExport} />
    </div>
  );
}

export default SortableGrid;

Practical Example / Building Something Real

Let's build a comprehensive employee management grid:

// src/EmployeeManagement.jsx
import React, { useState } from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { GridPDFExport } from '@progress/kendo-react-pdf';
import { ExcelExport } from '@progress/kendo-react-excel-export';

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

  const [sort, setSort] = useState([]);
  const [filter, setFilter] = useState({ logic: 'and', filters: [] });
  const [page, setPage] = useState({ skip: 0, take: 10 });
  const gridPDFExport = React.useRef(null);
  const excelExport = React.useRef(null);

  const handleExportPDF = () => {
    gridPDFExport.current.save(data);
  };

  const handleExportExcel = () => {
    excelExport.current.save(data);
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
        <h2>Employee Management</h2>
        <button onClick={handleExportPDF} style={{ padding: '8px 16px' }}>
          Export PDF
        </button>
        <button onClick={handleExportExcel} style={{ padding: '8px 16px' }}>
          Export Excel
        </button>
      </div>
      <Grid
        data={data}
        sortable={true}
        filterable={true}
        pageable={true}
        sort={sort}
        filter={filter}
        page={page}
        onSortChange={(e) => setSort(e.sort)}
        onFilterChange={(e) => setFilter(e.filter)}
        onPageChange={(e) => setPage(e.page)}
        style={{ height: '500px' }}
      >
        <GridColumn field="id" title="ID" width="80px" />
        <GridColumn 
          field="name" 
          title="Employee Name"
          cell={(props) => (
            <td>
              <div>
                <strong>{props.dataItem.name}</strong>
                <div style={{ fontSize: '12px', color: '#666' }}>
                  {props.dataItem.email}
                </div>
              </div>
            </td>
          )}
        />
        <GridColumn 
          field="department" 
          title="Department"
          cell={(props) => {
            const colors = {
              Engineering: '#dc3545',
              Marketing: '#ffc107',
              Sales: '#28a745',
              HR: '#17a2b8'
            };
            return (
              <td>
                <span style={{
                  padding: '4px 8px',
                  borderRadius: '4px',
                  backgroundColor: colors[props.dataItem.department] || '#6c757d',
                  color: 'white',
                  fontSize: '12px'
                }}>
                  {props.dataItem.department}
                </span>
              </td>
            );
          }}
        />
        <GridColumn 
          field="salary" 
          title="Salary"
          format="{0:c}"
          cell={(props) => (
            <td style={{ 
              backgroundColor: props.dataItem.salary > 100000 ? '#e8f5e9' : 'transparent',
              fontWeight: props.dataItem.salary > 100000 ? 'bold' : 'normal'
            }}>
              ${props.dataItem.salary.toLocaleString()}
            </td>
          )}
        />
        <GridColumn 
          field="startDate" 
          title="Start Date"
          format="{0:MM/dd/yyyy}"
        />
        <GridColumn 
          field="status" 
          title="Status"
          cell={(props) => (
            <td>
              <span style={{
                padding: '4px 8px',
                borderRadius: '4px',
                backgroundColor: props.dataItem.status === 'Active' ? '#d4edda' : '#f8d7da',
                color: props.dataItem.status === 'Active' ? '#155724' : '#721c24',
                fontWeight: 'bold'
              }}>
                {props.dataItem.status}
              </span>
            </td>
          )}
        />
      </Grid>
      <GridPDFExport ref={gridPDFExport} />
      <ExcelExport ref={excelExport} />
    </div>
  );
}

export default EmployeeManagement;

This example demonstrates:

Sortable, filterable, and pageable grid
Custom cell rendering with React components
Conditional styling based on data values
Export functionality (PDF, Excel)
Currency and date formatting
Status badges with color coding

Common Issues / Troubleshooting

Grid not rendering: Ensure you've imported the CSS file (@progress/kendo-theme-default/dist/all.css). Without styles, the grid won't display correctly.
Sorting not working: Set sortable={true} and manage sort state with sort and onSortChange props.
Filtering not working: Enable filterable={true} and manage filter state. KendoReact Grid uses a filter descriptor object.
Pagination not working: Set pageable={true} and manage page state with page and onPageChange props.
Export not working: Install additional packages (@progress/kendo-react-pdf, @progress/kendo-react-excel-export) and use refs to access export methods.

Next Steps

Now that you understand KendoReact Grid:

Explore advanced features like grouping, column resizing, and reordering
Implement custom cell editors and validators
Add server-side data loading and pagination
Learn about row selection and batch operations
Explore tree grid features for hierarchical data
Add more export formats
Check the official documentation: https://www.telerik.com/kendo-react-ui/components/grid/
Look for part 21 of this series for more advanced topics

Summary

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

SEO Keywords

KendoReact Grid
KendoReact Grid tutorial
React data grid KendoReact
KendoReact Grid installation
React table component KendoReact
KendoReact Grid example
React data grid library
KendoReact Grid setup
React interactive grid
KendoReact Grid filtering
React enterprise grid
KendoReact Grid pagination
React table with sorting
KendoReact Grid export
React data grid component

Getting Started with Smart React Grid: Building Your First Data Grid

Nathan Collins — Fri, 16 Jan 2026 13:56:13 +0000

Smart React Grid is a powerful, feature-rich data grid component for React that provides essential grid functionality like sorting, filtering, pagination, and editing with a clean, intuitive API. It's designed to be easy to use while offering customization options for building data-intensive interfaces. This guide walks through setting up and creating your first interactive data grid using Smart React Grid with React, from installation to a working implementation. This is part 19 of a series on using Smart React 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)
Familiarity with JavaScript/TypeScript

Installation

Install Smart React Grid using your preferred package manager:

npm install smart-webcomponents-react

Or with yarn:

yarn add smart-webcomponents-react

Or with pnpm:

pnpm add smart-webcomponents-react

After installation, your package.json should include:

{
  "dependencies": {
    "smart-webcomponents-react": "^10.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Smart React Grid 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 'smart-webcomponents-react/source/styles/smart.default.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 grid component. Create a new file src/DataGrid.jsx:

// src/DataGrid.jsx
import React from 'react';
import { Grid } from 'smart-webcomponents-react/grid';

function DataGrid() {
  const dataSource = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  const columns = [
    { label: 'ID', dataField: 'id', width: 80 },
    { label: 'Name', dataField: 'name', width: 200 },
    { label: 'Email', dataField: 'email', width: 250 },
    { label: 'Age', dataField: 'age', width: 100 },
    { label: 'City', dataField: 'city', width: 150 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Grid
        dataSource={dataSource}
        columns={columns}
        sorting={{ enabled: true }}
        filtering={{ enabled: true }}
        paging={{ enabled: true, pageSize: 10 }}
      />
    </div>
  );
}

export default DataGrid;

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

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

function App() {
  return (
    <div className="App">
      <h1>Smart React Grid Example</h1>
      <DataGrid />
    </div>
  );
}

export default App;

This creates a fully functional data grid with:

Sortable columns (click column headers)
Filtering capabilities
Pagination (10 rows per page)
Clean, modern styling

Understanding the Basics

Smart React Grid uses a configuration-based approach where:

dataSource: Array of row data objects
columns: Array of column definition objects
label: Column header text
dataField: Property key in your row data objects
width: Column width in pixels

Key concepts:

Columns: Define table structure with label, dataField, and options
Data Source: Array of objects where each object represents a table row
Features: Enable features like sorting, filtering, pagination through props
Styling: Built-in themes and customization options

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

// src/SimpleGrid.jsx
import React from 'react';
import { Grid } from 'smart-webcomponents-react/grid';

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

  const columns = [
    { label: 'ID', dataField: 'id' },
    { label: 'Name', dataField: 'name' },
    { label: 'Value', dataField: 'value' }
  ];

  return (
    <Grid
      dataSource={dataSource}
      columns={columns}
    />
  );
}

export default SimpleGrid;

Practical Example / Building Something Real

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

// src/ProductInventory.jsx
import React, { useState } from 'react';
import { Grid } from 'smart-webcomponents-react/grid';

function ProductInventory() {
  const [dataSource, setDataSource] = 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 = [
    { 
      label: 'ID', 
      dataField: 'id', 
      width: 80,
      allowSort: true
    },
    { 
      label: 'Product Name', 
      dataField: 'name', 
      width: 200,
      allowSort: true,
      allowFilter: true
    },
    { 
      label: 'Category', 
      dataField: 'category', 
      width: 150,
      allowSort: true,
      allowFilter: true
    },
    { 
      label: 'Price', 
      dataField: 'price', 
      width: 120,
      allowSort: true,
      formatFunction: (value) => `$${value.toFixed(2)}`
    },
    { 
      label: 'Stock', 
      dataField: 'stock', 
      width: 100,
      allowSort: true,
      template: (row) => {
        const stock = row.stock;
        return (
          <span style={{ 
            color: stock < 10 ? 'red' : 'green',
            fontWeight: 'bold'
          }}>
            {stock}
          </span>
        );
      }
    },
    { 
      label: 'Status', 
      dataField: 'status', 
      width: 120,
      allowSort: true,
      template: (row) => {
        const status = row.status;
        return (
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: status === 'In Stock' ? '#d4edda' : '#fff3cd',
            color: status === 'In Stock' ? '#155724' : '#856404'
          }}>
            {status}
          </span>
        );
      }
    }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Product Inventory</h2>
      <Grid
        dataSource={dataSource}
        columns={columns}
        sorting={{ enabled: true }}
        filtering={{ enabled: true }}
        paging={{ enabled: true, pageSize: 5 }}
        selection={{ enabled: true, mode: 'multiple' }}
        editing={{ enabled: true }}
        onRowClick={(event) => {
          console.log('Row clicked:', event.detail.row.data);
        }}
      />
    </div>
  );
}

export default ProductInventory;

This example demonstrates:

Sortable and filterable columns
Custom cell templates with conditional styling
Custom formatting (currency for price)
Row selection (multiple)
Row click handling
Pagination with customizable page size
Editing capabilities

Common Issues / Troubleshooting

Grid not rendering: Make sure you've imported the CSS file (smart-webcomponents-react/source/styles/smart.default.css). Without styles, the grid won't display correctly.
Data not displaying: Verify that your dataSource array contains objects and that columns dataField values match the property names in your data objects.
Sorting/filtering not working: Ensure you've enabled these features in the Grid props (sorting={{ enabled: true }}, filtering={{ enabled: true }}).
Custom templates not rendering: Make sure you're using the template function correctly in column definitions. The function receives the row object as a parameter.
Styling issues: Smart React Grid comes with default styles. You can customize them by overriding CSS classes or using the built-in theme system.

Next Steps

Now that you have a basic understanding of Smart React Grid:

Learn about advanced features like grouping and aggregation
Explore custom cell editors and validators
Implement server-side data loading and pagination
Add export functionality (CSV, Excel, PDF)
Discover column resizing and reordering
Check the official documentation: https://htmlelements.com/react/demos/grid/overview/
Look for part 20 of this series for more advanced topics

Summary

You've successfully set up Smart React Grid in your React application and created your first interactive data grid. The component provides a clean, simple API for building data-rich interfaces with essential grid functionality like sorting, filtering, pagination, and editing, all with modern styling and excellent performance.

SEO Keywords

smart-react-grid
Smart React Grid tutorial
React data grid Smart
smart-react-grid installation
React table component
smart-react-grid example
React data grid library
smart-react-grid setup
React interactive grid
Smart WebComponents grid
React table with sorting
smart-react-grid filtering
React data grid component
smart-react-grid pagination
React grid component tutorial

Advanced Data Grid Implementation with DevExtreme React Grid

Nathan Collins — Fri, 16 Jan 2026 13:54:27 +0000

DevExtreme React Grid is a powerful, enterprise-grade data grid component for React that provides comprehensive functionality including sorting, filtering, grouping, editing, and virtualization. It's part of the DevExtreme suite, offering a plugin-based architecture that allows extensive customization and advanced features for building complex data management interfaces. This guide walks through implementing advanced grid features using DevExtreme React Grid with React, covering plugin configuration, custom editors, and enterprise-grade implementations. This is part 18 of a series on using DevExtreme React 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
Advanced understanding of React hooks, context API, and state management
Familiarity with TypeScript (highly recommended)
Knowledge of plugin architectures and component composition

Installation

Install DevExtreme React Grid and its dependencies:

npm install @devextreme/runtime @devextreme/react-grid devextreme

Or with yarn:

yarn add @devextreme/runtime @devextreme/react-grid devextreme

Or with pnpm:

pnpm add @devextreme/runtime @devextreme/react-grid devextreme

Your package.json should include:

{
  "dependencies": {
    "@devextreme/react-grid": "^3.0.0",
    "@devextreme/runtime": "^3.0.0",
    "devextreme": "^23.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

DevExtreme 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 'devextreme/dist/css/dx.light.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 grid component. Create src/DataGrid.jsx:

// src/DataGrid.jsx
import React from 'react';
import {
  Grid,
  Table,
  TableHeaderRow,
} from '@devextreme/react-grid';

function DataGrid() {
  const columns = [
    { dataField: 'id', caption: 'ID', width: 80 },
    { dataField: 'name', caption: 'Name' },
    { dataField: 'email', caption: 'Email' },
    { dataField: 'age', caption: 'Age', width: 100 },
    { dataField: 'city', caption: 'City' }
  ];

  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Grid
        dataSource={data}
        showBorders={true}
      >
        <Table />
        <TableHeaderRow />
      </Grid>
    </div>
  );
}

export default DataGrid;

Understanding the Basics

DevExtreme React Grid uses a plugin-based architecture where:

Grid: Main component that wraps the grid
Plugins: Modular features (Table, TableHeaderRow, Sorting, Filtering, etc.)
Columns: Array of column definition objects
dataSource: Array of row data objects
dataField: Maps to a property in your row data

Key concepts for advanced usage:

Plugin System: Compose features by adding plugin components
Column Definitions: Define structure with dataField, caption, and options
State Management: Grid manages its own state or can be controlled
Customization: Extensive options for styling, behavior, and functionality

Here's an example with sorting and filtering:

// src/AdvancedGrid.jsx
import React from 'react';
import {
  Grid,
  Table,
  TableHeaderRow,
  TableFilterRow,
  SortingState,
  FilteringState,
  IntegratedSorting,
  IntegratedFiltering,
} from '@devextreme/react-grid';

function AdvancedGrid() {
  const [sorting, setSorting] = React.useState([]);
  const [filters, setFilters] = React.useState([]);

  const columns = [
    { dataField: 'id', caption: 'ID', width: 80 },
    { dataField: 'name', caption: 'Name' },
    { dataField: 'email', caption: 'Email' },
    { dataField: 'age', caption: 'Age', width: 100 },
    { dataField: 'city', caption: 'City' }
  ];

  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' }
  ];

  return (
    <Grid
      dataSource={data}
      columns={columns}
      showBorders={true}
    >
      <SortingState
        sorting={sorting}
        onSortingChange={setSorting}
      />
      <FilteringState
        filters={filters}
        onFiltersChange={setFilters}
      />
      <IntegratedSorting />
      <IntegratedFiltering />
      <Table />
      <TableHeaderRow allowSorting />
      <TableFilterRow />
    </Grid>
  );
}

export default AdvancedGrid;

Practical Example / Building Something Real

Let's build a comprehensive employee management grid with editing, grouping, and advanced features:

// src/EmployeeManagement.jsx
import React, { useState } from 'react';
import {
  Grid,
  Table,
  TableHeaderRow,
  TableFilterRow,
  TableGroupRow,
  TableEditRow,
  TableEditColumn,
  TableSelection,
  GroupingState,
  SortingState,
  FilteringState,
  EditingState,
  SelectionState,
  IntegratedSorting,
  IntegratedFiltering,
  IntegratedGrouping,
  IntegratedSelection,
} from '@devextreme/react-grid';

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

  const [sorting, setSorting] = useState([]);
  const [filters, setFilters] = useState([]);
  const [grouping, setGrouping] = useState([{ columnName: 'department' }]);
  const [selection, setSelection] = useState([]);
  const [editingState, setEditingState] = useState({});

  const columns = [
    { 
      dataField: 'id', 
      caption: 'ID', 
      width: 80,
      allowEditing: false
    },
    { 
      dataField: 'name', 
      caption: 'Employee Name',
      cellRender: ({ value, row }) => (
        <div>
          <strong>{value}</strong>
          <div style={{ fontSize: '12px', color: '#666' }}>
            {row.data.email}
          </div>
        </div>
      )
    },
    { 
      dataField: 'department', 
      caption: 'Department',
      cellRender: ({ value }) => {
        const colors = {
          Engineering: '#dc3545',
          Marketing: '#ffc107',
          Sales: '#28a745',
          HR: '#17a2b8'
        };
        return (
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: colors[value] || '#6c757d',
            color: 'white',
            fontSize: '12px'
          }}>
            {value}
          </span>
        );
      }
    },
    { 
      dataField: 'salary', 
      caption: 'Salary',
      dataType: 'number',
      format: { type: 'currency', currency: 'USD' },
      cellRender: ({ value }) => `$${value.toLocaleString()}`
    },
    { 
      dataField: 'startDate', 
      caption: 'Start Date',
      dataType: 'date',
      cellRender: ({ value }) => {
        const date = new Date(value);
        return date.toLocaleDateString('en-US');
      }
    },
    { 
      dataField: 'status', 
      caption: 'Status',
      cellRender: ({ value }) => (
        <span style={{
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: value === 'Active' ? '#d4edda' : '#f8d7da',
          color: value === 'Active' ? '#155724' : '#721c24',
          fontWeight: 'bold'
        }}>
          {value}
        </span>
      )
    }
  ];

  const commitChanges = ({ added, changed, deleted }) => {
    let changedData = [...data];

    if (added) {
      const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
      changedData = [
        ...changedData,
        ...added.map((row, index) => ({
          id: startingAddedId + index,
          ...row
        }))
      ];
    }

    if (changed) {
      changedData = changedData.map(row => 
        changed[row.id] ? { ...row, ...changed[row.id] } : row
      );
    }

    if (deleted) {
      const deletedSet = new Set(deleted);
      changedData = changedData.filter(row => !deletedSet.has(row.id));
    }

    setData(changedData);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Management</h2>
      <Grid
        dataSource={data}
        columns={columns}
        showBorders={true}
      >
        <SortingState
          sorting={sorting}
          onSortingChange={setSorting}
        />
        <FilteringState
          filters={filters}
          onFiltersChange={setFilters}
        />
        <GroupingState
          grouping={grouping}
          onGroupingChange={setGrouping}
        />
        <SelectionState
          selection={selection}
          onSelectionChange={setSelection}
        />
        <EditingState
          onCommitChanges={commitChanges}
        />
        <IntegratedSorting />
        <IntegratedFiltering />
        <IntegratedGrouping />
        <IntegratedSelection />
        <Table />
        <TableHeaderRow allowSorting allowGrouping />
        <TableFilterRow />
        <TableGroupRow />
        <TableSelection showSelectAll />
        <TableEditRow />
        <TableEditColumn
          showAddCommand
          showEditCommand
          showDeleteCommand
        />
      </Grid>
    </div>
  );
}

export default EmployeeManagement;

This advanced example demonstrates:

Multiple plugins working together (sorting, filtering, grouping, selection, editing)
Custom cell rendering with React components
Row grouping by department
Row selection with select all
Inline editing with add, edit, delete commands
Custom formatting (currency, dates)
Conditional styling
State management for all features

Common Issues / Troubleshooting

Grid not rendering: Ensure you've imported the CSS file (devextreme/dist/css/dx.light.css). Verify that all required plugins are imported and added to the Grid component.
Plugins not working: Make sure you've added the plugin components as children of Grid and included the corresponding state management plugins (e.g., SortingState with IntegratedSorting).
Editing not working: Include EditingState and TableEditRow/TableEditColumn plugins. Implement the onCommitChanges handler to update your data.
Grouping not working: Add GroupingState and IntegratedGrouping plugins. Set initial grouping state with column names.
TypeScript errors: DevExtreme has excellent TypeScript support. Ensure your column and data types match the expected interfaces.

Next Steps

Now that you've mastered DevExtreme React Grid:

Explore advanced features like virtual scrolling and column resizing
Implement custom editors and validators
Add server-side data loading and pagination
Learn about column pinning and reordering
Explore tree grid features for hierarchical data
Add export functionality (Excel, PDF)
Check the official documentation: https://devexpress.github.io/devextreme-reactive/react/grid/
Look for part 19 of this series for more advanced topics

Summary

You've learned how to implement advanced data grid features with DevExtreme React Grid, including sorting, filtering, grouping, editing, and selection using a plugin-based architecture. The library provides extensive functionality for building enterprise-grade data management interfaces with excellent performance and customization options.

SEO Keywords

DevExtreme React Grid
DevExtreme React Grid tutorial
React data grid DevExtreme
DevExtreme React Grid installation
React enterprise grid
DevExtreme React Grid example
React table component advanced
DevExtreme React Grid setup
React interactive grid
DevExtreme React Grid filtering
React data grid library
DevExtreme React Grid grouping
React table with editing
DevExtreme React Grid pagination
React enterprise data grid

Building Advanced Data Tables with Sematable in React

Nathan Collins — Fri, 16 Jan 2026 13:53:23 +0000

Sematable is a powerful, Redux-based table component library for React that provides comprehensive table functionality including sorting, filtering, pagination, and selection with a focus on server-side data management. It integrates seamlessly with Redux for state management, making it ideal for complex applications requiring centralized state control. This guide walks through creating feature-rich data tables using Sematable with React and Redux, covering setup, configuration, and practical implementation patterns. This is part 17 of a series on using Sematable 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 and Redux
Redux and React-Redux installed (required dependencies)
Familiarity with JavaScript/TypeScript

Installation

First, install Redux and React-Redux (required dependencies):

npm install redux react-redux

Then install Sematable:

npm install sematable

Or install everything with yarn:

yarn add redux react-redux sematable

Or with pnpm:

pnpm add redux react-redux sematable

Your package.json should include:

{
  "dependencies": {
    "sematable": "^3.0.0",
    "redux": "^4.0.0",
    "react-redux": "^8.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Sematable requires Redux store setup. Configure your Redux store:

// src/store/index.js
import { createStore, combineReducers } from 'redux';
import { sematable } from 'sematable';

const rootReducer = combineReducers({
  sematable: sematable,
  // Add your other reducers here
});

const store = createStore(rootReducer);

export default store;

Update your main entry file to include the Redux Provider:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

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

First Example / Basic Usage

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

// src/DataTable.jsx
import React from 'react';
import { Sematable } from 'sematable';
import { tableConfig } from './tableConfig';

function DataTable() {
  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Sematable
        config={tableConfig}
        data={data}
      />
    </div>
  );
}

export default DataTable;

Create the table configuration file:

// src/tableConfig.js
import { makeTable } from 'sematable';

const tableConfig = makeTable('users', {
  primaryKey: 'id',
  columns: [
    {
      key: 'id',
      label: 'ID',
      sortable: true,
    },
    {
      key: 'name',
      label: 'Name',
      sortable: true,
      filterable: true,
    },
    {
      key: 'email',
      label: 'Email',
      sortable: true,
      filterable: true,
    },
    {
      key: 'age',
      label: 'Age',
      sortable: true,
    },
    {
      key: 'city',
      label: 'City',
      sortable: true,
      filterable: true,
    },
  ],
});

export { tableConfig };

Understanding the Basics

Sematable uses a Redux-based architecture where:

makeTable: Creates a table configuration with a unique name
primaryKey: Unique identifier for each row
columns: Array of column definitions
Sematable: Main component that renders the table
Redux Store: Manages table state (sorting, filtering, pagination)

Key concepts:

Table Name: Unique identifier for each table instance
Columns: Define structure with key, label, sortable, filterable
Redux Integration: Table state is managed in Redux store
Server-side Support: Designed for server-side data loading

Here's an example with custom cell rendering:

// src/AdvancedTable.jsx
import React from 'react';
import { Sematable } from 'sematable';
import { makeTable } from 'sematable';

const productTableConfig = makeTable('products', {
  primaryKey: 'id',
  columns: [
    {
      key: 'id',
      label: 'ID',
      sortable: true,
    },
    {
      key: 'name',
      label: 'Product Name',
      sortable: true,
      filterable: true,
    },
    {
      key: 'price',
      label: 'Price',
      sortable: true,
      render: (value) => `$${value.toFixed(2)}`,
    },
    {
      key: 'stock',
      label: 'Stock',
      sortable: true,
      render: (value, row) => (
        <span style={{ 
          color: value < 10 ? 'red' : 'green',
          fontWeight: 'bold'
        }}>
          {value}
        </span>
      ),
    },
    {
      key: 'status',
      label: 'Status',
      filterable: true,
      render: (value) => (
        <span style={{
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: value === 'In Stock' ? '#d4edda' : '#fff3cd',
          color: value === 'In Stock' ? '#155724' : '#856404'
        }}>
          {value}
        </span>
      ),
    },
  ],
});

function AdvancedTable() {
  const data = [
    { id: 1, name: 'Laptop', price: 999.99, stock: 15, status: 'In Stock' },
    { id: 2, name: 'Mouse', price: 29.99, stock: 8, status: 'Low Stock' },
    { id: 3, name: 'Keyboard', price: 79.99, stock: 12, status: 'In Stock' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Sematable
        config={productTableConfig}
        data={data}
      />
    </div>
  );
}

export default AdvancedTable;

Practical Example / Building Something Real

Let's build a comprehensive employee management system with server-side data loading:

// src/EmployeeManagement.jsx
import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Sematable } from 'sematable';
import { makeTable } from 'sematable';
import { getTableState } from 'sematable';

const employeeTableConfig = makeTable('employees', {
  primaryKey: 'id',
  columns: [
    {
      key: 'id',
      label: 'ID',
      sortable: true,
      width: 80,
    },
    {
      key: 'name',
      label: 'Employee Name',
      sortable: true,
      filterable: true,
      render: (value, row) => (
        <div>
          <strong>{value}</strong>
          <div style={{ fontSize: '12px', color: '#666' }}>
            {row.email}
          </div>
        </div>
      ),
    },
    {
      key: 'department',
      label: 'Department',
      sortable: true,
      filterable: true,
      render: (value) => {
        const colors = {
          Engineering: '#dc3545',
          Marketing: '#ffc107',
          Sales: '#28a745',
          HR: '#17a2b8'
        };
        return (
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: colors[value] || '#6c757d',
            color: 'white',
            fontSize: '12px'
          }}>
            {value}
          </span>
        );
      },
    },
    {
      key: 'salary',
      label: 'Salary',
      sortable: true,
      render: (value) => `$${value.toLocaleString()}`,
    },
    {
      key: 'startDate',
      label: 'Start Date',
      sortable: true,
      render: (value) => {
        const date = new Date(value);
        return date.toLocaleDateString('en-US');
      },
    },
    {
      key: 'status',
      label: 'Status',
      sortable: true,
      filterable: true,
      render: (value) => (
        <span style={{
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: value === 'Active' ? '#d4edda' : '#f8d7da',
          color: value === 'Active' ? '#155724' : '#721c24',
          fontWeight: 'bold'
        }}>
          {value}
        </span>
      ),
    },
  ],
});

function EmployeeManagement() {
  const dispatch = useDispatch();
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const tableState = useSelector(state => 
    getTableState(state, 'employees')
  );

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const params = new URLSearchParams({
          page: (tableState?.page || 0).toString(),
          pageSize: (tableState?.pageSize || 10).toString(),
          sortBy: tableState?.sortBy || '',
          sortDirection: tableState?.sortDirection || 'asc',
          filter: tableState?.filter || '',
        });

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

        setData(result.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [tableState]);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Management</h2>
      {loading && <div>Loading...</div>}
      <Sematable
        config={employeeTableConfig}
        data={data}
        serverSide={true}
        pageSize={10}
      />
    </div>
  );
}

export default EmployeeManagement;

This example demonstrates:

Server-side data loading with Redux state management
Custom cell rendering with React components
Conditional styling based on data values
Integration with Redux selectors
Pagination, sorting, and filtering state management
Loading states

Common Issues / Troubleshooting

Table not rendering: Ensure you've set up Redux store correctly and wrapped your app with Redux Provider. Verify that the sematable reducer is included in your store.
State not updating: Make sure you're using the correct table name in your configuration and when accessing state. Table names must match between config and selectors.
Server-side not working: For server-side mode, ensure you're listening to table state changes and fetching data accordingly. Use getTableState selector to access current table state.
Filtering not working: Verify that filterable: true is set in column definitions. Check that your filter logic matches your data structure.
Redux errors: Ensure Redux DevTools are properly configured if using them. Check that all actions are properly dispatched and reducers are correctly set up.

Next Steps

Now that you understand Sematable:

Explore advanced Redux integration patterns
Implement custom actions and reducers
Add row selection and bulk operations
Learn about server-side pagination and filtering
Explore custom filter components
Add export functionality
Check the official repository: https://github.com/sematext/sematable
Look for part 18 of this series for more advanced topics

Summary

You've learned how to set up Sematable and create feature-rich data tables with Redux integration, server-side data loading, and custom rendering. The library provides a robust foundation for building enterprise-grade data management interfaces with centralized state control through Redux.

SEO Keywords

sematable React
sematable Redux table
sematable tutorial
React Redux data table
sematable installation
React table with Redux
sematable example
React server-side table
sematable setup
React data grid Redux
sematable filtering
React table component
sematable pagination
React Redux table library
sematable getting started

Getting Started with RSuite Table in React: Building Your First Data Table

Nathan Collins — Fri, 16 Jan 2026 13:51:12 +0000

RSuite Table is a feature-rich table component from the RSuite UI library that provides essential table functionality like sorting, filtering, pagination, and row selection with a clean, intuitive API. It's part of the RSuite component suite, offering a consistent design system for building data-rich interfaces. This guide walks through setting up and creating your first interactive data table using RSuite Table with React, from installation to a working implementation. This is part 16 of a series on using RSuite Table 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 RSuite and its styles:

npm install rsuite

Or with yarn:

yarn add rsuite

Or with pnpm:

pnpm add rsuite

After installation, your package.json should include:

{
  "dependencies": {
    "rsuite": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

RSuite 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 'rsuite/dist/rsuite.min.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 table component. Create a new file src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;

function DataTable() {
  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Table
        data={data}
        height={400}
        onRowClick={(rowData) => {
          console.log('Row clicked:', rowData);
        }}
      >
        <Column width={80} fixed>
          <HeaderCell>ID</HeaderCell>
          <Cell dataKey="id" />
        </Column>

        <Column width={200}>
          <HeaderCell>Name</HeaderCell>
          <Cell dataKey="name" />
        </Column>

        <Column width={250}>
          <HeaderCell>Email</HeaderCell>
          <Cell dataKey="email" />
        </Column>

        <Column width={100}>
          <HeaderCell>Age</HeaderCell>
          <Cell dataKey="age" />
        </Column>

        <Column width={150}>
          <HeaderCell>City</HeaderCell>
          <Cell dataKey="city" />
        </Column>
      </Table>
    </div>
  );
}

export default DataTable;

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

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

function App() {
  return (
    <div className="App">
      <h1>RSuite Table Example</h1>
      <DataTable />
    </div>
  );
}

export default App;

This creates a fully functional data table with:

Fixed first column (ID stays visible when scrolling)
Row click handling
Clean, modern styling from RSuite
Responsive column widths

Understanding the Basics

RSuite Table uses a column-based structure where:

Table: Main component that wraps the table
Column: Defines each table column
HeaderCell: Column header content
Cell: Cell content with dataKey mapping to data property
data: Array of row data objects

Key concepts:

Columns: Define table structure using Column, HeaderCell, and Cell components
Data: Array of objects where each object represents a table row
dataKey: Maps to a property in your row data objects
Props: Enable features like sorting, pagination, selection

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

// src/SimpleTable.jsx
import React from 'react';
import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;

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

  return (
    <Table data={data} height={300}>
      <Column width={80}>
        <HeaderCell>ID</HeaderCell>
        <Cell dataKey="id" />
      </Column>
      <Column width={200}>
        <HeaderCell>Name</HeaderCell>
        <Cell dataKey="name" />
      </Column>
      <Column width={100}>
        <HeaderCell>Value</HeaderCell>
        <Cell dataKey="value" />
      </Column>
    </Table>
  );
}

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 { Table, Tag, Badge } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;

function ProductInventory() {
  const [data, setData] = 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' 
    }
  ]);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Product Inventory</h2>
      <Table
        data={data}
        height={400}
        hover
        bordered
        cellBordered
        onRowClick={(rowData) => {
          console.log('Product clicked:', rowData);
        }}
      >
        <Column width={80} fixed>
          <HeaderCell>ID</HeaderCell>
          <Cell dataKey="id" />
        </Column>

        <Column width={200} sortable>
          <HeaderCell>Product Name</HeaderCell>
          <Cell dataKey="name" />
        </Column>

        <Column width={150} sortable>
          <HeaderCell>Category</HeaderCell>
          <Cell>
            {(rowData) => (
              <Tag color="blue">{rowData.category}</Tag>
            )}
          </Cell>
        </Column>

        <Column width={120} sortable>
          <HeaderCell>Price</HeaderCell>
          <Cell>
            {(rowData) => `$${rowData.price.toFixed(2)}`}
          </Cell>
        </Column>

        <Column width={100} sortable>
          <HeaderCell>Stock</HeaderCell>
          <Cell>
            {(rowData) => (
              <span style={{ 
                color: rowData.stock < 10 ? 'red' : 'green',
                fontWeight: 'bold'
              }}>
                {rowData.stock}
              </span>
            )}
          </Cell>
        </Column>

        <Column width={120}>
          <HeaderCell>Status</HeaderCell>
          <Cell>
            {(rowData) => (
              <Badge 
                content={rowData.status} 
                color={rowData.status === 'In Stock' ? 'green' : 'orange'}
              />
            )}
          </Cell>
        </Column>
      </Table>
    </div>
  );
}

export default ProductInventory;

This example demonstrates:

Sortable columns (click column headers)
Custom cell rendering with React components (Tag, Badge)
Conditional styling based on data values
Hover effects and borders
Row click handling
Fixed first column
Currency formatting

Common Issues / Troubleshooting

Table not rendering: Make sure you've imported the CSS file (rsuite/dist/rsuite.min.css). Without styles, the table won't display correctly.
Columns not displaying: Ensure you're using the correct structure with Column, HeaderCell, and Cell components. The dataKey prop in Cell must match a property in your data objects.
Sorting not working: Set sortable prop on Column components. RSuite Table handles sorting automatically when this prop is set.
Custom cell rendering: Use a function as children of Cell component: <Cell>{(rowData) => <YourComponent />}</Cell>
Styling issues: RSuite comes with default styles. You can customize them by overriding CSS classes or using RSuite's theme system.

Next Steps

Now that you have a basic understanding of RSuite Table:

Learn about advanced features like row selection and expansion
Explore pagination and virtual scrolling
Implement custom filters and search
Add column resizing and reordering
Discover tree table features for hierarchical data
Check the official documentation: https://rsuitejs.com/components/table/
Look for part 17 of this series for more advanced topics

Summary

You've successfully set up RSuite Table in your React application and created your first interactive data table. The component provides a clean, intuitive API for building data-rich interfaces with essential table functionality like sorting, filtering, and custom rendering, all styled with RSuite's modern design system.

SEO Keywords

rsuite-table
RSuite Table React
rsuite-table tutorial
React data table RSuite
rsuite-table installation
React table component
rsuite-table example
React data grid
rsuite-table setup
React interactive table
RSuite UI table
React table library
rsuite-table getting started
React table with sorting
rsuite-table custom rendering

Advanced Data Table Implementation with React Table Library

Nathan Collins — Fri, 16 Jan 2026 13:50:34 +0000

React Table Library is a powerful, modular table component library for React that provides a flexible architecture for building complex data tables. It offers features like sorting, filtering, pagination, selection, and tree structures with a plugin-based system that allows extensive customization. This guide walks through implementing advanced table features using React Table Library with React, covering complex data manipulation, custom plugins, and enterprise-grade implementations. This is part 15 of a series on using React Table Library 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 and plugin architectures

Installation

Install React Table Library core package:

npm install @table-library/react-table-library

For additional features, install specific plugins:

npm install @table-library/react-table-library @table-library/react-table-library/theme @table-library/react-table-library/sort @table-library/react-table-library/filter @table-library/react-table-library/pagination

Or with yarn:

yarn add @table-library/react-table-library @table-library/react-table-library/theme @table-library/react-table-library/sort @table-library/react-table-library/filter @table-library/react-table-library/pagination

Your package.json should include:

{
  "dependencies": {
    "@table-library/react-table-library": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Table Library requires minimal setup. Import the necessary components and themes:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
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, { useMemo } from 'react';
import {
  Table,
  Header,
  HeaderRow,
  HeaderCell,
  Body,
  Row,
  Cell,
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { DEFAULT_THEME } from '@table-library/react-table-library/theme';

function DataTable() {
  const data = {
    nodes: [
      { id: '1', name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
      { id: '2', name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
      { id: '3', name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
      { id: '4', name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
    ]
  };

  const theme = useTheme(DEFAULT_THEME);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Table data={data} theme={theme}>
        {(tableList) => (
          <>
            <Header>
              <HeaderRow>
                <HeaderCell>ID</HeaderRow>
                <HeaderCell>Name</HeaderRow>
                <HeaderCell>Email</HeaderRow>
                <HeaderCell>Age</HeaderRow>
                <HeaderCell>City</HeaderRow>
              </HeaderRow>
            </Header>
            <Body>
              {tableList.map((item) => (
                <Row key={item.id} item={item}>
                  <Cell>{item.id}</Cell>
                  <Cell>{item.name}</Cell>
                  <Cell>{item.email}</Cell>
                  <Cell>{item.age}</Cell>
                  <Cell>{item.city}</Cell>
                </Row>
              ))}
            </Body>
          </>
        )}
      </Table>
    </div>
  );
}

export default DataTable;

Understanding the Basics

React Table Library uses a plugin-based architecture where:

Table: Main component that wraps the table structure
Data Structure: Uses { nodes: [...] } format
Render Props: Table uses render props pattern for rendering
Plugins: Enable features like sorting, filtering, pagination
Theme: Customizable theming system

Key concepts for advanced usage:

Nodes: Data items in the nodes array
Plugins: Modular features (sort, filter, pagination, etc.)
Theme: Styling system with built-in themes or custom themes
Render Props: Table component uses render props for flexible rendering

Here's an example with sorting:

// src/SortableTable.jsx
import React, { useMemo } from 'react';
import {
  Table,
  Header,
  HeaderRow,
  HeaderCell,
  Body,
  Row,
  Cell,
} from '@table-library/react-table-library/table';
import { useSort } from '@table-library/react-table-library/sort';
import { useTheme } from '@table-library/react-table-library/theme';
import { DEFAULT_THEME } from '@table-library/react-table-library/theme';

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

  const theme = useTheme(DEFAULT_THEME);
  const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortFns: {
        PRICE: (array) => array.sort((a, b) => a.price - b.price),
        STOCK: (array) => array.sort((a, b) => a.stock - b.stock),
      },
    }
  );

  function onSortChange(action, state) {
    console.log(action, state);
  }

  return (
    <Table data={data} theme={theme} sort={sort}>
      {(tableList) => (
        <>
          <Header>
            <HeaderRow>
              <HeaderCell sort={{ sortKey: 'NAME' }}>Name</HeaderRow>
              <HeaderCell sort={{ sortKey: 'CATEGORY' }}>Category</HeaderRow>
              <HeaderCell sort={{ sortKey: 'PRICE' }}>Price</HeaderRow>
              <HeaderCell sort={{ sortKey: 'STOCK' }}>Stock</HeaderRow>
            </HeaderRow>
          </Header>
          <Body>
            {tableList.map((item) => (
              <Row key={item.id} item={item}>
                <Cell>{item.name}</Cell>
                <Cell>{item.category}</Cell>
                <Cell>${item.price.toFixed(2)}</Cell>
                <Cell>{item.stock}</Cell>
              </Row>
            ))}
          </Body>
        </>
      )}
    </Table>
  );
}

export default SortableTable;

Practical Example / Building Something Real

Let's build a comprehensive admin dashboard with sorting, filtering, pagination, and selection:

// src/AdminDashboard.jsx
import React, { useState, useMemo } from 'react';
import {
  Table,
  Header,
  HeaderRow,
  HeaderCell,
  Body,
  Row,
  Cell,
} from '@table-library/react-table-library/table';
import { useSort } from '@table-library/react-table-library/sort';
import { useFilter } from '@table-library/react-table-library/filter';
import { usePagination } from '@table-library/react-table-library/pagination';
import { useRowSelect } from '@table-library/react-table-library/select';
import { useTheme } from '@table-library/react-table-library/theme';
import { DEFAULT_THEME } from '@table-library/react-table-library/theme';

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

  const theme = useTheme(DEFAULT_THEME);

  // Sorting
  const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortFns: {
        SALARY: (array) => array.sort((a, b) => a.salary - b.salary),
        START_DATE: (array) => array.sort((a, b) => 
          new Date(a.startDate) - new Date(b.startDate)
        ),
      },
    }
  );

  // Filtering
  const filter = useFilter(
    data,
    {
      onChange: onFilterChange,
    },
    {
      isServerSide: false,
    }
  );

  // Pagination
  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 10,
    },
    onChange: onPaginationChange,
  });

  // Row Selection
  const select = useRowSelect(data, {
    onChange: onSelectChange,
  });

  function onSortChange(action, state) {
    console.log('Sort changed:', state);
  }

  function onFilterChange(action, state) {
    console.log('Filter changed:', state);
  }

  function onPaginationChange(action, state) {
    console.log('Pagination changed:', state);
  }

  function onSelectChange(action, state) {
    console.log('Selection changed:', state);
  }

  const handleSearch = (value) => {
    filter.fns.onFilterChange({
      type: 'FILTER',
      payload: {
        name: value,
      },
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Admin Dashboard</h2>

      {/* Search */}
      <div style={{ marginBottom: '16px' }}>
        <input
          type="text"
          placeholder="Search employees..."
          onChange={(e) => handleSearch(e.target.value)}
          style={{
            padding: '8px',
            width: '300px',
            border: '1px solid #ddd',
            borderRadius: '4px'
          }}
        />
      </div>

      {/* Table */}
      <Table 
        data={data} 
        theme={theme} 
        sort={sort}
        filter={filter}
        pagination={pagination}
        select={select}
      >
        {(tableList) => (
          <>
            <Header>
              <HeaderRow>
                <HeaderCell>
                  <input
                    type="checkbox"
                    checked={select.state.all}
                    onChange={select.fns.onToggleAll}
                  />
                </HeaderRow>
                <HeaderCell sort={{ sortKey: 'NAME' }}>Name</HeaderRow>
                <HeaderCell sort={{ sortKey: 'EMAIL' }}>Email</HeaderRow>
                <HeaderCell sort={{ sortKey: 'DEPARTMENT' }}>Department</HeaderRow>
                <HeaderCell sort={{ sortKey: 'SALARY' }}>Salary</HeaderRow>
                <HeaderCell sort={{ sortKey: 'START_DATE' }}>Start Date</HeaderRow>
                <HeaderCell sort={{ sortKey: 'STATUS' }}>Status</HeaderRow>
              </HeaderRow>
            </Header>
            <Body>
              {tableList.map((item) => (
                <Row 
                  key={item.id} 
                  item={item}
                  style={{
                    backgroundColor: select.state.ids.includes(item.id) 
                      ? '#e3f2fd' 
                      : 'white'
                  }}
                >
                  <Cell>
                    <input
                      type="checkbox"
                      checked={select.state.ids.includes(item.id)}
                      onChange={() => select.fns.onToggleById(item.id)}
                    />
                  </Cell>
                  <Cell>
                    <div>
                      <strong>{item.name}</strong>
                      <div style={{ fontSize: '12px', color: '#666' }}>
                        {item.email}
                      </div>
                    </div>
                  </Cell>
                  <Cell>{item.email}</Cell>
                  <Cell>
                    <span style={{
                      padding: '4px 8px',
                      borderRadius: '4px',
                      backgroundColor: '#dc3545',
                      color: 'white',
                      fontSize: '12px'
                    }}>
                      {item.department}
                    </span>
                  </Cell>
                  <Cell>${item.salary.toLocaleString()}</Cell>
                  <Cell>
                    {new Date(item.startDate).toLocaleDateString('en-US')}
                  </Cell>
                  <Cell>
                    <span style={{
                      padding: '4px 8px',
                      borderRadius: '4px',
                      backgroundColor: item.status === 'Active' ? '#d4edda' : '#f8d7da',
                      color: item.status === 'Active' ? '#155724' : '#721c24',
                      fontWeight: 'bold'
                    }}>
                      {item.status}
                    </span>
                  </Cell>
                </Row>
              ))}
            </Body>
          </>
        )}
      </Table>

      {/* Pagination Controls */}
      <div style={{ marginTop: '16px', display: 'flex', gap: '8px', alignItems: 'center' }}>
        <button
          onClick={() => pagination.fns.onSetPage(0)}
          disabled={pagination.state.page === 0}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'<<'}
        </button>
        <button
          onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
          disabled={pagination.state.page === 0}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'<'}
        </button>
        <span>
          Page {pagination.state.page + 1} of {pagination.state.getTotalPages(data.nodes)}
        </span>
        <button
          onClick={() => pagination.fns.onSetPage(pagination.state.page + 1)}
          disabled={pagination.state.page + 1 >= pagination.state.getTotalPages(data.nodes)}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'>'}
        </button>
        <button
          onClick={() => pagination.fns.onSetPage(pagination.state.getTotalPages(data.nodes) - 1)}
          disabled={pagination.state.page + 1 >= pagination.state.getTotalPages(data.nodes)}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'>>'}
        </button>
      </div>
    </div>
  );
}

export default AdminDashboard;

This advanced example demonstrates:

Multiple plugins working together (sort, filter, pagination, select)
Custom cell rendering with React components
Row selection with checkboxes
Global search/filtering
Custom sorting functions
Pagination controls
Conditional styling
Status badges and department chips

Common Issues / Troubleshooting

Table not rendering: Ensure your data structure uses { nodes: [...] } format. The Table component expects this specific structure.
Plugins not working: Make sure you've installed the specific plugin packages and imported them correctly. Each plugin needs to be passed to the Table component.
Sorting not working: Verify that you've included the sort prop from useSort hook and set sortKey in HeaderCell components.
Filtering issues: Ensure you've set up the filter plugin correctly and are calling filter functions properly. Check that your filter logic matches your data structure.
TypeScript errors: React Table Library has TypeScript support. Define your data types and ensure your node structure matches the expected interface.

Next Steps

Now that you've mastered React Table Library:

Explore tree table features for hierarchical data
Implement custom plugins and extensions
Add server-side data loading
Learn about column resizing and reordering
Explore advanced theming and customization
Add export functionality
Check the official repository: https://github.com/table-library/react-table-library
Look for part 16 of this series for more advanced topics

Summary

You've learned how to implement advanced data table features with React Table Library, including sorting, filtering, pagination, and row selection using a plugin-based architecture. The library provides extensive flexibility for building enterprise-grade data management interfaces with modular, composable features.

SEO Keywords

react-table-library
React Table Library tutorial
react-table-library advanced
React data table plugin
react-table-library installation
React table component
react-table-library example
React data grid
react-table-library setup
React interactive table
react-table-library sorting
React enterprise table
react-table-library filtering
React table library pagination
react-table-library selection

Building Powerful Data Tables with TanStack Table in React

Nathan Collins — Fri, 16 Jan 2026 13:49:42 +0000

TanStack Table (formerly React Table) is a headless, lightweight, and powerful table library for React that provides complete control over table rendering and behavior. It's framework-agnostic at its core but provides React-specific hooks and utilities. This guide walks through creating feature-rich, customizable data tables using TanStack Table with React, covering setup, column definitions, and practical implementation patterns. This is part 14 of a series on using TanStack 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
Basic understanding of React hooks (useState, useMemo, useCallback)
Familiarity with TypeScript (recommended but not required)

Installation

Install TanStack Table React package:

npm install @tanstack/react-table

Or with yarn:

yarn add @tanstack/react-table

Or with pnpm:

pnpm add @tanstack/react-table

Your package.json should include:

{
  "dependencies": {
    "@tanstack/react-table": "^8.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

TanStack Table is headless, meaning it doesn't provide any default styling. You'll need to create your own table markup and styles. No additional setup is required beyond installation.

First Example / Basic Usage

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

// src/DataTable.jsx
import React, { useMemo, useState } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  flexRender,
} from '@tanstack/react-table';

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

  const columns = useMemo(() => [
    {
      accessorKey: 'id',
      header: 'ID',
    },
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'email',
      header: 'Email',
    },
    {
      accessorKey: 'age',
      header: 'Age',
    },
    {
      accessorKey: 'city',
      header: 'City',
    },
  ], []);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th
                  key={header.id}
                  style={{
                    padding: '12px',
                    textAlign: 'left',
                    borderBottom: '2px solid #ddd',
                    cursor: header.column.getCanSort() ? 'pointer' : 'default',
                    userSelect: 'none'
                  }}
                  onClick={header.column.getToggleSortingHandler()}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                  {{
                    asc: ' ↑',
                    desc: ' ↓',
                  }[header.column.getIsSorted() as string] ?? null}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id} style={{ borderBottom: '1px solid #eee' }}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} style={{ padding: '12px' }}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </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">
      <h1>TanStack Table Example</h1>
      <DataTable />
    </div>
  );
}

export default App;

This creates a basic sortable table. Click column headers to sort.

Understanding the Basics

TanStack Table uses a hook-based API where:

useReactTable: Main hook that creates a table instance
columns: Array of column definitions using accessorKey or accessorFn
data: Array of row data objects
flexRender: Utility to render cell and header content
Row Models: Functions like getCoreRowModel(), getSortedRowModel() that enable features

Key concepts:

Headless: No default styling - you control all rendering
Column Definitions: Define structure with accessorKey, header, cell
Row Models: Enable features (sorting, filtering, pagination)
Table Instance: Returned from useReactTable, provides methods to render table

Here's an example with custom cell rendering:

// src/CustomTable.jsx
import React, { useMemo, useState } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  flexRender,
} from '@tanstack/react-table';

function CustomTable() {
  const [data] = useState([
    { id: 1, product: 'Laptop', price: 999.99, stock: 15, status: 'In Stock' },
    { id: 2, product: 'Mouse', price: 29.99, stock: 8, status: 'Low Stock' },
    { id: 3, product: 'Keyboard', price: 79.99, stock: 12, status: 'In Stock' }
  ]);

  const columns = useMemo(() => [
    {
      accessorKey: 'id',
      header: 'ID',
    },
    {
      accessorKey: 'product',
      header: 'Product',
    },
    {
      accessorKey: 'price',
      header: 'Price',
      cell: ({ getValue }) => `$${getValue().toFixed(2)}`,
    },
    {
      accessorKey: 'stock',
      header: 'Stock',
      cell: ({ row }) => {
        const stock = row.getValue('stock');
        return (
          <span style={{ 
            color: stock < 10 ? 'red' : 'green',
            fontWeight: 'bold'
          }}>
            {stock}
          </span>
        );
      },
    },
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ getValue }) => {
        const status = getValue();
        return (
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: status === 'In Stock' ? '#d4edda' : '#fff3cd',
            color: status === 'In Stock' ? '#155724' : '#856404'
          }}>
            {status}
          </span>
        );
      },
    },
  ], []);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <div style={{ padding: '20px' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th
                  key={header.id}
                  style={{
                    padding: '12px',
                    textAlign: 'left',
                    borderBottom: '2px solid #ddd',
                    cursor: header.column.getCanSort() ? 'pointer' : 'default'
                  }}
                  onClick={header.column.getToggleSortingHandler()}
                >
                  {flexRender(header.column.columnDef.header, header.getContext())}
                  {{
                    asc: ' ↑',
                    desc: ' ↓',
                  }[header.column.getIsSorted() as string] ?? null}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id} style={{ borderBottom: '1px solid #eee' }}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} style={{ padding: '12px' }}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default CustomTable;

Practical Example / Building Something Real

Let's build a comprehensive employee management table with sorting, filtering, and pagination:

// src/EmployeeManagement.jsx
import React, { useMemo, useState } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  flexRender,
} from '@tanstack/react-table';

function EmployeeManagement() {
  const [data] = useState([
    { 
      id: 1, 
      name: 'Sarah Johnson', 
      email: 'sarah@example.com',
      department: 'Engineering', 
      salary: 95000, 
      startDate: '2020-01-15',
      status: 'Active'
    },
    { 
      id: 2, 
      name: 'Michael Chen', 
      email: 'michael@example.com',
      department: 'Marketing', 
      salary: 75000, 
      startDate: '2019-06-20',
      status: 'Active'
    },
    { 
      id: 3, 
      name: 'Emily Davis', 
      email: 'emily@example.com',
      department: 'Sales', 
      salary: 65000, 
      startDate: '2021-03-10',
      status: 'Active'
    },
    { 
      id: 4, 
      name: 'David Wilson', 
      email: 'david@example.com',
      department: 'Engineering', 
      salary: 110000, 
      startDate: '2018-09-05',
      status: 'Active'
    },
    { 
      id: 5, 
      name: 'Lisa Anderson', 
      email: 'lisa@example.com',
      department: 'HR', 
      salary: 70000, 
      startDate: '2022-01-08',
      status: 'Active'
    }
  ]);

  const [sorting, setSorting] = useState([]);
  const [globalFilter, setGlobalFilter] = useState('');

  const columns = useMemo(() => [
    {
      accessorKey: 'id',
      header: 'ID',
      enableSorting: true,
    },
    {
      accessorKey: 'name',
      header: 'Employee Name',
      enableSorting: true,
      cell: ({ row }) => {
        const name = row.getValue('name');
        const email = row.original.email;
        return (
          <div>
            <strong>{name}</strong>
            <div style={{ fontSize: '12px', color: '#666' }}>{email}</div>
          </div>
        );
      },
    },
    {
      accessorKey: 'department',
      header: 'Department',
      enableSorting: true,
      cell: ({ getValue }) => {
        const dept = getValue();
        const colors = {
          Engineering: '#dc3545',
          Marketing: '#ffc107',
          Sales: '#28a745',
          HR: '#17a2b8'
        };
        return (
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: colors[dept] || '#6c757d',
            color: 'white',
            fontSize: '12px'
          }}>
            {dept}
          </span>
        );
      },
    },
    {
      accessorKey: 'salary',
      header: 'Salary',
      enableSorting: true,
      cell: ({ getValue }) => {
        const salary = getValue();
        return `$${salary.toLocaleString()}`;
      },
    },
    {
      accessorKey: 'startDate',
      header: 'Start Date',
      enableSorting: true,
      cell: ({ getValue }) => {
        const date = new Date(getValue());
        return date.toLocaleDateString('en-US');
      },
    },
    {
      accessorKey: 'status',
      header: 'Status',
      enableSorting: true,
      cell: ({ getValue }) => {
        const status = getValue();
        return (
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: status === 'Active' ? '#d4edda' : '#f8d7da',
            color: status === 'Active' ? '#155724' : '#721c24',
            fontWeight: 'bold'
          }}>
            {status}
          </span>
        );
      },
    },
  ], []);

  const table = useReactTable({
    data,
    columns,
    state: {
      sorting,
      globalFilter,
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Management</h2>

      {/* Global Filter */}
      <div style={{ marginBottom: '16px' }}>
        <input
          type="text"
          placeholder="Search employees..."
          value={globalFilter}
          onChange={(e) => setGlobalFilter(e.target.value)}
          style={{
            padding: '8px',
            width: '300px',
            border: '1px solid #ddd',
            borderRadius: '4px'
          }}
        />
      </div>

      {/* Table */}
      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: '16px' }}>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id} style={{ backgroundColor: '#f5f5f5' }}>
              {headerGroup.headers.map(header => (
                <th
                  key={header.id}
                  style={{
                    padding: '12px',
                    textAlign: 'left',
                    borderBottom: '2px solid #ddd',
                    cursor: header.column.getCanSort() ? 'pointer' : 'default',
                    userSelect: 'none'
                  }}
                  onClick={header.column.getToggleSortingHandler()}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                  {{
                    asc: ' ↑',
                    desc: ' ↓',
                  }[header.column.getIsSorted() as string] ?? null}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr 
              key={row.id} 
              style={{ 
                borderBottom: '1px solid #eee',
                backgroundColor: row.getIsSelected() ? '#e3f2fd' : 'white'
              }}
            >
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} style={{ padding: '12px' }}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      {/* Pagination */}
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <button
          onClick={() => table.setPageIndex(0)}
          disabled={!table.getCanPreviousPage()}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'<<'}
        </button>
        <button
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'<'}
        </button>
        <span style={{ margin: '0 8px' }}>
          Page{' '}
          <strong>
            {table.getState().pagination.pageIndex + 1} of{' '}
            {table.getPageCount()}
          </strong>
        </span>
        <button
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'>'}
        </button>
        <button
          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
          disabled={!table.getCanNextPage()}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          {'>>'}
        </button>
        <select
          value={table.getState().pagination.pageSize}
          onChange={(e) => {
            table.setPageSize(Number(e.target.value));
          }}
          style={{ marginLeft: '16px', padding: '4px' }}
        >
          {[10, 20, 30, 50].map(pageSize => (
            <option key={pageSize} value={pageSize}>
              Show {pageSize}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

export default EmployeeManagement;

This example demonstrates:

Sorting with visual indicators
Global filtering/search
Pagination with page size selection
Custom cell rendering with React components
Conditional styling
Currency and date formatting
Status badges

Common Issues / Troubleshooting

Infinite re-renders: Use useMemo for columns and useState with initializer function for data to ensure stable references. Avoid creating new arrays/objects on every render.
Sorting not working: Make sure you've included getSortedRowModel() in your table configuration and set enableSorting: true in column definitions.
Filtering not working: Include getFilteredRowModel() and manage filter state. Use onGlobalFilterChange for global search or column-specific filters.
Pagination not working: Add getPaginationRowModel() to your table configuration. Implement pagination controls using table methods like nextPage(), previousPage(), etc.
TypeScript errors: TanStack Table has excellent TypeScript support. Define your data types and use ColumnDef<YourDataType>[] for columns.

Next Steps

Now that you understand TanStack Table:

Explore advanced features like row selection, column resizing, and grouping
Implement column filtering and custom filter components
Add row expansion for nested data
Learn about virtual scrolling for large datasets
Explore server-side data loading and pagination
Add export functionality
Check the official documentation: https://tanstack.com/table/latest
Look for part 15 of this series for more advanced topics

Summary

You've learned how to set up TanStack Table and create feature-rich data tables with sorting, filtering, pagination, and custom rendering. The headless architecture provides complete control over table appearance and behavior, making it perfect for building highly customized data management interfaces.

SEO Keywords

TanStack Table React
TanStack Table tutorial
React table TanStack
TanStack Table installation
React data table headless
TanStack Table example
React table component
TanStack Table setup
React interactive table
TanStack Table sorting
React data grid
TanStack Table filtering
React table library
TanStack Table pagination
React table component tutorial

Getting Started with React Data Table Component: Building Your First Data Table

Nathan Collins — Fri, 16 Jan 2026 13:48:15 +0000

React Data Table Component is a lightweight, feature-rich table library for React that provides essential table functionality like sorting, filtering, pagination, and row selection with a clean, simple API. It's designed to be easy to use while offering customization options for building data-rich interfaces. This guide walks through setting up and creating your first interactive data table using React Data Table Component with React, from installation to a working implementation. This is part 13 of a series on using React Data Table Component 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 React Data Table Component using your preferred package manager:

npm install react-data-table-component

Or with yarn:

yarn add react-data-table-component

Or with pnpm:

pnpm add react-data-table-component

After installation, your package.json should include:

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

Project Setup

React Data Table Component requires minimal setup. Import the component and optional styles:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-data-table-component/dist/index.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 data table component. Create a new file src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import DataTable from 'react-data-table-component';

function DataTable() {
  // Column definitions
  const columns = [
    {
      name: 'ID',
      selector: row => row.id,
      sortable: true,
    },
    {
      name: 'Name',
      selector: row => row.name,
      sortable: true,
    },
    {
      name: 'Email',
      selector: row => row.email,
      sortable: true,
    },
    {
      name: 'Age',
      selector: row => row.age,
      sortable: true,
    },
    {
      name: 'City',
      selector: row => row.city,
      sortable: true,
    },
  ];

  // Sample data
  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <DataTable
        columns={columns}
        data={data}
        pagination
        highlightOnHover
        striped
      />
    </div>
  );
}

export default DataTable;

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

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

function App() {
  return (
    <div className="App">
      <h1>React Data Table Example</h1>
      <DataTable />
    </div>
  );
}

export default App;

This creates a fully functional data table with:

Sortable columns (click column headers)
Pagination
Hover highlighting
Striped rows for better readability
Clean, modern styling

Understanding the Basics

React Data Table Component uses a column-based configuration where:

name: Column header text
selector: Function that extracts the value from each row object
sortable: Enable sorting for the column (default: false)
data: Array of row data objects

Key concepts:

Columns: Define table structure with name, selector, and options
Data: Array of objects where each object represents a table row
Selector: Function that maps to a property in your row data
Props: Enable features like pagination, sorting, selection

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

// src/SimpleTable.jsx
import React from 'react';
import DataTable from 'react-data-table-component';

function SimpleTable() {
  const columns = [
    { name: 'ID', selector: row => row.id },
    { name: 'Name', selector: row => row.name },
    { name: 'Value', selector: row => row.value }
  ];

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

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

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 'react-data-table-component';

function ProductInventory() {
  const [selectedRows, setSelectedRows] = useState([]);
  const [toggleCleared, setToggleCleared] = useState(false);

  const data = [
    { 
      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 = [
    {
      name: 'ID',
      selector: row => row.id,
      sortable: true,
      width: '80px'
    },
    {
      name: 'Product Name',
      selector: row => row.name,
      sortable: true,
    },
    {
      name: 'Category',
      selector: row => row.category,
      sortable: true,
    },
    {
      name: 'Price',
      selector: row => row.price,
      sortable: true,
      format: row => `$${row.price.toFixed(2)}`,
      right: true
    },
    {
      name: 'Stock',
      selector: row => row.stock,
      sortable: true,
      cell: row => (
        <span style={{ 
          color: row.stock < 10 ? 'red' : 'green',
          fontWeight: row.stock < 10 ? 'bold' : 'normal'
        }}>
          {row.stock}
        </span>
      ),
      right: true
    },
    {
      name: 'Status',
      selector: row => row.status,
      sortable: true,
      cell: row => (
        <span style={{ 
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: row.status === 'In Stock' ? '#d4edda' : '#fff3cd',
          color: row.status === 'In Stock' ? '#155724' : '#856404'
        }}>
          {row.status}
        </span>
      )
    }
  ];

  const handleChange = ({ selectedRows }) => {
    setSelectedRows(selectedRows);
  };

  const handleClearRows = () => {
    setToggleCleared(!toggleCleared);
    setSelectedRows([]);
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px' }}>
        <h2>Product Inventory</h2>
        {selectedRows.length > 0 && (
          <button
            onClick={handleClearRows}
            style={{
              padding: '8px 16px',
              backgroundColor: '#dc3545',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Clear Selection ({selectedRows.length})
          </button>
        )}
      </div>
      <DataTable
        title="Products"
        columns={columns}
        data={data}
        pagination
        paginationPerPage={5}
        paginationRowsPerPageOptions={[5, 10, 20]}
        highlightOnHover
        striped
        selectableRows
        selectableRowsHighlight
        onSelectedRowsChange={handleChange}
        clearSelectedRows={toggleCleared}
        pointerOnHover
      />
    </div>
  );
}

export default ProductInventory;

This example demonstrates:

Row selection with checkboxes
Custom cell rendering with conditional styling
Custom formatting (currency for price)
Right-aligned numeric columns
Status badges with color coding
Clear selection functionality
Pagination with customizable page sizes

Common Issues / Troubleshooting

Table not rendering: Make sure you've imported the CSS file (react-data-table-component/dist/index.css). Without styles, the table may not display correctly.
Sorting not working: Ensure you've set sortable: true in your column definitions. The selector function must return a sortable value.
Selection not working: Set selectableRows prop to true and handle the onSelectedRowsChange event. Make sure your data objects have a unique identifier.
Styling issues: The component comes with default styles. You can customize them by overriding CSS classes or using the customStyles prop.
Performance with large datasets: For very large datasets (1000+ rows), consider implementing server-side pagination or using the paginationServer prop.

Next Steps

Now that you have a basic understanding of React Data Table Component:

Learn about advanced features like custom cell renderers and formatters
Explore conditional row styling and cell formatting
Implement server-side data loading and pagination
Add custom actions and buttons
Discover expandable rows for nested data
Check the official repository: https://github.com/jbetancur/react-data-table-component
Look for part 14 of this series for more advanced topics

Summary

You've successfully set up React Data Table Component in your React application and created your first interactive data table. The component provides a simple, clean API for building data-rich interfaces with essential table functionality like sorting, filtering, pagination, and row selection.

SEO Keywords

react-data-table-component
React data table
react-data-table-component tutorial
React table component
react-data-table-component installation
React data grid
react-data-table-component example
React interactive table
react-data-table-component setup
React table library
react-data-table-component getting started
React data table sorting
React table with pagination
react-data-table-component filtering
React table component tutorial

Advanced Data Table Implementation with mui-datatables in React

Nathan Collins — Fri, 16 Jan 2026 13:47:12 +0000

mui-datatables is a powerful, feature-rich data table component for React built on Material-UI that provides comprehensive functionality including sorting, filtering, pagination, search, export, and custom rendering. It offers extensive customization options and advanced features for building complex data management interfaces. This guide walks through implementing advanced table features using mui-datatables with React, covering custom components, server-side processing, and enterprise-grade implementations. This is part 12 of a series on using mui-datatables 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
Material-UI installed (required dependency)
Familiarity with TypeScript (recommended)
Knowledge of async operations and API integration

Installation

First, install Material-UI core components (required dependency):

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

Then install mui-datatables:

npm install mui-datatables

Or install everything with yarn:

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled mui-datatables

Or with pnpm:

pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled mui-datatables

Your package.json should include:

{
  "dependencies": {
    "mui-datatables": "^4.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-datatables requires Material-UI's theme provider. Set up your app with the Material-UI theme:

// 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 basic table component. Create src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import MUIDataTable from 'mui-datatables';

function DataTable() {
  const columns = [
    { name: 'id', label: 'ID', options: { filter: false } },
    { name: 'name', label: 'Name' },
    { name: 'email', label: 'Email' },
    { name: 'age', label: 'Age', options: { filter: false } },
    { name: 'city', label: 'City' }
  ];

  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  const options = {
    filterType: 'checkbox',
    responsive: 'standard',
    selectableRows: 'multiple',
    print: false,
    download: true,
    search: true,
    pagination: true
  };

  return (
    <div style={{ padding: '20px' }}>
      <MUIDataTable
        title="Employee Directory"
        data={data}
        columns={columns}
        options={options}
      />
    </div>
  );
}

export default DataTable;

Understanding the Basics

mui-datatables uses a column-based configuration where:

name: Property key in your data objects
label: Column header text
options: Column-specific options (filtering, sorting, custom rendering)

Key concepts for advanced usage:

Custom Renderers: Use customBodyRender for custom cell content
Custom Filters: Implement custom filter components
Server-side Processing: Load data asynchronously from APIs
Options: Extensive configuration options for table behavior
Events: Handle row selection, cell clicks, and other interactions

Here's an example with custom rendering and filters:

// src/AdvancedTable.jsx
import React, { useState } from 'react';
import MUIDataTable from 'mui-datatables';
import { Chip, IconButton } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

function AdvancedTable() {
  const [data, setData] = 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' }
  ]);

  const columns = [
    { 
      name: 'id', 
      label: 'ID',
      options: { filter: false, sort: true }
    },
    { 
      name: 'name', 
      label: 'Product Name'
    },
    { 
      name: 'category', 
      label: 'Category',
      options: {
        filter: true,
        filterType: 'dropdown'
      }
    },
    { 
      name: 'price', 
      label: 'Price',
      options: {
        customBodyRender: (value) => `$${value.toFixed(2)}`,
        filter: false
      }
    },
    { 
      name: 'stock', 
      label: 'Stock',
      options: {
        customBodyRender: (value) => (
          <span style={{ 
            color: value < 10 ? 'red' : 'green',
            fontWeight: 'bold'
          }}>
            {value}
          </span>
        ),
        filter: false
      }
    },
    { 
      name: 'status', 
      label: 'Status',
      options: {
        customBodyRender: (value) => (
          <Chip 
            label={value} 
            color={value === 'In Stock' ? 'success' : 'warning'}
            size="small"
          />
        ),
        filter: true,
        filterType: 'dropdown'
      }
    },
    {
      name: 'actions',
      label: 'Actions',
      options: {
        filter: false,
        sort: false,
        customBodyRender: (value, tableMeta) => {
          const rowIndex = tableMeta.rowIndex;
          return (
            <>
              <IconButton 
              size="small" 
              onClick={() => handleEdit(rowIndex)}
              color="primary"
            >
              <EditIcon />
            </IconButton>
            <IconButton 
              size="small" 
              onClick={() => handleDelete(rowIndex)}
              color="error"
            >
              <DeleteIcon />
            </IconButton>
            </>
          );
        }
      }
    }
  ];

  const handleEdit = (rowIndex) => {
    console.log('Edit row:', data[rowIndex]);
    // Implement edit logic
  };

  const handleDelete = (rowIndex) => {
    const newData = data.filter((_, index) => index !== rowIndex);
    setData(newData);
  };

  const options = {
    filterType: 'multiselect',
    responsive: 'standard',
    selectableRows: 'multiple',
    selectableRowsOnClick: true,
    rowsPerPage: 10,
    rowsPerPageOptions: [5, 10, 20, 50],
    onRowsDelete: (rowsDeleted) => {
      const indices = rowsDeleted.data.map(d => d.dataIndex);
      setData(data.filter((_, index) => !indices.includes(index)));
      return false; // Prevent default deletion
    },
    customToolbar: () => {
      return (
        <button 
          onClick={() => console.log('Custom action')}
          style={{ marginRight: '10px', padding: '8px 16px' }}
        >
          Custom Action
        </button>
      );
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <MUIDataTable
        title="Product Inventory"
        data={data}
        columns={columns}
        options={options}
      />
    </div>
  );
}

export default AdvancedTable;

Practical Example / Building Something Real

Let's build a comprehensive admin dashboard with server-side processing:

// src/AdminDashboard.jsx
import React, { useState, useEffect, useCallback } from 'react';
import MUIDataTable from 'mui-datatables';
import { Chip, IconButton, Button, Box } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';

function AdminDashboard() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [totalCount, setTotalCount] = useState(0);

  const fetchData = useCallback(async (page, pageSize, searchText, sortOrder) => {
    setLoading(true);
    try {
      // Simulate API call
      const params = new URLSearchParams({
        page: page.toString(),
        limit: pageSize.toString(),
        search: searchText || '',
        sortBy: sortOrder?.name || '',
        sortOrder: sortOrder?.direction || 'asc'
      });

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

      setData(result.data);
      setTotalCount(result.total);
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchData(0, 10, '', null);
  }, [fetchData]);

  const columns = [
    { 
      name: 'id', 
      label: 'ID',
      options: { 
        filter: false,
        sort: true,
        display: true
      }
    },
    { 
      name: 'avatar', 
      label: 'Avatar',
      options: {
        filter: false,
        sort: false,
        customBodyRender: (value) => (
          <img 
            src={value || '/default-avatar.png'} 
            alt="Avatar"
            style={{
              width: '40px',
              height: '40px',
              borderRadius: '50%',
              objectFit: 'cover'
            }}
          />
        )
      }
    },
    { 
      name: 'name', 
      label: 'Full Name',
      options: {
        filter: true,
        customBodyRender: (value, tableMeta) => {
          const row = data[tableMeta.rowIndex];
          return (
            <div>
              <strong>{value}</strong>
              <div style={{ fontSize: '12px', color: '#666' }}>
                {row.email}
              </div>
            </div>
          );
        }
      }
    },
    { 
      name: 'department', 
      label: 'Department',
      options: {
        filter: true,
        filterType: 'multiselect',
        customBodyRender: (value) => {
          const colors = {
            Engineering: '#dc3545',
            Marketing: '#ffc107',
            Sales: '#28a745',
            HR: '#17a2b8'
          };
          return (
            <Chip
              label={value}
              size="small"
              style={{
                backgroundColor: colors[value] || '#6c757d',
                color: 'white'
              }}
            />
          );
        }
      }
    },
    { 
      name: 'salary', 
      label: 'Salary',
      options: {
        filter: false,
        sort: true,
        customBodyRender: (value) => `$${value.toLocaleString()}`,
        customSort: (data1, data2) => {
          return data1[4] - data2[4];
        }
      }
    },
    { 
      name: 'status', 
      label: 'Status',
      options: {
        filter: true,
        filterType: 'dropdown',
        customBodyRender: (value) => (
          <Chip
            label={value}
            color={value === 'Active' ? 'success' : 'error'}
            size="small"
          />
        )
      }
    },
    { 
      name: 'lastLogin', 
      label: 'Last Login',
      options: {
        filter: false,
        customBodyRender: (value) => {
          if (!value) return 'Never';
          const date = new Date(value);
          return date.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          });
        }
      }
    },
    {
      name: 'actions',
      label: 'Actions',
      options: {
        filter: false,
        sort: false,
        customBodyRender: (value, tableMeta) => {
          const rowIndex = tableMeta.rowIndex;
          return (
            <>
              <IconButton 
                size="small" 
                onClick={() => handleEdit(rowIndex)}
                color="primary"
              >
                <EditIcon />
              </IconButton>
              <IconButton 
                size="small" 
                onClick={() => handleDelete(rowIndex)}
                color="error"
              >
                <DeleteIcon />
              </IconButton>
            </>
          );
        }
      }
    }
  ];

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

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

  const options = {
    serverSide: true,
    count: totalCount,
    page: 0,
    rowsPerPage: 10,
    rowsPerPageOptions: [5, 10, 20, 50],
    filterType: 'multiselect',
    responsive: 'standard',
    selectableRows: 'multiple',
    search: true,
    download: true,
    print: false,
    onTableChange: (action, tableState) => {
      switch (action) {
        case 'changePage':
          fetchData(tableState.page, tableState.rowsPerPage, tableState.searchText, tableState.sortOrder);
          break;
        case 'changeRowsPerPage':
          fetchData(0, tableState.rowsPerPage, tableState.searchText, tableState.sortOrder);
          break;
        case 'search':
          fetchData(tableState.page, tableState.rowsPerPage, tableState.searchText, tableState.sortOrder);
          break;
        case 'sort':
          fetchData(tableState.page, tableState.rowsPerPage, tableState.searchText, tableState.sortOrder);
          break;
        case 'filterChange':
          fetchData(tableState.page, tableState.rowsPerPage, tableState.searchText, tableState.sortOrder);
          break;
        default:
          break;
      }
    },
    customToolbar: () => {
      return (
        <Button
          variant="contained"
          color="primary"
          startIcon={<AddIcon />}
          onClick={() => console.log('Add new user')}
          style={{ marginRight: '10px' }}
        >
          Add User
        </Button>
      );
    },
    onRowsDelete: (rowsDeleted) => {
      const indices = rowsDeleted.data.map(d => d.dataIndex);
      const idsToDelete = indices.map(i => data[i].id);

      // Delete multiple rows
      Promise.all(
        idsToDelete.map(id => 
          fetch(`/api/users/${id}`, { method: 'DELETE' })
        )
      ).then(() => {
        fetchData(0, 10, '', null);
      });

      return false;
    }
  };

  return (
    <Box sx={{ p: 3 }}>
      <MUIDataTable
        title="Admin Dashboard"
        data={data}
        columns={columns}
        options={options}
      />
    </Box>
  );
}

export default AdminDashboard;

This advanced example demonstrates:

Server-side data loading with pagination, sorting, and filtering
Custom cell rendering with React components (Chip, IconButton, images)
Custom filters with multiselect and dropdown options
Row selection and bulk deletion
Custom toolbar with action buttons
Real-time data updates
Loading states
Custom sorting logic
Event handling for all table interactions

Common Issues / Troubleshooting

Table not rendering: Ensure you've wrapped your app with Material-UI's ThemeProvider and imported the necessary CSS. Verify that your data array and columns array are properly structured.
Server-side processing not working: Make sure you've set serverSide: true in options and implemented the onTableChange handler to fetch data based on table state changes.
Custom rendering not working: Verify that you're using customBodyRender correctly in column options. The function receives (value, tableMeta) parameters.
Filtering issues: Ensure you've set appropriate filterType in column options ('checkbox', 'dropdown', 'multiselect', etc.). Some filter types require specific data formats.
Performance issues: For large datasets, always use server-side processing. Client-side processing can be slow with thousands of rows.
TypeScript errors: Install type definitions if available. mui-datatables has TypeScript support, so ensure your column and data types match the expected interfaces.

Next Steps

Now that you've mastered mui-datatables:

Explore advanced customization options and themes
Implement custom filter components
Add export functionality (CSV, Excel, PDF)
Learn about column resizing and reordering
Implement row expansion for nested data
Add custom footer and header components
Check the official repository: https://github.com/gregnb/mui-datatables
Look for part 13 of this series for more advanced topics

Summary

You've learned how to implement advanced data table features with mui-datatables, including server-side processing, custom rendering, filtering, sorting, and complex interactions. The library provides extensive functionality for building enterprise-grade data management interfaces with Material-UI's design system and excellent performance.

SEO Keywords

mui-datatables React
mui-datatables tutorial
React advanced data table
mui-datatables installation
React Material-UI table
mui-datatables server-side
React data grid advanced
mui-datatables custom rendering
React table component
mui-datatables setup
React interactive table
mui-datatables filtering
React enterprise table
mui-datatables pagination
React Material-UI data table

Building Feature-Rich Tables with Material-Table in React

Nathan Collins — Fri, 16 Jan 2026 13:46:09 +0000

Material-Table is a powerful data table component for React built on Material-UI that provides comprehensive features including sorting, filtering, pagination, editing, exporting, and more out of the box. It offers a simple API while delivering enterprise-grade functionality, making it perfect for building complex data management interfaces. This guide walks through creating advanced, interactive data tables using Material-Table with React, covering setup, configuration, and practical implementation patterns. This is part 11 of a series on using Material-Table 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, useCallback)
Material-UI installed (required dependency)
Familiarity with JavaScript/TypeScript

Installation

First, install Material-UI core components (required dependency):

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

Then install Material-Table:

npm install material-table

Or install everything with yarn:

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled material-table

Or with pnpm:

pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled material-table

Your package.json should include:

{
  "dependencies": {
    "material-table": "^1.69.3",
    "@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

Material-Table requires Material-UI's theme provider. Set up your app with the Material-UI theme:

// 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 basic table component. Create src/DataTable.jsx:

// src/DataTable.jsx
import React, { useState } from 'react';
import MaterialTable from 'material-table';

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

  const columns = [
    { title: 'ID', field: 'id', type: 'numeric' },
    { title: 'Name', field: 'name' },
    { title: 'Email', field: 'email' },
    { title: 'Age', field: 'age', type: 'numeric' },
    { title: 'City', field: 'city' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <MaterialTable
        title="Employee Directory"
        columns={columns}
        data={data}
        options={{
          search: true,
          paging: true,
          filtering: true,
          exportButton: true
        }}
      />
    </div>
  );
}

export default DataTable;

Update your App.jsx:

// 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>
          Material-Table Example
        </Typography>
        <DataTable />
      </Box>
    </Container>
  );
}

export default App;

This creates a fully functional table with:

Built-in search functionality
Pagination
Column filtering
Export button (CSV, PDF)
Sorting (click column headers)
Material-UI styling

Understanding the Basics

Material-Table uses a column-based configuration where:

title: Column header text
field: Property key in your data objects
type: Data type ('string', 'numeric', 'boolean', 'date', etc.)
data: Array of row data objects

Key concepts:

Columns: Define table structure and behavior
Data: Array of objects representing rows
Options: Enable/disable features like search, pagination, filtering
Actions: Custom action buttons (add, edit, delete)
Icons: Material-UI icons for actions and features

Here's an example with editable rows and actions:

// src/EditableTable.jsx
import React, { useState } from 'react';
import MaterialTable from 'material-table';
import { forwardRef } from 'react';
import AddBox from '@mui/icons-material/AddBox';
import ArrowDownward from '@mui/icons-material/ArrowDownward';
import Check from '@mui/icons-material/Check';
import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight';
import Clear from '@mui/icons-material/Clear';
import DeleteOutline from '@mui/icons-material/DeleteOutline';
import Edit from '@mui/icons-material/Edit';
import FilterList from '@mui/icons-material/FilterList';
import FirstPage from '@mui/icons-material/FirstPage';
import LastPage from '@mui/icons-material/LastPage';
import Remove from '@mui/icons-material/Remove';
import SaveAlt from '@mui/icons-material/SaveAlt';
import Search from '@mui/icons-material/Search';
import ViewColumn from '@mui/icons-material/ViewColumn';

const tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

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

  const columns = [
    { title: 'ID', field: 'id', type: 'numeric', editable: 'never' },
    { title: 'Name', field: 'name' },
    { title: 'Category', field: 'category' },
    { title: 'Price', field: 'price', type: 'currency' },
    { title: 'Stock', field: 'stock', type: 'numeric' }
  ];

  return (
    <MaterialTable
      title="Product Inventory"
      columns={columns}
      data={data}
      icons={tableIcons}
      editable={{
        onRowAdd: (newData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              setData([...data, { ...newData, id: data.length + 1 }]);
              resolve();
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              const dataUpdate = [...data];
              const index = oldData.tableData.id;
              dataUpdate[index] = newData;
              setData([...dataUpdate]);
              resolve();
            }, 600);
          }),
        onRowDelete: (oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              const dataDelete = [...data];
              const index = oldData.tableData.id;
              dataDelete.splice(index, 1);
              setData([...dataDelete]);
              resolve();
            }, 600);
          })
      }}
      options={{
        actionsColumnIndex: -1,
        addRowPosition: 'first'
      }}
    />
  );
}

export default EditableTable;

Practical Example / Building Something Real

Let's build a comprehensive employee management system:

// src/EmployeeManagement.jsx
import React, { useState } from 'react';
import MaterialTable from 'material-table';
import { forwardRef } from 'react';
import AddBox from '@mui/icons-material/AddBox';
import ArrowDownward from '@mui/icons-material/ArrowDownward';
import Check from '@mui/icons-material/Check';
import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight';
import Clear from '@mui/icons-material/Clear';
import DeleteOutline from '@mui/icons-material/DeleteOutline';
import Edit from '@mui/icons-material/Edit';
import FilterList from '@mui/icons-material/FilterList';
import FirstPage from '@mui/icons-material/FirstPage';
import LastPage from '@mui/icons-material/LastPage';
import Remove from '@mui/icons-material/Remove';
import SaveAlt from '@mui/icons-material/SaveAlt';
import Search from '@mui/icons-material/Search';
import ViewColumn from '@mui/icons-material/ViewColumn';

const tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

function EmployeeManagement() {
  const [data, setData] = useState([
    { 
      id: 1, 
      name: 'Sarah Johnson', 
      email: 'sarah@example.com',
      department: 'Engineering', 
      salary: 95000, 
      startDate: '2020-01-15',
      status: 'Active'
    },
    { 
      id: 2, 
      name: 'Michael Chen', 
      email: 'michael@example.com',
      department: 'Marketing', 
      salary: 75000, 
      startDate: '2019-06-20',
      status: 'Active'
    },
    { 
      id: 3, 
      name: 'Emily Davis', 
      email: 'emily@example.com',
      department: 'Sales', 
      salary: 65000, 
      startDate: '2021-03-10',
      status: 'Active'
    }
  ]);

  const columns = [
    { 
      title: 'ID', 
      field: 'id', 
      type: 'numeric',
      editable: 'never',
      width: 80
    },
    { 
      title: 'Name', 
      field: 'name',
      validate: rowData => rowData.name === undefined || rowData.name === '' ? 'Name is required' : true
    },
    { 
      title: 'Email', 
      field: 'email',
      validate: rowData => {
        if (!rowData.email) return 'Email is required';
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(rowData.email) ? true : 'Invalid email format';
      }
    },
    { 
      title: 'Department', 
      field: 'department',
      lookup: {
        Engineering: 'Engineering',
        Marketing: 'Marketing',
        Sales: 'Sales',
        HR: 'HR'
      }
    },
    { 
      title: 'Salary', 
      field: 'salary', 
      type: 'currency',
      currencySetting: { currencyCode: 'USD', minimumFractionDigits: 0 }
    },
    { 
      title: 'Start Date', 
      field: 'startDate', 
      type: 'date'
    },
    { 
      title: 'Status', 
      field: 'status',
      lookup: {
        Active: 'Active',
        Inactive: 'Inactive'
      }
    }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <MaterialTable
        title="Employee Management"
        columns={columns}
        data={data}
        icons={tableIcons}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                // Validate required fields
                if (!newData.name || !newData.email) {
                  reject();
                  return;
                }
                setData([...data, { ...newData, id: data.length + 1 }]);
                resolve();
              }, 600);
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                if (!newData.name || !newData.email) {
                  reject();
                  return;
                }
                const dataUpdate = [...data];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                setData([...dataUpdate]);
                resolve();
              }, 600);
            }),
          onRowDelete: (oldData) =>
            new Promise((resolve) => {
              setTimeout(() => {
                const dataDelete = [...data];
                const index = oldData.tableData.id;
                dataDelete.splice(index, 1);
                setData([...dataDelete]);
                resolve();
              }, 600);
            })
        }}
        options={{
          search: true,
          paging: true,
          filtering: true,
          exportButton: true,
          exportAllData: true,
          grouping: true,
          actionsColumnIndex: -1,
          addRowPosition: 'first',
          pageSize: 10,
          pageSizeOptions: [5, 10, 20, 50]
        }}
        localization={{
          body: {
            emptyDataSourceMessage: 'No records to display',
            addTooltip: 'Add',
            deleteTooltip: 'Delete',
            editTooltip: 'Edit',
            filterRow: {
              filterTooltip: 'Filter'
            }
          },
          header: {
            actions: 'Actions'
          },
          pagination: {
            labelRowsSelect: 'rows',
            labelRowsPerPage: 'Rows per page:',
            firstAriaLabel: 'First Page',
            firstTooltip: 'First Page',
            previousAriaLabel: 'Previous Page',
            previousTooltip: 'Previous Page',
            nextAriaLabel: 'Next Page',
            nextTooltip: 'Next Page',
            lastAriaLabel: 'Last Page',
            lastTooltip: 'Last Page'
          },
          toolbar: {
            searchTooltip: 'Search',
            searchPlaceholder: 'Search'
          }
        }}
      />
    </div>
  );
}

export default EmployeeManagement;

This example demonstrates:

Full CRUD operations (Create, Read, Update, Delete)
Data validation for required fields and email format
Lookup fields (dropdowns) for department and status
Currency formatting for salary
Date field for start date
Grouping functionality
Export capabilities
Custom icons
Localization for better UX

Common Issues / Troubleshooting

Icons not displaying: Material-Table requires Material-UI icons. Make sure @mui/icons-material is installed and you're providing the icons prop with properly forwarded refs.
Editing not working: Ensure you've implemented the editable prop with onRowAdd, onRowUpdate, and onRowDelete handlers. These should return Promises.
Theme issues: Make sure your app is wrapped with Material-UI's ThemeProvider and CssBaseline component.
TypeScript errors: Install @types/material-table if using TypeScript, or ensure your column and data types match the expected interfaces.
Performance with large datasets: For very large datasets, consider implementing server-side data loading using the data prop with a function that returns a Promise.

Next Steps

Now that you understand Material-Table:

Explore advanced features like detail panels and row actions
Implement server-side data loading and pagination
Add custom cell renderers and formatters
Learn about grouping and aggregation
Add export functionality (Excel, PDF)
Explore theming and customization options
Check the official repository: https://github.com/mbrn/material-table
Look for part 12 of this series for more advanced topics

Summary

You've learned how to set up Material-Table and create feature-rich data tables with sorting, filtering, pagination, editing, and export capabilities. The library provides comprehensive functionality out of the box, making it easy to build enterprise-grade data management interfaces with Material-UI's design system.

SEO Keywords

material-table React
Material-Table React tutorial
material-table installation
React data table Material-UI
material-table example
React table with editing
material-table CRUD
React data grid Material-UI
material-table setup
React interactive table
material-table filtering
React table component
material-table pagination
React Material-UI table
material-table getting started