react-data-grid

ui-component grid reactive

react-data-gridはReactアプリケーションで使用するための効率的で柔軟なデータグリッドライブラリです。大量のデータを表現し、操作するためのさまざまな機能を提供します。

Latest Ver 6.1.0

Homepage

Github

7,212

データグリッド、データの海を航海する。

複雑なデータも簡単かつ効率的に管理します。

Reactのための高性能データグリッドライブラリ

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

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

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 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'));