gridjs-react
v6.1.1
Published
React component for Grid.js
Downloads
25,559
Maintainers
Readme
Grid.js for React
React component for Grid.js
Install
npm install --save gridjs-react
Also, make sure you have Grid.js installed already as it's a peer dependency of gridjs-react
:
npm install --save gridjs
Usage
Import the Grid component first:
import { Grid } from "gridjs-react";
<Grid
data={[
['John', '[email protected]'],
['Mike', '[email protected]']
]}
columns={['Name', 'Email']}
search={true}
pagination={{
enabled: true,
limit: 1,
}}
/>
Then you can pass all Grid.js configs to the Grid
component. See Grid.js 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:
import { Grid, _ } from "gridjs-react";
<Grid
data={[
[
_(<b>John</b>),
'[email protected]',
],
[
_(<MyReactComponent>Mike</MyReactComponent>),
'[email protected]',
]
]}
columns={[
'Name',
{
name: 'Email',
formatter: (cell) => _(<i>{cell}</i>)
}
]}
search={true}
pagination={{
enabled: true,
limit: 1,
}}
/>
Example
See the React example on Grid.js website.
License
MIT