Official website and documentation is here

Welcome to the React version of Lemon Datagrid. This project makes DataGridLM usable in React. For more information, please check the DataGridLM page.

• 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.

To install your project using npm, run the following command:

$ npm install @lemonadejs/react-data-grid

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.

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 ( <div> <Datagrid data={data} columns={columns} ref={datagridRef} /> </div> ) }

Here are a few examples of DataGridLM in action:

• Basic Data Grid Example
• Example with Large Data Sets
• Example with Data Addition and Deletion

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.

DataGridLM-React is released under the MIT.

• jSuites
• Jspreadsheet