https://github.com/lemonadejs/react-data-grid
Reactive JavaScript Data Grid
https://github.com/lemonadejs/react-data-grid
Last synced: 10 months ago
JSON representation
Reactive JavaScript Data Grid
- Host: GitHub
- URL: https://github.com/lemonadejs/react-data-grid
- Owner: lemonadejs
- Created: 2023-05-16T17:00:54.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T17:13:10.000Z (over 2 years ago)
- Last Synced: 2025-01-11T04:21:38.276Z (over 1 year ago)
- Language: JavaScript
- Size: 355 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DataGridLM-React
[Official website and documentation is here](https://lemonadejs.net/components/datagrid)
Welcome to the React version of [Lemon Datagrid](https://github.com/lemonadejs/data-grid). This project makes DataGridLM usable in React.
For more information, please check the DataGridLM page.
## Features
- Lightweight: DataGridLM is only about 5 Kbytes in size, making it fast and easy to load.
- Customizable: You can define columns and user-defined actions to suit your specific use case.
- Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date.
- Integration: DataGridLM can be used as a standalone library or integrated with LemonadeJS or React.
## Getting Started
### npm Installation
To install your project using npm, run the following command:
```bash
$ npm install @lemonadejs/react-data-grid
```
### Usage
In a React Component, you can directly call the Datagrid within the JSX by passing the **options** as props, along with the element's **ref**.
```javascript
import React, { useState, useRef } from 'react'
import Datagrid from '@lemonadejs/react-data-grid'
function Component() {
const [data, setData] = useState([
{ name: 'The Last of Us 2', releaseDate: '2022' },
{ name: 'West World', releaseDate: '2017' }
])
const [columns, setColumns] = useState([
{ name: 'name', headerName: 'Title' },
{ name: 'releaseDate', headerName: 'Release Date' }
])
const datagridRef = useRef()
return (
)
}
```
### Examples
Here are a few examples of DataGridLM in action:
- [Basic Data Grid Example](https://lemonadejs.net/components/datagrid#example-1)
- [Example with Large Data Sets](https://lemonadejs.net/components/datagrid#example-2)
- [Example with Data Addition and Deletion](https://lemonadejs.net/components/datagrid#example-3)
## Contributing
DataGridLM-React is an open source project and contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub. If you'd like to contribute code, please fork the repository and submit a pull request.
## License
DataGridLM-React is released under the MIT.
## Other Tools
- [jSuites](https://jsuites.net/v4/)
- [Jspreadsheet](https://jspreadsheet.com)