diff --git a/README.md b/README.md
index 857747f..fa50546 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,24 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
width: 150,
filterable: true,
sortable: true,
+ }, {
+ label: "Status",
+ type: "options",
+ name: "entityData.data.status",
+ sortable: true,
+ filterable: true,
+ textAlign: "center",
+ options: {
+ "published": {
+ label: "Published"
+ },
+ "draft": {
+ label: "Draft"
+ },
+ "archived": {
+ label: "Archived"
+ }
+ }
}, {
label: 'Avatar',
type: 'image',
@@ -249,22 +267,24 @@ toolbar items. Each inner array represents a different row.
#### Columns object
-| Key | Type | Required | Default | Description |
-| ------------------------------- | ------------ | -------- | ------- | ------------------------------------------------------------------------- |
-| name | string | true | - | Unique name for the column |
-| label | string | true | - | Label for the column |
-| sortable | boolean | false | true | Whether the column is sortable |
-| filterable | boolean | false | true | Whether the column is filterable |
-| type | string | true | string | Available types: selection, number, date, string, image, actions |
-| width | integer | true | - | Width of the column |
-| extraData | string/array | false | - | properties from the state to pass as in the extra object |
-| textAlign | string | false | left | Text alignment in the column |
-| **type: actions** | | | | |
-| items | array | true | - | array of item configuration object |
-| **- item configuration object** | | | | |
-| name | string | true | - | Unique name for the action |
-| label | string | true | - | Label for the action |
-| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
+| Key | Type | Required | Default | Description |
+| ------------------------------- | ------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name | string | true | - | Unique name for the column |
+| label | string | true | - | Label for the column |
+| sortable | boolean | false | true | Whether the column is sortable |
+| filterable | boolean | false | true | Whether the column is filterable |
+| type | string | true | string | Available types: selection, number, date, string, image, options, actions |
+| width | integer | true | - | Width of the column |
+| extraData | string/array | false | - | properties from the state to pass as value in the extra object. |
+| textAlign | string | false | left | Text alignment in the column |
+| **type: options** | | | | |
+| 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}" } |
+| **type: actions** | | | | |
+| items | array | true | - | array of item configuration object |
+| **- item configuration object** | | | | |
+| name | string | true | - | Unique name for the action |
+| label | string | true | - | Label for the action |
+| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
#### Styles object
@@ -289,7 +309,9 @@ Styles has the following properties available:
The MIT License (MIT)
[npm-badge]: https://img.shields.io/npm/v/@flipbyte/redux-datatable.svg
+
[npm]: https://www.npmjs.com/package/@flipbyte/redux-datatable
[codacy-badge]: https://api.codacy.com/project/badge/Grade/67274650b4874f5db55ede76156ab4d2
+
[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
diff --git a/package-lock.json b/package-lock.json
index 9349dc0..f011fa3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@flipbyte/redux-datatable",
- "version": "0.2.2",
+ "version": "0.3.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index cc5b513..b4798d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@flipbyte/redux-datatable",
- "version": "0.2.2",
+ "version": "0.3.0",
"description": "React-Redux data table",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/src/Renderer.js b/src/Renderer.js
index 4565481..8360f25 100644
--- a/src/Renderer.js
+++ b/src/Renderer.js
@@ -9,6 +9,7 @@ import MassActions from './Renderer/Toolbar/MassActions';
import ResetFilters from './Renderer/Toolbar/ResetFilters';
import DateFilter from './Renderer/Filter/Date';
+import FilterOptions from './Renderer/Filter/Options';
import String from './Renderer/Filter/String';
import Number from './Renderer/Filter/Number';
@@ -33,6 +34,7 @@ const renderers = {
filter: {
number: Number,
date: DateFilter,
+ options: FilterOptions,
default: String
},
body: {
diff --git a/src/Renderer/Body/Options.js b/src/Renderer/Body/Options.js
index 68f24b8..14a3f92 100644
--- a/src/Renderer/Body/Options.js
+++ b/src/Renderer/Body/Options.js
@@ -14,7 +14,7 @@ const Options = ({
return (
- { options[value].value }
+ { options[value].label }
);
};
diff --git a/src/Renderer/Filter/Options.js b/src/Renderer/Filter/Options.js
new file mode 100644
index 0000000..b55efc1
--- /dev/null
+++ b/src/Renderer/Filter/Options.js
@@ -0,0 +1,33 @@
+import _ from 'lodash';
+import React from 'react';
+import { OPERATOR } from '../../constants';
+import Field from '../../components/Field';
+
+const applyFilter = ( filterer, event ) => {
+ let filter = {};
+ if (event.target.value) {
+ filter = {
+ operator: OPERATOR.IS,
+ field: event.target.name,
+ value: event.target.value,
+ logic: 'where',
+ };
+ }
+
+ filterer(event.target.name, filter);
+};
+
+const Options = ({ name, value = '', filterer, options }) => (
+
+
+ { _.map(options, ({ label }, key ) => (
+
+ ) )}
+
+);
+
+export default Options;