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