Skip to content

Commit c6bd0c3

Browse files
easeqeaseq
committed
Update README.md
1 parent a1d67a9 commit c6bd0c3

File tree

1 file changed

+89
-20
lines changed

1 file changed

+89
-20
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

0 commit comments

Comments
 (0)