# @lemonadejs/react-data-grid

> The React data grid component using LemonadeJS is a lightweight and flexible tool that allows developers to create dynamic and interactive tables on web pages. The component supports dynamic data loading, sorting, filtering, and pagination, making it easy

Latest version **1.0.2** (published 2023-09-28) · 0 weekly downloads

## Install

```sh
npm install @lemonadejs/react-data-grid
pnpm add @lemonadejs/react-data-grid
yarn add @lemonadejs/react-data-grid
bun add @lemonadejs/react-data-grid
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-09-28 |
| First published | 2023-05-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Contact |
| Maintainers | nicolasjesse, hodeware |
| Keywords | javascript grid with search and pagination, lemonadejs plugins, js, library, javascript plugins, javascript data grid, data grid, react |

## Links

- npm: https://www.npmjs.com/package/@lemonadejs/react-data-grid
- npm.io page: https://npm.io/package/@lemonadejs/react-data-grid

## Dependencies (2)

- [lemonadejs](https://npm.io/package/lemonadejs.md) ^3.2.0
- [@lemonadejs/data-grid](https://npm.io/package/@lemonadejs/data-grid.md) ^1.0.18

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-09-28
- 1.0.0 — 2023-05-16

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

### 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)

---
_Source: https://npm.io/package/@lemonadejs/react-data-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._