diff --git a/README.md b/README.md index 4b194e9..857747f 100644 --- a/README.md +++ b/README.md @@ -5,21 +5,24 @@ [![npm package][npm-badge]][npm] [![Codacy Badge][codacy-badge]][codacy] -Datatable built using React and Redux to fetch JSON data asynchronously using REST API. - -- Filterable columns by date ranges, numeric ranges and text. -- Pagination -- Sortable columns -- Configurable column widths -- Built in windowing to handle large dataset with thousands of rows -- Customizable limiter options -- Customizable toolbar with the ability to add custom renderers -- Completely configurable headers, filters, toolbar and pagination with options to enable/disable them individual -- Custom row level actions -- Thunks to handle custom mass or row actions externally. -- Compatible with normalizr to handle externally managed states -- Easily stylable with styled-components. -- Show or hide columns dynamically using the Columns item in the toolbar. +Datatable built using React and Redux to fetch JSON data asynchronously +using REST API. + +- Filterable columns by date ranges, numeric ranges and text. +- Pagination +- Sortable columns +- Configurable column widths +- Built in windowing to handle large dataset with thousands of rows +- Customizable limiter options +- Customizable toolbar with the ability to add custom renderers +- Completely configurable headers, filters, toolbar and pagination + with options to enable/disable them individual +- Custom row level actions +- Thunks to handle custom mass or row actions externally. +- Compatible with normalizr to handle externally managed states +- Easily stylable with styled-components. +- Show or hide columns dynamically using the Columns item in the + toolbar. ## Installation @@ -31,7 +34,7 @@ npm i @flipbyte/redux-datatable ## Usage -#### Add the table reducer and epics to your store. +### Add the table reducer and epics to your store ```javascript // Get the table reducer and epics as follows @@ -40,7 +43,7 @@ import { reducer, epics } from '@flipbyte/redux-datatable'; // Add the above reducer and epics to your store. ``` -#### Preparing your table config object +### Preparing your table config object ```javascript { @@ -170,7 +173,8 @@ import { reducer, epics } from '@flipbyte/redux-datatable'; } ``` -#### Render table component +### Render table component + ```javascript import ReduxDatatable from '@flipbyte/redux-datatable'; @@ -183,107 +187,109 @@ const YourComponent = () => ### Table config props -| Key | Type | Required | Default | Description | -| ------------ | ------------ | ------------ | ------------ | ------------ | -| name | string | true | - | A unique key where the data for the table is saved in the table state object | -| height | integer | true | - | The maximum height of the table | -| rowHeight | integer | true | - | The maximum height of each table body row | -| filterable | boolean | false | true | Whether to show/hide filters row | -| headers | boolean | false | true | Whether to show/hide headers row | -| pagination | object | false | {} | Pagination bar configuration (Check below) | -| routes | object | true | - | Routes definition to fetch data and other custom routes config for custom handling (Check below) | -| toolbar | array | false | [] | Toolbar definition (Check below) | -| columns | array | true | - | Columns to display | -| styles | object | false | {} | Custom styles for your table | +| Key | Type | Required | Default | Description | +| ---------- | ------- | -------- | ------- | ------------------------------------------------------------------------------------------------ | +| name | string | true | - | A unique key where the data for the table is saved in the table state object | +| height | integer | true | - | The maximum height of the table | +| rowHeight | integer | true | - | The maximum height of each table body row | +| filterable | boolean | false | true | Whether to show/hide filters row | +| headers | boolean | false | true | Whether to show/hide headers row | +| pagination | object | false | {} | Pagination bar configuration (Check below) | +| routes | object | true | - | Routes definition to fetch data and other custom routes config for custom handling (Check below) | +| toolbar | array | false | \[] | Toolbar definition (Check below) | +| columns | array | true | - | Columns to display | +| styles | object | false | {} | Custom styles for your table | #### Pagination object -| Key | Type | Required | Default | Description | -| ------------ | ------------ | ------------ | ------------ | ------------ | -| items | object | false | {} | Items available for display in the pagination bar. Check below for items available | -| visible | boolean/object | false | true | Whether the pagination is visible or not | +| Key | Type | Required | Default | Description | +| ------- | -------------- | -------- | ------- | ---------------------------------------------------------------------------------- | +| items | object | false | {} | Items available for display in the pagination bar. Check below for items available | +| visible | boolean/object | false | true | Whether the pagination is visible or not | -##### Pagination items object: +##### Pagination items object -| Key | Type | Required | Default | Description | -| ------------ | ------------ | ------------ | ------------ | ------------ | -| type | string | true | - | One of the following: limiter, pages, resultCount | -| visible | boolean | false | true | Whether the item is visible | -| **Limiter specific options** | | | | | -| options | array | true | - | Array of integers with limiter options | -| default | array | true | - | One of the values in the limiter options key | +| Key | Type | Required | Default | Description | +| ---------------------------- | ------- | -------- | ------- | ------------------------------------------------- | +| type | string | true | - | One of the following: limiter, pages, resultCount | +| visible | boolean | false | true | Whether the item is visible | +| **Limiter specific options** | | | | | +| options | array | true | - | Array of integers with limiter options | +| default | array | true | - | One of the values in the limiter options key | #### Routes object -| Key | Type | Required | Default | Description | -| ------------ | ------------ | ------------ | ------------ | ------------ | -| get | object | true | - | The configuration for fetching data | -| **- get** | | | | | -| route | string | true | - | Your data fetching route | -| sort | string | true | - | Your key to sort with | -| dir | string | true | - | Sort by 'asc' or 'desc' order | -| resultPath | object | true | - | The keys object to your data. Required { data: '{your data path in json response. Ex: result.data}'} | +| Key | Type | Required | Default | Description | +| ---------- | ------ | -------- | ------- | ---------------------------------------------------------------------------------------------------- | +| get | object | true | - | The configuration for fetching data | +| **- get** | | | | | +| route | string | true | - | Your data fetching route | +| sort | string | true | - | Your key to sort with | +| dir | string | true | - | Sort by 'asc' or 'desc' order | +| resultPath | object | true | - | The keys object to your data. Required { data: '{your data path in json response. Ex: result.data}'} | #### Toolbar -Toolbar config is an array of array of object where objects are the toolbar items. Each inner array represents a different row. - -| Key | Type | Required | Default | Description | -| ------------ | ------------ | ------------ | ------------ | ------------ | -| type | string | false | actions | Available values reset-filters and columns | -| label | string | true | - | Label for the toolbar item | -| visible | boolean | false | true | Whether the item is visible | -| state | boolean | false | false | Whether to pass the state object as item prop | -| **For type: actions** | | | | | -| options | array | true | - | Array of option objects | -| **-- options** | | | | | -| type | string | true | action | Available option: action | -| 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. | +Toolbar config is an array of array of object where objects are the +toolbar items. Each inner array represents a different row. + +| Key | Type | Required | Default | Description | +| --------------------- | -------- | -------- | ------- | ------------------------------------------------------------------------- | +| type | string | false | actions | Available values reset-filters and columns | +| label | string | true | - | Label for the toolbar item | +| visible | boolean | false | true | Whether the item is visible | +| state | boolean | false | false | Whether to pass the state object as item prop | +| **For type: actions** | | | | | +| options | array | true | - | Array of option objects | +| **-- options** | | | | | +| type | string | true | action | Available option: action | +| 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. | #### 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 | fasle | - | 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, 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. | #### Styles object -Styles has the following properties avaailable: - -| Key | Type | Required | Default | Description | -| ------------ | ------------ | ------------ | ------------ | ------------ | -| tableContainer | styled-components style object | false | - | Outer table container | -| table | styled-components style object | false | - | Table component | -| thead | styled-components style object | false | - | Table header component | -| tbody | styled-components style object | false | - | Table body component | -| tr | object | false | - | Table rows - the object can contain the following keys `header`, `filter`, `body`, each of whose values is a styled-components style object| | -| th | styled-components style object | false | - | Table header columns | -| td | object | false | - | Table columns - the object contain the following keys `filter`, `body` whose value is a styled-components style object | -| toolbar | object | false | - | Keys `container` and `row` which are styled-components style object and `item` which is an object with keys that are the names of the respective items (as defined in the config) and the value is a styled-components style object | -| pagination | object | false | - | Keys `container` - a styled-components style object and `item` - same as above toolbar item | -| filter | object | false | - | Each key is the name of the column and the value is the styled-components style object | -| body | object | false | - | Same as `filter` (above) | +Styles has the following properties available: + +| Key | Type | Required | Default | Description | +| -------------- | ------------------------------ | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| tableContainer | styled-components style object | false | - | Outer table container | +| table | styled-components style object | false | - | Table component | +| thead | styled-components style object | false | - | Table header component | +| tbody | styled-components style object | false | - | Table body component | +| tr | object | false | - | Table rows - the object can contain the following keys `header`, `filter`, `body`, each of whose values is a styled-components style object | +| th | styled-components style object | false | - | Table header columns | +| td | object | false | - | Table columns - the object contain the following keys `filter`, `body` whose value is a styled-components style object | +| toolbar | object | false | - | Keys `container` and `row` which are styled-components style object and `item` which is an object with keys that are the names of the respective items (as defined in the config) and the value is a styled-components style object | +| pagination | object | false | - | Keys `container` - a styled-components style object and `item` - same as above toolbar item | +| filter | object | false | - | Each key is the name of the column and the value is the styled-components style object | +| body | object | false | - | Same as `filter` (above) | ## License + 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 +[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/demo/src/index.js b/demo/src/index.js index 22b41c8..bf01e1c 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -12,7 +12,7 @@ import './css/styles.css'; const store = configureStore(config); -const Demo = () => +const Demo = () => (
+); render( diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js index d3dd6ba..56a2513 100644 --- a/demo/src/schema/basic.js +++ b/demo/src/schema/basic.js @@ -137,7 +137,7 @@ export default { label: 'Delete', indexField: '@id', thunk: ( payload ) => ( dispatch, getState ) => { - confirm("Are your sure you want to delete the selected items?") + confirm('Are your sure you want to delete the selected items?') ? console.log('delete items', getState()) : console.log(false); @@ -211,7 +211,7 @@ export default { id: '@id' }, thunk: ( payload ) => ( dispatch, getState ) => { - confirm("Are your sure you want to delete this page?") + confirm('Are your sure you want to delete this page?') ? console.log('delete', getState()) : console.log(false); diff --git a/demo/src/schema/index.js b/demo/src/schema/index.js index 3524b97..63df699 100644 --- a/demo/src/schema/index.js +++ b/demo/src/schema/index.js @@ -2,9 +2,9 @@ import basic from './basic'; export default [ { - title: "Basic Table", - id: "basic-table", - className: "mb-4", + title: 'Basic Table', + id: 'basic-table', + className: 'mb-4', config: basic } ] diff --git a/nwb.config.js b/nwb.config.js index a7e1c20..cf35913 100644 --- a/nwb.config.js +++ b/nwb.config.js @@ -9,4 +9,4 @@ module.exports = { } } } -} +}; diff --git a/package-lock.json b/package-lock.json index 91a8c09..02b5ca4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@flipbyte/redux-datatable", - "version": "0.2.0", + "version": "0.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -31,9 +31,9 @@ } }, "@babel/types": { - "version": "7.3.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.4.tgz", - "integrity": "sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.0.tgz", + "integrity": "sha512-aPvkXyU2SPOnztlgo8n9cEiXW755mgyvueUPcpStqdzoSPm0fjO0vQBjLkt3JKJW7ufikfcnMTTPsN1xaTsBPA==", "dev": true, "requires": { "esutils": "^2.0.2", @@ -7964,9 +7964,9 @@ } }, "memoize-one": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz", - "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz", + "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==", "dev": true }, "memory-fs": { @@ -9882,15 +9882,15 @@ } }, "react": { - "version": "16.8.4", - "resolved": "https://registry.npmjs.org/react/-/react-16.8.4.tgz", - "integrity": "sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==", + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", + "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.4" + "scheduler": "^0.13.6" } }, "react-deep-force-update": { @@ -9900,15 +9900,15 @@ "dev": true }, "react-dom": { - "version": "16.8.4", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.4.tgz", - "integrity": "sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==", + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", + "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.4" + "scheduler": "^0.13.6" } }, "react-is": { @@ -10730,9 +10730,9 @@ "dev": true }, "scheduler": { - "version": "0.13.4", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.4.tgz", - "integrity": "sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==", + "version": "0.13.6", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", + "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", "dev": true, "requires": { "loose-envify": "^1.1.0", @@ -11602,9 +11602,9 @@ } }, "styled-components": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz", - "integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz", + "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==", "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", @@ -11612,7 +11612,7 @@ "@emotion/unitless": "^0.7.0", "babel-plugin-styled-components": ">= 1", "css-to-react-native": "^2.2.2", - "memoize-one": "^4.0.0", + "memoize-one": "^5.0.0", "prop-types": "^15.5.4", "react-is": "^16.6.0", "stylis": "^3.5.0", diff --git a/package.json b/package.json index 23c9b37..1e5a7b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@flipbyte/redux-datatable", - "version": "0.2.0", + "version": "0.2.1", "description": "React-Redux data table", "main": "lib/index.js", "module": "es/index.js", @@ -20,13 +20,13 @@ "test:watch": "nwb test-react --server" }, "peerDependencies": { - "react": "^16.8.4", - "react-dom": "^16.8.4", + "react": "^16.8.6", + "react-dom": "^16.8.6", "rxjs": "^6.4.0", "prop-types": "^15.6.2", "react-redux": "^6.0.1", "redux": "^4.0.1", - "styled-components": "^4.1.3" + "styled-components": "^4.2.0" }, "dependencies": { "lodash": ">=4.17.10", @@ -44,13 +44,13 @@ "bootstrap": "^4.3.1", "nwb": "0.23.x", "path-to-regexp": "^3.0.0", - "react": "^16.8.4", - "react-dom": "^16.8.4", + "react": "^16.8.6", + "react-dom": "^16.8.6", "react-redux": "^6.0.1", "redux": "^4.0.1", "redux-logger": "^3.0.6", "rxjs": "^6.4.0", - "styled-components": "^4.1.3" + "styled-components": "^4.2.0" }, "author": "", "homepage": "", diff --git a/src/Renderer.js b/src/Renderer.js index 42ebb51..4565481 100644 --- a/src/Renderer.js +++ b/src/Renderer.js @@ -50,7 +50,7 @@ const getRenderers = ( ofType ) => renderers[ofType] || {}; const Renderer = ({ ofType, forItem, ...props }) => { const renderers = getRenderers(ofType); const Renderer = renderers[forItem] || renderers['default']; - return -} + return ; +}; export default Renderer; diff --git a/src/Renderer/Body/Actions.js b/src/Renderer/Body/Actions.js index b186f7a..ccfc655 100644 --- a/src/Renderer/Body/Actions.js +++ b/src/Renderer/Body/Actions.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import React, { Component } from 'react'; import { deleteData } from '../../actions'; import { withTableConfig } from '../../TableProvider'; -import { paramsResolver, prepareActionPayload } from '../../utils' +import { paramsResolver, prepareActionPayload } from '../../utils'; import Button from '../../components/Button'; const Actions = ({ diff --git a/src/Renderer/Body/Date.js b/src/Renderer/Body/Date.js index 27f05cc..71eb4a8 100644 --- a/src/Renderer/Body/Date.js +++ b/src/Renderer/Body/Date.js @@ -1,7 +1,6 @@ import _ from 'lodash'; import Time from 'react-pure-time'; import React, { Component } from 'react'; -import { shouldUpdate } from '../../utils'; const Date = ({ data, @@ -9,6 +8,6 @@ const Date = ({ colConfig: { name, textAlign, format } }) => (