Skip to content

Commit a6c018e

Browse files
afshinmafshinm
committed
feat: JSON
1 parent 5ac5740 commit a6c018e

File tree

6 files changed

+157
-16
lines changed

6 files changed

+157
-16
lines changed

‎docs/config/columns.md

+7-6
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ new Grid({
3434

3535
<div className="full-width">
3636

37-
| Name | Description | Type | Example |
38-
|----------------------|------------------------|----------|------------------|
39-
| name | column name | string | `Name` |
40-
| width `optional` | width of the column | string | `200px` or `30%` |
41-
| sort `optional` | to enable/disable sort | boolean | `true` or `0` |
42-
| formatter `optional` | custom cell formatting | function | `(cell: TCell, row: Row<TCell>, column: TColumn) => ComponentChild;` |
37+
| Name | Description | Type | Example |
38+
|----------------------|-------------------------|----------|------------------|
39+
| id `optional` | column ID for JSON data | string | `phoneNumber` |
40+
| name | column name | string | `Name` |
41+
| width `optional` | width of the column | string | `200px` or `30%` |
42+
| sort `optional` | to enable/disable sort | boolean | `true` or `0` |
43+
| formatter `optional` | custom cell formatting | function | `(cell: TCell, row: Row<TCell>, column: TColumn) => ComponentChild;` |
4344

4445
</div>
4546

‎docs/config/data.md

+15-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ title: data
66
To define the rows and columns of the table.
77

88
- `optional` (either `data`, `from` or `server` must be provided)
9-
- Type: `T[][]` or `Function`
10-
- Example: [Hello World](./examples/hello-world.md), [Async import](./examples/import-async.md) and [Dynamic import](./examples/import-function.md)
9+
- Type: `TCell[][]`, `{ [key: string]: TCell }[]` or `Function`
10+
- Example: [Hello World](./examples/hello-world.md), [Import JSON](./examples/import-json.md), [Async import](./examples/import-async.md) and [Dynamic import](./examples/import-function.md)
1111

1212
```js
1313
new Grid({
@@ -19,3 +19,16 @@ new Grid({
1919
]
2020
});
2121
```
22+
23+
or
24+
25+
```js
26+
new Grid({
27+
data: [
28+
{ name: 'John', email: '[email protected]' },
29+
{ name: 'Mark', email: '[email protected]' },
30+
{ name: 'Eoin', email: '[email protected]' },
31+
{ name: 'Nisen', email: '[email protected]' }
32+
]
33+
});
34+
```

‎docs/examples/import-json.md

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
id: import-json
3+
title: JSON
4+
keywords:
5+
- javascript
6+
- table
7+
- javascript table
8+
- gridjs
9+
- grid js
10+
- import json
11+
---
12+
13+
import { Grid } from "gridjs/dist/gridjs.development.es.js";
14+
import CodeBlock from "@theme/CodeBlock"
15+
import { useEffect, useRef } from "react";
16+
17+
In order to import JSON (or an array of objects), simply change the data input to `[{ key: value }, ... ]`.
18+
Grid.js expects each column to have a unique `id` field which matches the keys in the `data` object:
19+
20+
<CodeBlock children={
21+
`
22+
const grid = new Grid({
23+
columns: [{
24+
id: 'name',
25+
name: 'Name'
26+
}, {
27+
id: 'email',
28+
name: 'Email'
29+
}, {
30+
id: 'phoneNumber',
31+
name: 'Phone Number'
32+
}],
33+
data: [
34+
{ name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },
35+
{ name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },
36+
]
37+
});
38+
`
39+
}
40+
transformCode={(code) =>
41+
`
42+
function () {
43+
${code}
44+
45+
const wrapperRef = useRef(null);
46+
47+
useEffect(() => {
48+
grid.render(wrapperRef.current);
49+
});
50+
51+
return (
52+
<div ref={wrapperRef} />
53+
);
54+
}
55+
`
56+
} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />
57+
58+
<br />
59+
60+
:::tip
61+
Grid.js tries to guess the `id` of columns by camelCasing them if column ID is not defined.
62+
63+
E.g. `Phone Number` becomes `phoneNumber`
64+
:::
65+
66+
<CodeBlock children={
67+
`
68+
const grid = new Grid({
69+
columns: ['Name', 'Email', 'Phone Number'],
70+
data: [
71+
{ name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },
72+
{ name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },
73+
]
74+
});
75+
`
76+
}
77+
transformCode={(code) =>
78+
`
79+
function () {
80+
${code}
81+
82+
const wrapperRef = useRef(null);
83+
84+
useEffect(() => {
85+
grid.render(wrapperRef.current);
86+
});
87+
88+
return (
89+
<div ref={wrapperRef} />
90+
);
91+
}
92+
`
93+
} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />
94+
95+
<br />
96+
97+
You can also leave the `columns` config empty if you want Grid.js to set the column names automatically:
98+
99+
<CodeBlock children={
100+
`
101+
const grid = new Grid({
102+
data: [
103+
{ name: 'John', email: '[email protected]', phoneNumber: '(353) 01 222 3333' },
104+
{ name: 'Mark', email: '[email protected]', phoneNumber: '(01) 22 888 4444' },
105+
]
106+
});
107+
`
108+
}
109+
transformCode={(code) =>
110+
`
111+
function () {
112+
${code}
113+
114+
const wrapperRef = useRef(null);
115+
116+
useEffect(() => {
117+
grid.render(wrapperRef.current);
118+
});
119+
120+
return (
121+
<div ref={wrapperRef} />
122+
);
123+
}
124+
`
125+
} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />
126+

‎docs/examples/xml.md ‎docs/examples/import-xml.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
id: xml
3-
title: Import XML
2+
id: import-xml
3+
title: XML
44
keywords:
55
- javascript
66
- table
@@ -17,8 +17,8 @@ import { Grid } from "gridjs";
1717
import CodeBlock from "@theme/CodeBlock"
1818
import { useEffect, useRef } from "react";
1919

20-
Using the `handler` callback you can parse and handle HTTP calls yourself. The dafault handler tries to cast the response
21-
to a JSON format but you can override it to parse the data in a different format.
20+
Using the `handler` callback you can parse and handle HTTP calls yourself. The default handler tries to cast the response
21+
to a JSON format, but you can override it to parse the data in a different format.
2222

2323
In this example, we are parsing `https://gridjs.io/sitemap.xml` which is a XML formatted document:
2424

‎sidebars.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,12 @@ module.exports = {
4141
type: 'category',
4242
label: 'Data Source',
4343
items: [
44+
'examples/import-json',
45+
'examples/import-xml',
46+
'examples/from',
47+
'examples/server',
4448
'examples/import-function',
4549
'examples/import-async',
46-
'examples/server',
47-
'examples/from',
48-
'examples/xml',
4950
]
5051
}, {
5152
type: 'category',

‎src/pages/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ function Header() {
237237
</h1>
238238
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
239239
Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript
240-
frameworks, including <b>React</b>, <b>Angular.js</b>, <b>Vue</b> and <b>VanillaJs</b>.
240+
frameworks, including <b>React</b>, <b>Angular</b>, <b>Vue</b> and <b>VanillaJs</b>.
241241
</p>
242242

243243
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">

0 commit comments

Comments
 (0)