Skip to content

Commit ae8d77c

Browse files
easeqeaseq
authored
0.7.0 (#42)
* Move internal state to redux * Optimized table to reduce renders. * Added selectors (reselect) to fetch data from state. * Define custom selectors in the table config at the column level and in entity.selectors * Removed `indexField` in column and used single primaryKey at the top level. * Faster mass selection * Faster table without windowing. * Faster editable fields. * `name` field in column config repurposed to fetch the data instead of a unique key * Removed `params` key from column actions
1 parent 60ec8af commit ae8d77c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1082
-837
lines changed

‎README.md‎

Lines changed: 34 additions & 50 deletions
Large diffs are not rendered by default.

‎demo/src/css/simple-sidebar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ body {
5454

5555
#page-content-wrapper {
5656
min-width: 0;
57-
/* width: 100%; */
57+
width: 100%;
5858
margin-left: 15rem;
5959
}
6060

‎demo/src/schema/basic.js‎

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { MODIFY_DATA, REQUEST_DATA, IS_LOADING } from '../../../src/actions';
2+
import { MODIFY_DATA, REQUEST_DATA, SET_IS_LOADING } from '../../../src/actions';
33
import { getItemIds } from '../../../src/utils';
44

55
export default {
@@ -125,14 +125,13 @@ export default {
125125
SimpleButton: {
126126
type: 'button',
127127
label: 'Simple Button',
128-
state: false,
129128
thunk: ( config ) => ( dispatch, getState ) => {
130129
const tableState = getState()[config.reducerName][config.name];
131130
console.log('toolbar button click', config, tableState);
132131
config.action(REQUEST_DATA)();
133-
config.action(IS_LOADING)({ value: true });
132+
config.action(SET_IS_LOADING)({ value: true });
134133
setTimeout(function() {
135-
config.action(IS_LOADING)({ value: false });
134+
config.action(SET_IS_LOADING)({ value: false });
136135
}, 1000);
137136
},
138137
// styles: {
@@ -143,7 +142,6 @@ export default {
143142
ResetFilters: {
144143
type: 'reset-filters',
145144
label: 'Reset Filters',
146-
state: false,
147145
// styles: {
148146
// backgroundColor: 'red',
149147
// color: 'white'
@@ -152,7 +150,6 @@ export default {
152150
Print: {
153151
type: 'print',
154152
label: 'Print Table',
155-
state: false,
156153
// styles: {
157154
// backgroundColor: 'yellow',
158155
// }
@@ -161,8 +158,6 @@ export default {
161158
name: 'columns',
162159
type: 'columns',
163160
label: 'Columns',
164-
visible: true,
165-
state: false,
166161
// styles: {
167162
// button: {
168163
// backgroundColor: '#aaa'
@@ -177,7 +172,7 @@ export default {
177172
},
178173
Limiter: {
179174
type: 'limiter',
180-
options: [10, 20, 50, 200, 2000, 0],
175+
options: [10, 20, 50, 100, 150, 200, 500, 1000, 2000, 5000, 10000, 0],
181176
default: 200,
182177
// styles: {}
183178
},
@@ -219,7 +214,7 @@ export default {
219214
// },
220215
},
221216
columns: [{
222-
name: 'ids',
217+
name: 'pageId',
223218
label: '',
224219
sortable: false,
225220
type: 'selection',
@@ -235,6 +230,46 @@ export default {
235230
sortable: true,
236231
// editable: true
237232
}, {
233+
label: 'ID',
234+
type: 'number',
235+
name: 'pageId',
236+
width: 150,
237+
filterable: true,
238+
sortable: true,
239+
// editable: true
240+
},{
241+
label: 'ID',
242+
type: 'number',
243+
name: 'pageId',
244+
width: 150,
245+
filterable: true,
246+
sortable: true,
247+
// editable: true
248+
},{
249+
label: 'ID',
250+
type: 'number',
251+
name: 'pageId',
252+
width: 150,
253+
filterable: true,
254+
sortable: true,
255+
// editable: true
256+
},{
257+
label: 'ID',
258+
type: 'number',
259+
name: 'pageId',
260+
width: 150,
261+
filterable: true,
262+
sortable: true,
263+
// editable: true
264+
}, {
265+
label: 'ID',
266+
type: 'number',
267+
name: 'pageId',
268+
width: 150,
269+
filterable: true,
270+
sortable: true,
271+
// editable: true
272+
},{
238273
label: "Status",
239274
type: "options",
240275
name: "entityData.data.status",
@@ -280,15 +315,13 @@ export default {
280315
label: 'Actions',
281316
type: 'actions',
282317
name: 'actions',
283-
width: 100,
318+
width: 130,
319+
name: 'pageId',
284320
items: [{
285321
type: 'action',
286322
name: 'edit',
287323
label: 'Edit',
288324
htmlClass: 'btn btn-secondary',
289-
params: {
290-
id: '@id',
291-
},
292325
thunk: ( config ) => ( dispatch, getState ) => {
293326
console.log('edit', config, getState());
294327
}
@@ -297,9 +330,6 @@ export default {
297330
name: 'delete',
298331
label: 'Delete',
299332
icon: 'trash-alt',
300-
params: {
301-
id: '@id'
302-
},
303333
styles: {
304334
backgroundColor: 'red',
305335
color: 'white'

‎demo/src/schema/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import basic from './basic';
22
import normalized from './normalized';
33

44
export default [
5-
{
6-
title: 'Normalized Table',
7-
id: 'normalized-table',
8-
className: 'mb-4',
9-
config: normalized
10-
},
5+
// {
6+
// title: 'Normalized Table',
7+
// id: 'normalized-table',
8+
// className: 'mb-4',
9+
// config: normalized
10+
// },
1111
{
1212
title: 'Basic Table',
1313
id: 'basic-table',

‎demo/src/schema/normalized.js‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
2-
import { MODIFY_DATA, REQUEST_DATA, IS_LOADING } from '../../../src/actions';
2+
import { MODIFY_DATA, REQUEST_DATA, SET_IS_LOADING } from '../../../src/actions';
33
import { getItemIds } from '../../../src/utils';
44
import { normalize, schema } from 'normalizr';
5+
import { createSelector } from 'reselect';
56

67
const tableSchema = ( entityName, idAttributeName, definition = {}) => {
78
const rowSchema = new schema.Entity(entityName, definition, {
@@ -16,6 +17,13 @@ const tableSchema = ( entityName, idAttributeName, definition = {}) => {
1617
}
1718
};
1819

20+
const pageSelector = (id) => createSelector(
21+
state => state.pages,
22+
(pages) => {
23+
return pages[id]
24+
}
25+
);
26+
1927
export default {
2028
name: 'pages',
2129
height: 400,
@@ -38,7 +46,15 @@ export default {
3846
entity: {
3947
state: 'pages',
4048
responseSchema: tableSchema('pages', 'pageId').responseSchema,
41-
schema: tableSchema('pages', 'pageId').rowSchema
49+
schema: tableSchema('pages', 'pageId').rowSchema,
50+
selectors: {
51+
default: pageSelector,
52+
// author: (id) => createSelector(
53+
// pageSelector(id),
54+
// state => state.authors,
55+
// (page, authors) => authors[page.author]
56+
// )
57+
},
4258
},
4359
layout: [
4460
['Editable'],
@@ -149,9 +165,9 @@ export default {
149165
const tableState = getState()[config.reducerName][config.name];
150166
console.log('toolbar button click', config, tableState);
151167
config.action(REQUEST_DATA)();
152-
config.action(IS_LOADING)({ value: true });
168+
config.action(SET_IS_LOADING)({ value: true });
153169
setTimeout(function() {
154-
config.action(IS_LOADING)({ value: false });
170+
config.action(SET_IS_LOADING)({ value: false });
155171
}, 1000);
156172
},
157173
// styles: {
@@ -196,7 +212,7 @@ export default {
196212
},
197213
Limiter: {
198214
type: 'limiter',
199-
options: [10, 20, 50, 200, 2000, 0],
215+
options: [10, 20, 50, 100, 150, 200, 500, 1000, 2000, 5000, 10000, 0],
200216
default: 200,
201217
// styles: {}
202218
},
@@ -238,13 +254,11 @@ export default {
238254
// },
239255
},
240256
columns: [{
241-
name: 'ids',
257+
name: 'pageId',
242258
label: '',
243259
sortable: false,
244260
type: 'selection',
245-
// indexField: '@pageId',
246-
width: 50,
247-
extraData: 'selection',
261+
width: 50
248262
}, {
249263
label: 'ID',
250264
type: 'number',
@@ -254,6 +268,30 @@ export default {
254268
sortable: true,
255269
// editable: true
256270
}, {
271+
label: 'ID',
272+
type: 'number',
273+
name: 'pageId',
274+
width: 150,
275+
filterable: true,
276+
sortable: true,
277+
// editable: true
278+
},{
279+
label: 'ID',
280+
type: 'number',
281+
name: 'pageId',
282+
width: 150,
283+
filterable: true,
284+
sortable: true,
285+
// editable: true
286+
},{
287+
label: 'ID',
288+
type: 'number',
289+
name: 'pageId',
290+
width: 150,
291+
filterable: true,
292+
sortable: true,
293+
// editable: true
294+
},{
257295
label: "Status",
258296
type: "options",
259297
name: "entityData.data.status",
@@ -299,15 +337,13 @@ export default {
299337
label: 'Actions',
300338
type: 'actions',
301339
name: 'actions',
340+
name: 'pageId',
302341
width: 100,
303342
items: [{
304343
type: 'action',
305344
name: 'edit',
306345
label: 'Edit',
307346
htmlClass: 'btn btn-secondary',
308-
params: {
309-
id: '@id',
310-
},
311347
thunk: ( config ) => ( dispatch, getState ) => {
312348
console.log('edit', config, getState());
313349
}
@@ -316,9 +352,6 @@ export default {
316352
name: 'delete',
317353
label: 'Delete',
318354
icon: 'trash-alt',
319-
params: {
320-
id: '@id'
321-
},
322355
styles: {
323356
backgroundColor: 'red',
324357
color: 'white'

0 commit comments

Comments
 (0)