Skip to content

Commit 62de7ac

Browse files
easeqeaseq
authored
Merge pull request #54 from easeq/master
Minor fixes
2 parents d63b65c + 940cc68 commit 62de7ac

21 files changed

+211
-88
lines changed

‎README.md

Lines changed: 89 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -84,16 +84,38 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
8484
['Limiter', 'Spacer', 'ResultCount', 'Spacer', 'Pages'],
8585
],
8686
components: {
87+
Header: {
88+
rowClassName: 'your custom class names',
89+
colClassName: 'your custom class names',
90+
className: 'your custom class names',
91+
},
92+
Body: {
93+
rowClassName: 'your custom class names',
94+
colClassName: 'your custom class names',
95+
className: 'your custom class names',
96+
},
97+
Filters: {
98+
rowClassName: 'your custom class names',
99+
colClassName: 'your custom class names',
100+
className: 'your custom class names',
101+
},
87102
Loader: {
88103
styles: {
89104
mask: { ... },
90105
spinner: { ... }
91106
}
92107
},
93108
ResultCount: {
109+
className: 'your custom class names',
94110
styles: { ... }
95111
},
96112
Pages: {
113+
firstClassName: 'your custom class names',
114+
lastClassName: 'your custom class names',
115+
nextClassName: 'your custom class names',
116+
prevClassName: 'your custom class names',
117+
pageNumberClassName: 'your custom class names',
118+
activeClassName: 'your custom class names',
97119
styles: {
98120
first: { ... },
99121
last: { ... },
@@ -109,6 +131,11 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
109131
hide: 'Hide editable',
110132
save: 'Save',
111133
},
134+
classNames: {
135+
show: 'your custom class names',
136+
hide: 'your custom class names',
137+
save: 'your custom class names',
138+
},
112139
save: ( config ) => ( dispatch, getState ) => {
113140
const tableState = getState()[config.reducerName][config.name];
114141
console.log('toolbar save click with modified data', config, tableState.modified);
@@ -127,6 +154,10 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
127154
name: 'actions',
128155
label: 'Actions',
129156
id: 'dropdown',
157+
className: 'your custom class names',
158+
btnClassName: 'your custom class names',
159+
menuClassName: 'your custom class names',
160+
menuItemClassName: 'your custom class names',
130161
styles: {
131162
button: { ... },
132163
dropdownMenu: { ... },
@@ -159,24 +190,31 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
159190
SimpleButton: {
160191
type: 'button',
161192
label: 'Simple Button',
193+
className: 'your custom class names',
162194
thunk: ( config ) => ( dispatch, getState ) => { ... },
163195
styles: { ... }
164196
},
165197
ResetFilters: {
166198
type: 'reset-filters',
167199
label: 'Reset Filters',
200+
className: 'your custom class names',
168201
styles: { ... }
169202
},
170203
Print: {
171204
type: 'print',
172205
label: 'Print Table',
206+
className: 'your custom class names',
173207
styles: { ... }
174208
},
175209
Columns: {
176210
name: 'columns',
177211
type: 'columns',
178212
label: 'Columns',
179213
visible: true,
214+
className: 'your custom class names',
215+
btnClassName: 'your custom class names',
216+
menuClassName: 'your custom class names',
217+
menuItemClassName: 'your custom class names',
180218
styles: {
181219
button: { ... },
182220
dropdownMenu: { ... },
@@ -187,9 +225,12 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
187225
type: 'limiter',
188226
options: [10, 20, 50, 200, 2000, 0],
189227
default: 200,
228+
className: 'your custom class names',
229+
selectClassName: 'your custom class names',
190230
styles: { ... }
191231
},
192232
Table: {
233+
className: 'your custom class names',
193234
styles: {
194235
table: { ... },
195236
thead: { ... },
@@ -359,11 +400,12 @@ Note: Check the [example](https://github.com/flipbyte/redux-datatable/blob/maste
359400

360401
**_Common Properties_**
361402

362-
| Key | Type | Required | Default | Description |
363-
| -------- | -------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
364-
| styles | object | false | {} | styled-component styles object or key-value pairs with values being styled-component styles object |
365-
| renderer | function | false | - | returns a react component |
366-
| type | string | true | - | the type of the object |
403+
| Key | Type | Required | Default | Description |
404+
| --------- | -------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
405+
| styles | object | false | {} | styled-component styles object or key-value pairs with values being styled-component styles object |
406+
| renderer | function | false | - | returns a react component |
407+
| type | string | true | - | the type of the object |
408+
| className | string | true | varies | html class names for top-level html element in the component |
367409

368410
##### Loader
369411

@@ -382,6 +424,17 @@ No unique properties
382424

383425
##### Pages
384426

427+
**_Properties_**
428+
429+
| Key | Type | Required | Default | Description |
430+
| ------------------- | ------ | -------- | ------------ | ---------------- |
431+
| firstClassName | string | false | rdt-pg-first | html class names |
432+
| lastClassName | string | false | rdt-pg-last | html class names |
433+
| prevClassName | string | false | rdt-pg-prev | html class names |
434+
| nextClassName | string | false | rdt-pg-next | html class names |
435+
| pageNumberClassName | string | false | rdt-pg-num | html class names |
436+
| activeClassName | string | false | active | html class names |
437+
385438
**_Styles object properties_**
386439

387440
| Key | Type | Required | Default | Description |
@@ -398,10 +451,19 @@ Toggles the table between editable and non-editable and shows a save button when
398451

399452
**_Properties_**
400453

401-
| Key | Type | Required | Default | Description |
402-
| ------ | -------- | -------- | ----------- | ----------------------------------------------- |
403-
| labels | object | false | check below | check below |
404-
| save | function | false | - | ( config ) => ( dispatch, getState ) => { ... } |
454+
| Key | Type | Required | Default | Description |
455+
| ---------- | -------- | -------- | ----------- | ----------------------------------------------- |
456+
| labels | object | false | check below | check below |
457+
| save | function | false | - | ( config ) => ( dispatch, getState ) => { ... } |
458+
| classNames | object | false | check below | check below |
459+
460+
**_classNames object properties_**
461+
462+
| Key | Type | Required | Default | Description |
463+
| ---- | ------ | -------- | ---------------------- | ---------------- |
464+
| show | string | false | rdt-toolbar-button | html class names |
465+
| hide | string | false | rdt-toolbar-button | html class names |
466+
| save | string | false | Sardt-toolbar-buttonve | html class names |
405467

406468
**_Labels object properties_**
407469

@@ -423,10 +485,13 @@ Toggles the table between editable and non-editable and shows a save button when
423485

424486
**_Properties_**
425487

426-
| Key | Type | Required | Default | Description |
427-
| ------- | ------ | -------- | ------- | ------------------------------------- |
428-
| options | array | required | \[] | array of actions objects |
429-
| label | string | required | - | Label for the actions dropdown button |
488+
| Key | Type | Required | Default | Description |
489+
| ----------------- | ------ | -------- | ------------------ | ------------------------------------- |
490+
| options | array | true | \[] | array of actions objects |
491+
| label | string | true | - | Label for the actions dropdown button |
492+
| btnClassName | string | false | rdt-toolbar-button | html class names |
493+
| menuClassName | string | false | rdt-toolbar-menu | html class names |
494+
| menuItemClassName | string | false | rdt-toolbar-item | html class names |
430495

431496
**_Actions object properties_**
432497

@@ -477,9 +542,12 @@ Shows the columns toggling dropdown.
477542

478543
**_Properties_**
479544

480-
| Key | Type | Required | Default | Description |
481-
| ----- | ------ | -------- | ------- | ------------------------------------- |
482-
| label | string | required | - | Label for the actions dropdown button |
545+
| Key | Type | Required | Default | Description |
546+
| ----------------- | ------ | -------- | ------------------ | ------------------------------------- |
547+
| label | string | required | - | Label for the actions dropdown button |
548+
| btnClassName | string | false | rdt-toolbar-button | html class names |
549+
| menuClassName | string | false | rdt-toolbar-menu | html class names |
550+
| menuItemClassName | string | false | rdt-toolbar-item | html class names |
483551

484552
**_Styles object properties_**
485553

@@ -491,10 +559,11 @@ Shows the columns toggling dropdown.
491559

492560
##### Limiter (type: limiter)
493561

494-
| Key | Type | Required | Default | Description |
495-
| ------- | ------- | -------- | ------- | --------------------------------------------------------------------- |
496-
| options | array | required | \[] | array of limiter counts |
497-
| default | integer | required | \[] | default limiter option (should be a value in the options array above) |
562+
| Key | Type | Required | Default | Description |
563+
| --------------- | ------- | -------- | ------------------ | --------------------------------------------------------------------- |
564+
| options | array | required | \[] | array of limiter counts |
565+
| default | integer | required | \[] | default limiter option (should be a value in the options array above) |
566+
| selectClassName | string | false | rdt-limiter-select | html class names |
498567

499568
##### Table (type: table)
500569

‎demo/src/schema/basic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ export default {
327327
type: 'action',
328328
name: 'edit',
329329
label: 'Edit',
330-
htmlClass: 'btn btn-secondary',
330+
className: 'btn btn-secondary',
331331
thunk: ( config ) => ( dispatch, getState ) => {
332332
console.log('edit', config, getState());
333333
}

‎demo/src/schema/normalized.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@ export default {
7777
// // }
7878
// // }
7979
// },
80+
// Table: {
81+
// className: 'new-table-class'
82+
// },
83+
Header: {
84+
className: 'new-header-class'
85+
},
8086
ResultCount: {
8187
styles: {
8288
display: 'flex',
@@ -217,6 +223,7 @@ export default {
217223
// styles: {}
218224
},
219225
Table: {
226+
className: 'new-table-class',
220227
styles: {
221228
// table: {
222229
// background: '#000',
@@ -344,7 +351,7 @@ export default {
344351
type: 'action',
345352
name: 'edit',
346353
label: 'Edit',
347-
htmlClass: 'btn btn-secondary',
354+
className: 'btn btn-secondary',
348355
thunk: ( config ) => ( dispatch, getState ) => {
349356
console.log('edit', config, getState());
350357
}

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@flipbyte/redux-datatable",
3-
"version": "0.7.10",
3+
"version": "0.7.11",
44
"description": "React-Redux data table",
55
"main": "lib/index.js",
66
"module": "es/index.js",

‎src/components/Body.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ import { createSelector } from 'reselect';
1212
const addElementResizeEventListener = require('element-resize-event');
1313
const removeElementResizeEventListener = require('element-resize-event').unbind;
1414

15-
const renderCol = (rowIndex, primaryKey, schema, styles, column, index) => {
15+
const renderCol = (rowIndex, primaryKey, schema, styles, colClassName, column, index) => {
1616
const { textAlign, name, type } = column;
1717
const ColRenderer = getRenderer(column, Renderers);
1818
return (
1919
<Td
2020
key={ index }
2121
colIndex={ index }
22-
className={ `rdt-table-col ${name} ${type}` }
22+
className={ `${colClassName} ${name} ${type}` }
2323
styles={ getStyles(styles.td, 'body') }
2424
>
2525
<Div className="rdt-table-col-inner">
@@ -34,22 +34,22 @@ const renderCol = (rowIndex, primaryKey, schema, styles, column, index) => {
3434
);
3535
};
3636

37-
const renderRow = (columns, rowHeight, styles, primaryKey, schema, rowIndex, top) => (
37+
const renderRow = (columns, rowHeight, styles, primaryKey, schema, rowClassName, colClassName, rowIndex, top) => (
3838
<Tr
3939
key={ rowIndex }
40-
className="rdt-table-row"
40+
className={ rowClassName }
4141
position="absolute"
4242
top={ top }
4343
columns={ columns }
4444
height={ rowHeight }
4545
even={ rowIndex % 2 === 0 }
4646
styles={ getStyles(styles.tr, 'body') }
4747
>
48-
{ renderCol.bind(this, rowIndex, primaryKey, schema, styles) }
48+
{ renderCol.bind(this, rowIndex, primaryKey, schema, styles, colClassName) }
4949
</Tr>
5050
);
5151

52-
const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
52+
const Body = React.forwardRef(({ top: startTop = 0, config }, ref) => {
5353
const {
5454
columns,
5555
action,
@@ -68,6 +68,12 @@ const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
6868
}
6969
} = useContext(ConfigContext);
7070

71+
const {
72+
className = 'table-body',
73+
rowClassName = 'rdt-table-row',
74+
colClassName = 'rdt-table-col'
75+
} = config;
76+
7177
const itemCount = useSelector(getData(tableData => (tableData.items || []).length));
7278
const isPrinting = useSelector(getData(tableData => !!tableData.isPrinting));
7379

@@ -120,7 +126,7 @@ const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
120126

121127
return (
122128
<Tbody
123-
className="table-body"
129+
className={ className }
124130
styles={ getStyles(styles, 'tbody') }
125131
ref={ ref }
126132
isPrinting={ isPrinting }
@@ -130,7 +136,7 @@ const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
130136
range={ range }
131137
rowHeight={ rowHeight }
132138
>
133-
{ renderRow.bind(this, columns, rowHeight, styles, primaryKey, schema) }
139+
{ renderRow.bind(this, columns, rowHeight, styles, primaryKey, schema, rowClassName, colClassName) }
134140
</Tbody>
135141
);
136142
});

‎src/components/Button.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import ConfigContext from '../context';
44

55
const Button = ({ config }) => {
66
const { thunk } = useContext(ConfigContext);
7-
const { thunk: cb, label, name, styles = {} } = config;
7+
const { thunk: cb, label, name, styles = {}, className = 'rdt-toolbar-btn' } = config;
88
return (
99
<StyledButton
10-
className={ `rdt-toolbar-btn ${name || ''}` }
10+
className={ className }
1111
onClick={ cb && thunk.bind(this, cb, config) }
1212
styles={ styles }
1313
>

0 commit comments

Comments
 (0)