Get started with react-data-grid CDN

MIT licensed

React Data Grid is a popular React library for rendering large, complex data grids with efficient virtualization and customizable features.

Tags:
  • react
  • grid
  • react-component

Stable version

Copied!

How to start using react-data-grid CDN


import React from 'react';
import { DataGrid, GridColDef } from 'react-data-grid';

const data = [
  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
  { id: 2, name: 'Jane Doe', age: 25, city: 'Los Angeles' },
  { id: 3, name: 'Bob Smith', age: 45, city: 'Chicago' },
];

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 70 },
  { field: 'city', headerName: 'City', width: 150 },
];

const App: React.FC = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={data}
        columns={columns}
        pageSize={5}
        checkboxSelection
      />
    </div>
  );
};

export default App;
Copied!
Copied!

All versions

0.12.0 0.12.1 0.12.10 0.12.11 0.12.12 0.12.13 0.12.14 0.12.15 0.12.15-alpha1 0.12.15-alpha2 0.12.16 0.12.17 0.12.18 0.12.19 0.12.2 0.12.20 0.12.20-alpha1 0.12.21 0.12.22 0.12.23 0.12.24 0.12.26 0.12.27 0.12.4 0.12.5 0.12.6 0.12.7 0.12.8 0.12.9 0.13.0-alpha1 0.13.0-alpha2 0.13.1 0.13.10 0.13.11 0.13.12 0.13.13 0.13.14 0.13.15 0.13.16 0.13.17 0.13.18 0.13.19 0.13.2 0.13.20 0.13.21 0.13.22 0.13.23 0.13.24 0.13.25 0.13.26 0.13.27 0.13.28 0.13.29 0.13.3 0.13.30 0.13.31 0.13.32 0.13.33 0.13.34 0.13.35 0.13.4 0.13.5 0.13.6 0.13.7 0.13.8 0.13.9 0.14.1 0.14.10 0.14.11 0.14.12 0.14.13 0.14.14 0.14.15 0.14.16 0.14.17 0.14.18 0.14.19 0.14.2 0.14.20 0.14.21 0.14.22 0.14.23 0.14.24 0.14.25 0.14.26 0.14.27 0.14.28 0.14.29 0.14.3 0.14.30 0.14.31 0.14.32 0.14.33 0.14.34 0.14.35 0.14.36 0.14.37 0.14.38 0.14.39 0.14.4 0.14.40 0.14.41 0.14.42 0.14.43 0.14.44 0.14.45 0.14.46 0.14.5 0.14.6 0.14.7 0.14.8 0.14.9 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.16 1.0.17 1.0.18 1.0.18-alpha1 1.0.19 1.0.2 1.0.20 1.0.21 1.0.22 1.0.23 1.0.24 1.0.25 1.0.26 1.0.27 1.0.28 1.0.29 1.0.3 1.0.30 1.0.31 1.0.32 1.0.33 1.0.34 1.0.35 1.0.36 1.0.37 1.0.38 1.0.39 1.0.4 1.0.40 1.0.41 1.0.42 1.0.43 1.0.44 1.0.45 1.0.46 1.0.47 1.0.48 1.0.49 1.0.5 1.0.50 1.0.51 1.0.52 1.0.53 1.0.54 1.0.55 1.0.56 1.0.57 1.0.58 1.0.59 1.0.6 1.0.60 1.0.61 1.0.62 1.0.63 1.0.64 1.0.65 1.0.66 1.0.67 1.0.68 1.0.69 1.0.7 1.0.70 1.0.71 1.0.72 1.0.73 1.0.74 1.0.75 1.0.76 1.0.77 1.0.78 1.0.79 1.0.8 1.0.80 1.0.81 1.0.82 1.0.83 1.0.84 1.0.85 1.0.9 2.0.0 2.0.1 2.0.10 2.0.11 2.0.12 2.0.13 2.0.14 2.0.15 2.0.16 2.0.17 2.0.18 2.0.19 2.0.2 2.0.20 2.0.21 2.0.22 2.0.23 2.0.24 2.0.26 2.0.27 2.0.28 2.0.29 2.0.3 2.0.30 2.0.31 2.0.32 2.0.33 2.0.34 2.0.35 2.0.36 2.0.37 2.0.38 2.0.39 2.0.4 2.0.40 2.0.41 2.0.42 2.0.43 2.0.44 2.0.45 2.0.46 2.0.47 2.0.48 2.0.49 2.0.5 2.0.50 2.0.51 2.0.52 2.0.53 2.0.54 2.0.55 2.0.56 2.0.57 2.0.58 2.0.59 2.0.6 2.0.60 2.0.61 2.0.62 2.0.63 2.0.64 2.0.65 2.0.66 2.0.67 2.0.68 2.0.69 2.0.7 2.0.70 2.0.71 2.0.72 2.0.73 2.0.74 2.0.75 2.0.76 2.0.77 2.0.78 2.0.79 2.0.8 2.0.80 2.0.9 3.0.1 3.0.10 3.0.11 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 4.0.0 4.0.1 4.0.2 4.0.3 4.0.4 4.0.5 4.0.6 4.0.7 4.0.8 4.0.9 5.0.0 5.0.1 5.0.2 5.0.3 5.0.4 5.0.5 6.0.0 6.0.1 *** 6.1.0