https://github.com/grid-js/gridjs-react
React component for Grid.js
https://github.com/grid-js/gridjs-react
Last synced: about 1 year ago
JSON representation
React component for Grid.js
- Host: GitHub
- URL: https://github.com/grid-js/gridjs-react
- Owner: grid-js
- License: mit
- Created: 2020-06-12T17:35:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-16T00:03:53.000Z (over 2 years ago)
- Last Synced: 2024-11-06T13:00:43.928Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://gridjs.io/docs/integrations/react
- Size: 812 KB
- Stars: 47
- Watchers: 3
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Grid.js for React
React component for [Grid.js](https://gridjs.io/)
## Install
```bash
npm install --save gridjs-react
```
Also, make sure you have Grid.js installed already as it's a peer dependency of `gridjs-react`:
```bash
npm install --save gridjs
```
## Usage
Import the Grid component first:
```js
import { Grid } from "gridjs-react";
```
```jsx
```
Then you can pass all Grid.js configs to the `Grid` component. See [Grid.js Config](https://gridjs.io/docs/config) for more details.
## React component in cells
You can bind your React components or elements in Table cells (both in header and body cells).
Simply import the `_` function and use it in `data`, `columns` or `formatter` function:
```js
import { Grid, _ } from "gridjs-react";
```
```jsx
John),
'john@example.com',
],
[
_(Mike),
'mike@gmail.com',
]
]}
columns={[
'Name',
{
name: 'Email',
formatter: (cell) => _({cell})
}
]}
search={true}
pagination={{
enabled: true,
limit: 1,
}}
/>
```
## Example
See the [React example](https://gridjs.io/docs/integrations/react) on Grid.js website.
## License
MIT