Skip to content

Commit 8e7b7a1

Browse files
easeqeaseq
authored
Added filterable column of type options (#11)
* Added options filter and updated options body value * 0.3.0 * Update README.md
1 parent 9d395de commit 8e7b7a1

File tree

6 files changed

+76
-19
lines changed

6 files changed

+76
-19
lines changed

‎README.md‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,24 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
117117
width: 150,
118118
filterable: true,
119119
sortable: true,
120+
}, {
121+
label: "Status",
122+
type: "options",
123+
name: "entityData.data.status",
124+
sortable: true,
125+
filterable: true,
126+
textAlign: "center",
127+
options: {
128+
"published": {
129+
label: "Published"
130+
},
131+
"draft": {
132+
label: "Draft"
133+
},
134+
"archived": {
135+
label: "Archived"
136+
}
137+
}
120138
}, {
121139
label: 'Avatar',
122140
type: 'image',
@@ -249,22 +267,24 @@ toolbar items. Each inner array represents a different row.
249267

250268
#### Columns object
251269

252-
| Key | Type | Required | Default | Description |
253-
| ------------------------------- | ------------ | -------- | ------- | ------------------------------------------------------------------------- |
254-
| name | string | true | - | Unique name for the column |
255-
| label | string | true | - | Label for the column |
256-
| sortable | boolean | false | true | Whether the column is sortable |
257-
| filterable | boolean | false | true | Whether the column is filterable |
258-
| type | string | true | string | Available types: selection, number, date, string, image, actions |
259-
| width | integer | true | - | Width of the column |
260-
| extraData | string/array | false | - | properties from the state to pass as in the extra object |
261-
| textAlign | string | false | left | Text alignment in the column |
262-
| **type: actions** | | | | |
263-
| items | array | true | - | array of item configuration object |
264-
| **- item configuration object** | | | | |
265-
| name | string | true | - | Unique name for the action |
266-
| label | string | true | - | Label for the action |
267-
| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
270+
| Key | Type | Required | Default | Description |
271+
| ------------------------------- | ------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
272+
| name | string | true | - | Unique name for the column |
273+
| label | string | true | - | Label for the column |
274+
| sortable | boolean | false | true | Whether the column is sortable |
275+
| filterable | boolean | false | true | Whether the column is filterable |
276+
| type | string | true | string | Available types: selection, number, date, string, image, options, actions |
277+
| width | integer | true | - | Width of the column |
278+
| extraData | string/array | false | - | properties from the state to pass as value in the extra object. |
279+
| textAlign | string | false | left | Text alignment in the column |
280+
| **type: options** | | | | |
281+
| options | object | true | - | object of objects with key for each child object being the value of the column and child object being { label: "{Your label for the respective value}" } |
282+
| **type: actions** | | | | |
283+
| items | array | true | - | array of item configuration object |
284+
| **- item configuration object** | | | | |
285+
| name | string | true | - | Unique name for the action |
286+
| label | string | true | - | Label for the action |
287+
| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
268288

269289
#### Styles object
270290

@@ -289,7 +309,9 @@ Styles has the following properties available:
289309
The MIT License (MIT)
290310

291311
[npm-badge]: https://img.shields.io/npm/v/@flipbyte/redux-datatable.svg
312+
292313
[npm]: https://www.npmjs.com/package/@flipbyte/redux-datatable
293314

294315
[codacy-badge]: https://api.codacy.com/project/badge/Grade/67274650b4874f5db55ede76156ab4d2
316+
295317
[codacy]: https://www.codacy.com/app/flipbyte/redux-datatable?utm_source=github.com&utm_medium=referral&utm_content=flipbyte/redux-datatable&utm_campaign=Badge_Grade

‎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.2.2",
3+
"version": "0.3.0",
44
"description": "React-Redux data table",
55
"main": "lib/index.js",
66
"module": "es/index.js",

‎src/Renderer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import MassActions from './Renderer/Toolbar/MassActions';
99
import ResetFilters from './Renderer/Toolbar/ResetFilters';
1010

1111
import DateFilter from './Renderer/Filter/Date';
12+
import FilterOptions from './Renderer/Filter/Options';
1213
import String from './Renderer/Filter/String';
1314
import Number from './Renderer/Filter/Number';
1415

@@ -33,6 +34,7 @@ const renderers = {
3334
filter: {
3435
number: Number,
3536
date: DateFilter,
37+
options: FilterOptions,
3638
default: String
3739
},
3840
body: {

‎src/Renderer/Body/Options.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Options = ({
1414

1515
return (
1616
<span className={ (options[value].badge ? 'badge ' + options[value].badge : '') }>
17-
{ options[value].value }
17+
{ options[value].label }
1818
</span>
1919
);
2020
};

‎src/Renderer/Filter/Options.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import _ from 'lodash';
2+
import React from 'react';
3+
import { OPERATOR } from '../../constants';
4+
import Field from '../../components/Field';
5+
6+
const applyFilter = ( filterer, event ) => {
7+
let filter = {};
8+
if (event.target.value) {
9+
filter = {
10+
operator: OPERATOR.IS,
11+
field: event.target.name,
12+
value: event.target.value,
13+
logic: 'where',
14+
};
15+
}
16+
17+
filterer(event.target.name, filter);
18+
};
19+
20+
const Options = ({ name, value = '', filterer, options }) => (
21+
<Field.Select
22+
name={ name }
23+
value={ value }
24+
onChange={ applyFilter.bind(this, filterer) }
25+
>
26+
<option></option>
27+
{ _.map(options, ({ label }, key ) => (
28+
<option key={ key } value={ key }>{ label }</option>
29+
) )}
30+
</Field.Select>
31+
);
32+
33+
export default Options;

0 commit comments

Comments
 (0)