Building Feature-Rich Data Tables with KendoReact Grid

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: '[e-mail]', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: '[e-mail]', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: '[e-mail]', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: '[e-mail]', 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: '[e-mail]',
      department: 'Engineering', 
      salary: 95000, 
      startDate: '2020-01-15',
      status: 'Active'
    },
    { 
      id: 2, 
      name: 'Michael Chen', 
      email: '[e-mail]',
      department: 'Marketing', 
      salary: 75000, 
      startDate: '2019-06-20',
      status: 'Active'
    },
    { 
      id: 3, 
      name: 'Emily Davis', 
      email: '[e-mail]',
      department: 'Sales', 
      salary: 65000, 
      startDate: '2021-03-10',
      status: 'Active'
    },
    { 
      id: 4, 
      name: 'David Wilson', 
      email: '[e-mail]',
      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

1. 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.

2. Sorting not working: Set sortable={true} and manage sort state with sort and onSortChange props.

3. Filtering not working: Enable filterable={true} and manage filter state. KendoReact Grid uses a filter descriptor object.

4. Pagination not working: Set pageable={true} and manage page state with page and onPageChange props.

5. 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