Skip to content

Commit 7b6b232

Browse files
easeqeaseq
authored
Minor fixes and added README (#4)
* Minor fixes and demo update * Fixes #1 * Update demo * Added default values * Update README.md
1 parent 4f0c619 commit 7b6b232

File tree

9 files changed

+372
-125
lines changed

9 files changed

+372
-125
lines changed

‎README.md‎

Lines changed: 276 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,283 @@
11
# @flipbyte/redux-datatable
22

3-
[![Travis][build-badge]][build]
3+
[Developed by Flipbyte](https://www.flipbyte.com/)
4+
45
[![npm package][npm-badge]][npm]
5-
[![Coveralls][coveralls-badge]][coveralls]
66

7-
Describe @flipbyte/redux-datatable here.
7+
Datatable built using React and Redux to fetch JSON data asynchronously using REST API.
8+
9+
- Filterable columns by date ranges, numeric ranges and text.
10+
- Pagination
11+
- Sortable columns
12+
- Configurable column widths
13+
- Built in windowing to handle large dataset with thousands of rows
14+
- Customizable limiter options
15+
- Customizable toolbar with the ability to add custom renderers
16+
- Completely configurable headers, filters, toolbar and pagination with options to enable/disable them individual
17+
- Custom row level actions
18+
- Thunks to handle custom mass or row actions externally.
19+
- Compatible with normalizr to handle externally managed states
20+
- Easily stylable with styled-components.
21+
- Show or hide columns dynamically using the Columns item in the toolbar.
22+
23+
## Installation
24+
25+
Run the following command to install using npm
26+
27+
```sh
28+
npm i @flipbyte/redux-datatable
29+
```
30+
31+
## Usage
32+
33+
#### Add the table reducer and epics to your store.
34+
35+
```javascript
36+
// Get the table reducer and epics as follows
37+
import { reducer, epics } from '@flipbyte/redux-datatable';
38+
39+
// Add the above reducer and epics to your store.
40+
```
41+
42+
#### Preparing your table config object
43+
44+
```javascript
45+
{
46+
name: 'your_table_name', // this is the key used to set your table data inside the table reducer
47+
height: 500,
48+
rowHeight: 50,
49+
pagination: {
50+
items: [{
51+
type: 'limiter',
52+
visible: true,
53+
position: 10,
54+
options: [10, 20, 50, 200, 2000],
55+
default: 200,
56+
style: {
57+
right: false,
58+
}
59+
}, {
60+
type: 'pages',
61+
visible: true,
62+
position: 20,
63+
style: {
64+
right: true,
65+
}
66+
}, {
67+
type: 'resultCount',
68+
visible: true,
69+
position: 30,
70+
style: {
71+
width: '350px',
72+
textAlign: 'center',
73+
}
74+
}]
75+
},
76+
routes: { // You can add other routes and handle them using custom actions.
77+
get: { // The route used to fetch data and it's params
78+
route: '/{your_route}',
79+
sort: 'id',
80+
dir: 'asc',
81+
resultPath: {
82+
data: 'data'
83+
}
84+
},
85+
...
86+
},
87+
toolbar: [ // Each toolbar array of objects below is a separate row in the toolbar section. You can add your own renderers and toolbar items or use some of the in-built ones.
88+
[{
89+
type: 'reset-filters',
90+
label: 'Reset Filters',
91+
visible: true,
92+
state: false,
93+
}, {
94+
type: 'columns',
95+
label: 'Columns',
96+
visible: true,
97+
state: false,
98+
style: {
99+
right: true
100+
}
101+
},
102+
...
103+
]
104+
...
105+
],
106+
columns: [{
107+
name: 'ids',
108+
label: '',
109+
sortable: false,
110+
type: 'selection',
111+
indexField: '@pageId',
112+
width: 50,
113+
extraData: 'selection'
114+
}, {
115+
label: 'ID',
116+
type: 'number',
117+
name: 'pageId',
118+
sortable: true,
119+
width: 150,
120+
filterable: true,
121+
sortable: true,
122+
}, {
123+
label: 'Avatar',
124+
type: 'image',
125+
name: 'avatar',
126+
sortable: false,
127+
textAlign: 'center',
128+
width: 200,
129+
filterable: false,
130+
imgHeight: 50
131+
}, {
132+
label: 'First Name',
133+
type: 'string',
134+
name: 'first_name',
135+
sortable: true,
136+
textAlign: 'text-left',
137+
width: 200,
138+
filterable: true,
139+
}, {
140+
label: 'Actions',
141+
type: 'actions',
142+
name: 'actions',
143+
width: 100,
144+
items: [{
145+
type: 'action',
146+
name: 'edit',
147+
label: 'Edit',
148+
btnClass: 'btn btn-secondary',
149+
icon: 'edit',
150+
params: {
151+
id: '@id',
152+
},
153+
thunk: ( payload ) => ( dispatch, getState ) => {
154+
console.log('edit', payload, getState());
155+
}
156+
}, {
157+
type: 'action',
158+
name: 'delete',
159+
label: 'Delete',
160+
icon: 'trash-alt',
161+
params: {
162+
id: '@id'
163+
},
164+
thunk: ( payload ) => ( dispatch, getState ) => {
165+
confirm("Are your sure you want to delete this page?")
166+
? console.log('delete', getState())
167+
: console.log(false);
168+
}
169+
},
170+
...
171+
]
172+
},
173+
...
174+
]
175+
}
176+
```
177+
178+
#### Render table component
179+
```javascript
180+
import ReduxDatatable from '@flipbyte/redux-datatable';
181+
182+
const YourComponent = () =>
183+
<ReduxDatatable
184+
reducerName={ /* The key used while combining reducers in the store */ }
185+
config={ /*your table config object*/ }
186+
/>
187+
```
188+
189+
### Table config props
190+
191+
| Key | Type | Required | Default | Description |
192+
| ------------ | ------------ | ------------ | ------------ | ------------ |
193+
| name | string | true | - | A unique key where the data for the table is saved in the table state object |
194+
| height | integer | true | - | The maximum height of the table |
195+
| rowHeight | integer | true | - | The maximum height of each table body row |
196+
| filterable | boolean | false | true | Whether to show/hide filters row |
197+
| headers | boolean | false | true | Whether to show/hide headers row |
198+
| pagination | object | false | {} | Pagination bar configuration (Check below) |
199+
| routes | object | true | - | Routes definition to fetch data and other custom routes config for custom handling (Check below) |
200+
| toolbar | array | false | [] | Toolbar definition (Check below) |
201+
| columns | array | true | - | Columns to display |
202+
203+
#### Pagination object
204+
205+
| Key | Type | Required | Default | Description |
206+
| ------------ | ------------ | ------------ | ------------ | ------------ |
207+
| items | array | false | [] | Array of item objects available for display in the pagination bar. Check below for items available |
208+
| visible | boolean/object | false | true | Whether the pagination is visible or not |
209+
210+
##### Pagination items array:
211+
212+
| Key | Type | Required | Default | Description |
213+
| ------------ | ------------ | ------------ | ------------ | ------------ |
214+
| type | string | true | - | One of the following: limiter, pages, resultCount |
215+
| visible | boolean | false | true | Whether the item is visible |
216+
| style | object | false | {} | Stylable properties |
217+
| **Limiter specific options** | | | | |
218+
| options | array | true | - | Array of integers with limiter options |
219+
| default | array | true | - | One of the values in the limiter options key |
220+
| **- style** | | | | |
221+
| right | boolean | false | false | Align the item to the right |
222+
| width | integer | false | 200 | Width of the item |
223+
| textAlign | string | false | left | Align the text of the item to the right, left or center|
224+
| fontSize | string | false | 14 | The font size of the text in the item |
225+
226+
#### Routes object
227+
228+
| Key | Type | Required | Default | Description |
229+
| ------------ | ------------ | ------------ | ------------ | ------------ |
230+
| get | object | true | - | The configuration for fetching data |
231+
| **- get** | | | | |
232+
| route | string | true | - | Your data fetching route |
233+
| sort | string | true | - | Your key to sort with |
234+
| dir | string | true | - | Sort by 'asc' or 'desc' order |
235+
| resultPath | object | true | - | The keys object to your data. Required { data: '{your data path in json response. Ex: result.data}'} |
236+
237+
#### Toolbar
238+
239+
Toolbar config is an array of array of object where objects are the toolbar items. Each inner array represents a different row.
240+
241+
| Key | Type | Required | Default | Description |
242+
| ------------ | ------------ | ------------ | ------------ | ------------ |
243+
| type | string | false | actions | Available values reset-filters and columns |
244+
| label | string | true | - | Label for the toolbar item |
245+
| visible | boolean | false | true | Whether the item is visible |
246+
| state | boolean | false | false | Whether to pass the state object as item prop |
247+
| style | object | false | {} | Define toolbar item styles |
248+
| **For type: actions** | | | | |
249+
| options | array | true | - | Array of option objects |
250+
| **-- options** | | | | |
251+
| type | string | true | action | Available option: action |
252+
| name | string | true | - | Unique name for the action |
253+
| label | string | true | - | Label for the action |
254+
| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
255+
| **- styles** | | | | |
256+
| right | boolean | false | false | Align the item to the right |
257+
| width | integer | false | 200 | Width of the item |
258+
| fontSize | string | false | 14 | The font size of the text in the item |
259+
260+
#### Columns object
8261

9-
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
10-
[build]: https://travis-ci.org/user/repo
262+
| Key | Type | Required | Default | Description |
263+
| ------------ | ------------ | ------------ | ------------ | ------------ |
264+
| name | string | true | - | Unique name for the column |
265+
| label | string | true | - | Label for the column |
266+
| sortable | boolean | false | true | Whether the column is sortable |
267+
| filterable | boolean | false | true | Whether the column is filterable |
268+
| type | string | true | string | Available types: selection, number, date, string, image, actions |
269+
| width | integer | true | - | Width of the column |
270+
| extraData | string/array | fasle | - | properties from the state to pass as in the extra object |
271+
| textAlign | string | false | left | Text alignment in the column |
272+
| **type: actions** | | | | |
273+
| items | array | true | - | array of item configuration object |
274+
| **- item configuration object ** | | | | |
275+
| name | string | true | - | Unique name for the action |
276+
| label | string | true | - | Label for the action |
277+
| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
11278

12-
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
13-
[npm]: https://www.npmjs.org/package/npm-package
279+
## License
280+
The MIT License (MIT)
14281

15-
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
16-
[coveralls]: https://coveralls.io/github/user/repo
282+
[npm-badge]: https://img.shields.io/npm/v/@flipbyte/redux-datatable.svg
283+
[npm]: https://www.npmjs.com/package/@flipbyte/redux-datatable

0 commit comments

Comments
 (0)