react-data-grid

ui-component grid reactive

react-data-grid is an efficient and flexible data grid library designed for use in React applications. It offers various features for representing and manipulating large datasets.

Latest Ver 6.1.0

Homepage

Github

7,212

Data Grid, Navigating the Seas of Data.

Manage complex data easily and efficiently.

High-performance data grid library for React

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/react-data-grid/6.1.0/react-data-grid.js

https://cdnjs.cloudflare.com/ajax/libs/react-data-grid/6.1.0/react-data-grid.min.js

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div id="root"></div><script>const columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }];const rows = [{ id: 1, title: 'Example' }];const grid = <ReactDataGrid columns={columns} rows={rows} />;ReactDOM.render(grid, document.getElementById('root'));</script>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-data-grid/7.0.0-canary.24/react-data-grid.min.js"></script>

⚙️ JavaScript
const columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }];const rows = [{ id: 1, title: 'Example' }];const grid = <ReactDataGrid columns={columns} rows={rows} />;ReactDOM.render(grid, document.getElementById('root'));