aio-table 3.0.0 → 5.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +351 -464
- package/index.css +49 -31
- package/index.js +769 -792
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
|
-
# aio-table
|
|
2
|
-
|
|
1
|
+
# aio-table (React js all in one table)
|
|
2
|
+
|
|
3
|
+
# aio table options
|
|
4
|
+
- data table
|
|
5
|
+
- tree table
|
|
6
|
+
- support nested data
|
|
7
|
+
- support flat data
|
|
8
|
+
- keyboar navigation
|
|
9
|
+
- inline edit
|
|
10
|
+
- group by
|
|
11
|
+
- sortable
|
|
12
|
+
- filterable
|
|
13
|
+
- searchable
|
|
14
|
+
- use html or jsx in cells
|
|
15
|
+
- freeze mode
|
|
16
|
+
- resize columns
|
|
17
|
+
- swap columns position
|
|
18
|
+
- mobile support
|
|
19
|
+
- paging
|
|
20
|
+
# Installation
|
|
21
|
+
```javascript
|
|
22
|
+
npm i aio-table
|
|
23
|
+
```
|
|
3
24
|
# Basic
|
|
4
25
|
|
|
5
26
|
#### countries JSON as aio table model:
|
|
@@ -16,164 +37,98 @@
|
|
|
16
37
|
...
|
|
17
38
|
]
|
|
18
39
|
```
|
|
19
|
-
|
|
40
|
+
##### also you can find contries json in repository (countries.js)
|
|
20
41
|
|
|
21
42
|
```javascript
|
|
22
43
|
import React,{Component} from "react";
|
|
23
44
|
import Table from 'aio-table';
|
|
24
|
-
import countries from '
|
|
25
|
-
import "
|
|
45
|
+
import countries from './countries';
|
|
46
|
+
import "./style.css";
|
|
26
47
|
|
|
27
48
|
export default class App extends Component {
|
|
49
|
+
state = {model:countries}
|
|
28
50
|
render(){
|
|
29
|
-
|
|
51
|
+
let {model} = this.state;
|
|
30
52
|
return (
|
|
31
53
|
<Table
|
|
32
|
-
|
|
54
|
+
className='table'
|
|
55
|
+
model={model}
|
|
33
56
|
columns={[
|
|
34
|
-
{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
57
|
+
{
|
|
58
|
+
title:'Name',
|
|
59
|
+
getValue:(row)=>row.name,
|
|
60
|
+
justify:false,
|
|
61
|
+
titleJustify:false,
|
|
62
|
+
search:true
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
title:'Continent',
|
|
66
|
+
getValue:(row)=>row.continent,
|
|
67
|
+
width:120,
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
title:'Population',
|
|
71
|
+
getValue:(row)=>row.population,
|
|
72
|
+
justify:false,
|
|
73
|
+
width:120,
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title:'Percent',
|
|
77
|
+
getValue:(row)=>row.percent,
|
|
78
|
+
template:(row)=>row.percent + '%',
|
|
79
|
+
width:90,
|
|
80
|
+
}
|
|
38
81
|
]}
|
|
82
|
+
paging={{
|
|
83
|
+
number:1,
|
|
84
|
+
size:20,
|
|
85
|
+
}}
|
|
86
|
+
padding={12}
|
|
87
|
+
|
|
39
88
|
/>
|
|
40
89
|
);
|
|
41
90
|
}
|
|
42
91
|
}
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
# Set className (string)
|
|
46
92
|
|
|
47
|
-
```javascript
|
|
48
|
-
<Table
|
|
49
|
-
...
|
|
50
|
-
className='table'
|
|
51
|
-
...
|
|
52
|
-
/>
|
|
53
93
|
```
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
...
|
|
93
|
-
]}
|
|
94
|
-
...
|
|
95
|
-
/>
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
# Set column titleJustify (boolean)
|
|
100
|
-
|
|
101
|
-
set columm title align to center. default value is false
|
|
102
|
-
|
|
103
|
-
```javascript
|
|
104
|
-
<Table
|
|
105
|
-
...
|
|
106
|
-
columns={[
|
|
107
|
-
...
|
|
108
|
-
{title:'Name',getValue:(row)=>row.name,width:'auto',titleJustify:true},
|
|
109
|
-
...
|
|
110
|
-
]}
|
|
111
|
-
...
|
|
112
|
-
/>
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
# Set column justify (boolean)
|
|
116
|
-
|
|
117
|
-
set column cells align to center. default value is false
|
|
118
|
-
|
|
119
|
-
```javascript
|
|
120
|
-
<Table
|
|
121
|
-
...
|
|
122
|
-
columns={[
|
|
123
|
-
...
|
|
124
|
-
{title:'Name',getValue:(row)=>row.name,width:'auto',justify:true},
|
|
125
|
-
...
|
|
126
|
-
]}
|
|
127
|
-
...
|
|
128
|
-
/>
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
# Set column template (function)
|
|
133
|
-
|
|
134
|
-
##### Set content of column cells by template function.
|
|
135
|
-
|
|
136
|
-
```javascript
|
|
137
|
-
<Table
|
|
138
|
-
...
|
|
139
|
-
columns={[
|
|
140
|
-
{title:'Name',getValue:(row)=>row.name},
|
|
141
|
-
{
|
|
142
|
-
title:'Population',
|
|
143
|
-
getValue:(row)=>row.population,
|
|
144
|
-
template:(row)=>numberWithCommas(row.population)
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
title:'Percent',
|
|
148
|
-
getValue:(row)=>row.percent,
|
|
149
|
-
template:(row)=>row.percent + '%'
|
|
150
|
-
},
|
|
151
|
-
{title:'Continent',getValue:(row)=>row.continent}
|
|
152
|
-
]}
|
|
153
|
-
...
|
|
154
|
-
/>
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
#### numberWuidthCommas function
|
|
158
|
-
|
|
159
|
-
```javascript
|
|
160
|
-
function numberWithCommas(number){
|
|
161
|
-
let value = number.toString();
|
|
162
|
-
let result = '';
|
|
163
|
-
let index = 1;
|
|
164
|
-
for(let i = value.length - 1; i >= 0; i--){
|
|
165
|
-
result = value[i] + result;
|
|
166
|
-
if(index % 3 === 0 && i !== 0){result = ',' + result;}
|
|
167
|
-
index++;
|
|
168
|
-
}
|
|
169
|
-
return result;
|
|
170
|
-
}
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
# Set column resizable (boolean)
|
|
175
|
-
|
|
176
|
-
default is false
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
### main props:
|
|
97
|
+
props | type | default | description
|
|
98
|
+
--------------- | -------------------------- | -------- | -----------
|
|
99
|
+
model | json | Required | data model of table as rows.
|
|
100
|
+
columns | array of objects | Required | list of table columns.
|
|
101
|
+
paging | object | optional | configure table paging.
|
|
102
|
+
groups | array of objects | optional | grouping rows.
|
|
103
|
+
sorts | array of objects | optional | sorting rows
|
|
104
|
+
className | string | optional | class name of table.
|
|
105
|
+
id | string | optional | id of table.
|
|
106
|
+
style | css object | optional | set table css style.
|
|
107
|
+
padding | number | 12 | set table padding using padding props.(for better styling dont set padding in style instead set padding props)
|
|
108
|
+
headerHeight | number | 36 | height of header.
|
|
109
|
+
rowHeight | number | 36 | height of cells.
|
|
110
|
+
rowGap | number | 6 | gap between rows.
|
|
111
|
+
columnGap | number | 0 | gap between columns.
|
|
112
|
+
|
|
113
|
+
### each column Object:
|
|
114
|
+
column property | type | default | description
|
|
115
|
+
--------------- | -------------------------- | ----------------------------------------------- | -----------
|
|
116
|
+
title | string | "" | title of column.
|
|
117
|
+
getValue | function | optional if you set template property on column | get row object as parameter and returns value of table cell based on row.
|
|
118
|
+
titleJustify | boolean | true | justifying column title.
|
|
119
|
+
justify | boolean | true | justifying cell content.
|
|
120
|
+
search | boolean | false | put search input in toolbar for searching rows based on column values.
|
|
121
|
+
width | number or string or 'auto' | auto | set width of column
|
|
122
|
+
minWidth | number or string | optional | set min width of column(use in resizing column)
|
|
123
|
+
template | function | optional | get row as parameter and return cell html
|
|
124
|
+
resizable | boolean | false | make column resizable
|
|
125
|
+
movable | boolean | false | male column movable. (swaping columns)
|
|
126
|
+
show | boolean | true | set column visibility
|
|
127
|
+
toggleShow | boolean | false | set visibility of column by user from toolbar
|
|
128
|
+
before | function | optional | get row as parameters and returns html as before cell content
|
|
129
|
+
after | function | optional | get row as parameters and returns html as after cell content
|
|
130
|
+
|
|
131
|
+
# Set column resizable
|
|
177
132
|
|
|
178
133
|
```javascript
|
|
179
134
|
<Table
|
|
@@ -181,64 +136,19 @@ default is false
|
|
|
181
136
|
columns={[
|
|
182
137
|
...
|
|
183
138
|
{
|
|
184
|
-
title:'
|
|
185
|
-
getValue:(row)=>row.
|
|
139
|
+
title:'Continent',
|
|
140
|
+
getValue:(row)=>row.continent,
|
|
141
|
+
width:120,
|
|
186
142
|
resizable:true
|
|
187
|
-
}
|
|
188
|
-
...
|
|
189
|
-
]}
|
|
190
|
-
...
|
|
191
|
-
/>
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
# Set column search (boolean)
|
|
195
|
-
|
|
196
|
-
##### default is false.
|
|
197
|
-
##### only one column can be searchable.
|
|
198
|
-
|
|
199
|
-
```javascript
|
|
200
|
-
<Table
|
|
201
|
-
...
|
|
202
|
-
columns={[
|
|
203
|
-
...
|
|
204
|
-
{
|
|
205
|
-
title:'Population',
|
|
206
|
-
getValue:(row)=>row.population,
|
|
207
|
-
search:true
|
|
208
|
-
}
|
|
209
|
-
...
|
|
210
|
-
]}
|
|
211
|
-
...
|
|
212
|
-
/>
|
|
213
|
-
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
# Set column show (boolean)
|
|
217
|
-
|
|
218
|
-
##### show or hide column.
|
|
219
|
-
##### default is true
|
|
220
|
-
|
|
221
|
-
```javascript
|
|
222
|
-
<Table
|
|
223
|
-
...
|
|
224
|
-
columns={[
|
|
225
|
-
...
|
|
226
|
-
{
|
|
227
|
-
title:'Population',
|
|
228
|
-
getValue:(row)=>row.population,
|
|
229
|
-
show:false
|
|
230
|
-
}
|
|
143
|
+
},
|
|
231
144
|
...
|
|
232
145
|
]}
|
|
233
146
|
...
|
|
234
147
|
/>
|
|
235
|
-
|
|
236
148
|
```
|
|
149
|
+
|
|
237
150
|
|
|
238
|
-
# Set column toggleShow
|
|
239
|
-
|
|
240
|
-
##### set visibility of column by user from toolbar.
|
|
241
|
-
##### default is false
|
|
151
|
+
# Set column toggleShow
|
|
242
152
|
|
|
243
153
|
```javascript
|
|
244
154
|
<Table
|
|
@@ -248,16 +158,17 @@ default is false
|
|
|
248
158
|
{
|
|
249
159
|
title:'Population',
|
|
250
160
|
getValue:(row)=>row.population,
|
|
251
|
-
|
|
161
|
+
justify:false,
|
|
162
|
+
width:120,
|
|
252
163
|
toggleShow:true
|
|
253
|
-
}
|
|
164
|
+
},
|
|
254
165
|
...
|
|
255
166
|
]}
|
|
256
167
|
...
|
|
257
168
|
/>
|
|
258
169
|
|
|
259
170
|
```
|
|
260
|
-
|
|
261
172
|
# Set column freeze (boolean)
|
|
262
173
|
|
|
263
174
|
##### default is false
|
|
@@ -313,53 +224,23 @@ default is false
|
|
|
313
224
|
|
|
314
225
|
|
|
315
226
|
|
|
316
|
-
#
|
|
317
|
-
##### set height of aio table rows.
|
|
318
|
-
default value is 36.
|
|
319
|
-
```javascript
|
|
320
|
-
<Table
|
|
321
|
-
...
|
|
322
|
-
rowHeight={48}
|
|
323
|
-
...
|
|
324
|
-
/>
|
|
325
|
-
```
|
|
326
|
-
|
|
327
|
-
# Set headerHeight (number)
|
|
227
|
+
# sizing props (headerHeight,rowHeight,rowGap,columnGap,padding)
|
|
328
228
|
|
|
329
229
|
default value is 36
|
|
330
230
|
```javascript
|
|
331
231
|
<Table
|
|
332
232
|
...
|
|
333
|
-
headerHeight={
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
# set rowGap (number)
|
|
340
|
-
|
|
341
|
-
set gap between rows. default is 6
|
|
342
|
-
|
|
343
|
-
```javascript
|
|
344
|
-
<Table
|
|
345
|
-
...
|
|
346
|
-
rowGap={1}
|
|
233
|
+
headerHeight={24}
|
|
234
|
+
rowHeight={36}
|
|
235
|
+
rowGap={8}
|
|
236
|
+
columnGap={1}
|
|
237
|
+
padding={12}
|
|
347
238
|
...
|
|
348
239
|
/>
|
|
349
240
|
```
|
|
350
|
-
|
|
241
|
+
|
|
352
242
|
|
|
353
|
-
set gap between columns. default is 0
|
|
354
243
|
|
|
355
|
-
```javascript
|
|
356
|
-
<Table
|
|
357
|
-
...
|
|
358
|
-
columnGap={6}
|
|
359
|
-
...
|
|
360
|
-
/>
|
|
361
|
-
```
|
|
362
|
-
|
|
363
244
|
# set column movable (boolean)
|
|
364
245
|
##### drag and drop movable columns to swap and reorder.
|
|
365
246
|
##### default is true
|
|
@@ -384,20 +265,47 @@ set gap between columns. default is 0
|
|
|
384
265
|
|
|
385
266
|
# set column filter (object)
|
|
386
267
|
##### filter rows by column value automatically.
|
|
268
|
+
##### for filter rows based on column , getValue property is required on column.
|
|
269
|
+
property | type | default | description
|
|
270
|
+
-------- | --------------------------- | ------- | -----------
|
|
271
|
+
type | string ('text' or 'number') | 'text' | based on column values.
|
|
387
272
|
|
|
388
273
|
```javascript
|
|
389
274
|
<Table
|
|
390
275
|
...
|
|
391
276
|
columns={[
|
|
392
|
-
{
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
277
|
+
{
|
|
278
|
+
title:'Name',
|
|
279
|
+
getValue:(row)=>row.name,
|
|
280
|
+
justify:false,
|
|
281
|
+
titleJustify:false,
|
|
282
|
+
filter:{type:'text'}
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
title:'Continent',
|
|
286
|
+
getValue:(row)=>row.continent,
|
|
287
|
+
width:120,
|
|
288
|
+
resizable:true,
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
title:'Population',
|
|
292
|
+
getValue:(row)=>row.population,
|
|
293
|
+
justify:false,
|
|
294
|
+
width:120,
|
|
295
|
+
filter:{type:'number'}
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
title:'Percent',
|
|
299
|
+
getValue:(row)=>row.percent,
|
|
300
|
+
template:(row)=>row.percent + '%',
|
|
301
|
+
width:90,
|
|
302
|
+
}
|
|
396
303
|
]}
|
|
397
304
|
...
|
|
398
305
|
/>
|
|
399
306
|
|
|
400
307
|
```
|
|
308
|
+
|
|
401
309
|
##### if you want to filter rows outside of aio table , you can set onChangeFilter props (for example server side filtering)
|
|
402
310
|
```javbascript
|
|
403
311
|
<Table
|
|
@@ -421,7 +329,7 @@ size | number | first index of sizes property | rows count per page
|
|
|
421
329
|
number | number | 1 | page number
|
|
422
330
|
onChange | function | Optional | if you set onChange , you must paging rows of model in parent component and aio table will not paging rows automatically
|
|
423
331
|
|
|
424
|
-
onChange function get
|
|
332
|
+
onChange function get changed paging object as parameters
|
|
425
333
|
|
|
426
334
|
```javascript
|
|
427
335
|
<Table
|
|
@@ -439,9 +347,9 @@ onChange function get paging changed paging object as parameters
|
|
|
439
347
|
/>
|
|
440
348
|
```
|
|
441
349
|
|
|
442
|
-
# Set column before (function)
|
|
350
|
+
# Set column before and after (function)
|
|
443
351
|
|
|
444
|
-
##### set html before cells of column content.
|
|
352
|
+
##### set html before and after cells of column content.
|
|
445
353
|
|
|
446
354
|
```javascript
|
|
447
355
|
<Table
|
|
@@ -451,44 +359,23 @@ onChange function get paging changed paging object as parameters
|
|
|
451
359
|
{
|
|
452
360
|
title:'Name',
|
|
453
361
|
getValue:(row)=>row.name,
|
|
454
|
-
width:'auto',
|
|
455
362
|
before:(row)=>{
|
|
456
363
|
return (
|
|
457
364
|
<div
|
|
458
365
|
style={{
|
|
459
|
-
background:'
|
|
366
|
+
background:'dodgerblue',
|
|
460
367
|
color:'#fff',
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
368
|
+
borderRadius:'100%',
|
|
369
|
+
width:20,
|
|
370
|
+
height:20,
|
|
371
|
+
display:'flex',
|
|
372
|
+
alignItems:'center',
|
|
373
|
+
justifyContent:'center',
|
|
374
|
+
fontSize:10
|
|
466
375
|
}}
|
|
467
|
-
>
|
|
468
|
-
{row._index + 1}
|
|
469
|
-
</div>
|
|
376
|
+
>{row._index}</div>
|
|
470
377
|
)
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
...
|
|
474
|
-
]}
|
|
475
|
-
...
|
|
476
|
-
/>
|
|
477
|
-
```
|
|
478
|
-
|
|
479
|
-
# Set column after (function)
|
|
480
|
-
|
|
481
|
-
##### set html after cells of column content.
|
|
482
|
-
|
|
483
|
-
```javascript
|
|
484
|
-
<Table
|
|
485
|
-
...
|
|
486
|
-
columns={[
|
|
487
|
-
...
|
|
488
|
-
{
|
|
489
|
-
title:'Name',
|
|
490
|
-
getValue:(row)=>row.name,
|
|
491
|
-
width:'auto',
|
|
378
|
+
},
|
|
492
379
|
after:(row)=>{
|
|
493
380
|
var colors = {
|
|
494
381
|
'Asia':'orange','North America':'blue','South America':'lightblue','Africa':'black','Europe':'green'
|
|
@@ -505,18 +392,16 @@ onChange function get paging changed paging object as parameters
|
|
|
505
392
|
textAlign:'center',
|
|
506
393
|
borderRadius:'3px'
|
|
507
394
|
}}
|
|
508
|
-
>
|
|
509
|
-
{row.continent}
|
|
510
|
-
</div>
|
|
395
|
+
>{row.continent}</div>
|
|
511
396
|
)
|
|
512
397
|
}
|
|
513
|
-
}
|
|
398
|
+
},
|
|
514
399
|
...
|
|
515
400
|
]}
|
|
516
401
|
...
|
|
517
402
|
/>
|
|
518
403
|
```
|
|
519
|
-
|
|
404
|
+
|
|
520
405
|
# Set groups (Array Of Objects)
|
|
521
406
|
|
|
522
407
|
##### group by rows.
|
|
@@ -542,37 +427,39 @@ toggle | boolean | true | if true, user can toggle activity of group item from t
|
|
|
542
427
|
...
|
|
543
428
|
/>
|
|
544
429
|
```
|
|
430
|
+
|
|
545
431
|
##### Other Example:
|
|
546
432
|
|
|
547
433
|
```javascript
|
|
548
434
|
<Table
|
|
549
435
|
...
|
|
550
|
-
groups
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
}
|
|
557
|
-
if(row.population > 500000000){
|
|
558
|
-
return 'Between 500,000,000 and 1,000,000,000'
|
|
559
|
-
}
|
|
560
|
-
if(row.population > 100000000){
|
|
561
|
-
return 'Between 100,000,000 and 500,000,000'
|
|
562
|
-
}
|
|
563
|
-
if(row.population > 50000000){
|
|
564
|
-
return 'Between 50,000,000 and 100,000,000'
|
|
565
|
-
}
|
|
566
|
-
if(row.population > 25000000){
|
|
567
|
-
return 'Between 25,000,000 and 50,000,000'
|
|
568
|
-
}
|
|
569
|
-
return 'Less Than 25,000,000'
|
|
436
|
+
groups={[
|
|
437
|
+
{
|
|
438
|
+
title:'Populatuion',
|
|
439
|
+
getValue:(row)=>{
|
|
440
|
+
if(row.population > 1000000000){
|
|
441
|
+
return 'More than 1,000,000,000'
|
|
570
442
|
}
|
|
571
|
-
|
|
572
|
-
|
|
443
|
+
if(row.population > 500000000){
|
|
444
|
+
return 'Between 500,000,000 and 1,000,000,000'
|
|
445
|
+
}
|
|
446
|
+
if(row.population > 100000000){
|
|
447
|
+
return 'Between 100,000,000 and 500,000,000'
|
|
448
|
+
}
|
|
449
|
+
if(row.population > 50000000){
|
|
450
|
+
return 'Between 50,000,000 and 100,000,000'
|
|
451
|
+
}
|
|
452
|
+
if(row.population > 25000000){
|
|
453
|
+
return 'Between 25,000,000 and 50,000,000'
|
|
454
|
+
}
|
|
455
|
+
return 'Less Than 25,000,000'
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
]}
|
|
573
459
|
...
|
|
574
460
|
/>
|
|
575
461
|
```
|
|
462
|
+
|
|
576
463
|
|
|
577
464
|
# Set sorts (Array Of Objects)
|
|
578
465
|
|
|
@@ -589,44 +476,17 @@ toggle | boolean | true | if true, user can toggle activity of sort item from to
|
|
|
589
476
|
```javascript
|
|
590
477
|
<Table
|
|
591
478
|
...
|
|
592
|
-
sorts
|
|
479
|
+
sorts={[
|
|
593
480
|
{
|
|
594
481
|
title:'Name',
|
|
595
482
|
getValue:(row)=>row.name,
|
|
596
483
|
type:'inc'
|
|
597
484
|
}
|
|
598
|
-
]
|
|
599
|
-
...
|
|
600
|
-
/>
|
|
601
|
-
```
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
# Set selectives (Array Of Objects)
|
|
605
|
-
|
|
606
|
-
##### filter rows by check or uncheck row property(dropdown).
|
|
607
|
-
##### each selective properties:
|
|
608
|
-
Property | Type | Default | Description
|
|
609
|
-
-------- | ---- | ------- | -----------
|
|
610
|
-
title | string | optional | title of selective item button.
|
|
611
|
-
icon | html/jsx | optional | icon of selective item button.
|
|
612
|
-
getValue | function | Required | this function get (row) as parameter and return a value for filtering rows.
|
|
613
|
-
getText | function | optional | this function get (row) as parameter and return an string as name of filter item.
|
|
614
|
-
|
|
615
|
-
```javascript
|
|
616
|
-
<Table
|
|
617
|
-
...
|
|
618
|
-
selectives={[
|
|
619
|
-
{
|
|
620
|
-
getValue:(row)=>row.continent,
|
|
621
|
-
getText:(row)=>row.continent === '-'?'other':row.continent,
|
|
622
|
-
title:'Continents',
|
|
623
|
-
icon:<Icon path={mdiCheckboxMarkedOutline} size={0.7}/>,
|
|
624
|
-
}
|
|
625
485
|
]}
|
|
626
486
|
...
|
|
627
487
|
/>
|
|
628
488
|
```
|
|
629
|
-
|
|
489
|
+
|
|
630
490
|
# Set column inlineEdit (Objects)
|
|
631
491
|
|
|
632
492
|
##### inline editing cells.
|
|
@@ -697,6 +557,169 @@ onChange | function | required | get row and value as parameters. if return an s
|
|
|
697
557
|
/>
|
|
698
558
|
```
|
|
699
559
|
|
|
560
|
+
|
|
561
|
+
# Tree data (nested json)
|
|
562
|
+
|
|
563
|
+
##### nested json example:
|
|
564
|
+
```javascript
|
|
565
|
+
let nestedData = [
|
|
566
|
+
{
|
|
567
|
+
name:'Applications',id:'1',
|
|
568
|
+
childs:[
|
|
569
|
+
{name:'Calendar',id:'2',type:'app'},
|
|
570
|
+
{name:'Chrome',id:'3',type:'app'},
|
|
571
|
+
{name:'Webstorm',id:'4',type:'app'}
|
|
572
|
+
]
|
|
573
|
+
},
|
|
574
|
+
{
|
|
575
|
+
name:'Documents',id:'5',
|
|
576
|
+
childs:[
|
|
577
|
+
{
|
|
578
|
+
name:'Angular',id:'6',
|
|
579
|
+
childs:[
|
|
580
|
+
{
|
|
581
|
+
name:'SRC',id:'7',
|
|
582
|
+
childs:[
|
|
583
|
+
{name:'Compiler',id:'8',type:'ts'},
|
|
584
|
+
{name:'Core',id:'9',type:'ts'},
|
|
585
|
+
]
|
|
586
|
+
},
|
|
587
|
+
]
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
name:'Material2',id:'10',
|
|
591
|
+
childs:[
|
|
592
|
+
{
|
|
593
|
+
name:'SRC',id:'11',
|
|
594
|
+
childs:[
|
|
595
|
+
{name:'Button',id:'12',type:'ts'},
|
|
596
|
+
{name:'Checkbox',id:'13',type:'ts'},
|
|
597
|
+
{name:'Input',id:'14',type:'ts'}
|
|
598
|
+
]
|
|
599
|
+
}
|
|
600
|
+
]
|
|
601
|
+
},
|
|
602
|
+
]
|
|
603
|
+
},
|
|
604
|
+
{
|
|
605
|
+
name:'Downloads',id:'15',
|
|
606
|
+
childs:[
|
|
607
|
+
{name:'October',id:'16',type:'pdf'},
|
|
608
|
+
{name:'November',id:'17',type:'pdf'},
|
|
609
|
+
{name:'Tutorial',id:'18',type:'pdf'}
|
|
610
|
+
]
|
|
611
|
+
},
|
|
612
|
+
{
|
|
613
|
+
name:'Pictures',id:'19',
|
|
614
|
+
childs:[
|
|
615
|
+
{
|
|
616
|
+
name:'Library',id:'20',
|
|
617
|
+
childs:[
|
|
618
|
+
{name:'Contents',id:'21',type:'dir'},
|
|
619
|
+
{name:'Pictures',id:'22',type:'dir'}
|
|
620
|
+
]
|
|
621
|
+
},
|
|
622
|
+
{name:'Sun',id:'23',type:'png'},
|
|
623
|
+
{name:'Woods',id:'24',type:'jpg'}
|
|
624
|
+
]
|
|
625
|
+
}
|
|
626
|
+
]
|
|
627
|
+
```
|
|
628
|
+
|
|
629
|
+
##### set getRowChilds function for get rows childs.
|
|
630
|
+
##### set column treeMode for collapse and indent rows.
|
|
631
|
+
```javascript
|
|
632
|
+
export default class App extends Component {
|
|
633
|
+
render(){
|
|
634
|
+
return (
|
|
635
|
+
<Table
|
|
636
|
+
className='table'
|
|
637
|
+
model={nestedData}
|
|
638
|
+
columns={[
|
|
639
|
+
{
|
|
640
|
+
title:'Name',
|
|
641
|
+
getValue:(row)=>row.name,
|
|
642
|
+
justify:false,
|
|
643
|
+
titleJustify:false,
|
|
644
|
+
treeMode:true
|
|
645
|
+
},
|
|
646
|
+
{
|
|
647
|
+
title:'Type',
|
|
648
|
+
getValue:(row)=>row.type
|
|
649
|
+
}
|
|
650
|
+
]}
|
|
651
|
+
getRowChilds={(row)=>row.childs}
|
|
652
|
+
/>
|
|
653
|
+
);
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
```
|
|
657
|
+
|
|
658
|
+
|
|
659
|
+
# Tree data (flat json)
|
|
660
|
+
|
|
661
|
+
##### data as array with id and parent id.
|
|
662
|
+
##### flat json example:
|
|
663
|
+
```javascript
|
|
664
|
+
let flatData = [
|
|
665
|
+
{name:'Applications',id:'1'},
|
|
666
|
+
{name:'Calendar',id:'2',type:'app',parentId:'1'},
|
|
667
|
+
{name:'Chrome',id:'3',type:'app',parentId:'1'},
|
|
668
|
+
{name:'Webstorm',id:'4',type:'app',parentId:'1'},
|
|
669
|
+
{name:'Documents',id:'5'},
|
|
670
|
+
{name:'Angular',id:'6',parentId:'5'},
|
|
671
|
+
{name:'SRC',id:'7',parentId:'6'},
|
|
672
|
+
{name:'Compiler',id:'8',type:'ts',parentId:'7'},
|
|
673
|
+
{name:'Core',id:'9',type:'ts',parentId:'7'},
|
|
674
|
+
{name:'Material2',id:'10',parentId:'5'},
|
|
675
|
+
{name:'SRC',id:'11',parentId:'10'},
|
|
676
|
+
{name:'Button',id:'12',type:'ts',parentId:'11'},
|
|
677
|
+
{name:'Checkbox',id:'13',type:'ts',parentId:'11'},
|
|
678
|
+
{name:'Input',id:'14',type:'ts',parentId:'11'},
|
|
679
|
+
{name:'Downloads',id:'15'},
|
|
680
|
+
{name:'October',id:'16',type:'pdf',parentId:'15'},
|
|
681
|
+
{name:'November',id:'17',type:'pdf',parentId:'15'},
|
|
682
|
+
{name:'Tutorial',id:'18',type:'pdf',parentId:'15'},
|
|
683
|
+
{name:'Pictures',id:'19'},
|
|
684
|
+
{name:'Library',id:'20',parentId:'19'},
|
|
685
|
+
{name:'Contents',id:'21',type:'dir',parentId:'20'},
|
|
686
|
+
{name:'Pictures',id:'22',type:'dir',parentId:'20'},
|
|
687
|
+
{name:'Sun',id:'23',type:'png',parentId:'19'},
|
|
688
|
+
{name:'Woods',id:'24',type:'jpg',parentId:'19'}
|
|
689
|
+
]
|
|
690
|
+
```
|
|
691
|
+
##### set getRowParentId function for get rows parent id.
|
|
692
|
+
##### set getRowId function for get rows id.
|
|
693
|
+
##### set column treeMode for collapse and indent rows.
|
|
694
|
+
```javascript
|
|
695
|
+
export default class App extends Component {
|
|
696
|
+
render(){
|
|
697
|
+
return (
|
|
698
|
+
<Table
|
|
699
|
+
className='table'
|
|
700
|
+
model={flatData}
|
|
701
|
+
columns={[
|
|
702
|
+
{
|
|
703
|
+
title:'Name',
|
|
704
|
+
getValue:(row)=>row.name,
|
|
705
|
+
justify:false,
|
|
706
|
+
titleJustify:false,
|
|
707
|
+
treeMode:true
|
|
708
|
+
},
|
|
709
|
+
{
|
|
710
|
+
title:'Type',
|
|
711
|
+
getValue:(row)=>row.type
|
|
712
|
+
}
|
|
713
|
+
]}
|
|
714
|
+
getRowId={(row)=>row.id}
|
|
715
|
+
getRowParentId={(row)=>row.parentId}
|
|
716
|
+
/>
|
|
717
|
+
);
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
```
|
|
721
|
+
|
|
722
|
+
|
|
700
723
|
# Gantt chrt example
|
|
701
724
|
|
|
702
725
|
##### for set column as gantt chart , you can set a column by template:'gantt'.
|
|
@@ -767,139 +790,3 @@ export default class App extends Component {
|
|
|
767
790
|
```
|
|
768
791
|
|
|
769
792
|
|
|
770
|
-
# Tree data
|
|
771
|
-
|
|
772
|
-
##### data as nested json.
|
|
773
|
-
##### set getRowChilds function for get rows childs.
|
|
774
|
-
##### set column treeMode for collapse and indent rows.
|
|
775
|
-
```javascript
|
|
776
|
-
export default class App extends Component {
|
|
777
|
-
state = {
|
|
778
|
-
model:[
|
|
779
|
-
{
|
|
780
|
-
name:'a',
|
|
781
|
-
value:10,
|
|
782
|
-
childs:[
|
|
783
|
-
{
|
|
784
|
-
name:'a-0',
|
|
785
|
-
value:4,
|
|
786
|
-
childs:[
|
|
787
|
-
{name:'a-0-0',value:3},
|
|
788
|
-
{name:'a-0-1',value:1},
|
|
789
|
-
]
|
|
790
|
-
},
|
|
791
|
-
{
|
|
792
|
-
name:'a-1',
|
|
793
|
-
value:6,
|
|
794
|
-
childs:[
|
|
795
|
-
{name:'a-1-0',value:2},
|
|
796
|
-
{name:'a-1-1',value:4},
|
|
797
|
-
]
|
|
798
|
-
},
|
|
799
|
-
]
|
|
800
|
-
},
|
|
801
|
-
{
|
|
802
|
-
name:'b',
|
|
803
|
-
value:20,
|
|
804
|
-
childs:[
|
|
805
|
-
{
|
|
806
|
-
name:'b-0',
|
|
807
|
-
value:16,
|
|
808
|
-
childs:[
|
|
809
|
-
{name:'b-0-0',value:8},
|
|
810
|
-
{name:'b-0-1',value:8},
|
|
811
|
-
]
|
|
812
|
-
},
|
|
813
|
-
{
|
|
814
|
-
name:'b-1',
|
|
815
|
-
value:4,
|
|
816
|
-
childs:[
|
|
817
|
-
{name:'b-1-0',value:2},
|
|
818
|
-
{name:'b-1-1',value:2},
|
|
819
|
-
]
|
|
820
|
-
},
|
|
821
|
-
]
|
|
822
|
-
}
|
|
823
|
-
],
|
|
824
|
-
}
|
|
825
|
-
render(){
|
|
826
|
-
var {model} = this.state;
|
|
827
|
-
return (
|
|
828
|
-
<Table
|
|
829
|
-
className='table'
|
|
830
|
-
model={model}
|
|
831
|
-
columns={[
|
|
832
|
-
{
|
|
833
|
-
title:'Name',
|
|
834
|
-
treeMode:true,
|
|
835
|
-
getValue:(row)=>row.name,
|
|
836
|
-
width:'auto',
|
|
837
|
-
},
|
|
838
|
-
{
|
|
839
|
-
title:'Value',
|
|
840
|
-
getValue:(row)=>row.value,
|
|
841
|
-
width:'100px',
|
|
842
|
-
}
|
|
843
|
-
]}
|
|
844
|
-
getRowChilds={(row)=>row.childs}
|
|
845
|
-
/>
|
|
846
|
-
);
|
|
847
|
-
}
|
|
848
|
-
}
|
|
849
|
-
```
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
# Tree data (flat)
|
|
853
|
-
|
|
854
|
-
##### data as array with id and parent id.
|
|
855
|
-
##### set flat props true.
|
|
856
|
-
##### set getRowParentId function for get rows parent id.
|
|
857
|
-
##### set getRowId function for get rows id.
|
|
858
|
-
##### set column treeMode for collapse and indent rows.
|
|
859
|
-
```javascript
|
|
860
|
-
export default class App extends Component {
|
|
861
|
-
state = {
|
|
862
|
-
model:[
|
|
863
|
-
{name:'a',id:'a',value:10},
|
|
864
|
-
{name:'a-0',id:'a-0',value:4,parentId:'a'},
|
|
865
|
-
{name:'a-0-0',id:'a-0-0',value:3,parentId:'a-0'},
|
|
866
|
-
{name:'a-0-1',id:'a-0-1',value:1,parentId:'a-0'},
|
|
867
|
-
{name:'a-1',id:'a-1',value:6,parentId:'a'},
|
|
868
|
-
{name:'a-1-0',id:'a-1-0',value:2,parentId:'a-1'},
|
|
869
|
-
{name:'a-1-1',id:'a-1-1',value:4,parentId:'a-1'},
|
|
870
|
-
{name:'b',id:'b',value:20},
|
|
871
|
-
{name:'b-0',id:'b-0',value:16,parentId:'b'},
|
|
872
|
-
{name:'b-0-0',id:'b-0-0',value:8,parentId:'b-0'},
|
|
873
|
-
{name:'b-0-1',id:'b-0-1',value:8,parentId:'b-0'},
|
|
874
|
-
{name:'b-1',id:'b-1',value:4,parentId:'b'},
|
|
875
|
-
{name:'b-1-0',id:'b-1-0',value:2,parentId:'b-1'},
|
|
876
|
-
{name:'b-1-1',id:'b-1-1',value:2,parentId:'b-1'}
|
|
877
|
-
]
|
|
878
|
-
}
|
|
879
|
-
render(){
|
|
880
|
-
var {model} = this.state;
|
|
881
|
-
return (
|
|
882
|
-
<Table
|
|
883
|
-
flat={true}
|
|
884
|
-
getRowId={(row)=>row.id}
|
|
885
|
-
getRowParentId={(row)=>row.parentId}
|
|
886
|
-
model={model}
|
|
887
|
-
columns={[
|
|
888
|
-
{
|
|
889
|
-
title:'Name',
|
|
890
|
-
treeMode:true,
|
|
891
|
-
getValue:(row)=>row.name,
|
|
892
|
-
width:'auto',
|
|
893
|
-
},
|
|
894
|
-
{
|
|
895
|
-
title:'Value',
|
|
896
|
-
getValue:(row)=>row.value,
|
|
897
|
-
width:'100px',
|
|
898
|
-
}
|
|
899
|
-
]}
|
|
900
|
-
/>
|
|
901
|
-
);
|
|
902
|
-
}
|
|
903
|
-
}
|
|
904
|
-
```
|
|
905
|
-
|