File tree Expand file tree Collapse file tree 1 file changed +36
-2
lines changed Expand file tree Collapse file tree 1 file changed +36
-2
lines changed Original file line number Diff line number Diff line change @@ -22,8 +22,6 @@ Import the Grid component first:
2222import { Grid } from " gridjs-react" ;
2323```
2424
25- and then:
26-
2725``` jsx
2826< Grid
2927 data= {[
@@ -41,6 +39,42 @@ and then:
4139
4240Then you can pass all Grid.js configs to the ` Grid ` component. See [ Grid.js Config] ( https://gridjs.io/docs/config ) for more details.
4341
42+ ## React component in cells
43+
44+ You can bind your React components or elements in Table cells (both in header and body cells).
45+ Simply import the ` _ ` function and use it in ` data ` , ` columns ` or ` formatter ` function:
46+
47+ ``` js
48+ import { Grid , _ } from " gridjs-react" ;
49+ ```
50+
51+ ``` jsx
52+ < Grid
53+ data= {[
54+ [
55+ _ (< b> John< / b> ),
56+ ' john@example.com' ,
57+ ],
58+ [
59+ _ (< MyReactComponent> Mike< / MyReactComponent> ),
60+ ' mike@gmail.com' ,
61+ ]
62+ ]}
63+ columns= {[
64+ ' Name' ,
65+ {
66+ name: ' Email' ,
67+ formatter : (cell ) => _ (< i> {cell}< / i> )
68+ }
69+ ]}
70+ search= {true }
71+ pagination= {{
72+ enabled: true ,
73+ limit: 1 ,
74+ }}
75+ / >
76+ ```
77+
4478## Example
4579
4680See the [ React example] ( https://gridjs.io/docs/integrations/react ) on Grid.js website.
You can’t perform that action at this time.
0 commit comments