Skip to content

Commit 6a15a64

Browse files
afshinmafshinm
committed
feat: adding nested header
1 parent 49a9540 commit 6a15a64

File tree

6 files changed

+146
-21
lines changed

6 files changed

+146
-21
lines changed

‎docs/config/columns.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,15 @@ new Grid({
3434

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

37-
| Name | Description | Type | Example |
38-
|-----------------------|-------------------------|------------------------------|-------------------------------------------------|
39-
| id `optional` | column ID for JSON data | `string` or function | `phoneNumber` or `(row) => row.name.firstName` |
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;` |
44-
| attributes `optional` | custom cell attributes | `HTMLAttributes` or function | `(cell: TCell, row: Row<TCell>, column: TColumn) => HTMLAttributes;` |
37+
| Name | Description | Type | Example |
38+
|-----------------------|----------------------------|------------------------------|-------------------------------------------------|
39+
| id `optional` | column ID | `string` | `phoneNumber` |
40+
| selector `optional` | Cell selector fo JSON data | `function` | `(row) => row.name.firstName` |
41+
| name | column name | `string` | `Name` |
42+
| width `optional` | width of the column | `string` | `200px` or `30%` |
43+
| sort `optional` | to enable/disable sort | `boolean` | `true` or `0` |
44+
| formatter `optional` | custom cell formatting | function | `(cell: TCell, row: Row<TCell>, column: TColumn) => ComponentChild;` |
45+
| attributes `optional` | custom cell attributes | `HTMLAttributes` or function | `(cell: TCell, row: Row<TCell>, column: TColumn) => HTMLAttributes;` |
4546

4647
</div>
4748

‎docs/examples/html-header-cells.md

+20-10
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,13 @@ Then you can use that in `columns` or `name` field of `columns`:
2626
const grid = new Grid({
2727
columns: [
2828
{
29+
id: 'name',
2930
name: html('<i>Name</i>'),
3031
},
31-
html('<div style="border: 1px solid #ccc;padding: 5px;border-radius: 5px;text-align: center;">Email</div>'),
32+
{
33+
id: 'email',
34+
name: html('<div style="border: 1px solid #ccc;padding: 5px;border-radius: 5px;text-align: center;">Email</div>'),
35+
}
3236
],
3337
data: Array(5).fill().map(x => [
3438
faker.name.findName(),
@@ -50,15 +54,21 @@ import { Grid, h } from "gridjs";
5054
`
5155
const grid = new Grid({
5256
columns: [
53-
h('b', {}, 'Name'),
54-
h('div', {
55-
style: {
56-
border: '1px solid #ccc',
57-
padding: '5px',
58-
'border-radius': '5px',
59-
'text-align': 'center',
60-
}
61-
}, 'Email'),
57+
{
58+
id: 'name',
59+
name: h('b', {}, 'Name'),
60+
},
61+
{
62+
id: 'div',
63+
name: h('div', {
64+
style: {
65+
border: '1px solid #ccc',
66+
padding: '5px',
67+
'border-radius': '5px',
68+
'text-align': 'center',
69+
}
70+
}, 'Email'),
71+
},
6272
],
6373
data: Array(5).fill().map(x => [
6474
faker.name.findName(),

‎docs/examples/import-json.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@ const grid = new Grid({
7979
`
8080
const grid = new Grid({
8181
columns: [{
82-
id: (row) => row.name.first,
82+
selector: (row) => row.name.first,
8383
name: 'First Name'
8484
}, {
85-
id: (row) => row.name.last,
85+
selector: (row) => row.name.last,
8686
name: 'Last Name'
8787
}, {
8888
id: 'email',

‎docs/examples/nested-header.md

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
id: nested-header
3+
title: Nested Header
4+
keywords:
5+
- javascript
6+
- table
7+
- javascript table
8+
- gridjs
9+
- grid js
10+
- nested
11+
- nested header
12+
13+
---
14+
15+
import { LiveExample } from "../../lib/liveExample.js";
16+
17+
Grid.js supports nested headers. All you need to do is to define nested `columns` attribute in your column config:
18+
19+
<LiveExample children={
20+
`
21+
const grid = new Grid({
22+
columns: [
23+
{
24+
name: 'Name',
25+
columns: [{
26+
name: 'First'
27+
}, {
28+
name: 'Last'
29+
}]
30+
},
31+
'Email',
32+
{
33+
name: 'Address',
34+
columns: [{
35+
name: 'Country'
36+
}, {
37+
name: 'City',
38+
columns: [{
39+
name: 'Name'
40+
}]
41+
}]
42+
},
43+
],
44+
data: Array(5).fill().map(x => [
45+
faker.name.firstName(),
46+
faker.name.lastName(),
47+
faker.internet.email(),
48+
faker.address.countryCode(),
49+
faker.address.city(),
50+
])
51+
});
52+
`
53+
} />
54+
55+
<br/>
56+
57+
You can also enable "sorting" when using nested headers:
58+
59+
60+
<LiveExample children={
61+
`
62+
const grid = new Grid({
63+
sort: true,
64+
columns: [
65+
{
66+
name: 'Name',
67+
columns: [{
68+
name: 'First'
69+
}, {
70+
name: 'Last'
71+
}]
72+
},
73+
'Email',
74+
],
75+
data: Array(5).fill().map(x => [
76+
faker.name.firstName(),
77+
faker.name.lastName(),
78+
faker.internet.email(),
79+
])
80+
});
81+
`
82+
} />
83+
84+
<br/>
85+
86+
It can also be used with `fixedHeader` option:
87+
88+
<LiveExample children={
89+
`
90+
const grid = new Grid({
91+
sort: true,
92+
fixedHeader: true,
93+
height: '400px',
94+
columns: [
95+
{
96+
name: 'Name',
97+
columns: [{
98+
name: 'First'
99+
}, {
100+
name: 'Last'
101+
}]
102+
},
103+
'Email',
104+
],
105+
data: Array(50).fill().map(x => [
106+
faker.name.firstName(),
107+
faker.name.lastName(),
108+
faker.internet.email(),
109+
])
110+
});
111+
`
112+
} />

‎docs/examples/pagination.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@ const grid = new Grid({
2929
`
3030
} />
3131

32-
You can also change the default settings of the pagination plugin:
32+
<br/>
3333

34+
You can also change the default settings of the pagination plugin:
3435

3536
<LiveExample children={
3637
`

‎sidebars.js

+1
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ module.exports = {
9292
type: 'category',
9393
label: 'Advanced',
9494
items: [
95+
'examples/nested-header',
9596
'examples/force-render',
9697
'examples/virtual-dom',
9798
'examples/multi-sort',

0 commit comments

Comments
 (0)