React component for Grid.js
npm install --save gridjs-reactAlso, make sure you have Grid.js installed already as it's a peer dependency of gridjs-react:
npm install --save gridjsImport the Grid component first:
import { Grid } from "gridjs-react";<Grid
data={[
['John', 'john@example.com'],
['Mike', 'mike@gmail.com']
]}
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.
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>),
'john@example.com',
],
[
_(<MyReactComponent>Mike</MyReactComponent>),
'mike@gmail.com',
]
]}
columns={[
'Name',
{
name: 'Email',
formatter: (cell) => _(<i>{cell}</i>)
}
]}
search={true}
pagination={{
enabled: true,
limit: 1,
}}
/>See the React example on Grid.js website.
MIT