Merge pull request #38 from easeq/master

0.6.2

Author: easeq

README.md

@@ -63,6 +63,11 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
         },
         ...
     },
+    entity: { // optional. Check example code in /demo.
+        state: '{your state path}',
+        responseSchema: // normalizr schema,
+        schema: // normal;izr schema
+    },
     layout: [
         ['Editable'],
         ['MassActions', 'SimpleButton', 'ResetFilters', 'Spacer', 'Print', 'Columns'],
@@ -316,6 +321,7 @@ const YourComponent = () =>
 | rowHeight  | integer | true     | -       | The maximum height of each table body row                                                        |
 | routes     | object  | true     | -       | Routes definition to fetch data and other custom routes config for custom handling (Check below) |
 | components | object  | true     | -       | All the components required for your table                                                       |
+| entity     | object  | false    | -       | [Normalizr](https://github.com/paularmstrong/normalizr) specification. Check below for details.  |
 | layout     | array   | true     | -       | The layout of your table                                                                         |
 | editing    | boolean | false    | false   | Set the default state of the table to be in editing mode                                         |
 | primaryKey | string  | true     | -       | Set the primary key column of the table for actions like editing.                                |
@@ -342,6 +348,18 @@ Please check the example table config object above.
 An array of arrays where each inner array represents a row in the layout, within which components can be specified, which will be displayed in the frontend.
 Please check the example table config object above.
 
+#### Entity array
+
+All the fields are required when entity is defined. However, entity key itself is optional in the table config.
+
+| Key            | Type   | Required | Default | Description                                                                             |
+| -------------- | ------ | -------- | ------- | --------------------------------------------------------------------------------------- |
+| state          | object | true     | -       | Path to sub state in your top level redux state where the normalized data will be saved |
+| responseSchema | object | true     | -       | Define how the data is represented in your fetch data api response                      |
+| schema         | object | true     | -       | Define how the data is represented in each row item of the table fetch repsonse         |
+
+Note: Check the [example](https://github.com/flipbyte/redux-datatable/blob/master/demo/src/schema/normalized.js) code.
+
 #### Available Components
 
 **_Common Properties_**

demo/src/ExampleTableContainer.js

@@ -3,10 +3,11 @@ import { render } from 'react-dom';
 import ReduxDatatable from '../../src';
 import config from './config';
 
-const ExampleTableContainer = ({ title, className, id, ...tableProps }) =>
+const ExampleTableContainer = ({ title, className, id, ...tableProps }) => (
     <div id={ id } className="form-container">
         <h5 className="card-title">{ title }</h5>
         <ReduxDatatable reducerName={ config.tableReducerName } { ...tableProps } />
     </div>
+);
 
 export default ExampleTableContainer;

demo/src/config.js

@@ -1,9 +1,11 @@
 import { reducer, epics } from '../../src';
+import pagesReducer from './reducer';
 
 export default {
     tableReducerName: 'reduxDatatable',
     reducers: {
-        reduxDatatable: reducer
+        reduxDatatable: reducer,
+        pages: pagesReducer,
     },
     epics: {
         pageTableFetchDataEpic: epics.fetchDataEpic,

demo/src/index.js

@@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
 import configureStore from './store';
 import config from './config';
 
-// import '../../node_modules/bootstrap/dist/css/bootstrap.css';
+import '../../node_modules/bootstrap/dist/css/bootstrap.css';
 import './css/simple-sidebar.css';
 import './css/styles.css';
 
@@ -17,22 +17,24 @@ const Demo = () => (
         <div className="bg-light border-right sidenav" id="sidebar-wrapper">
             <div className="sidebar-heading"><strong>redux-datatable</strong></div>
             <div className="list-group list-group-flush">
-                { tables.map(({ id, title }, index) =>
+                { tables.map(({ id, title }, index) => (
                     <a key={ index } href={ `#${id}` }
                         className="list-group-item list-group-item-action bg-light">
                         { title }
                     </a>
-                ) }
+                ))}
             </div>
         </div>
         <div id="page-content-wrapper">
             <div className="scrollmenu sticky">
-                { tables.map(({ id, title }, index) =>
-                    <a key={ index } href={ `#${id}` }>{ title }</a> ) }
+                { tables.map(({ id, title }, index) => (
+                    <a key={ index } href={ `#${id}` }>{ title }</a>
+                ))}
             </div>
             <div className="container-fluid p-4 content">
-                { tables.map((table, index) =>
-                    <ExampleTableContainer key={ index } { ...table }/> )}
+                { tables.map((table, index) => (
+                    <ExampleTableContainer key={ index } { ...table }/>
+                ))}
             </div>
         </div>
     </div>

demo/src/reducer.js

@@ -0,0 +1,22 @@
+import _ from 'lodash';
+import * as actions from '../../src/actions';
+
+export default function reducer(state = {}, action) {
+    if (!action.meta) {
+        return state;
+    }
+
+    const { payload, meta: { name } } = action;
+    const acceptedActions = {
+        [actions.RECEIVE_DATA]: () => ({
+            ...state,
+            ..._.get(payload, ['entities', 'pages'], {})
+        })
+    };
+
+    if (acceptedActions.hasOwnProperty(action.type) && name === 'pages') {
+        return acceptedActions[action.type]();
+    }
+
+    return state;
+}

demo/src/schema/basic.js

@@ -226,39 +226,7 @@ export default {
                 // indexField: '@pageId',
                 width: 50,
                 extraData: 'selection',
-            }, {
-                label: 'ID',
-                type: 'number',
-                name: 'pageId',
-                width: 150,
-                filterable: true,
-                sortable: true,
-                // editable: true
-            }, {
-                label: 'ID',
-                type: 'number',
-                name: 'pageId',
-                width: 150,
-                filterable: true,
-                sortable: true,
-                // editable: true
-            }, {
-                label: 'ID',
-                type: 'number',
-                name: 'pageId',
-                width: 150,
-                filterable: true,
-                sortable: true,
-                // editable: true
-            }, {
-                label: 'ID',
-                type: 'number',
-                name: 'pageId',
-                width: 150,
-                filterable: true,
-                sortable: true,
-                // editable: true
-            }, {
+            },  {
                 label: 'ID',
                 type: 'number',
                 name: 'pageId',

demo/src/schema/index.js

@@ -1,6 +1,13 @@
 import basic from './basic';
+import normalized from './normalized';
 
 export default [
+    {
+        title: 'Normalized Table',
+        id: 'normalized-table',
+        className: 'mb-4',
+        config: normalized
+    },
     {
         title: 'Basic Table',
         id: 'basic-table',