From 934b626e9ee188322786000d434b602de29d79e9 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Wed, 27 Mar 2019 16:35:39 +0530
Subject: [PATCH 01/12] Removed redundant code

---
 src/css/table.css | 196 ----------------------------------------------
 src/index.js      |   1 -
 2 files changed, 197 deletions(-)
 delete mode 100755 src/css/table.css

diff --git a/src/css/table.css b/src/css/table.css
deleted file mode 100755
index 2ac28d4..0000000
--- a/src/css/table.css
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
-  flutter-react-data-table
-*/
-
-label.limiter {
-    display: inline-flex;
-    line-height: 30px;
-}
-
-label.limiter select {
-    width: 50%;
-    margin-right: 10px;
-}
-.flutter-table-loader {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-    opacity: 0.7;
-    background: #fff;
-    display: none;
-}
-
-.flutter-table-loader.show {
-    display: block;
-}
-
-.flutter-table-container {
-  position: relative;
-  display: block;
-  width: 100%;
-  overflow: auto;
-  border: 0;
-}
-
-
-/**** new table css ******/
-.flutter-table {
-    overflow: hidden;
-  table-layout: fixed;
-  width: 100%;
-  /* max-width: 100%; */
-  background-color: transparent;
-  border-collapse: collapse;
-}
-
-.flutter-table-head-container-inner {
-    border-bottom: 1px solid #ddd;
-}
-
-.flutter-table-head-container {
-    overflow: hidden;
-    background: #f4f5f8;
-}
-
-.flutter-table-body-container {
-    overflow: auto;
-    position: relative;
-}
-
-.flutter-table-head-row,
-.flutter-table-body-row,
-.flutter-table-body-container.col-xs-12 {
-    clear: both;
-}
-
-.flutter-table-body-row {
-    position: absolute;
-    left: 0;
-    border-bottom: 1px solid #ddd;
-}
-
-.flutter-table-row-item {
-    float: left;
-    padding: 10px 5px;
-    overflow: hidden;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: middle;
-}
-
-.flutter-table-body-row .flutter-table-row-item {
-    height: 40px;
-}
-
-.flutter-table-head-row.headers .flutter-table-row-item {
-  font-weight: bold;
-  text-align: center;
-  border-bottom: none !important;
-  cursor: pointer;
-  color: #167495;
-  border-top: none;
-  vertical-align: bottom;
-}
-
-.flutter-table-header-item.sortable a {
-  white-space: nowrap;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.flutter-table-head-row.headers .flutter-table-row-item button {
-  display: block;
-  border: none;
-  background: none;
-  padding: 0;
-}
-
-.flutter-table.table-striped .flutter-table-body-row.odd {
-  background-color: #f9f9f9;
-}
-
-.flutter-table .sort-caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 0.3em;
-  border: 0;
-  content: "";
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-}
-
-.flutter-table .asc .sort-caret {
-  vertical-align: baseline;
-  border-top: none;
-  border-bottom: 4px solid #000000;
-}
-
-.flutter-table .desc .sort-caret {
-  vertical-align: super;
-  border-top: 4px solid #000000;
-  border-bottom: none;
-}
-
-.flutter-table .string-cell,
-.flutter-table .uri-cell,
-.flutter-table .email-cell {
-  text-align: left;
-}
-
-.flutter-table .date-cell,
-.flutter-table .time-cell,
-.flutter-table .datetime-cell,
-.flutter-table .number-cell,
-.flutter-table .integer-cell,
-.flutter-table .percent-cell {
-  text-align: right;
-}
-
-.flutter-table .boolean-cell {
-  text-align: center;
-}
-
-.flutter-table .select-cell {
-  text-align: center;
-}
-
-.flutter-table .flutter-table-body-row .flutter-table-row-item .badge {
-    width: 100%
-}
-
-/* .flutter-table .flutter-table-row-item > input {
-    min-width: 100px;
-} */
-
-.flutter-table-body thead .headers {
-    visibility: collapse;
-}
-
-/* .flutter-table-body {
-    overflow-y: scroll;
-} */
-
-.flutter-table-body-inner {
-    position: relative;
-}
-
-.flutter-table-body-inner > table {
-    position: absolute;
-}
-
-.flutter-table-outer-container .active-columns .dropdown-menu .dropdown-item {
-    padding: 5px 10px;
-}
-
-.flutter-table-outer-container .active-columns .dropdown-menu .dropdown-item > input {
-    margin-right: 10px;
-}
-
-.page-item.active .page-link {
-    background-color: #167495;
-    border-color: #167495;
-}
diff --git a/src/index.js b/src/index.js
index cb84270..5026327 100755
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,6 @@ import * as epics from './epics';
 import TableProvider, { TableConsumer, withTableConfig } from './TableProvider';
 import * as actions from './actions';
 import * as utils from './utils';
-import './css/table.css';
 
 export { TableProvider, TableConsumer, withTableConfig, actions, utils, reducer, epics }
 export default ReduxDatatable;

From b98f1c4b2ade30e72ca8683e66920d7978cd3e5a Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Wed, 27 Mar 2019 16:45:12 +0530
Subject: [PATCH 02/12] Fixed styled-components generating several classes.

---
 src/Datatable/Styles/Table/Body.js   | 5 +++--
 src/Datatable/Styles/Table/Cell.js   | 5 +++--
 src/Datatable/Styles/Table/Header.js | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/Datatable/Styles/Table/Body.js b/src/Datatable/Styles/Table/Body.js
index dcd04be..612d4fa 100644
--- a/src/Datatable/Styles/Table/Body.js
+++ b/src/Datatable/Styles/Table/Body.js
@@ -11,9 +11,10 @@ const TableBody = styled.div `
     overflow-y: scroll;
 `
 
-export const TableBodyInner = styled.div `
+export const TableBodyInner = styled.div.attrs(({ width = '100%' }) => ({
+    style: { width }
+})) `
     position: relative;
-    width: ${props => props.width || '100%'};
     border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
     ${props => props.height && css `
         height: ${props.height}
diff --git a/src/Datatable/Styles/Table/Cell.js b/src/Datatable/Styles/Table/Cell.js
index 81fdd92..a1234b4 100644
--- a/src/Datatable/Styles/Table/Cell.js
+++ b/src/Datatable/Styles/Table/Cell.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-const TableCell = styled.div `
+const TableCell = styled.div.attrs(({ width }) => ({
+    style: { width }
+})) `
     float: left;
     padding: 10px 5px;
     overflow: hidden;
@@ -9,7 +11,6 @@ const TableCell = styled.div `
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: middle;
-    width: ${props => props.width || '0px'};
     font-size: ${props => props.fontSize || '14px'};
 
     ${props => props.header && css `
diff --git a/src/Datatable/Styles/Table/Header.js b/src/Datatable/Styles/Table/Header.js
index 1af96a1..3604103 100644
--- a/src/Datatable/Styles/Table/Header.js
+++ b/src/Datatable/Styles/Table/Header.js
@@ -8,8 +8,9 @@ const TableHeader = styled.div `
     overflow: hidden;
 `
 
-export const TableHeaderInner = styled.div `
-    width: ${props => props.width || '100%'};
+export const TableHeaderInner = styled.div.attrs(({ width = '100%' }) => ({
+    style: { width }
+})) `
     border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
 `
 

From 0396fb35ab339b5d6d0b89e340737cae50b49e8a Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Wed, 27 Mar 2019 19:25:48 +0530
Subject: [PATCH 03/12] Table styling

---
 src/Datatable/Pagination/Limiter.js     | 13 +++---
 src/Datatable/Renderer/Filter/Date.js   |  4 +-
 src/Datatable/Renderer/Filter/Number.js |  4 +-
 src/Datatable/Renderer/Filter/String.js |  2 +-
 src/Datatable/Styles/Container.js       |  5 +++
 src/Datatable/Styles/Elements.js        | 55 +++++++++++++++++++++++++
 src/Datatable/Styles/Pagination.js      |  2 +-
 src/Datatable/Styles/Row.js             |  1 +
 src/Datatable/Styles/Table/Cell.js      | 23 +++--------
 src/Datatable/Styles/Toolbar.js         |  2 +-
 src/Datatable/Styles/index.js           |  4 +-
 src/Datatable/Table.js                  | 33 ++++-----------
 src/createTable.js                      | 12 +++++-
 13 files changed, 101 insertions(+), 59 deletions(-)
 create mode 100644 src/Datatable/Styles/Elements.js

diff --git a/src/Datatable/Pagination/Limiter.js b/src/Datatable/Pagination/Limiter.js
index 41f820f..4e77892 100644
--- a/src/Datatable/Pagination/Limiter.js
+++ b/src/Datatable/Pagination/Limiter.js
@@ -1,23 +1,24 @@
 import React from 'react';
 import PropTypes from "prop-types";
 import { SET_LIMIT } from '../../actions';
+import Styles from '../Styles';
 
 export const TYPE_LIMITER = 'limiter';
 
-const Limiter = ({ options, limit, action, default: defaultLimit }) => {
+const Limiter = ({ options, limit, action, style, default: defaultLimit }) => {
     const setLimit = ( limit ) => action(SET_LIMIT)({ limit });
     return (
-        <label className="limiter d-flex text-nowrap">
-            <select
-                className="form-control input-sm"
+        <Styles.Elements.Label flex noWrap>
+            <Styles.Elements.Select
+                width="50%"
                 id="limiter"
                 value={ limit || defaultLimit }
                 onChange={ ( event ) => setLimit(event.target.value) }>
                 { options.map( (option, index) =>
                     <option key={ index } value={ option }>{ option !== 0 ? option : 'All' }</option>
                 ) }
-            </select> per page
-        </label>
+            </Styles.Elements.Select> per page
+        </Styles.Elements.Label>
     );
 }
 
diff --git a/src/Datatable/Renderer/Filter/Date.js b/src/Datatable/Renderer/Filter/Date.js
index c06d783..6370c63 100644
--- a/src/Datatable/Renderer/Filter/Date.js
+++ b/src/Datatable/Renderer/Filter/Date.js
@@ -31,7 +31,7 @@ const applyFilter = ( key, filterer, event ) => {
 const Date = ({ name, value = [], filterer }) =>
     <Fragment>
         <Styles.Row padding="0 0 5px">
-            <input
+            <Styles.Elements.Input
                 type="date"
                 name={ name }
                 value={ value[0] || '' }
@@ -39,7 +39,7 @@ const Date = ({ name, value = [], filterer }) =>
                 placeholder="From" />
         </Styles.Row>
         <Styles.Row>
-            <input
+            <Styles.Elements.Input
                 type="date"
                 name={ name }
                 value={ value[1] || '' }
diff --git a/src/Datatable/Renderer/Filter/Number.js b/src/Datatable/Renderer/Filter/Number.js
index 47f2ee2..d9492d5 100644
--- a/src/Datatable/Renderer/Filter/Number.js
+++ b/src/Datatable/Renderer/Filter/Number.js
@@ -31,7 +31,7 @@ const applyFilter = ( key, filterer, event ) => {
 const Number = ({ name, value = [], filterer }) =>
     <Fragment>
         <Styles.Row padding="0 0 5px">
-            <input
+            <Styles.Elements.Input
                 type="number"
                 name={ name }
                 onChange={ applyFilter.bind(this, 0, filterer) }
@@ -39,7 +39,7 @@ const Number = ({ name, value = [], filterer }) =>
                 placeholder="From" />
         </Styles.Row>
         <Styles.Row>
-            <input
+            <Styles.Elements.Input
                 type="number"
                 name={ name }
                 value={ value[1] || ''}
diff --git a/src/Datatable/Renderer/Filter/String.js b/src/Datatable/Renderer/Filter/String.js
index 0f75b77..160ba28 100644
--- a/src/Datatable/Renderer/Filter/String.js
+++ b/src/Datatable/Renderer/Filter/String.js
@@ -17,7 +17,7 @@ const applyFilter = ( filterer, event ) => {
 };
 
 const String = ({ name, value = '', filterer }) =>
-    <input
+    <Styles.Elements.Input
         name={ name }
         value={ value }
         onChange={ applyFilter.bind(this, filterer) } />
diff --git a/src/Datatable/Styles/Container.js b/src/Datatable/Styles/Container.js
index f2002b5..19dccae 100644
--- a/src/Datatable/Styles/Container.js
+++ b/src/Datatable/Styles/Container.js
@@ -5,6 +5,11 @@ const Container = styled.div `
     width: 100%;
     margin-right: auto;
     margin-left: auto;
+    font-family: ${props =>
+        props.fontFamily ||
+        `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`
+    };
 `
 
 export default Container;
diff --git a/src/Datatable/Styles/Elements.js b/src/Datatable/Styles/Elements.js
new file mode 100644
index 0000000..9ab0ccc
--- /dev/null
+++ b/src/Datatable/Styles/Elements.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const formControl = ({
+    backgroundColor,
+    border,
+    borderRadius,
+    fontSize,
+    color,
+    padding,
+    focusShadow,
+    focusBorderColor
+}) => css `
+    display: block;
+    width: 100%;
+    font-weight: 400;
+    line-height: 1.5;
+    background-color: ${backgroundColor || '#fff'};
+    background-clip: padding-box;
+    border: ${border || '1px solid #ebebeb'};
+    border-radius: ${borderRadius || 0};
+    font-size: ${fontSize || '14px'};
+    color: ${color || '#495057'};
+    padding: ${padding || '10px 14px'};
+
+    &:focus {
+        box-shadow: ${focusShadow || 'none'};
+        border-color: ${focusBorderColor || '#80bdff'}
+    }
+`
+
+const Input = styled.input `
+    ${props => formControl(props)}
+`
+
+const Select = styled.select `
+    ${props => formControl(props)}
+    width: ${props => props.width || '100%'};
+`
+
+const Label = styled.label `
+    display: inline-block;
+    margin-bottom: 0.5rem;
+
+    ${({ flex, noWrap}) => css `
+        ${flex && `display: flex`};
+        ${noWrap && `white-space: nowrap`};
+    `}
+`
+
+export default {
+    Input,
+    Select,
+    Label
+};
diff --git a/src/Datatable/Styles/Pagination.js b/src/Datatable/Styles/Pagination.js
index 114bcc9..ef9afca 100644
--- a/src/Datatable/Styles/Pagination.js
+++ b/src/Datatable/Styles/Pagination.js
@@ -6,7 +6,7 @@ export const PaginationItem = styled.div `
     min-width: ${props => props.width || '200px'};
     float: ${props => props.right ? 'right' : 'left'};
     text-align: ${props => props.textAlign || 'left'};
-    font-size: ${props => props.fontSize || '14px'};
+    font-size: ${props => props.fontSize || '15px'};
 `
 
 export const PaginationList = styled.div `
diff --git a/src/Datatable/Styles/Row.js b/src/Datatable/Styles/Row.js
index 89d37ac..13751ef 100644
--- a/src/Datatable/Styles/Row.js
+++ b/src/Datatable/Styles/Row.js
@@ -9,6 +9,7 @@ const Row = styled.div.attrs(({ top }) => ({
     flex: 1 0 auto;
     flex-direction: row;
     flex-wrap: wrap;
+    width: 100%;
     padding: ${props => props.padding || 0};
     height: ${props => props.height || 'auto'};
     position: ${props => props.position || 'relative'};
diff --git a/src/Datatable/Styles/Table/Cell.js b/src/Datatable/Styles/Table/Cell.js
index a1234b4..8f29e27 100644
--- a/src/Datatable/Styles/Table/Cell.js
+++ b/src/Datatable/Styles/Table/Cell.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-const TableCell = styled.div.attrs(({ width }) => ({
-    style: { width }
+const TableCell = styled.div.attrs(({ width: maxWidth }) => ({
+    style: { maxWidth }
 })) `
+    box-sizing: border-box;
+    margin: auto;
     float: left;
     padding: 10px 5px;
     overflow: hidden;
@@ -11,6 +13,8 @@ const TableCell = styled.div.attrs(({ width }) => ({
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: middle;
+    width: 100%;
+    position: relative;
     font-size: ${props => props.fontSize || '14px'};
 
     ${props => props.header && css `
@@ -22,21 +26,6 @@ const TableCell = styled.div.attrs(({ width }) => ({
     ${props => props.sortable && css `
         cursor: pointer;
     `}
-
-    ${props => props.search && css `
-        & input {
-            border-radius: ${props => props.inputRadius || 0};
-            color: ${props => props.inputColor || '#495057'};
-            border: ${props => props.inputBorder || '1px solid #ebebeb'};
-            padding: ${props => props.inputPadding || '10px 14px'};
-            width: ${props => props.inputWidth || '100%'};
-
-            &:focus {
-                box-shadow: ${props => props.inputFocusShadow || 'none'};
-                border-color: ${props => props.inputFocusBorderColor || '#80bdff'}
-            }
-        }
-    `}
 `
 
 export default TableCell;
diff --git a/src/Datatable/Styles/Toolbar.js b/src/Datatable/Styles/Toolbar.js
index cbc2f94..8a1fa63 100644
--- a/src/Datatable/Styles/Toolbar.js
+++ b/src/Datatable/Styles/Toolbar.js
@@ -10,7 +10,7 @@ export const ToolbarItem = styled.div `
     display: block;
     width: ${props => props.width || '100px'};
     float: ${props => props.right ? 'right' : 'left'};
-    font-size: ${props => props.fontSize || '14px'};
+    font-size: ${props => props.fontSize || '15px'};
 `
 
 const Toolbar = styled.div `
diff --git a/src/Datatable/Styles/index.js b/src/Datatable/Styles/index.js
index aadbb96..3f8f6ae 100644
--- a/src/Datatable/Styles/index.js
+++ b/src/Datatable/Styles/index.js
@@ -7,6 +7,7 @@ import TableHeader, { TableHeaderInner } from './Table/Header';
 import TableBody, { TableBodyInner } from './Table/Body';
 import TableCell from './Table/Cell';
 import SortCaret from './SortCaret';
+import Elements from './Elements';
 
 export default {
     Container,
@@ -24,5 +25,6 @@ export default {
     TableCell,
     TableBody,
     TableBodyInner,
-    SortCaret
+    SortCaret,
+    Elements
 }
diff --git a/src/Datatable/Table.js b/src/Datatable/Table.js
index 908b7f6..f650b16 100644
--- a/src/Datatable/Table.js
+++ b/src/Datatable/Table.js
@@ -14,9 +14,9 @@ class Table extends Component {
     constructor(props) {
         super(props);
 
-        this.width = this.calculateWidth(this.props.config.columns);
+        this.width = this.calculateWidth(this.props.columns);
         this.minWidth = this.width;
-        this.rowHeight = this.props.config.rowHeight || 39;
+        this.rowHeight = this.props.rowHeight || 39;
         this.state = { top: 0 };
         this.handleScroll = this.handleScroll.bind(this);
         this.updateTableDimensions = this.updateTableDimensions.bind(this);
@@ -56,8 +56,7 @@ class Table extends Component {
         this.computedTableWidth = this.minWidth > tableBodyEl.clientWidth
             ? this.minWidth
             : tableBodyEl.clientWidth;
-
-        const { columns, allColumns, checkedColumns, stateUpdater } = this.props.config;
+        const { columns, allColumns, checkedColumns, stateUpdater } = this.props;
         const totalColumnsWidth = checkedColumns.reduce((result, columnIndex) => (
             result + (allColumns[columnIndex].width || 0)
         ), 0);
@@ -89,7 +88,7 @@ class Table extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        this.updateTableOnColumnVisibilityChange(prevProps.config.columns, this.props.config.columns)
+        this.updateTableOnColumnVisibilityChange(prevProps.columns, this.props.columns)
     }
 
     componentWillUnmount() {
@@ -100,7 +99,7 @@ class Table extends Component {
     getExtraBodyRowProps() {
         const {
             data,
-            config: { columns }
+            columns
         } = this.props;
         return columns.reduce((result = {}, { name, extraData }) => {
             result[name] = extraData
@@ -121,15 +120,7 @@ class Table extends Component {
     }
 
     render() {
-        const {
-            children,
-            action,
-            thunk,
-            data,
-            filterable,
-            headers,
-            config: { columns, height },
-        } = this.props;
+        const { children, action, thunk, data, filterable, headers, columns, height } = this.props;
         const { items = [], query = {} } = data;
         const { pointerEvents, top } = this.state;
         const bodyExtraData = this.getExtraBodyRowProps();
@@ -202,14 +193,4 @@ class Table extends Component {
     }
 }
 
-export default withTableConfig({
-    name: 'name',
-    height: 'height',
-    columns: 'columns',
-    minWidth: 'minWidth',
-    rowHeight: 'rowHeight',
-    allColumns: 'allColumns',
-    checkedColumns: 'checkedColumns',
-    reducerName: 'reducerName',
-    stateUpdater: 'updateTableState'
-})(Table);
+export default Table;
diff --git a/src/createTable.js b/src/createTable.js
index ef3680c..fa97e63 100755
--- a/src/createTable.js
+++ b/src/createTable.js
@@ -60,7 +60,7 @@ class ReduxDatatable extends Component {
     render() {
         const { name, config, tableData, reducerName, action, thunk } = this.props;
         const { columns: allColumns, ...otherConfig } = config;
-        const { toolbar = [], pagination = {}, filterable, headers } = config;
+        const { toolbar = [], pagination = {}, filterable, headers, height, rowHeight, style } = config;
         const tableConfig = {
             ...otherConfig,
             allColumns,
@@ -82,7 +82,7 @@ class ReduxDatatable extends Component {
         const { query } = tableData;
         return (
             <TableProvider config={{ reducerName, ...tableConfig }}>
-                <Datatable.Container>
+                <Datatable.Container fontFamily={ style && style.fontFamily }>
                     <Datatable.Toolbar items={ toolbar } render={(ToolbarItem, { state, ...itemConfig }) =>
                         <ToolbarItem
                             { ...this.getPropsWithState({
@@ -108,6 +108,14 @@ class ReduxDatatable extends Component {
                         data={ tableData }
                         action={ action }
                         thunk={ thunk }
+                        name={ name }
+                        height={ height }
+                        columns={ tableConfig.columns }
+                        rowHeight={ rowHeight }
+                        allColumns={ tableConfig.allColumns }
+                        checkedColumns={ tableConfig.checkedColumns }
+                        reducerName={ reducerName }
+                        stateUpdater={ this.updateState }
                     />
                     <Datatable.Pagination
                         position="bottom"

From 3d8a08087f792ce7b6f0866f64f78aade55279d9 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Thu, 28 Mar 2019 18:22:48 +0530
Subject: [PATCH 04/12] Updated styles

---
 demo/src/schema/basic.js                      | 13 ++-
 src/Datatable/Pagination/Limiter.js           |  4 +-
 src/Datatable/Pagination/Pages.js             | 20 ++--
 src/Datatable/Renderer/Filter/Date.js         |  4 +-
 src/Datatable/Renderer/Filter/Number.js       |  4 +-
 src/Datatable/Renderer/Filter/String.js       |  2 +-
 src/Datatable/Styles/Elements/Button.js       | 58 ++++++++++++
 src/Datatable/Styles/Elements/Dropdown.js     | 94 +++++++++++++++++++
 .../Styles/{Elements.js => Elements/Field.js} | 15 +--
 src/Datatable/Styles/Elements/Label.js        | 14 +++
 src/Datatable/Styles/Elements/index.js        | 13 +++
 src/Datatable/Styles/Row.js                   |  4 -
 src/Datatable/Styles/Table/Cell.js            |  9 +-
 src/Datatable/Toolbar/Columns.js              | 13 ++-
 src/Datatable/Toolbar/MassActions.js          | 23 +++--
 src/Datatable/Toolbar/ResetFilters.js         |  6 +-
 16 files changed, 237 insertions(+), 59 deletions(-)
 create mode 100644 src/Datatable/Styles/Elements/Button.js
 create mode 100644 src/Datatable/Styles/Elements/Dropdown.js
 rename src/Datatable/Styles/{Elements.js => Elements/Field.js} (80%)
 create mode 100644 src/Datatable/Styles/Elements/Label.js
 create mode 100644 src/Datatable/Styles/Elements/index.js

diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
index d6dedb7..8c1d849 100644
--- a/demo/src/schema/basic.js
+++ b/demo/src/schema/basic.js
@@ -69,7 +69,11 @@ export default {
             visible: true,
             style: {
                 right: false,
-                width: '100px'
+                width: '100px',
+                button: {
+                    background: '#fff',
+                    color: '#6c757d'
+                }
             }
         }, {
             type: 'reset-filters',
@@ -82,7 +86,11 @@ export default {
             visible: true,
             state: false,
             style: {
-                right: true
+                right: true,
+                button: {
+                    background: '#fff',
+                    color: '#6c757d'
+                }
             }
         }/*, {
             label: 'NACTIONS',
@@ -184,7 +192,6 @@ export default {
         label: 'ID',
         type: 'number',
         name: 'pageId',
-        sortable: true,
         width: 150,
         filterable: true,
         sortable: true,
diff --git a/src/Datatable/Pagination/Limiter.js b/src/Datatable/Pagination/Limiter.js
index 4e77892..1b9c695 100644
--- a/src/Datatable/Pagination/Limiter.js
+++ b/src/Datatable/Pagination/Limiter.js
@@ -9,7 +9,7 @@ const Limiter = ({ options, limit, action, style, default: defaultLimit }) => {
     const setLimit = ( limit ) => action(SET_LIMIT)({ limit });
     return (
         <Styles.Elements.Label flex noWrap>
-            <Styles.Elements.Select
+            <Styles.Elements.Field.Select
                 width="50%"
                 id="limiter"
                 value={ limit || defaultLimit }
@@ -17,7 +17,7 @@ const Limiter = ({ options, limit, action, style, default: defaultLimit }) => {
                 { options.map( (option, index) =>
                     <option key={ index } value={ option }>{ option !== 0 ? option : 'All' }</option>
                 ) }
-            </Styles.Elements.Select> per page
+            </Styles.Elements.Field.Select> per page
         </Styles.Elements.Label>
     );
 }
diff --git a/src/Datatable/Pagination/Pages.js b/src/Datatable/Pagination/Pages.js
index 7fa93dd..ffbcccd 100644
--- a/src/Datatable/Pagination/Pages.js
+++ b/src/Datatable/Pagination/Pages.js
@@ -24,22 +24,22 @@ const Pages = ({ page, total, action }) => {
     const setPage = ( page ) =>  action(SET_PAGE)({ page });
     return (
         <Styles.PaginationList>
-            <Styles.PaginationListItem
-                onClick={ setPage.bind(this, 1) } disabled={ page == 1 } >First</Styles.PaginationListItem>
-            <Styles.PaginationListItem
-                onClick={ setPage.bind(this, page - 1) } disabled={ page < 2 } >Previous</Styles.PaginationListItem>
+            <Styles.Elements.Button
+                onClick={ setPage.bind(this, 1) } disabled={ page == 1 } >First</Styles.Elements.Button>
+            <Styles.Elements.Button
+                onClick={ setPage.bind(this, page - 1) } disabled={ page < 2 } >Previous</Styles.Elements.Button>
             { getPages(page, total).map( (link, index) =>
-                <Styles.PaginationListItem
+                <Styles.Elements.Button
                     key={ index }
                     onClick={ setPage.bind(this, link) }
                     active={ page === link }
                     disabled={ page === link }
-                >{ link }</Styles.PaginationListItem>
+                >{ link }</Styles.Elements.Button>
             ) }
-            <Styles.PaginationListItem
-                onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Styles.PaginationListItem>
-            <Styles.PaginationListItem
-                onClick={ setPage.bind(this, total) } disabled={ page == total }>Last</Styles.PaginationListItem>
+            <Styles.Elements.Button
+                onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Styles.Elements.Button>
+            <Styles.Elements.Button
+                onClick={ setPage.bind(this, total) } disabled={ page == total }>Last</Styles.Elements.Button>
         </Styles.PaginationList>
     );
 }
diff --git a/src/Datatable/Renderer/Filter/Date.js b/src/Datatable/Renderer/Filter/Date.js
index 6370c63..138c2f0 100644
--- a/src/Datatable/Renderer/Filter/Date.js
+++ b/src/Datatable/Renderer/Filter/Date.js
@@ -31,7 +31,7 @@ const applyFilter = ( key, filterer, event ) => {
 const Date = ({ name, value = [], filterer }) =>
     <Fragment>
         <Styles.Row padding="0 0 5px">
-            <Styles.Elements.Input
+            <Styles.Elements.Field.Input
                 type="date"
                 name={ name }
                 value={ value[0] || '' }
@@ -39,7 +39,7 @@ const Date = ({ name, value = [], filterer }) =>
                 placeholder="From" />
         </Styles.Row>
         <Styles.Row>
-            <Styles.Elements.Input
+            <Styles.Elements.Field.Input
                 type="date"
                 name={ name }
                 value={ value[1] || '' }
diff --git a/src/Datatable/Renderer/Filter/Number.js b/src/Datatable/Renderer/Filter/Number.js
index d9492d5..f8502e1 100644
--- a/src/Datatable/Renderer/Filter/Number.js
+++ b/src/Datatable/Renderer/Filter/Number.js
@@ -31,7 +31,7 @@ const applyFilter = ( key, filterer, event ) => {
 const Number = ({ name, value = [], filterer }) =>
     <Fragment>
         <Styles.Row padding="0 0 5px">
-            <Styles.Elements.Input
+            <Styles.Elements.Field.Input
                 type="number"
                 name={ name }
                 onChange={ applyFilter.bind(this, 0, filterer) }
@@ -39,7 +39,7 @@ const Number = ({ name, value = [], filterer }) =>
                 placeholder="From" />
         </Styles.Row>
         <Styles.Row>
-            <Styles.Elements.Input
+            <Styles.Elements.Field.Input
                 type="number"
                 name={ name }
                 value={ value[1] || ''}
diff --git a/src/Datatable/Renderer/Filter/String.js b/src/Datatable/Renderer/Filter/String.js
index 160ba28..e156149 100644
--- a/src/Datatable/Renderer/Filter/String.js
+++ b/src/Datatable/Renderer/Filter/String.js
@@ -17,7 +17,7 @@ const applyFilter = ( filterer, event ) => {
 };
 
 const String = ({ name, value = '', filterer }) =>
-    <Styles.Elements.Input
+    <Styles.Elements.Field.Input
         name={ name }
         value={ value }
         onChange={ applyFilter.bind(this, filterer) } />
diff --git a/src/Datatable/Styles/Elements/Button.js b/src/Datatable/Styles/Elements/Button.js
new file mode 100644
index 0000000..2427f47
--- /dev/null
+++ b/src/Datatable/Styles/Elements/Button.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const Button = styled.button `
+    display: inline-block;
+    transition: color 0.15s ease-in-out,
+        background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+    vertical-align: middle;
+    white-space: nowrap;
+    cursor: pointer;
+
+    ${({
+        background = '#6c757d',
+        border = '1px solid #6c757d',
+        fontWeight = 400,
+        lineHeight = 1.5,
+        fontSize = '14px',
+        borderRadius = 0,
+        color = '#fff',
+        padding = '0.375rem 0.75rem',
+        dropdownToggle = false,
+        hover
+    }) => css `
+        background: ${background};
+        border: ${border};
+        font-weight: ${fontWeight};
+        line-height: ${lineHeight};
+        font-size: ${fontSize};
+        border-radius: ${borderRadius};
+        color: ${color};
+        padding: ${padding};
+
+        ${dropdownToggle && `
+            &::after {
+                display: inline-block;
+                width: 0;
+                height: 0;
+                vertical-align: middle;
+                content: '';
+                border-top: 0.3em solid;
+                border-right: 0.3rem solid transparent;
+                border-bottom: 0;
+                border-left: 0.3rem solid transparent;
+                margin-left: 0.255rem;
+            }
+        `}
+
+        ${hover && `
+            &:hover {
+
+            }
+        `}
+    `}
+`;
+
+export default Button;
diff --git a/src/Datatable/Styles/Elements/Dropdown.js b/src/Datatable/Styles/Elements/Dropdown.js
new file mode 100644
index 0000000..06d6088
--- /dev/null
+++ b/src/Datatable/Styles/Elements/Dropdown.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const Container = styled.div `
+    position: relative;
+`
+
+export const Menu = styled.div `
+    position: absolute;
+    top: 100%;
+    z-index: 1000;
+    float: left;
+    min-width: 10rem;
+    text-align: left;
+    list-style: none;
+    background-clip: padding-box;
+
+    ${({
+        padding = '0.375rem 0.75rem',
+        margin,
+        fontSize = '14px',
+        color = '#6c757d',
+        border = '1px solid #6c757d',
+        right = false,
+        backgroundColor = '#fff',
+        borderRadius,
+        hidden
+    }) => css `
+        padding: ${padding};
+        margin: ${margin};
+        font-size: ${fontSize};
+        color: ${color};
+        background-color: ${backgroundColor};
+        border: ${border};
+        border-radius: ${borderRadius};
+        ${hidden
+            ? `display: none`
+            : `display: block`
+        }
+        ${right
+            ? `right: 0`
+            : `left: 0`
+        }
+    `}
+`;
+
+export const Item = styled.div `
+    clear: both;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+
+    ${({
+        padding = '0.375rem 0.75rem',
+        color,
+        fontWeight,
+        hover,
+        isActive,
+        active,
+        isDisabled,
+        disabled
+    }) => css `
+        padding: ${padding};
+        color: ${color};
+        font-weight: ${fontWeight};
+
+        ${hover && `
+            &:hover, &:focus {
+                color: ${hover.color};
+                text-decoration: none;
+                background-color: ${hover.backgroundColor};
+            }
+        `}
+
+        ${isActive && active && `
+            text-decoration: none;
+            color: ${active.color};
+            background-color: ${active.backgroundColor};
+        `}
+
+        ${isDisabled && disabled && `
+            color: ${disabled.color};
+            background-color: transparent;
+        `}
+    `}
+`;
+
+
+export default {
+    Container,
+    Menu,
+    Item
+};
diff --git a/src/Datatable/Styles/Elements.js b/src/Datatable/Styles/Elements/Field.js
similarity index 80%
rename from src/Datatable/Styles/Elements.js
rename to src/Datatable/Styles/Elements/Field.js
index 9ab0ccc..6e99eb9 100644
--- a/src/Datatable/Styles/Elements.js
+++ b/src/Datatable/Styles/Elements/Field.js
@@ -38,18 +38,7 @@ const Select = styled.select `
     width: ${props => props.width || '100%'};
 `
 
-const Label = styled.label `
-    display: inline-block;
-    margin-bottom: 0.5rem;
-
-    ${({ flex, noWrap}) => css `
-        ${flex && `display: flex`};
-        ${noWrap && `white-space: nowrap`};
-    `}
-`
-
 export default {
-    Input,
     Select,
-    Label
-};
+    Input
+}
diff --git a/src/Datatable/Styles/Elements/Label.js b/src/Datatable/Styles/Elements/Label.js
new file mode 100644
index 0000000..c4853f9
--- /dev/null
+++ b/src/Datatable/Styles/Elements/Label.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const Label = styled.label `
+    display: inline-block;
+    margin-bottom: 0.5rem;
+
+    ${({ flex, noWrap }) => css `
+        ${flex && `display: flex`};
+        ${noWrap && `white-space: nowrap`};
+    `}
+`
+
+export default Label;
diff --git a/src/Datatable/Styles/Elements/index.js b/src/Datatable/Styles/Elements/index.js
new file mode 100644
index 0000000..fefb81f
--- /dev/null
+++ b/src/Datatable/Styles/Elements/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Label from './Label';
+import Button from './Button';
+import Dropdown from './Dropdown';
+import Field from './Field';
+
+export default {
+    Label,
+    Button,
+    Dropdown,
+    Field
+};
diff --git a/src/Datatable/Styles/Row.js b/src/Datatable/Styles/Row.js
index 13751ef..815de64 100644
--- a/src/Datatable/Styles/Row.js
+++ b/src/Datatable/Styles/Row.js
@@ -4,11 +4,7 @@ import styled, { css } from 'styled-components';
 const Row = styled.div.attrs(({ top }) => ({
     style: { top }
 })) `
-    box-sizing: border-box;
     display: flex;
-    flex: 1 0 auto;
-    flex-direction: row;
-    flex-wrap: wrap;
     width: 100%;
     padding: ${props => props.padding || 0};
     height: ${props => props.height || 'auto'};
diff --git a/src/Datatable/Styles/Table/Cell.js b/src/Datatable/Styles/Table/Cell.js
index 8f29e27..d82b01c 100644
--- a/src/Datatable/Styles/Table/Cell.js
+++ b/src/Datatable/Styles/Table/Cell.js
@@ -4,17 +4,18 @@ import styled, { css } from 'styled-components';
 const TableCell = styled.div.attrs(({ width: maxWidth }) => ({
     style: { maxWidth }
 })) `
-    box-sizing: border-box;
-    margin: auto;
-    float: left;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+    display: flex;
     padding: 10px 5px;
-    overflow: hidden;
     text-align: ${props => props.textAlign || 'center'};
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: middle;
     width: 100%;
     position: relative;
+    overflow: hidden;
     font-size: ${props => props.fontSize || '14px'};
 
     ${props => props.header && css `
diff --git a/src/Datatable/Toolbar/Columns.js b/src/Datatable/Toolbar/Columns.js
index 5dbda90..1c4f2fe 100644
--- a/src/Datatable/Toolbar/Columns.js
+++ b/src/Datatable/Toolbar/Columns.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Button } from 'styled-button-component';
 import { Dropdown, DropdownItem, DropdownMenu } from 'styled-dropdown-component';
+import Styles from '../Styles';
 
 class Columns extends Component {
     constructor(props) {
@@ -55,7 +55,7 @@ class Columns extends Component {
 
     manageEvents(remove = false) {
         var eventUpdater = remove ? document.removeEventListener : document.addEventListener;
-        
+
         ['click', 'touchstart', 'keyup'].forEach( event =>
             eventUpdater(event, this.handleDocumentClick, true)
         );
@@ -79,14 +79,17 @@ class Columns extends Component {
     }
 
     render() {
-        const { config: { allColumns, checkedColumns }} = this.props;
+        const {
+            itemConfig: { style },
+            config: { allColumns, checkedColumns }
+        } = this.props;
         const { open } = this.state;
 
         return (
             <Dropdown>
-                <Button outline noRadius dropdownToggle onClick={ this.toggle }>
+                <Styles.Elements.Button dropdownToggle onClick={ this.toggle } { ...style.button }>
                     Columns
-                </Button>
+                </Styles.Elements.Button>
                 <DropdownMenu hidden={ !open } noRadius>
                     { allColumns.map(({ name, label }, index) =>
                         <DropdownItem key={ index }>
diff --git a/src/Datatable/Toolbar/MassActions.js b/src/Datatable/Toolbar/MassActions.js
index 9120d7d..0f9dc76 100644
--- a/src/Datatable/Toolbar/MassActions.js
+++ b/src/Datatable/Toolbar/MassActions.js
@@ -5,8 +5,11 @@ import { connect } from 'react-redux';
 import { deleteData } from '../../actions';
 import { prepareActionPayload } from '../../utils'
 import { getSelectedKeys, getConfigParam } from '../../utils';
-import { Dropdown, DropdownItem, DropdownMenu } from 'styled-dropdown-component';
-import { Button } from 'styled-button-component';
+import Styles from '../Styles';
+
+const {
+    Elements: { Dropdown, Button }
+} = Styles;
 
 class MassActions extends Component {
     constructor( props ) {
@@ -58,22 +61,22 @@ class MassActions extends Component {
 
     render() {
         const { itemConfig, thunk } = this.props;
-        const { label, options } = itemConfig;
+        const { label, options, style } = itemConfig;
         const { open } = this.state;
 
         return (
-            <Dropdown>
-                <Button outline noRadius dropdownToggle onClick={ this.toggle }>
+            <Dropdown.Container>
+                <Button dropdownToggle onClick={ this.toggle } { ...style.button }>
                     { label }
                 </Button>
-                <DropdownMenu hidden={ !open } noRadius>
+                <Dropdown.Menu hidden={ !open } noRadius>
                     { options.map(({ thunk: cb, ...option }, index) =>
-                        <DropdownItem key={ index } onClick={ cb && thunk.bind(this, cb, { option }) }>
+                        <Dropdown.Item key={ index } onClick={ cb && thunk.bind(this, cb, { option }) }>
                             { option.label }
-                        </DropdownItem>
+                        </Dropdown.Item>
                     )}
-                </DropdownMenu>
-            </Dropdown>
+                </Dropdown.Menu>
+            </Dropdown.Container>
         )
     }
 }
diff --git a/src/Datatable/Toolbar/ResetFilters.js b/src/Datatable/Toolbar/ResetFilters.js
index d046850..a17fad9 100644
--- a/src/Datatable/Toolbar/ResetFilters.js
+++ b/src/Datatable/Toolbar/ResetFilters.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from "prop-types";
-import { Button } from 'styled-button-component';
 import { SET_FILTER } from '../../actions';
+import Styles from '../Styles';
 
 const ResetFilters = ({ itemConfig, action }) => {
     const clearFilter = () => action(SET_FILTER)({ clear: true })
     return (
-        <Button default noRadius onClick={ clearFilter.bind(this) }>
+        <Styles.Elements.Button onClick={ clearFilter.bind(this) }>
             { itemConfig.label || 'Reset Filters' }
-        </Button>
+        </Styles.Elements.Button>
     )
 };
 

From 29678dea8e7f168d99078f45b503da769be27c1e Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 29 Mar 2019 12:04:39 +0530
Subject: [PATCH 05/12] Updated styles

---
 demo/src/css/simple-sidebar.css           |  4 +--
 demo/src/schema/basic.js                  | 24 +++++++++++++++++-
 src/Datatable/Pagination/Pages.js         | 10 ++++++--
 src/Datatable/Renderer/Body/Actions.js    |  9 +++----
 src/Datatable/Styles/Elements/Button.js   | 17 ++++++-------
 src/Datatable/Styles/Elements/Dropdown.js | 31 +++++++++++------------
 src/Datatable/Styles/Elements/Label.js    |  3 +--
 src/Datatable/Styles/Pagination.js        |  5 +++-
 src/Datatable/Styles/Toolbar.js           |  2 +-
 src/Datatable/Toolbar/Columns.js          | 23 +++++++++--------
 src/Datatable/Toolbar/MassActions.js      |  4 +--
 11 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/demo/src/css/simple-sidebar.css b/demo/src/css/simple-sidebar.css
index 69d3ef5..00bcb8d 100644
--- a/demo/src/css/simple-sidebar.css
+++ b/demo/src/css/simple-sidebar.css
@@ -38,7 +38,7 @@ body {
 
 .content {
     position: fixed;
-    overflow: scroll;
+    overflow: hidden;
     height: 100%;
     top: 60px;
 }
@@ -54,7 +54,7 @@ body {
 
     #page-content-wrapper {
         min-width: 0;
-        width: 100%;
+        /* width: 100%; */
         margin-left: 15rem;
     }
 
diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
index 8c1d849..5849b7b 100644
--- a/demo/src/schema/basic.js
+++ b/demo/src/schema/basic.js
@@ -21,6 +21,15 @@ export default {
             position: 20,
             style: {
                 right: true,
+                button: {
+                    background: '#fff',
+                    color: '#6c757d',
+                    border: 'none',
+                    hover: {
+                        color: '#16181b',
+                        backgroundColor: '#f8f9fa'
+                    }
+                }
             }
         }, {
             type: 'resultCount',
@@ -69,7 +78,6 @@ export default {
             visible: true,
             style: {
                 right: false,
-                width: '100px',
                 button: {
                     background: '#fff',
                     color: '#6c757d'
@@ -90,6 +98,9 @@ export default {
                 button: {
                     background: '#fff',
                     color: '#6c757d'
+                },
+                dropdownMenu: {
+                    right: true
                 }
             }
         }/*, {
@@ -244,6 +255,9 @@ export default {
             },
             thunk: ( payload ) => ( dispatch, getState ) => {
                 console.log('edit', payload, getState());
+            },
+            style: {
+                fontSize: '12px'
             }
         }, {
             type: 'action',
@@ -258,6 +272,14 @@ export default {
                     ? console.log('delete', getState())
                     : console.log(false);
 
+            },
+            style: {
+                background: '#dc3545',
+                color: '#fff',
+                fontSize: '12px',
+                hover: {
+                    backgroundColor: '#c82333',
+                }
             }
         }]
     }]
diff --git a/src/Datatable/Pagination/Pages.js b/src/Datatable/Pagination/Pages.js
index ffbcccd..4db14e3 100644
--- a/src/Datatable/Pagination/Pages.js
+++ b/src/Datatable/Pagination/Pages.js
@@ -20,25 +20,31 @@ const getPages = ( currentPage, total ) => {
     return fillRange(left, right);
 }
 
-const Pages = ({ page, total, action }) => {
+const Pages = ({ page, total, action, style }) => {
     const setPage = ( page ) =>  action(SET_PAGE)({ page });
     return (
         <Styles.PaginationList>
             <Styles.Elements.Button
-                onClick={ setPage.bind(this, 1) } disabled={ page == 1 } >First</Styles.Elements.Button>
+                { ...style.button }
+                onClick={ setPage.bind(this, 1) } disabled={ page == 1 }
+            >First</Styles.Elements.Button>
             <Styles.Elements.Button
+                { ...style.button }
                 onClick={ setPage.bind(this, page - 1) } disabled={ page < 2 } >Previous</Styles.Elements.Button>
             { getPages(page, total).map( (link, index) =>
                 <Styles.Elements.Button
                     key={ index }
+                    { ...style.button }
                     onClick={ setPage.bind(this, link) }
                     active={ page === link }
                     disabled={ page === link }
                 >{ link }</Styles.Elements.Button>
             ) }
             <Styles.Elements.Button
+                { ...style.button }
                 onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Styles.Elements.Button>
             <Styles.Elements.Button
+                { ...style.button }
                 onClick={ setPage.bind(this, total) } disabled={ page == total }>Last</Styles.Elements.Button>
         </Styles.PaginationList>
     );
diff --git a/src/Datatable/Renderer/Body/Actions.js b/src/Datatable/Renderer/Body/Actions.js
index 2b8873c..10ec614 100644
--- a/src/Datatable/Renderer/Body/Actions.js
+++ b/src/Datatable/Renderer/Body/Actions.js
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { deleteData } from '../../../actions';
 import { withTableConfig } from '../../../TableProvider';
 import { paramsResolver, prepareActionPayload } from '../../../utils'
-import { Button } from 'styled-button-component';
+import Styles from '../../Styles';
 
 const Actions = ({
     extra,
@@ -13,14 +13,13 @@ const Actions = ({
 }) => (
     <div className="btn-group-sm">
         { items.map(({ thunk: cb, ...item }, index) =>
-            <Button
+            <Styles.Elements.Button
                 key={ index }
-                noRadius
-                sm
                 onClick={ cb && thunk.bind(this, cb, { item, extra }) }
+                { ...item.style }
             >
                 { item.label }
-            </Button>
+            </Styles.Elements.Button>
         )}
     </div>
 );
diff --git a/src/Datatable/Styles/Elements/Button.js b/src/Datatable/Styles/Elements/Button.js
index 2427f47..b20b5d2 100644
--- a/src/Datatable/Styles/Elements/Button.js
+++ b/src/Datatable/Styles/Elements/Button.js
@@ -12,16 +12,16 @@ const Button = styled.button `
     cursor: pointer;
 
     ${({
-        background = '#6c757d',
-        border = '1px solid #6c757d',
+        background = '#fff',
+        border = '1px solid rgba(34,36,38,.15)',
         fontWeight = 400,
         lineHeight = 1.5,
         fontSize = '14px',
         borderRadius = 0,
-        color = '#fff',
+        color = '#6c757d',
         padding = '0.375rem 0.75rem',
         dropdownToggle = false,
-        hover
+        hover = {}
     }) => css `
         background: ${background};
         border: ${border};
@@ -47,11 +47,10 @@ const Button = styled.button `
             }
         `}
 
-        ${hover && `
-            &:hover {
-
-            }
-        `}
+        &:hover {
+            color: ${hover.color || '#fff'};
+            background-color: ${hover.backgroundColor || '#5a6268'};
+        }
     `}
 `;
 
diff --git a/src/Datatable/Styles/Elements/Dropdown.js b/src/Datatable/Styles/Elements/Dropdown.js
index 06d6088..debcee8 100644
--- a/src/Datatable/Styles/Elements/Dropdown.js
+++ b/src/Datatable/Styles/Elements/Dropdown.js
@@ -16,11 +16,11 @@ export const Menu = styled.div `
     background-clip: padding-box;
 
     ${({
-        padding = '0.375rem 0.75rem',
-        margin,
+        padding = '0.5rem 0',
+        margin = '0.125rem 0 0',
         fontSize = '14px',
         color = '#6c757d',
-        border = '1px solid #6c757d',
+        border = '1px solid #ebebeb',
         right = false,
         backgroundColor = '#fff',
         borderRadius,
@@ -50,12 +50,13 @@ export const Item = styled.div `
     white-space: nowrap;
     background-color: transparent;
     border: 0;
+    cursor: pointer;
 
     ${({
-        padding = '0.375rem 0.75rem',
-        color,
+        padding = '0.5rem 1.5rem',
+        color = '#6c757d',
         fontWeight,
-        hover,
+        hover = {},
         isActive,
         active,
         isDisabled,
@@ -65,22 +66,20 @@ export const Item = styled.div `
         color: ${color};
         font-weight: ${fontWeight};
 
-        ${hover && `
-            &:hover, &:focus {
-                color: ${hover.color};
-                text-decoration: none;
-                background-color: ${hover.backgroundColor};
-            }
-        `}
+        &:hover, &:focus {
+            color: ${hover.color || '#16181b'};
+            text-decoration: none;
+            background-color: ${hover.backgroundColor || '#f8f9fa'};
+        }
 
         ${isActive && active && `
             text-decoration: none;
-            color: ${active.color};
-            background-color: ${active.backgroundColor};
+            color: ${active.color || '#fff'};
+            background-color: ${active.backgroundColor || '#007bff'};
         `}
 
         ${isDisabled && disabled && `
-            color: ${disabled.color};
+            color: ${disabled.color || '#6c757d'};
             background-color: transparent;
         `}
     `}
diff --git a/src/Datatable/Styles/Elements/Label.js b/src/Datatable/Styles/Elements/Label.js
index c4853f9..18c0ccd 100644
--- a/src/Datatable/Styles/Elements/Label.js
+++ b/src/Datatable/Styles/Elements/Label.js
@@ -3,8 +3,7 @@ import styled, { css } from 'styled-components';
 
 const Label = styled.label `
     display: inline-block;
-    margin-bottom: 0.5rem;
-
+    line-height: 2.5;
     ${({ flex, noWrap }) => css `
         ${flex && `display: flex`};
         ${noWrap && `white-space: nowrap`};
diff --git a/src/Datatable/Styles/Pagination.js b/src/Datatable/Styles/Pagination.js
index ef9afca..caecf07 100644
--- a/src/Datatable/Styles/Pagination.js
+++ b/src/Datatable/Styles/Pagination.js
@@ -2,11 +2,14 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 export const PaginationItem = styled.div `
-    display: block;
+    display: flex;
     min-width: ${props => props.width || '200px'};
     float: ${props => props.right ? 'right' : 'left'};
     text-align: ${props => props.textAlign || 'left'};
     font-size: ${props => props.fontSize || '15px'};
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
 `
 
 export const PaginationList = styled.div `
diff --git a/src/Datatable/Styles/Toolbar.js b/src/Datatable/Styles/Toolbar.js
index 8a1fa63..2f14b79 100644
--- a/src/Datatable/Styles/Toolbar.js
+++ b/src/Datatable/Styles/Toolbar.js
@@ -8,7 +8,7 @@ export const ToolbarRow = styled.div `
 
 export const ToolbarItem = styled.div `
     display: block;
-    width: ${props => props.width || '100px'};
+    width: ${props => props.width || 'auto'};
     float: ${props => props.right ? 'right' : 'left'};
     font-size: ${props => props.fontSize || '15px'};
 `
diff --git a/src/Datatable/Toolbar/Columns.js b/src/Datatable/Toolbar/Columns.js
index 1c4f2fe..85f689c 100644
--- a/src/Datatable/Toolbar/Columns.js
+++ b/src/Datatable/Toolbar/Columns.js
@@ -1,8 +1,11 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Dropdown, DropdownItem, DropdownMenu } from 'styled-dropdown-component';
 import Styles from '../Styles';
 
+const {
+    Elements: { Dropdown, Button }
+} = Styles;
+
 class Columns extends Component {
     constructor(props) {
         super(props);
@@ -80,28 +83,28 @@ class Columns extends Component {
 
     render() {
         const {
-            itemConfig: { style },
+            itemConfig: { style = {} },
             config: { allColumns, checkedColumns }
         } = this.props;
         const { open } = this.state;
 
         return (
-            <Dropdown>
-                <Styles.Elements.Button dropdownToggle onClick={ this.toggle } { ...style.button }>
+            <Dropdown.Container>
+                <Button dropdownToggle onClick={ this.toggle } { ...style.button }>
                     Columns
-                </Styles.Elements.Button>
-                <DropdownMenu hidden={ !open } noRadius>
+                </Button>
+                <Dropdown.Menu hidden={ !open } { ...style.dropdownMenu }>
                     { allColumns.map(({ name, label }, index) =>
-                        <DropdownItem key={ index }>
+                        <Dropdown.Item key={ index }>
                             <input name={ name }
                                 type="checkbox"
                                 defaultChecked={ -1 !== checkedColumns.indexOf(index) }
                                 onChange={ this.updateColumns.bind(null, index) } />
                             <label htmlFor={ name }>{ label }</label>
-                        </DropdownItem>
+                        </Dropdown.Item>
                     )}
-                </DropdownMenu>
-            </Dropdown>
+                </Dropdown.Menu>
+            </Dropdown.Container>
         );
     }
 }
diff --git a/src/Datatable/Toolbar/MassActions.js b/src/Datatable/Toolbar/MassActions.js
index 0f9dc76..df3e3af 100644
--- a/src/Datatable/Toolbar/MassActions.js
+++ b/src/Datatable/Toolbar/MassActions.js
@@ -61,7 +61,7 @@ class MassActions extends Component {
 
     render() {
         const { itemConfig, thunk } = this.props;
-        const { label, options, style } = itemConfig;
+        const { label, options, style = {} } = itemConfig;
         const { open } = this.state;
 
         return (
@@ -69,7 +69,7 @@ class MassActions extends Component {
                 <Button dropdownToggle onClick={ this.toggle } { ...style.button }>
                     { label }
                 </Button>
-                <Dropdown.Menu hidden={ !open } noRadius>
+                <Dropdown.Menu hidden={ !open } { ...style.dropdownMenu }>
                     { options.map(({ thunk: cb, ...option }, index) =>
                         <Dropdown.Item key={ index } onClick={ cb && thunk.bind(this, cb, { option }) }>
                             { option.label }

From 54defce1337c4c165f255050e91861a671ca0803 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Thu, 4 Apr 2019 11:17:19 +0530
Subject: [PATCH 06/12] For optimization

---
 demo/src/index.js                             |   2 +-
 demo/src/schema/basic.js                      |  68 +--
 package.json                                  |  11 +-
 src/Datatable/Container.js                    |  11 -
 src/Datatable/Pagination.js                   |  68 +--
 src/Datatable/Pagination/Pages.js             |  53 ---
 src/Datatable/Renderer.js                     |  62 ++-
 src/Datatable/Renderer/Body.js                |  31 --
 src/Datatable/Renderer/Body/Actions.js        |   6 +-
 src/Datatable/Renderer/Filter.js              |  45 --
 src/Datatable/Renderer/Filter/Date.js         |  33 +-
 src/Datatable/Renderer/Filter/Number.js       |  31 +-
 src/Datatable/Renderer/Filter/String.js       |  15 +-
 src/Datatable/Renderer/Header.js              |  40 --
 .../{ => Renderer}/Pagination/Limiter.js      |  16 +-
 src/Datatable/Renderer/Pagination/Pages.js    |  54 +++
 .../{ => Renderer}/Pagination/ResultCount.js  |   0
 .../{ => Renderer}/Toolbar/Columns.js         |  32 +-
 .../{ => Renderer}/Toolbar/MassActions.js     |  12 +-
 .../{ => Renderer}/Toolbar/ResetFilters.js    |   9 +-
 src/Datatable/Styles/Elements/index.js        |  13 -
 src/Datatable/Styles/Pagination.js            |  71 ----
 src/Datatable/Styles/Table/Body.js            |  24 --
 src/Datatable/Styles/Table/Cell.js            |  32 --
 src/Datatable/Styles/Table/Header.js          |  17 -
 src/Datatable/Styles/Toolbar.js               |  21 -
 src/Datatable/Styles/index.js                 |  30 --
 src/Datatable/Table.js                        | 196 ---------
 src/Datatable/Table/Body.js                   |  39 --
 src/Datatable/Table/Cell.js                   |   9 -
 src/Datatable/Table/Header.js                 |  12 -
 src/Datatable/Toolbar.js                      |  49 ++-
 .../{Styles/Elements => components}/Button.js |   0
 .../{Styles => components}/Container.js       |   0
 .../Elements => components}/Dropdown.js       |   0
 .../{Styles/Elements => components}/Field.js  |   0
 .../{Styles/Elements => components}/Label.js  |   0
 src/Datatable/{Styles => components}/Row.js   |   0
 .../{Styles => components}/SortCaret.js       |   0
 src/Datatable/{Styles => components}/Table.js |   8 -
 src/Datatable/components/Tbody.js             |  59 +++
 src/Datatable/components/Td.js                |  22 +
 src/Datatable/components/Th.js                |  16 +
 src/Datatable/components/Thead.js             |  25 ++
 src/Datatable/components/Tr.js                |  28 ++
 src/Datatable/index.js                        |  11 -
 src/constants.js                              |   7 +
 src/createTable.js                            | 396 +++++++++++++-----
 src/utils.js                                  |   3 -
 49 files changed, 724 insertions(+), 963 deletions(-)
 delete mode 100644 src/Datatable/Container.js
 delete mode 100644 src/Datatable/Pagination/Pages.js
 delete mode 100644 src/Datatable/Renderer/Body.js
 delete mode 100644 src/Datatable/Renderer/Filter.js
 delete mode 100644 src/Datatable/Renderer/Header.js
 rename src/Datatable/{ => Renderer}/Pagination/Limiter.js (63%)
 create mode 100644 src/Datatable/Renderer/Pagination/Pages.js
 rename src/Datatable/{ => Renderer}/Pagination/ResultCount.js (100%)
 rename src/Datatable/{ => Renderer}/Toolbar/Columns.js (74%)
 rename src/Datatable/{ => Renderer}/Toolbar/MassActions.js (86%)
 rename src/Datatable/{ => Renderer}/Toolbar/ResetFilters.js (53%)
 delete mode 100644 src/Datatable/Styles/Elements/index.js
 delete mode 100644 src/Datatable/Styles/Pagination.js
 delete mode 100644 src/Datatable/Styles/Table/Body.js
 delete mode 100644 src/Datatable/Styles/Table/Cell.js
 delete mode 100644 src/Datatable/Styles/Table/Header.js
 delete mode 100644 src/Datatable/Styles/Toolbar.js
 delete mode 100644 src/Datatable/Styles/index.js
 delete mode 100644 src/Datatable/Table.js
 delete mode 100644 src/Datatable/Table/Body.js
 delete mode 100644 src/Datatable/Table/Cell.js
 delete mode 100644 src/Datatable/Table/Header.js
 rename src/Datatable/{Styles/Elements => components}/Button.js (100%)
 rename src/Datatable/{Styles => components}/Container.js (100%)
 rename src/Datatable/{Styles/Elements => components}/Dropdown.js (100%)
 rename src/Datatable/{Styles/Elements => components}/Field.js (100%)
 rename src/Datatable/{Styles/Elements => components}/Label.js (100%)
 rename src/Datatable/{Styles => components}/Row.js (100%)
 rename src/Datatable/{Styles => components}/SortCaret.js (100%)
 rename src/Datatable/{Styles => components}/Table.js (64%)
 create mode 100644 src/Datatable/components/Tbody.js
 create mode 100644 src/Datatable/components/Td.js
 create mode 100644 src/Datatable/components/Th.js
 create mode 100644 src/Datatable/components/Thead.js
 create mode 100644 src/Datatable/components/Tr.js
 delete mode 100644 src/Datatable/index.js
 create mode 100644 src/constants.js

diff --git a/demo/src/index.js b/demo/src/index.js
index 8e47fad..22b41c8 100644
--- a/demo/src/index.js
+++ b/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';
 
diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
index 5849b7b..5c06e98 100644
--- a/demo/src/schema/basic.js
+++ b/demo/src/schema/basic.js
@@ -6,40 +6,44 @@ export default {
     headers: true,
     pagination: {
         // visible: true, // or an object { top: true, bottom: false } default visible
-        items: [{
-            type: 'limiter',
-            visible: true,
-            position: 10,
-            options: [10, 20, 50, 200, 2000],
-            default: 200,
-            style: {
-                right: false,
-            }
-        }, {
-            type: 'pages',
-            visible: true,
-            position: 20,
-            style: {
-                right: true,
-                button: {
-                    background: '#fff',
-                    color: '#6c757d',
-                    border: 'none',
-                    hover: {
-                        color: '#16181b',
-                        backgroundColor: '#f8f9fa'
+        items: {
+            limiter: {
+                type: 'limiter',
+                visible: true,
+                position: 10,
+                options: [10, 20, 50, 200, 2000],
+                default: 200,
+                style: {
+                    right: false,
+                }
+            },
+            pages: {
+                type: 'pages',
+                visible: true,
+                position: 20,
+                style: {
+                    right: true,
+                    button: {
+                        background: '#fff',
+                        color: '#6c757d',
+                        border: 'none',
+                        hover: {
+                            color: '#16181b',
+                            backgroundColor: '#f8f9fa'
+                        }
                     }
                 }
+            },
+            resultCount: {
+                type: 'resultCount',
+                visible: true,
+                position: 30,
+                style: {
+                    width: '350px',
+                    textAlign: 'center',
+                }
             }
-        }, {
-            type: 'resultCount',
-            visible: true,
-            position: 30,
-            style: {
-                width: '350px',
-                textAlign: 'center',
-            }
-        }]
+        }
     },
     routes: {
         get: {
@@ -84,7 +88,7 @@ export default {
                 }
             }
         }, {
-            type: 'reset-filters',
+            type: 'resetFilters',
             label: 'Reset Filters',
             visible: true,
             state: false,
diff --git a/package.json b/package.json
index 9a1bd96..267fde8 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
         "rxjs": "^6.4.0",
         "prop-types": "^15.6.2",
         "react-redux": "^6.0.1",
-        "redux": "^4.0.1"
+        "redux": "^4.0.1",
+        "styled-components": "^4.1.3"
     },
     "dependencies": {
         "lodash": ">=4.17.10",
@@ -35,10 +36,7 @@
         "react-pure-time": "^0.2.2",
         "react-redux-notify": "^4.1.0",
         "redux-observable": "^1.0.0",
-        "redux-thunk": "^2.3.0",
-        "styled-button-component": "^3.0.1",
-        "styled-components": "^4.1.3",
-        "styled-dropdown-component": "^3.0.1"
+        "redux-thunk": "^2.3.0"
     },
     "devDependencies": {
         "axios": "^0.18.0",
@@ -51,7 +49,8 @@
         "react-redux": "^6.0.1",
         "redux": "^4.0.1",
         "redux-logger": "^3.0.6",
-        "rxjs": "^6.4.0"
+        "rxjs": "^6.4.0",
+        "styled-components": "^4.1.3"
     },
     "author": "",
     "homepage": "",
diff --git a/src/Datatable/Container.js b/src/Datatable/Container.js
deleted file mode 100644
index 14b6774..0000000
--- a/src/Datatable/Container.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import Styles from './Styles';
-
-const Container = ({ children }) =>
-    <Styles.Container>
-        { React.Children.map(children, (child, i) =>
-            <Styles.Row key={ i }>{ child }</Styles.Row>
-        ) }
-    </Styles.Container>
-
-export default Container;
diff --git a/src/Datatable/Pagination.js b/src/Datatable/Pagination.js
index ab9fbd5..2efdb40 100644
--- a/src/Datatable/Pagination.js
+++ b/src/Datatable/Pagination.js
@@ -1,46 +1,54 @@
 import React from 'react';
-import PropTypes from "prop-types";
-import Styles from './Styles';
-import Limiter, { TYPE_LIMITER } from './Pagination/Limiter';
-import ResultCount from './Pagination/ResultCount';
-import Pages from './Pagination/Pages';
-import { calculatePaginationProps, getLimiter } from '../utils';
+import { calculatePaginationProps } from '../utils';
+import styled from 'styled-components';
 
-const renderers = {
-    'limiter': Limiter,
-    'pages': Pages,
-    'resultCount': ResultCount,
-}
+const Container = styled.div `
+    display: block;
+    width: 100%;
+    ${props => props.margin && css `
+        margin: ${props.margin}
+    `}
+`
+
+const Item = styled.div `
+    display: flex;
+    min-width: ${props => props.width || '200px'};
+    float: ${props => props.right ? 'right' : 'left'};
+    text-align: ${props => props.textAlign || 'left'};
+    font-size: ${props => props.fontSize || '15px'};
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+`
 
-const isVisible = (visible, position) => visible === true
-    || (typeof visible === 'object'
-        && (visible[position] === true || visible[position] === undefined));
+const isVisible = (visible, position) => (
+    visible === true || (
+        typeof visible === 'object' && (
+            visible[position] === true || visible[position] === undefined
+        )
+    )
+);
 
-const getRenderer = ( type ) => renderers[type];
 const Pagination = ({
-    query,
-    render,
+    query = {},
+    children,
     position,
     margin,
-    componentConfig: {
-        items = [],
-        visible = true
-    }
+    config: { items = {}, visible = true }
 }) => {
-    const limiter = getLimiter(items);
-    const defaultLimit = limiter.default || 10;
+    const defaultLimit = items.limiter.default || 10;
     const paginationProps = calculatePaginationProps(query, defaultLimit);
     return(
-        isVisible(visible, position) && <Styles.Pagination margin={ margin }>
-            { items.map((item, index) => {
-                const { visible: itemVisible, style, type } = item;
+        isVisible(visible, position) && <Container margin={ margin }>
+            { Object.keys(items).map((key, index) => {
+                const { visible: itemVisible, style, type } = items[key];
                 return (
-                    itemVisible && <Styles.PaginationItem key={ index } { ...style }>
-                        { render(getRenderer(type), item, paginationProps, index) }
-                    </Styles.PaginationItem>
+                    itemVisible && <Item key={ index } { ...style }>
+                        { children(items[key], paginationProps, index) }
+                    </Item>
                 )
             })}
-        </Styles.Pagination>
+        </Container>
     )
 }
 
diff --git a/src/Datatable/Pagination/Pages.js b/src/Datatable/Pagination/Pages.js
deleted file mode 100644
index 4db14e3..0000000
--- a/src/Datatable/Pagination/Pages.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import Styles from '../Styles';
-import { SET_PAGE } from '../../actions';
-
-const NUM_LINKS = 5;
-
-const fillRange = ( start, end ) => {
-    return Array(end - start + 1).fill().map((item, index) => start + index);
-};
-
-const getPages = ( currentPage, total ) => {
-    var padding = Math.floor(NUM_LINKS / 2);
-    var left = (currentPage - padding < padding) ? 1 : currentPage - padding;
-    var right = (left + NUM_LINKS - 1 > total) ? total : left + NUM_LINKS - 1;
-
-    left = (right == total) ?
-        (right - NUM_LINKS < 1) ? 1 : right - NUM_LINKS + 1
-        : left;
-
-    return fillRange(left, right);
-}
-
-const Pages = ({ page, total, action, style }) => {
-    const setPage = ( page ) =>  action(SET_PAGE)({ page });
-    return (
-        <Styles.PaginationList>
-            <Styles.Elements.Button
-                { ...style.button }
-                onClick={ setPage.bind(this, 1) } disabled={ page == 1 }
-            >First</Styles.Elements.Button>
-            <Styles.Elements.Button
-                { ...style.button }
-                onClick={ setPage.bind(this, page - 1) } disabled={ page < 2 } >Previous</Styles.Elements.Button>
-            { getPages(page, total).map( (link, index) =>
-                <Styles.Elements.Button
-                    key={ index }
-                    { ...style.button }
-                    onClick={ setPage.bind(this, link) }
-                    active={ page === link }
-                    disabled={ page === link }
-                >{ link }</Styles.Elements.Button>
-            ) }
-            <Styles.Elements.Button
-                { ...style.button }
-                onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Styles.Elements.Button>
-            <Styles.Elements.Button
-                { ...style.button }
-                onClick={ setPage.bind(this, total) } disabled={ page == total }>Last</Styles.Elements.Button>
-        </Styles.PaginationList>
-    );
-}
-
-export default Pages
diff --git a/src/Datatable/Renderer.js b/src/Datatable/Renderer.js
index c6d4d72..42ebb51 100644
--- a/src/Datatable/Renderer.js
+++ b/src/Datatable/Renderer.js
@@ -1,21 +1,55 @@
 import React from 'react';
-import Styles from './Styles';
-import Filter from './Renderer/Filter';
-import Header from './Renderer/Header';
-import Body from './Renderer/Body';
-
-const getRenderer = (ofType) => {
-    const renderers = {
-        header: Header,
-        filter: Filter,
-        default: Body,
+
+import Limiter from './Renderer/Pagination/Limiter';
+import Pages from './Renderer/Pagination/Pages';
+import ResultCount from './Renderer/Pagination/ResultCount';
+
+import Columns from './Renderer/Toolbar/Columns';
+import MassActions from './Renderer/Toolbar/MassActions';
+import ResetFilters from './Renderer/Toolbar/ResetFilters';
+
+import DateFilter from './Renderer/Filter/Date';
+import String from './Renderer/Filter/String';
+import Number from './Renderer/Filter/Number';
+
+import Text from './Renderer/Body/Text';
+import Date from './Renderer/Body/Date';
+import Image from './Renderer/Body/Image';
+import Actions from './Renderer/Body/Actions';
+import Options from './Renderer/Body/Options';
+import Selection from './Renderer/Body/Selection';
+
+const renderers = {
+    pagination: {
+        limiter: Limiter,
+        pages: Pages,
+        resultCount: ResultCount
+    },
+    toolbar: {
+        columns: Columns,
+        resetFilters: ResetFilters,
+        default: MassActions,
+    },
+    filter: {
+        number: Number,
+        date: DateFilter,
+        default: String
+    },
+    body: {
+        date: Date,
+        actions: Actions,
+        selection: Selection,
+        options: Options,
+        image: Image,
+        default: Text
     }
+};
 
-    return renderers[ofType] || renderers['default'];
-}
+const getRenderers = ( ofType ) => renderers[ofType] || {};
 
-const Renderer = ({ ofType, ...props }) => {
-    const Renderer = getRenderer(ofType);
+const Renderer = ({ ofType, forItem, ...props }) => {
+    const renderers = getRenderers(ofType);
+    const Renderer = renderers[forItem] || renderers['default'];
     return <Renderer { ...props } />
 }
 
diff --git a/src/Datatable/Renderer/Body.js b/src/Datatable/Renderer/Body.js
deleted file mode 100644
index 727a92c..0000000
--- a/src/Datatable/Renderer/Body.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import Styles from '../Styles';
-
-import Text from './Body/Text';
-import Date from './Body/Date';
-import Image from './Body/Image';
-import Actions from './Body/Actions';
-import Options from './Body/Options';
-import Selection from './Body/Selection';
-
-const renderers = {
-    date: Date,
-    actions: Actions,
-    selection: Selection,
-    options:  Options,
-    image: Image,
-    default: Text
-};
-
-const ColumnRenderer = ( props ) => {
-    const { renderer, type } = props.colConfig;
-    const Component = renderer || renderers[type] || renderers['default'];
-    return <Component { ...props } />
-};
-
-const Body = ({ index, item, top, action, thunk, extra, ...column }) =>
-    <Styles.TableCell body width={ `${column.width}px` } textAlign={ column.textAlign }>
-        <ColumnRenderer data={ item } colConfig={ column } extraData={ extra } action={ action } thunk={ thunk }/>
-    </Styles.TableCell>
-
-export default Body;
diff --git a/src/Datatable/Renderer/Body/Actions.js b/src/Datatable/Renderer/Body/Actions.js
index 10ec614..d29235e 100644
--- a/src/Datatable/Renderer/Body/Actions.js
+++ b/src/Datatable/Renderer/Body/Actions.js
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { deleteData } from '../../../actions';
 import { withTableConfig } from '../../../TableProvider';
 import { paramsResolver, prepareActionPayload } from '../../../utils'
-import Styles from '../../Styles';
+import Button from '../../components/Button';
 
 const Actions = ({
     extra,
@@ -13,13 +13,13 @@ const Actions = ({
 }) => (
     <div className="btn-group-sm">
         { items.map(({ thunk: cb, ...item }, index) =>
-            <Styles.Elements.Button
+            <Button
                 key={ index }
                 onClick={ cb && thunk.bind(this, cb, { item, extra }) }
                 { ...item.style }
             >
                 { item.label }
-            </Styles.Elements.Button>
+            </Button>
         )}
     </div>
 );
diff --git a/src/Datatable/Renderer/Filter.js b/src/Datatable/Renderer/Filter.js
deleted file mode 100644
index a733f4f..0000000
--- a/src/Datatable/Renderer/Filter.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import Styles from '../Styles';
-import { SET_FILTER } from '../../actions';
-
-import Date from './Filter/Date';
-import String from './Filter/String';
-import Number from './Filter/Number';
-
-export const OPERATOR = {
-    IS: 'is',
-    IN: 'in',
-    NOT_IN: 'not_in',
-    BETWEEN: 'between',
-    CONTAINS: 'contains'
-}
-
-export const TYPE = {
-    DATE: 'date'
-}
-
-const filterers = {
-    number: Number,
-    date: Date,
-    default: String
-};
-
-const Filterer = ( props ) => {
-    const Component = filterers[props.type] || filterers['default'];
-    return <Component { ...props } />
-};
-
-const Filter = ({ filterable, query, width, action, ...rest }) => {
-    const { name } = rest;
-    const filterer = ( key, filter ) => action(SET_FILTER)({ key, filter });
-    const value = _.get(query, ['search', name, 'value']);
-
-    return (
-        <Styles.TableCell search width={ `${width}px` }>
-            { filterable && <Filterer value={ value } filterer={ filterer } { ...rest } />}
-        </Styles.TableCell>
-    )
-}
-
-export default Filter;
diff --git a/src/Datatable/Renderer/Filter/Date.js b/src/Datatable/Renderer/Filter/Date.js
index 138c2f0..1a1bdd1 100644
--- a/src/Datatable/Renderer/Filter/Date.js
+++ b/src/Datatable/Renderer/Filter/Date.js
@@ -1,7 +1,7 @@
-import PropTypes from "prop-types";
 import React, { Fragment } from 'react';
-import { OPERATOR } from '../Filter';
-import Styles from '../../Styles';
+import { OPERATOR } from '../../../constants';
+import Row from '../../components/Row';
+import Field from '../../components/Field';
 
 var dateFrom = null;
 var dateTo = null;
@@ -9,13 +9,13 @@ var dateTo = null;
 const applyFilter = ( key, filterer, event ) => {
     let filter = {};
 
-    if(key == 0) {
+    if (key == 0) {
         dateFrom = event.target.value;
     } else {
         dateTo = event.target.value;
     }
 
-    if( dateFrom || dateTo ) {
+    if ( dateFrom || dateTo ) {
         filter = {
             operator: OPERATOR.BETWEEN,
             field: event.target.name,
@@ -28,24 +28,27 @@ const applyFilter = ( key, filterer, event ) => {
     filterer(event.target.name, filter);
 };
 
-const Date = ({ name, value = [], filterer }) =>
+const Date = ({ name, value = [], filterer }) => (
     <Fragment>
-        <Styles.Row padding="0 0 5px">
-            <Styles.Elements.Field.Input
+        <Row padding="0 0 5px">
+            <Field.Input
                 type="date"
                 name={ name }
                 value={ value[0] || '' }
                 onChange={ applyFilter.bind(this, 0, filterer) }
-                placeholder="From" />
-        </Styles.Row>
-        <Styles.Row>
-            <Styles.Elements.Field.Input
+                placeholder="From"
+            />
+        </Row>
+        <Row>
+            <Field.Input
                 type="date"
                 name={ name }
                 value={ value[1] || '' }
                 onChange={ applyFilter.bind(this, 1, filterer) }
-                placeholder="To" />
-        </Styles.Row>
-    </Fragment>;
+                placeholder="To"
+            />
+        </Row>
+    </Fragment>
+);
 
 export default Date;
diff --git a/src/Datatable/Renderer/Filter/Number.js b/src/Datatable/Renderer/Filter/Number.js
index f8502e1..8b44dce 100644
--- a/src/Datatable/Renderer/Filter/Number.js
+++ b/src/Datatable/Renderer/Filter/Number.js
@@ -1,7 +1,7 @@
-import PropTypes from "prop-types";
 import React, { Fragment } from 'react';
-import { OPERATOR } from '../Filter';
-import Styles from '../../Styles';
+import { OPERATOR } from '../../../constants';
+import Row from '../../components/Row';
+import Field from '../../components/Field';
 
 var valFrom = null;
 var valTo = null;
@@ -9,13 +9,13 @@ var valTo = null;
 const applyFilter = ( key, filterer, event ) => {
     let filter = {};
 
-    if(key == 0) {
+    if (key == 0) {
         valFrom = event.target.value;
     } else {
         valTo = event.target.value;
     }
 
-    if( valFrom || valTo ) {
+    if ( valFrom || valTo ) {
         filter = {
             operator: OPERATOR.BETWEEN,
             field: event.target.name,
@@ -28,24 +28,27 @@ const applyFilter = ( key, filterer, event ) => {
     filterer(event.target.name, filter);
 };
 
-const Number = ({ name, value = [], filterer }) =>
+const Number = ({ name, value = [], filterer }) => (
     <Fragment>
-        <Styles.Row padding="0 0 5px">
-            <Styles.Elements.Field.Input
+        <Row padding="0 0 5px">
+            <Field.Input
                 type="number"
                 name={ name }
                 onChange={ applyFilter.bind(this, 0, filterer) }
                 value={ value[0] || '' }
-                placeholder="From" />
-        </Styles.Row>
-        <Styles.Row>
-            <Styles.Elements.Field.Input
+                placeholder="From"
+            />
+        </Row>
+        <Row>
+            <Field.Input
                 type="number"
                 name={ name }
                 value={ value[1] || ''}
                 onChange={ applyFilter.bind(this, 1, filterer) }
-                placeholder="To" />
-        </Styles.Row>
+                placeholder="To"
+            />
+        </Row>
     </Fragment>
+);
 
 export default Number;
diff --git a/src/Datatable/Renderer/Filter/String.js b/src/Datatable/Renderer/Filter/String.js
index e156149..d9438ea 100644
--- a/src/Datatable/Renderer/Filter/String.js
+++ b/src/Datatable/Renderer/Filter/String.js
@@ -1,10 +1,10 @@
-import PropTypes from "prop-types";
 import React from 'react';
-import { OPERATOR } from '../Filter';
+import { OPERATOR } from '../../../constants';
+import Field from '../../components/Field';
 
 const applyFilter = ( filterer, event ) => {
     let filter = {};
-    if(event.target.value) {
+    if (event.target.value) {
         filter = {
             operator: OPERATOR.CONTAINS,
             field: event.target.name,
@@ -16,11 +16,12 @@ const applyFilter = ( filterer, event ) => {
     filterer(event.target.name, filter);
 };
 
-const String = ({ name, value = '', filterer }) =>
-    <Styles.Elements.Field.Input
+const String = ({ name, value = '', filterer }) => (
+    <Field.Input
         name={ name }
         value={ value }
-        onChange={ applyFilter.bind(this, filterer) } />
-
+        onChange={ applyFilter.bind(this, filterer) }
+    />
+);
 
 export default String;
diff --git a/src/Datatable/Renderer/Header.js b/src/Datatable/Renderer/Header.js
deleted file mode 100644
index 568dcfa..0000000
--- a/src/Datatable/Renderer/Header.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import Styles from '../Styles';
-import { SET_SORT } from '../../actions';
-
-const changeSortOrder = ( query, colName, sorter ) => {
-    let dir = null;
-    if( query.sort != colName ) {
-        dir = 'asc';
-    } else {
-        if(query.dir == 'asc') {
-            dir = 'desc';
-        } else if(query.dir == 'desc') {
-            colName = '';
-            dir = '';
-        } else {
-            dir = 'asc';
-        }
-    }
-
-    sorter({ sort: colName, dir });
-}
-
-const Header = ({ name, label, sortable, action, width, textAlign, query }) => {
-    const { sort, dir } = query;
-    return sortable ?
-        <Styles.TableCell
-            sortable
-            header
-            width={ `${width}px` }
-            dir={ dir }
-            textAlign={ textAlign }
-            onClick={ changeSortOrder.bind(this, query, name, action(SET_SORT)) }
-        >
-            { label }
-            { name === sort && <Styles.SortCaret dir={ dir } /> }
-        </Styles.TableCell> :
-        <Styles.TableCell header width={ `${width}px` } textAlign={ textAlign }>{ label }</Styles.TableCell>
-}
-
-export default Header;
diff --git a/src/Datatable/Pagination/Limiter.js b/src/Datatable/Renderer/Pagination/Limiter.js
similarity index 63%
rename from src/Datatable/Pagination/Limiter.js
rename to src/Datatable/Renderer/Pagination/Limiter.js
index 1b9c695..8dc5d15 100644
--- a/src/Datatable/Pagination/Limiter.js
+++ b/src/Datatable/Renderer/Pagination/Limiter.js
@@ -1,15 +1,13 @@
 import React from 'react';
-import PropTypes from "prop-types";
-import { SET_LIMIT } from '../../actions';
-import Styles from '../Styles';
-
-export const TYPE_LIMITER = 'limiter';
+import { SET_LIMIT } from '../../../actions';
+import Field from '../../components/Field';
+import Label from '../../components/Label';
 
 const Limiter = ({ options, limit, action, style, default: defaultLimit }) => {
     const setLimit = ( limit ) => action(SET_LIMIT)({ limit });
     return (
-        <Styles.Elements.Label flex noWrap>
-            <Styles.Elements.Field.Select
+        <Label flex noWrap>
+            <Field.Select
                 width="50%"
                 id="limiter"
                 value={ limit || defaultLimit }
@@ -17,8 +15,8 @@ const Limiter = ({ options, limit, action, style, default: defaultLimit }) => {
                 { options.map( (option, index) =>
                     <option key={ index } value={ option }>{ option !== 0 ? option : 'All' }</option>
                 ) }
-            </Styles.Elements.Field.Select> per page
-        </Styles.Elements.Label>
+            </Field.Select> per page
+        </Label>
     );
 }
 
diff --git a/src/Datatable/Renderer/Pagination/Pages.js b/src/Datatable/Renderer/Pagination/Pages.js
new file mode 100644
index 0000000..e60dc13
--- /dev/null
+++ b/src/Datatable/Renderer/Pagination/Pages.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { SET_PAGE } from '../../../actions';
+import styled from 'styled-components';
+import Button from '../../components/Button';
+
+export const List = styled.div `
+    display: inline-flex;
+    vertical-align: middle;
+    background: ${props => props.background || '#fff'};
+    border: ${props => props.border || '1px solid rgba(34,36,38,.15)'};
+    border-radius: ${props => props.borderRadius || 'none'};
+    height: ${props => props.height || '40px'}
+`
+
+const NUM_LINKS = 5;
+
+const fillRange = ( start, end ) => {
+    return Array(end - start + 1).fill().map((item, index) => start + index);
+};
+
+const getPages = ( currentPage, total ) => {
+    var padding = Math.floor(NUM_LINKS / 2);
+    var left = (currentPage - padding < padding) ? 1 : currentPage - padding;
+    var right = (left + NUM_LINKS - 1 > total) ? total : left + NUM_LINKS - 1;
+
+    left = (right == total) ?
+        (right - NUM_LINKS < 1) ? 1 : right - NUM_LINKS + 1
+        : left;
+
+    return fillRange(left, right);
+}
+
+const Pages = ({ page, total, action, style }) => {
+    const setPage = ( page ) =>  action(SET_PAGE)({ page });
+    return (
+        <List>
+            <Button { ...style.button } onClick={ setPage.bind(this, 1) } disabled={ page == 1 }>First</Button>
+            <Button { ...style.button } onClick={ setPage.bind(this, page - 1) } disabled={ page < 2 } >Previous</Button>
+            { getPages(page, total).map( (link, index) =>
+                <Button
+                    key={ index }
+                    { ...style.button }
+                    onClick={ setPage.bind(this, link) }
+                    active={ page === link }
+                    disabled={ page === link }
+                >{ link }</Button>
+            ) }
+            <Button { ...style.button } onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Button>
+            <Button { ...style.button } onClick={ setPage.bind(this, total) } disabled={ page == total }>Last</Button>
+        </List>
+    );
+}
+
+export default Pages
diff --git a/src/Datatable/Pagination/ResultCount.js b/src/Datatable/Renderer/Pagination/ResultCount.js
similarity index 100%
rename from src/Datatable/Pagination/ResultCount.js
rename to src/Datatable/Renderer/Pagination/ResultCount.js
diff --git a/src/Datatable/Toolbar/Columns.js b/src/Datatable/Renderer/Toolbar/Columns.js
similarity index 74%
rename from src/Datatable/Toolbar/Columns.js
rename to src/Datatable/Renderer/Toolbar/Columns.js
index 85f689c..3bd6efc 100644
--- a/src/Datatable/Toolbar/Columns.js
+++ b/src/Datatable/Renderer/Toolbar/Columns.js
@@ -1,10 +1,7 @@
-import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import Styles from '../Styles';
-
-const {
-    Elements: { Dropdown, Button }
-} = Styles;
+import React, { Component } from 'react';
+import Button from '../../components/Button';
+import Dropdown from '../../components/Dropdown';
 
 class Columns extends Component {
     constructor(props) {
@@ -18,23 +15,13 @@ class Columns extends Component {
     }
 
     updateColumns( index, event ) {
-        const { checkedColumns, allColumns, updateTableState } = this.props.config;
+        const { columnUpdater } = this.props;
 
-        var activeColumns = [];
         if(event.target.checked) {
-            activeColumns = [ ...checkedColumns, index ];
+            columnUpdater({ type: 'add', action: { index } })
         } else {
-            const itemIndex = checkedColumns.indexOf(index);
-            activeColumns = [ ...checkedColumns ];
-            activeColumns.splice(itemIndex, 1);
+            columnUpdater({ type: 'remove', action: { index } })
         }
-        activeColumns.sort();
-
-        const columns = activeColumns.reduce((result, currentIndex) => (
-            result.concat([allColumns[currentIndex]])
-        ), []);
-
-        updateTableState({ columns, checkedColumns: activeColumns });
     }
 
     componentWillUnmount() {
@@ -84,7 +71,8 @@ class Columns extends Component {
     render() {
         const {
             itemConfig: { style = {} },
-            config: { allColumns, checkedColumns }
+            columns = [],
+            visibleColumns = []
         } = this.props;
         const { open } = this.state;
 
@@ -94,11 +82,11 @@ class Columns extends Component {
                     Columns
                 </Button>
                 <Dropdown.Menu hidden={ !open } { ...style.dropdownMenu }>
-                    { allColumns.map(({ name, label }, index) =>
+                    { columns.map(({ name, label }, index) =>
                         <Dropdown.Item key={ index }>
                             <input name={ name }
                                 type="checkbox"
-                                defaultChecked={ -1 !== checkedColumns.indexOf(index) }
+                                defaultChecked={ -1 !== visibleColumns.indexOf(index) }
                                 onChange={ this.updateColumns.bind(null, index) } />
                             <label htmlFor={ name }>{ label }</label>
                         </Dropdown.Item>
diff --git a/src/Datatable/Toolbar/MassActions.js b/src/Datatable/Renderer/Toolbar/MassActions.js
similarity index 86%
rename from src/Datatable/Toolbar/MassActions.js
rename to src/Datatable/Renderer/Toolbar/MassActions.js
index df3e3af..b37164e 100644
--- a/src/Datatable/Toolbar/MassActions.js
+++ b/src/Datatable/Renderer/Toolbar/MassActions.js
@@ -1,15 +1,7 @@
 import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
-import PropTypes from "prop-types";
-import { connect } from 'react-redux';
-import { deleteData } from '../../actions';
-import { prepareActionPayload } from '../../utils'
-import { getSelectedKeys, getConfigParam } from '../../utils';
-import Styles from '../Styles';
-
-const {
-    Elements: { Dropdown, Button }
-} = Styles;
+import Button from '../../components/Button';
+import Dropdown from '../../components/Dropdown';
 
 class MassActions extends Component {
     constructor( props ) {
diff --git a/src/Datatable/Toolbar/ResetFilters.js b/src/Datatable/Renderer/Toolbar/ResetFilters.js
similarity index 53%
rename from src/Datatable/Toolbar/ResetFilters.js
rename to src/Datatable/Renderer/Toolbar/ResetFilters.js
index a17fad9..da4892f 100644
--- a/src/Datatable/Toolbar/ResetFilters.js
+++ b/src/Datatable/Renderer/Toolbar/ResetFilters.js
@@ -1,14 +1,13 @@
 import React from 'react';
-import PropTypes from "prop-types";
-import { SET_FILTER } from '../../actions';
-import Styles from '../Styles';
+import { SET_FILTER } from '../../../actions';
+import Button from '../../components/Button';
 
 const ResetFilters = ({ itemConfig, action }) => {
     const clearFilter = () => action(SET_FILTER)({ clear: true })
     return (
-        <Styles.Elements.Button onClick={ clearFilter.bind(this) }>
+        <Button onClick={ clearFilter.bind(this) }>
             { itemConfig.label || 'Reset Filters' }
-        </Styles.Elements.Button>
+        </Button>
     )
 };
 
diff --git a/src/Datatable/Styles/Elements/index.js b/src/Datatable/Styles/Elements/index.js
deleted file mode 100644
index fefb81f..0000000
--- a/src/Datatable/Styles/Elements/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import Label from './Label';
-import Button from './Button';
-import Dropdown from './Dropdown';
-import Field from './Field';
-
-export default {
-    Label,
-    Button,
-    Dropdown,
-    Field
-};
diff --git a/src/Datatable/Styles/Pagination.js b/src/Datatable/Styles/Pagination.js
deleted file mode 100644
index caecf07..0000000
--- a/src/Datatable/Styles/Pagination.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-export const PaginationItem = styled.div `
-    display: flex;
-    min-width: ${props => props.width || '200px'};
-    float: ${props => props.right ? 'right' : 'left'};
-    text-align: ${props => props.textAlign || 'left'};
-    font-size: ${props => props.fontSize || '15px'};
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-`
-
-export const PaginationList = styled.div `
-    display: inline-flex;
-    vertical-align: middle;
-    background: ${props => props.background || '#fff'};
-    border: ${props => props.border || '1px solid rgba(34,36,38,.15)'};
-    border-radius: ${props => props.borderRadius || 'none'};
-    height: ${props => props.height || '40px'}
-`
-
-export const PaginationListItem = styled.button `
-    min-width: ${props => props.width || '42px'};
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    text-align: center;
-    padding: ${props => props.padding || '13px 16px'};
-    line-height: 1;
-    cursor: pointer;
-    transition: background .1s ease,box-shadow .1s ease,color .1s ease,-webkit-box-shadow .1s ease;
-    background: ${props => props.background || '#fff'}
-    border: ${props => props.border || 'none'};
-    position: relative;
-
-    &::before {
-        position: absolute;
-        content: '';
-        top: 0;
-        right: 0;
-        height: 100%;
-        width: 1px;
-        background: #ebebeb;
-    }
-
-    &:last-child::before {
-        height: 0;
-    }
-
-    &:hover {
-        background: ${props => !props.disabled && (props.hoverBackground || '#ebebeb')}
-    }
-
-    ${props => props.active && css `
-        background: ${props => props.activeBackground || '#007bff'};
-        color: ${props => props.activeColor || '#fff'};
-        font-weight: ${props => props.activeFontWeight || 'normal'}
-    `}
-`
-
-const Pagination = styled.div `
-    display: block;
-    width: 100%;
-    ${props => props.margin && css `
-        margin: ${props.margin}
-    `}
-`
-
-export default Pagination;
diff --git a/src/Datatable/Styles/Table/Body.js b/src/Datatable/Styles/Table/Body.js
deleted file mode 100644
index 612d4fa..0000000
--- a/src/Datatable/Styles/Table/Body.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-const TableBody = styled.div `
-    max-width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    ${props => props.height && css `
-        height: ${props.height}
-    `};
-    overflow-y: scroll;
-`
-
-export const TableBodyInner = styled.div.attrs(({ width = '100%' }) => ({
-    style: { width }
-})) `
-    position: relative;
-    border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
-    ${props => props.height && css `
-        height: ${props.height}
-    `};
-`
-
-export default TableBody;
diff --git a/src/Datatable/Styles/Table/Cell.js b/src/Datatable/Styles/Table/Cell.js
deleted file mode 100644
index d82b01c..0000000
--- a/src/Datatable/Styles/Table/Cell.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-const TableCell = styled.div.attrs(({ width: maxWidth }) => ({
-    style: { maxWidth }
-})) `
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-    display: flex;
-    padding: 10px 5px;
-    text-align: ${props => props.textAlign || 'center'};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: middle;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    font-size: ${props => props.fontSize || '14px'};
-
-    ${props => props.header && css `
-        font-weight: ${props => props.headerFontWeight || 'bold'};
-        background: ${props => props.headerBackground || '#f9fafb'};
-        border-bottom: ${props => props.headerBorderBottom || '1px solid rgba(34,36,38,.1)'};
-    `}
-
-    ${props => props.sortable && css `
-        cursor: pointer;
-    `}
-`
-
-export default TableCell;
diff --git a/src/Datatable/Styles/Table/Header.js b/src/Datatable/Styles/Table/Header.js
deleted file mode 100644
index 3604103..0000000
--- a/src/Datatable/Styles/Table/Header.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const TableHeader = styled.div `
-    max-width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    overflow: hidden;
-`
-
-export const TableHeaderInner = styled.div.attrs(({ width = '100%' }) => ({
-    style: { width }
-})) `
-    border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
-`
-
-export default TableHeader;
diff --git a/src/Datatable/Styles/Toolbar.js b/src/Datatable/Styles/Toolbar.js
deleted file mode 100644
index 2f14b79..0000000
--- a/src/Datatable/Styles/Toolbar.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export const ToolbarRow = styled.div `
-    display: inline-block;
-    width: 100%;
-`
-
-export const ToolbarItem = styled.div `
-    display: block;
-    width: ${props => props.width || 'auto'};
-    float: ${props => props.right ? 'right' : 'left'};
-    font-size: ${props => props.fontSize || '15px'};
-`
-
-const Toolbar = styled.div `
-    display: block;
-    width: 100%;
-`
-
-export default Toolbar;
diff --git a/src/Datatable/Styles/index.js b/src/Datatable/Styles/index.js
deleted file mode 100644
index 3f8f6ae..0000000
--- a/src/Datatable/Styles/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Container from './Container';
-import Row from './Row';
-import Toolbar, { ToolbarRow, ToolbarItem } from './Toolbar';
-import Pagination, { PaginationItem, PaginationList, PaginationListItem } from './Pagination';
-import Table from './Table';
-import TableHeader, { TableHeaderInner } from './Table/Header';
-import TableBody, { TableBodyInner } from './Table/Body';
-import TableCell from './Table/Cell';
-import SortCaret from './SortCaret';
-import Elements from './Elements';
-
-export default {
-    Container,
-    Row,
-    Toolbar,
-    ToolbarRow,
-    ToolbarItem,
-    Pagination,
-    PaginationItem,
-    PaginationList,
-    PaginationListItem,
-    Table,
-    TableHeader,
-    TableHeaderInner,
-    TableCell,
-    TableBody,
-    TableBodyInner,
-    SortCaret,
-    Elements
-}
diff --git a/src/Datatable/Table.js b/src/Datatable/Table.js
deleted file mode 100644
index f650b16..0000000
--- a/src/Datatable/Table.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import _ from 'lodash';
-import ReactDOM from 'react-dom';
-import PropTypes from "prop-types";
-import { connect } from 'react-redux';
-import React, { Component } from 'react';
-import { withTableConfig } from '../TableProvider';
-import TableHeader from './Table/Header';
-import TableBody from './Table/Body';
-import Styles from './Styles';
-import Renderer from './Renderer';
-import { isArray } from '../utils';
-
-class Table extends Component {
-    constructor(props) {
-        super(props);
-
-        this.width = this.calculateWidth(this.props.columns);
-        this.minWidth = this.width;
-        this.rowHeight = this.props.rowHeight || 39;
-        this.state = { top: 0 };
-        this.handleScroll = this.handleScroll.bind(this);
-        this.updateTableDimensions = this.updateTableDimensions.bind(this);
-        this.scrollEnded = _.debounce(this.scrollEnded, 150);
-
-        this.tableBody = React.createRef();
-        this.tableHeader = React.createRef();
-    }
-
-    get height() {
-        return this.props.data.items.length * this.rowHeight
-    }
-
-    scrollEnded() {
-        this.setState({ pointerEvents: '' })
-    }
-
-    scrollUpdate() {
-        this.tableHeader.current.scrollLeft = this.tableBody.current.scrollLeft;
-        this.setState({
-            pointerEvents: 'none',
-            top: this.tableBody.current.scrollTop
-        })
-    }
-
-    handleScroll() {
-        this.scrollEnded();
-        this.scrollUpdate();
-    }
-
-    calculateWidth(columns) {
-        return columns.reduce((result, column) => result + (column.width || 0), 0);
-    }
-
-    updateTableDimensions() {
-        const tableBodyEl = this.tableBody.current;
-        this.computedTableWidth = this.minWidth > tableBodyEl.clientWidth
-            ? this.minWidth
-            : tableBodyEl.clientWidth;
-        const { columns, allColumns, checkedColumns, stateUpdater } = this.props;
-        const totalColumnsWidth = checkedColumns.reduce((result, columnIndex) => (
-            result + (allColumns[columnIndex].width || 0)
-        ), 0);
-        const percentage = this.computedTableWidth / totalColumnsWidth;
-
-        let updatedColumns = checkedColumns.reduce((result, columnIndex) => (
-            result.concat([{
-                ...allColumns[columnIndex],
-                width: Math.round(percentage * allColumns[columnIndex].width)
-            }])
-        ), [])
-
-        this.width = this.calculateWidth(updatedColumns);
-        stateUpdater({ columns: [ ...updatedColumns ] });
-    }
-
-    updateTableOnColumnVisibilityChange(prevColumns, currentColumns) {
-        let prevKeys = _.keys(prevColumns);
-        let currentKeys = _.keys(currentColumns);
-        if(!_.isEqual(prevKeys, currentKeys)) {
-            this.updateTableDimensions();
-        }
-    }
-
-    componentDidMount() {
-        this.updateTableDimensions();
-        this.tableBody.current.addEventListener('scroll', this.handleScroll, true);
-        window.addEventListener('resize', this.updateTableDimensions);
-    }
-
-    componentDidUpdate(prevProps) {
-        this.updateTableOnColumnVisibilityChange(prevProps.columns, this.props.columns)
-    }
-
-    componentWillUnmount() {
-        this.tableBody.current.removeEventListener('scroll', this.handleScroll, true);
-        window.removeEventListener('resize', this.updateTableDimensions);
-    }
-
-    getExtraBodyRowProps() {
-        const {
-            data,
-            columns
-        } = this.props;
-        return columns.reduce((result = {}, { name, extraData }) => {
-            result[name] = extraData
-                ? isArray(extraData)
-                    ? extraData.reduce((edResult, dataKey) => {
-                        if(isArray(dataKey)) {
-                            edResult[dataKey[1] || dataKey[0]] = _.get(data, dataKey[0]);
-                        } else {
-                            edResult[dataKey] = _.get(data, dataKey);
-                        }
-
-                        return edResult;
-                    }, {})
-                    : { [extraData]: _.get(data, extraData) }
-                : {}
-            return result;
-        }, {})
-    }
-
-    render() {
-        const { children, action, thunk, data, filterable, headers, columns, height } = this.props;
-        const { items = [], query = {} } = data;
-        const { pointerEvents, top } = this.state;
-        const bodyExtraData = this.getExtraBodyRowProps();
-
-        return (
-            <Styles.Container>
-                <Styles.Table>
-                    <TableHeader ref={ this.tableHeader } width={ `${this.width}px` }>
-                        <Styles.Row>
-                            { headers !== false && columns.map((column, index) =>
-                                <Renderer
-                                    key={ index }
-                                    ofType="header"
-                                    width={ `${column.width}px` }
-                                    query={ query }
-                                    action={ action }
-                                    { ...column }
-                                />
-                            )}
-                        </Styles.Row>
-                        <Styles.Row>
-                            { filterable !== false && columns.map((column, index) =>
-                                <Renderer
-                                    key={ index }
-                                    ofType="filter"
-                                    width={ `${column.width}px` }
-                                    query={ query }
-                                    action={ action }
-                                    { ...column }
-                                />
-                            )}
-                        </Styles.Row>
-                    </TableHeader>
-                    <TableBody
-                        ref={ this.tableBody }
-                        width={ this.width }
-                        height={ this.height }
-                        data={ items }
-                        startTop={ top }
-                        visibleHeight={ height }
-                        rowHeight={ this.rowHeight }
-                        renderItem={ ({ index, item, top }) => (
-                            <Styles.Row
-                                key={ index }
-                                position="absolute"
-                                top={ `${top}px` }
-                                height={ `${this.rowHeight}px` }
-                                evenBackground="#f9fafb"
-                                even={ index % 2 === 0 }
-                            >
-                                { columns.map((column, index) => {
-                                    const props = {
-                                        key: index,
-                                        ofType: 'body',
-                                        extra: bodyExtraData[column.name],
-                                        action,
-                                        thunk,
-                                        top,
-                                        item,
-                                        ...column
-                                    };
-                                    return <Renderer { ...props } />
-                                })}
-                            </Styles.Row>
-                        )}
-                    />
-                </Styles.Table>
-            </Styles.Container>
-        );
-    }
-}
-
-export default Table;
diff --git a/src/Datatable/Table/Body.js b/src/Datatable/Table/Body.js
deleted file mode 100644
index 0e3e9ad..0000000
--- a/src/Datatable/Table/Body.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { Component } from 'react';
-import Styles from '../Styles';
-
-const TableBody = React.forwardRef(({
-    children,
-    data,
-    width,
-    height,
-    startTop,
-    rowHeight,
-    rowWidth,
-    renderItem,
-    visibleHeight,
-    overScanCount = 10
-}, ref) => {
-    const visibleLower =  startTop - overScanCount * rowHeight;
-    const visibleUpper = startTop + visibleHeight + overScanCount * rowHeight;
-
-    let startIndex = Math.floor(visibleLower / rowHeight);
-    if(startIndex < 0) {
-        startIndex = 0;
-    }
-
-    const endIndex = Math.ceil(visibleUpper / rowHeight);
-    const slicedData = data.slice(startIndex, endIndex);
-
-    return (
-        <Styles.TableBody ref={ ref } height={ `${height > visibleHeight ? visibleHeight : height}px` }>
-            <Styles.TableBodyInner width={ `${width}px` } height={ `${height}px` }>
-                { slicedData.map((item, index) => {
-                    let currentIndex = startIndex + index;
-                    return renderItem({ index: currentIndex, item, top: currentIndex * rowHeight })
-                })}
-            </Styles.TableBodyInner>
-        </Styles.TableBody>
-    );
-});
-
-export default TableBody;
diff --git a/src/Datatable/Table/Cell.js b/src/Datatable/Table/Cell.js
deleted file mode 100644
index 18957fa..0000000
--- a/src/Datatable/Table/Cell.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { Component } from 'react';
-import Styles from '../Styles';
-
-const TableCell = ({ children }) =>
-    <Styles.TableCell>
-        { children }
-    </Styles.TableCell>
-
-export default TableCell;
diff --git a/src/Datatable/Table/Header.js b/src/Datatable/Table/Header.js
deleted file mode 100644
index 13d9fb4..0000000
--- a/src/Datatable/Table/Header.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Component } from 'react';
-import Styles from '../Styles';
-
-const TableHeader = React.forwardRef(({ children, width }, ref) => (
-    <Styles.TableHeader ref={ ref }>
-        <Styles.TableHeaderInner width={ width }>
-            { children }
-        </Styles.TableHeaderInner>
-    </Styles.TableHeader>
-));
-
-export default TableHeader;
diff --git a/src/Datatable/Toolbar.js b/src/Datatable/Toolbar.js
index babd2f2..f56ab5c 100644
--- a/src/Datatable/Toolbar.js
+++ b/src/Datatable/Toolbar.js
@@ -1,33 +1,40 @@
 import React from 'react';
-import PropTypes from "prop-types";
-import MassActions from './Toolbar/MassActions';
-import ResetFilters from './Toolbar/ResetFilters';
-import Columns from './Toolbar/Columns';
-import Styles from './Styles'
+import styled from 'styled-components';
 
-const renderers = {
-    'reset-filters': ResetFilters,
-    'columns': Columns,
-    'default': MassActions
-}
+const Container = styled.div `
+    display: block;
+    width: 100%;
+`
+
+const Row = styled.div `
+    display: inline-block;
+    width: 100%;
+`
+
+const Item = styled.div `
+    display: block;
+    width: ${props => props.width || 'auto'};
+    float: ${props => props.right ? 'right' : 'left'};
+    font-size: ${props => props.fontSize || '15px'};
+`
 
-const getRenderer = ( type ) => renderers[type] || renderers['default']
-export const toolbarItem = ( render, item, index ) => {
+const toolbarItem = ( children, item, index ) => {
     const { style, type, visible } = item;
     return (
-        <Styles.ToolbarItem key={ index } { ...style }>
-            { visible !== false && render(getRenderer(item.type), item, index)  }
-        </Styles.ToolbarItem>
+        <Item key={ index } { ...style }>
+            { visible !== false && children(item, index)  }
+        </Item>
     );
 }
 
-const Toolbar = ({ items, render }) =>
-    <Styles.Toolbar>
+const Toolbar = ({ items, children }) => (
+    <Container>
         { items.map((row, rowIndex) =>
-            <Styles.ToolbarRow key={ rowIndex }>
-                { row.map((item, itemIndex) => toolbarItem(render, item, itemIndex) )}
-            </Styles.ToolbarRow>
+            <Row key={ rowIndex }>
+                { row.map((item, itemIndex) => toolbarItem(children, item, itemIndex) )}
+            </Row>
         )}
-    </Styles.Toolbar>
+    </Container>
+);
 
 export default Toolbar;
diff --git a/src/Datatable/Styles/Elements/Button.js b/src/Datatable/components/Button.js
similarity index 100%
rename from src/Datatable/Styles/Elements/Button.js
rename to src/Datatable/components/Button.js
diff --git a/src/Datatable/Styles/Container.js b/src/Datatable/components/Container.js
similarity index 100%
rename from src/Datatable/Styles/Container.js
rename to src/Datatable/components/Container.js
diff --git a/src/Datatable/Styles/Elements/Dropdown.js b/src/Datatable/components/Dropdown.js
similarity index 100%
rename from src/Datatable/Styles/Elements/Dropdown.js
rename to src/Datatable/components/Dropdown.js
diff --git a/src/Datatable/Styles/Elements/Field.js b/src/Datatable/components/Field.js
similarity index 100%
rename from src/Datatable/Styles/Elements/Field.js
rename to src/Datatable/components/Field.js
diff --git a/src/Datatable/Styles/Elements/Label.js b/src/Datatable/components/Label.js
similarity index 100%
rename from src/Datatable/Styles/Elements/Label.js
rename to src/Datatable/components/Label.js
diff --git a/src/Datatable/Styles/Row.js b/src/Datatable/components/Row.js
similarity index 100%
rename from src/Datatable/Styles/Row.js
rename to src/Datatable/components/Row.js
diff --git a/src/Datatable/Styles/SortCaret.js b/src/Datatable/components/SortCaret.js
similarity index 100%
rename from src/Datatable/Styles/SortCaret.js
rename to src/Datatable/components/SortCaret.js
diff --git a/src/Datatable/Styles/Table.js b/src/Datatable/components/Table.js
similarity index 64%
rename from src/Datatable/Styles/Table.js
rename to src/Datatable/components/Table.js
index 9d8c4c5..6f2d7e4 100644
--- a/src/Datatable/Styles/Table.js
+++ b/src/Datatable/components/Table.js
@@ -1,14 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const TableContainer = styled.div `
-    position: relative;
-    display: block;
-    width: 100%;
-    overflow: auto;
-    border: 0;
-`
-
 const Table = styled.div `
     overflow: hidden;
     table-layout: fixed;
diff --git a/src/Datatable/components/Tbody.js b/src/Datatable/components/Tbody.js
new file mode 100644
index 0000000..83f88e5
--- /dev/null
+++ b/src/Datatable/components/Tbody.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const Outer = styled.div `
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    ${props => props.height && css `
+        height: ${props.height}
+    `};
+    overflow-y: scroll;
+    overflow-x: scroll;
+`
+
+export const Inner = styled.div.attrs(({ width = '100%' }) => ({
+    style: { width }
+})) `
+    position: relative;
+    border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
+    ${props => props.height && css `
+        height: ${props.height}
+    `};
+`
+
+const Tbody = React.forwardRef(({
+    children,
+    data,
+    height,
+    overScanCount = 10,
+    rowHeight,
+    rowWidth,
+    startTop,
+    visibleHeight,
+    width
+}, ref) => {
+    const visibleLower =  startTop - overScanCount * rowHeight;
+    const visibleUpper = startTop + visibleHeight + overScanCount * rowHeight;
+
+    let startIndex = Math.floor(visibleLower / rowHeight);
+    if(startIndex < 0) {
+        startIndex = 0;
+    }
+
+    const endIndex = Math.ceil(visibleUpper / rowHeight);
+    const slicedData = data.slice(startIndex, endIndex);
+
+    return (
+        <Outer ref={ ref } height={ `${height > visibleHeight ? visibleHeight : height}px` }>
+            <Inner width={ `${width}px` } height={ `${height}px` }>
+                { slicedData.map((item, index) => {
+                    let currentIndex = startIndex + index;
+                    return children({ item, top: currentIndex * rowHeight, index: currentIndex })
+                })}
+            </Inner>
+        </Outer>
+    );
+});
+
+export default Tbody;
diff --git a/src/Datatable/components/Td.js b/src/Datatable/components/Td.js
new file mode 100644
index 0000000..a328343
--- /dev/null
+++ b/src/Datatable/components/Td.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Td = styled.div.attrs(({ width: maxWidth }) => ({
+    style: { maxWidth }
+})) `
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+    display: flex;
+    padding: 10px 5px;
+    text-align: ${props => props.textAlign || 'center'};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    font-size: ${props => props.fontSize || '14px'};
+`
+
+export default Td;
diff --git a/src/Datatable/components/Th.js b/src/Datatable/components/Th.js
new file mode 100644
index 0000000..eb0395b
--- /dev/null
+++ b/src/Datatable/components/Th.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import Td from './Td';
+
+const Th = styled(Td) `
+    font-weight: ${props => props.fontWeigth || 'bold'};
+    background: ${props => props.background || '#f9fafb'};
+    border-bottom: ${props => props.borderBottom || '1px solid rgba(34,36,38,.1)'};
+
+    ${props => props.sortable && css `
+        cursor: pointer;
+    `}
+`
+
+export default Th;
diff --git a/src/Datatable/components/Thead.js b/src/Datatable/components/Thead.js
new file mode 100644
index 0000000..b56822a
--- /dev/null
+++ b/src/Datatable/components/Thead.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Outer = styled.div `
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    overflow: hidden;
+`
+
+export const Inner = styled.div.attrs(({ width = '100%' }) => ({
+    style: { width }
+})) `
+    border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
+`
+
+const Thead = React.forwardRef(({ children, width }, ref) => (
+    <Outer ref={ ref }>
+        <Inner width={ width }>
+            { children }
+        </Inner>
+    </Outer>
+));
+
+export default Thead;
diff --git a/src/Datatable/components/Tr.js b/src/Datatable/components/Tr.js
new file mode 100644
index 0000000..f6f1647
--- /dev/null
+++ b/src/Datatable/components/Tr.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const Tr = ({ className, children, style, columns }) => (
+    <div className={ className } style={ style }>
+        { columns.map((column, index) => (
+            children(column, index)
+        )) }
+    </div>
+);
+
+const StyledTr = styled(Tr).attrs(({ top }) => ({
+    style: { top }
+})) `
+    display: flex;
+    width: 100%;
+    padding: ${props => props.padding || 0};
+    height: ${props => props.height || 'auto'};
+    position: ${props => props.position || 'relative'};
+    background: ${props => props.background || 'none'};
+
+    ${props => props.even && css `
+        background: ${props.evenBackground || 'none'};
+    `}
+`
+
+
+export default StyledTr;
diff --git a/src/Datatable/index.js b/src/Datatable/index.js
deleted file mode 100644
index 4fa995d..0000000
--- a/src/Datatable/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Container from './Container';
-import Toolbar from './Toolbar';
-import Pagination from './Pagination';
-import Table from './Table'
-
-export default {
-    Container,
-    Toolbar,
-    Pagination,
-    Table
-}
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000..cb5f77d
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,7 @@
+export const OPERATOR = {
+    IS: 'is',
+    IN: 'in',
+    NOT_IN: 'not_in',
+    BETWEEN: 'between',
+    CONTAINS: 'contains'
+}
diff --git a/src/createTable.js b/src/createTable.js
index fa97e63..437c69b 100755
--- a/src/createTable.js
+++ b/src/createTable.js
@@ -1,135 +1,315 @@
 import _ from 'lodash';
+import React, { useState, useEffect, useReducer, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import { connect } from "react-redux";
-import React, { Component } from 'react'
 
-import Datatable from './Datatable';
 import TableProvider from './TableProvider';
-import { setPage, setLimit, setSort } from './actions';
-import { createActionCreator, getLimiter } from './utils';
+import Toolbar from './Datatable/Toolbar';
+import Pagination from './Datatable/Pagination';
+import Renderer from './Datatable/Renderer';
+import Table from './Datatable/components/Table';
+import Thead from './Datatable/components/Thead';
+import Tbody from './Datatable/components/Tbody';
+import Tr from './Datatable/components/Tr';
+import Th from './Datatable/components/Th';
+import Td from './Datatable/components/Td';
+import Container from './Datatable/components/Container';
+import SortCaret from './Datatable/components/SortCaret';
+import { createActionCreator, isArray } from './utils';
+import { setPage, setLimit, setSort, SET_SORT, SET_FILTER } from './actions';
 
-class ReduxDatatable extends Component {
-    constructor(props) {
-        super(props);
+const calculateWidth = ( columns, adjustment = 1 ) => (
+    columns.reduce((result, column) => (
+        result + ((column.width * adjustment) || 0)
+    ), 0)
+);
 
-        this.state = { columns: null, checkedColumns: null };
-        this.updateState = this.updateState.bind(this);
-    }
+const useTableScroll = ( tableBody, tableHeader ) => {
+    const [ pointerEvents, setPointerEvents ] = useState('');
+    const [ top, setTop ] = useState(0);
 
-    updateState(updatedObj) {
-        this.setState(updatedObj);
+    const scrollEnded = _.debounce(() => setPointerEvents(''), 150);
+    const handleScroll = () => {
+        tableHeader.current.scrollLeft = tableBody.current.scrollLeft;
+        setPointerEvents('none');
+        setTop(tableBody.current.scrollTop);
     }
 
-    componentDidMount() {
-        const { tableData, loadData } = this.props;
-        if(!_.isEmpty(tableData) && !_.isEmpty(tableData.items)) {
-            return;
+    useEffect(() => {
+        if(typeof tableBody.current.addEventListener === 'function') {
+            tableBody.current.addEventListener('scroll', handleScroll, true);
+        }
+        return () => {
+            tableBody.current.removeEventListener('scroll', handleScroll, true);
         }
+    }, [ tableBody.current ])
 
-        loadData();
+    return [ top, pointerEvents ];
+}
+
+const columnsReducer = (state, { index }) => {
+    var visibleColumns = [ ...state ];
+    if(action.type === 'add') {
+        visibleColumns.push(index).sort();
+    } else {
+        visibleColumns.splice(visibleColumns.indexOf(index), 1).sort();
     }
 
-    setValidPage(nextProps) {
-        var nextQuery = nextProps.tableData.query;
-        if(!nextQuery || nextQuery.count <= 0) {
-            return true;
-        }
+    return visibleColumns;
+}
 
-        let totalEntries = parseInt(nextQuery.count);
-        let limit = nextQuery.limit != 0 ? nextQuery.limit : totalEntries;
-        let totalPages = Math.ceil(totalEntries / limit);
-        if(totalPages < this.props.tableData.query.page) {
-            this.props.setPage(totalPages);
-            return false
-        }
+const useTableWidth = ( tableBody, minWidth, visibleColumns ) => {
+    const [ width, setWidth ] = useState(minWidth);
+    const [ widthAdjustment, setWidthAdjustment ] = useState(1);
 
-        return true;
-    }
+    const updateTableDimensions = ( ) => {
+        const tableBodyEl = tableBody.current;
+        const computedTableWidth = minWidth > tableBodyEl.clientWidth || !tableBodyEl.clientWidth
+            ? minWidth
+            : tableBodyEl.clientWidth;
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return this.setValidPage(nextProps);
+        const percentage = computedTableWidth / calculateWidth(visibleColumns);
+        setWidth(calculateWidth(visibleColumns, percentage))
+        setWidthAdjustment(percentage);
     }
 
-    getPropsWithState(props, addState) {
-        if(addState !== false) {
-            return { ...props, data: this.props.tableData }
+    useEffect(() => {
+        window.addEventListener('resize', updateTableDimensions);
+        return () => {
+            window.removeEventListener('resize', updateTableDimensions);
         }
+    }, []);
 
-        return props;
-    }
+    useEffect(() => {
+        updateTableDimensions();
+    }, [ visibleColumns ]);
 
-    render() {
-        const { name, config, tableData, reducerName, action, thunk } = this.props;
-        const { columns: allColumns, ...otherConfig } = config;
-        const { toolbar = [], pagination = {}, filterable, headers, height, rowHeight, style } = config;
-        const tableConfig = {
-            ...otherConfig,
-            allColumns,
-            columns: this.state.columns || [ ...allColumns ],
-            checkedColumns: this.state.checkedColumns || _.range(allColumns.length),
-            updateTableState: this.updateState
-        };
-
-        if(!tableData) {
-            return (
-                <div className="status_message offline">
-                    <p>
-                        The table failed to initialise. Please check you are connected to the internet and try again.
-                    </p>
-                </div>
-            );
+    return [ width, widthAdjustment ];
+}
+
+const changeSortOrder = ( query, colName, sorter ) => {
+    let dir = null;
+    if( query.sort != colName ) {
+        dir = 'asc';
+    } else {
+        if(query.dir == 'asc') {
+            dir = 'desc';
+        } else if(query.dir == 'desc') {
+            colName = '';
+            dir = '';
+        } else {
+            dir = 'asc';
         }
+    }
 
-        const { query } = tableData;
+    sorter({ sort: colName, dir });
+}
+
+const renderToolbar = ( items = [], action, thunk, columnUpdater, columns, visibleColumns ) => (
+    <Toolbar items={ items }>
+        {({ state, ...itemConfig }) => (
+            <Renderer
+                ofType="toolbar"
+                forItem={ itemConfig.type }
+                itemConfig={ itemConfig }
+                action={ action }
+                thunk={ thunk }
+                columnUpdater={ columnUpdater }
+                columns={ columns }
+                visibleColumns={ visibleColumns }
+            />
+        )}
+    </Toolbar>
+);
+
+const renderPagination = ( position, query, config = {}, action, thunk ) => (
+    <Pagination position={ position } config={ config } query={ query }>
+        {(item, paginationProps) => (
+            <Renderer
+                ofType="pagination"
+                forItem={ item.type }
+                action={ action }
+                { ...item }
+                { ...paginationProps }
+            />
+        )}
+    </Pagination>
+);
+
+const getExtraBodyRowProps = (data, columns) => (
+    columns.reduce((result = {}, { name, extraData }) => {
+        result[name] = extraData
+            ? isArray(extraData)
+                ? extraData.reduce((edResult, dataKey) => {
+                    if(isArray(dataKey)) {
+                        edResult[dataKey[1] || dataKey[0]] = _.get(data, dataKey[0]);
+                    } else {
+                        edResult[dataKey] = _.get(data, dataKey);
+                    }
+
+                    return edResult;
+                }, {})
+                : { [extraData]: _.get(data, extraData) }
+            : {}
+        return result;
+    }, {})
+)
+
+const renderTable = ({
+    action,
+    bodyExtraData = {},
+    columns = [],
+    height,
+    items,
+    query = {},
+    rowHeight,
+    tableHeader,
+    tableBody,
+    thunk,
+    top,
+    visibleHeight,
+    width,
+    widthAdjustment = 1
+}) => (
+    <Container>
+        <Table>
+            <Thead ref={ tableHeader } width={ `${width}px` }>
+                <Tr columns={ columns }>
+                    {({ sortable, width, textAlign, name, label }, index) => {
+                        const { sort, dir } = query;
+                        return (
+                            <Th
+                                key={ index }
+                                sortable={ sortable }
+                                width={ width * widthAdjustment }
+                                textAlign={ textAlign }
+                                onClick={ sortable ? changeSortOrder.bind(this, query, name, action(SET_SORT)) : undefined }
+                            >
+                                { label }
+                                { sortable && sort === name && <SortCaret dir={ dir } /> }
+                            </Th>
+                        )
+                    }}
+                </Tr>
+                <Tr columns={ columns }>
+                    {({ filterable, type, width, ...rest }, index) => {
+                        const { name } = rest;
+                        const value = _.get(query, ['search', name, 'value']);
+                        return (
+                            <Td key={ index } width={ `${width * widthAdjustment}px` }>
+                                { filterable && <Renderer
+                                    ofType="filter"
+                                    forItem={ type }
+                                    value={ value }
+                                    filterer={(key, filter) => action(SET_FILTER)({ key, filter })}
+                                    { ...rest }
+                                /> }
+                            </Td>
+                        )
+                    }}
+                </Tr>
+            </Thead>
+            <Tbody
+                ref={ tableBody }
+                width={ width }
+                height={ height }
+                data={ items }
+                startTop={ top }
+                visibleHeight={ visibleHeight }
+                rowHeight={ rowHeight }
+            >
+                {({ item, top, index: rowIndex }) => (
+                    <Tr
+                        key={ rowIndex }
+                        position="absolute"
+                        top={ `${top}px` }
+                        columns={ columns }
+                        height={ rowHeight }
+                        even={ rowIndex % 2 === 0 }
+                    >
+                        {(column, index) => {
+                            const { width, textAlign, name, type } = column;
+                            return (
+                                <Td key={ index } width={ `${width * widthAdjustment}px` }>
+                                    <Renderer
+                                        ofType="body"
+                                        forItem={ type }
+                                        data={ item }
+                                        colConfig={ column }
+                                        extraData={ bodyExtraData[name] }
+                                        action={ action }
+                                        thunk={ thunk }
+                                    />
+                                </Td>
+                            );
+                        }}
+                    </Tr>
+                )}
+            </Tbody>
+        </Table>
+    </Container>
+);
+
+const ReduxDatatable = ( props ) => {
+    const { config = {}, reducerName, tableData, action, thunk, loadData } = props;
+    const [ visibleColumns, dispatch ] = useReducer(columnsReducer, _.range(config.columns.length));
+    const { toolbar = [], pagination = {}, filterable, headers, height, rowHeight, style, columns } = config;
+    const tableConfig = {
+        ...config,
+        updateTableState: dispatch,
+        visibleColumns: visibleColumns.reduce((result, currentIndex) => [ ...result, columns[currentIndex]], [])
+    };
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    // Handle Table scrolling
+    let tableHeader = useRef({});
+    let tableBody = useRef({});
+    const [ top, pointerEvents ] = useTableScroll(tableBody, tableHeader);
+    // Set min-width of the table
+    const [ minWidth ] = useState(calculateWidth(columns));
+    // Handle table columns and width
+    const [ width, widthAdjustment ] = useTableWidth(tableBody, minWidth, tableConfig.visibleColumns);
+
+    if(!tableData) {
         return (
-            <TableProvider config={{ reducerName, ...tableConfig }}>
-                <Datatable.Container fontFamily={ style && style.fontFamily }>
-                    <Datatable.Toolbar items={ toolbar } render={(ToolbarItem, { state, ...itemConfig }) =>
-                        <ToolbarItem
-                            { ...this.getPropsWithState({
-                                config: tableConfig,
-                                itemConfig,
-                                action,
-                                thunk
-                            }, state)}
-                        />
-                    } />
-                    <Datatable.Pagination
-                        position="top"
-                        margin="0 0 10px"
-                        componentConfig={ pagination }
-                        query={ query }
-                        render={(PaginationItem, config, paginationProps) =>
-                            <PaginationItem action={ action } { ...config } { ...paginationProps } />
-                        }
-                    />
-                    <Datatable.Table
-                        filterable={ filterable }
-                        headers={ headers }
-                        data={ tableData }
-                        action={ action }
-                        thunk={ thunk }
-                        name={ name }
-                        height={ height }
-                        columns={ tableConfig.columns }
-                        rowHeight={ rowHeight }
-                        allColumns={ tableConfig.allColumns }
-                        checkedColumns={ tableConfig.checkedColumns }
-                        reducerName={ reducerName }
-                        stateUpdater={ this.updateState }
-                    />
-                    <Datatable.Pagination
-                        position="bottom"
-                        margin="10px 0 0"
-                        componentConfig={ pagination }
-                        query={ query }
-                        render={(PaginationItem, config, paginationProps) =>
-                            <PaginationItem action={ action } { ...config } { ...paginationProps } />
-                        }
-                    />
-                </Datatable.Container>
-            </TableProvider>
-        )
+            <div className="status_message offline">
+                <p>
+                    The table failed to initialise. Please check you are connected to the internet and try again.
+                </p>
+            </div>
+        );
     }
+
+    const { query } = tableData;
+    return (
+        <TableProvider config={{ reducerName, ...tableConfig }}>
+            <Container>
+                { renderToolbar(toolbar, action, thunk, dispatch, columns, visibleColumns) }
+                { renderPagination('top', query, pagination, action, thunk) }
+                { renderTable({
+                    action,
+                    bodyExtraData: getExtraBodyRowProps(tableData, tableConfig.visibleColumns),
+                    columns: tableConfig.visibleColumns,
+                    height: rowHeight * ( tableData.items || [] ).length,
+                    items: tableData.items || [],
+                    pointerEvents,
+                    query,
+                    rowHeight,
+                    tableHeader,
+                    tableBody,
+                    thunk,
+                    top,
+                    visibleHeight: height,
+                    width,
+                    widthAdjustment,
+                }) }
+                { renderPagination('bottom', query, pagination, action, thunk) }
+            </Container>
+        </TableProvider>
+    );
 }
 
 const prepareActionPayload = ({ reducerName, config: { name, routes, entity }}) =>
@@ -144,7 +324,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => {
     return {
         loadData: ( ) => {
             dispatch(setPage(preparePayload({ page: 1 })))
-            dispatch(setLimit(preparePayload({ limit: getLimiter(ownProps.config.pagination.items).default || 10 })))
+            dispatch(setLimit(preparePayload({ limit: ownProps.config.pagination.items.limiter.default || 10 })))
             dispatch(setSort(preparePayload({ dir: 'desc' })))
         },
         action: ( type ) => ( payload ) => dispatch(createActionCreator(type)(preparePayload(payload))),
diff --git a/src/utils.js b/src/utils.js
index 3bcd465..17bc337 100755
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,6 +1,5 @@
 import qs from 'query-string';
 import _ from 'lodash';
-import { TYPE_LIMITER } from './Datatable/Pagination/Limiter';
 
 export const defaultLimiterCongig = {
     options: [10, 20, 50, 100, 200],
@@ -9,8 +8,6 @@ export const defaultLimiterCongig = {
 
 export const isArray = (value) => Array.isArray(value);
 
-export const getLimiter = ( items ) => items.find(({ type }) => type === TYPE_LIMITER);
-
 export const calculatePaginationProps = (
     { page, limit = 0, count = 0 },
     defaultLimit = 10

From 7e8c12a7308fc57646be9eed0ea6195aeb6bb483 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Thu, 4 Apr 2019 20:07:58 +0530
Subject: [PATCH 07/12] Added styling

---
 demo/src/schema/basic.js                      | 92 +++++++++++++++----
 src/Datatable/Pagination.js                   | 55 -----------
 src/Datatable/Renderer/Body/Date.js           | 21 -----
 src/Datatable/Renderer/Body/Image.js          | 16 ----
 src/Datatable/Renderer/Body/Options.js        | 27 ------
 src/Datatable/Renderer/Body/Text.js           | 16 ----
 src/Datatable/Toolbar.js                      | 40 --------
 src/{Datatable => }/Renderer.js               |  0
 src/{Datatable => }/Renderer/Body/Actions.js  |  6 +-
 src/Renderer/Body/Date.js                     | 14 +++
 src/Renderer/Body/Image.js                    | 13 +++
 src/Renderer/Body/Options.js                  | 23 +++++
 .../Renderer/Body/Selection.js                | 28 +++---
 src/Renderer/Body/Text.js                     | 13 +++
 src/{Datatable => }/Renderer/Filter/Date.js   |  2 +-
 src/{Datatable => }/Renderer/Filter/Number.js |  2 +-
 src/{Datatable => }/Renderer/Filter/String.js |  2 +-
 .../Renderer/Pagination/Limiter.js            |  2 +-
 .../Renderer/Pagination/Pages.js              |  3 +-
 .../Renderer/Pagination/ResultCount.js        |  0
 .../Renderer/Toolbar/Columns.js               |  4 +-
 .../Renderer/Toolbar/MassActions.js           |  0
 .../Renderer/Toolbar/ResetFilters.js          |  2 +-
 src/{Datatable => }/components/Button.js      | 27 ++++--
 src/{Datatable => }/components/Container.js   | 10 +-
 src/{Datatable => }/components/Dropdown.js    |  5 -
 src/{Datatable => }/components/Field.js       |  0
 src/{Datatable => }/components/Label.js       |  0
 src/components/Pagination.js                  | 77 ++++++++++++++++
 src/{Datatable => }/components/Row.js         |  0
 src/{Datatable => }/components/SortCaret.js   |  0
 src/{Datatable => }/components/Table.js       |  0
 src/{Datatable => }/components/Tbody.js       |  0
 src/{Datatable => }/components/Td.js          |  0
 src/{Datatable => }/components/Th.js          |  0
 src/{Datatable => }/components/Thead.js       |  0
 src/components/Toolbar.js                     | 53 +++++++++++
 src/{Datatable => }/components/Tr.js          |  0
 src/createTable.js                            | 78 +++++++++-------
 src/utils.js                                  | 34 +++----
 40 files changed, 377 insertions(+), 288 deletions(-)
 delete mode 100644 src/Datatable/Pagination.js
 delete mode 100644 src/Datatable/Renderer/Body/Date.js
 delete mode 100644 src/Datatable/Renderer/Body/Image.js
 delete mode 100644 src/Datatable/Renderer/Body/Options.js
 delete mode 100644 src/Datatable/Renderer/Body/Text.js
 delete mode 100644 src/Datatable/Toolbar.js
 rename src/{Datatable => }/Renderer.js (100%)
 rename src/{Datatable => }/Renderer/Body/Actions.js (77%)
 create mode 100644 src/Renderer/Body/Date.js
 create mode 100644 src/Renderer/Body/Image.js
 create mode 100644 src/Renderer/Body/Options.js
 rename src/{Datatable => }/Renderer/Body/Selection.js (51%)
 create mode 100644 src/Renderer/Body/Text.js
 rename src/{Datatable => }/Renderer/Filter/Date.js (96%)
 rename src/{Datatable => }/Renderer/Filter/Number.js (96%)
 rename src/{Datatable => }/Renderer/Filter/String.js (92%)
 rename src/{Datatable => }/Renderer/Pagination/Limiter.js (94%)
 rename src/{Datatable => }/Renderer/Pagination/Pages.js (95%)
 rename src/{Datatable => }/Renderer/Pagination/ResultCount.js (100%)
 rename src/{Datatable => }/Renderer/Toolbar/Columns.js (95%)
 rename src/{Datatable => }/Renderer/Toolbar/MassActions.js (100%)
 rename src/{Datatable => }/Renderer/Toolbar/ResetFilters.js (88%)
 rename src/{Datatable => }/components/Button.js (69%)
 rename src/{Datatable => }/components/Container.js (51%)
 rename src/{Datatable => }/components/Dropdown.js (95%)
 rename src/{Datatable => }/components/Field.js (100%)
 rename src/{Datatable => }/components/Label.js (100%)
 create mode 100644 src/components/Pagination.js
 rename src/{Datatable => }/components/Row.js (100%)
 rename src/{Datatable => }/components/SortCaret.js (100%)
 rename src/{Datatable => }/components/Table.js (100%)
 rename src/{Datatable => }/components/Tbody.js (100%)
 rename src/{Datatable => }/components/Td.js (100%)
 rename src/{Datatable => }/components/Th.js (100%)
 rename src/{Datatable => }/components/Thead.js (100%)
 create mode 100644 src/components/Toolbar.js
 rename src/{Datatable => }/components/Tr.js (100%)

diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
index 5c06e98..72c2879 100644
--- a/demo/src/schema/basic.js
+++ b/demo/src/schema/basic.js
@@ -4,6 +4,67 @@ export default {
     rowHeight: 50,
     filterable: true,
     headers: true,
+    styles: {
+        tableContainer: {
+            fontSize: '16px',
+        },
+        // tableContainer:
+        // table:
+        // thead:
+        // tbody:
+        // tr: {
+        //     header:
+        //     filter:
+        //     body:
+        // }
+        // th:
+        // td: {
+        //      filter,
+        //      body
+        // },
+        toolbar: {
+            // item: {
+            //     backgroundColor: '#000',
+            // },
+            // containr:
+            // row:
+            // item:
+            item: {
+                actions: {
+                    marginRight: '5px'
+                },
+                columns: {
+                    float: 'right',
+                    'button': {
+                        background: '#fff',
+                        color: '#6c757d'
+                    },
+                    '> div > div': {
+                        right: 0,
+                        left: ''
+                    }
+                }
+            }
+        },
+        pagination: {
+            // container:
+            // item:
+            // items: {
+            //     [name]:
+            // },
+            item: {
+                pages: {
+                    float: 'right',
+                }
+            }
+        },
+        filter: {
+            // [name]:
+        },
+        body: {
+            // [name]:
+        }
+    },
     pagination: {
         // visible: true, // or an object { top: true, bottom: false } default visible
         items: {
@@ -60,6 +121,7 @@ export default {
     },
     toolbar: [
         [{
+            name: 'actions',
             label: 'Actions',
             id: 'dropdown',
             options: [{
@@ -79,34 +141,28 @@ export default {
                 label: 'Edit this field',
                 indexField: '@id'
             }],
-            visible: true,
-            style: {
-                right: false,
-                button: {
-                    background: '#fff',
-                    color: '#6c757d'
-                }
-            }
+            visible: true
         }, {
             type: 'resetFilters',
             label: 'Reset Filters',
             visible: true,
             state: false,
         }, {
+            name: 'columns',
             type: 'columns',
             label: 'Columns',
             visible: true,
             state: false,
-            style: {
-                right: true,
-                button: {
-                    background: '#fff',
-                    color: '#6c757d'
-                },
-                dropdownMenu: {
-                    right: true
-                }
-            }
+            // style: {
+            //     right: true,
+            //     button: {
+            //         background: '#fff',
+            //         color: '#6c757d'
+            //     },
+            //     dropdownMenu: {
+            //         right: true
+            //     }
+            // }
         }/*, {
             label: 'NACTIONS',
             id: 'massActions',
diff --git a/src/Datatable/Pagination.js b/src/Datatable/Pagination.js
deleted file mode 100644
index 2efdb40..0000000
--- a/src/Datatable/Pagination.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { calculatePaginationProps } from '../utils';
-import styled from 'styled-components';
-
-const Container = styled.div `
-    display: block;
-    width: 100%;
-    ${props => props.margin && css `
-        margin: ${props.margin}
-    `}
-`
-
-const Item = styled.div `
-    display: flex;
-    min-width: ${props => props.width || '200px'};
-    float: ${props => props.right ? 'right' : 'left'};
-    text-align: ${props => props.textAlign || 'left'};
-    font-size: ${props => props.fontSize || '15px'};
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-`
-
-const isVisible = (visible, position) => (
-    visible === true || (
-        typeof visible === 'object' && (
-            visible[position] === true || visible[position] === undefined
-        )
-    )
-);
-
-const Pagination = ({
-    query = {},
-    children,
-    position,
-    margin,
-    config: { items = {}, visible = true }
-}) => {
-    const defaultLimit = items.limiter.default || 10;
-    const paginationProps = calculatePaginationProps(query, defaultLimit);
-    return(
-        isVisible(visible, position) && <Container margin={ margin }>
-            { Object.keys(items).map((key, index) => {
-                const { visible: itemVisible, style, type } = items[key];
-                return (
-                    itemVisible && <Item key={ index } { ...style }>
-                        { children(items[key], paginationProps, index) }
-                    </Item>
-                )
-            })}
-        </Container>
-    )
-}
-
-export default Pagination;
diff --git a/src/Datatable/Renderer/Body/Date.js b/src/Datatable/Renderer/Body/Date.js
deleted file mode 100644
index d413247..0000000
--- a/src/Datatable/Renderer/Body/Date.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import _ from 'lodash';
-import Time from 'react-pure-time';
-import React, { Component } from 'react';
-import { shouldUpdate } from '../../../utils';
-
-class Date extends Component {
-    shouldComponentUpdate({ data, colConfig: { name } }) {
-        return shouldUpdate(this.props.data, data, name);
-    }
-
-    render() {
-        const {
-            data,
-            index,
-            colConfig: { name, textAlign, format }
-        } = this.props;
-        return <Time value={ _.get(data, name, '') } format={ format ? format : 'F j, Y, g:i a' } />
-    }
-}
-
-export default Date;
diff --git a/src/Datatable/Renderer/Body/Image.js b/src/Datatable/Renderer/Body/Image.js
deleted file mode 100644
index 5e95ee8..0000000
--- a/src/Datatable/Renderer/Body/Image.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import _ from 'lodash';
-import { shouldUpdate } from '../../../utils';
-import React, { Fragment, Component } from 'react';
-
-class Image extends Component {
-    shouldComponentUpdate({ data, colConfig: { name } }) {
-        return shouldUpdate(this.props.data, data, name);
-    }
-
-    render() {
-        const { data, index, colConfig: { name, imgWidth, imgHeight } } = this.props;
-        return <img src={ _.get(data, name, '') } width={ imgWidth } height={ imgHeight } />
-    }
-}
-
-export default Image;
diff --git a/src/Datatable/Renderer/Body/Options.js b/src/Datatable/Renderer/Body/Options.js
deleted file mode 100644
index 99fc9a3..0000000
--- a/src/Datatable/Renderer/Body/Options.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import _ from 'lodash';
-import Time from 'react-pure-time';
-import { shouldUpdate } from '../../../utils';
-import React, { Fragment, Component } from 'react';
-
-class Options extends Component {
-    shouldComponentUpdate({ data, colConfig: { name } }) {
-        return shouldUpdate(this.props.data, data, name);
-    }
-
-    render() {
-        const { data, colConfig: { name, options } } = this.props;
-        const value = _.get(data, name);
-
-        if(!options || !options[value]) {
-            return <Fragment>{ value }</Fragment>
-        }
-
-        return (
-            <span className={ (options[value].badge ? 'badge ' + options[value].badge : '') }>
-                { options[value].value }
-            </span>
-        );
-    }
-}
-
-export default Options;
diff --git a/src/Datatable/Renderer/Body/Text.js b/src/Datatable/Renderer/Body/Text.js
deleted file mode 100644
index 8473800..0000000
--- a/src/Datatable/Renderer/Body/Text.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import _ from 'lodash';
-import { shouldUpdate } from '../../../utils';
-import React, { Fragment, Component } from 'react';
-
-class Text extends Component {
-    shouldComponentUpdate({ data, colConfig: { name } }) {
-        return shouldUpdate(this.props.data, data, name);
-    }
-
-    render() {
-        const { data, index, colConfig: { name } } = this.props;
-        return <Fragment>{ _.get(data, name, '') }</Fragment>
-    }
-}
-
-export default Text;
diff --git a/src/Datatable/Toolbar.js b/src/Datatable/Toolbar.js
deleted file mode 100644
index f56ab5c..0000000
--- a/src/Datatable/Toolbar.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Container = styled.div `
-    display: block;
-    width: 100%;
-`
-
-const Row = styled.div `
-    display: inline-block;
-    width: 100%;
-`
-
-const Item = styled.div `
-    display: block;
-    width: ${props => props.width || 'auto'};
-    float: ${props => props.right ? 'right' : 'left'};
-    font-size: ${props => props.fontSize || '15px'};
-`
-
-const toolbarItem = ( children, item, index ) => {
-    const { style, type, visible } = item;
-    return (
-        <Item key={ index } { ...style }>
-            { visible !== false && children(item, index)  }
-        </Item>
-    );
-}
-
-const Toolbar = ({ items, children }) => (
-    <Container>
-        { items.map((row, rowIndex) =>
-            <Row key={ rowIndex }>
-                { row.map((item, itemIndex) => toolbarItem(children, item, itemIndex) )}
-            </Row>
-        )}
-    </Container>
-);
-
-export default Toolbar;
diff --git a/src/Datatable/Renderer.js b/src/Renderer.js
similarity index 100%
rename from src/Datatable/Renderer.js
rename to src/Renderer.js
diff --git a/src/Datatable/Renderer/Body/Actions.js b/src/Renderer/Body/Actions.js
similarity index 77%
rename from src/Datatable/Renderer/Body/Actions.js
rename to src/Renderer/Body/Actions.js
index d29235e..b186f7a 100644
--- a/src/Datatable/Renderer/Body/Actions.js
+++ b/src/Renderer/Body/Actions.js
@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import React, { Component } from 'react';
-import { deleteData } from '../../../actions';
-import { withTableConfig } from '../../../TableProvider';
-import { paramsResolver, prepareActionPayload } from '../../../utils'
+import { deleteData } from '../../actions';
+import { withTableConfig } from '../../TableProvider';
+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
new file mode 100644
index 0000000..27f05cc
--- /dev/null
+++ b/src/Renderer/Body/Date.js
@@ -0,0 +1,14 @@
+import _ from 'lodash';
+import Time from 'react-pure-time';
+import React, { Component } from 'react';
+import { shouldUpdate } from '../../utils';
+
+const Date = ({
+    data,
+    index,
+    colConfig: { name, textAlign, format }
+}) => (
+    <Time value={ _.get(data, name, '') } format={ format ? format : 'F j, Y, g:i a' } />
+)
+
+export default Date;
diff --git a/src/Renderer/Body/Image.js b/src/Renderer/Body/Image.js
new file mode 100644
index 0000000..f68c716
--- /dev/null
+++ b/src/Renderer/Body/Image.js
@@ -0,0 +1,13 @@
+import _ from 'lodash';
+import { shouldUpdate } from '../../utils';
+import React, { Fragment, Component } from 'react';
+
+const Image = ({
+    data,
+    index,
+    colConfig: { name, imgWidth, imgHeight }
+}) => (
+    <img src={ _.get(data, name, '') } width={ imgWidth } height={ imgHeight } />
+)
+
+export default Image;
diff --git a/src/Renderer/Body/Options.js b/src/Renderer/Body/Options.js
new file mode 100644
index 0000000..f27e71e
--- /dev/null
+++ b/src/Renderer/Body/Options.js
@@ -0,0 +1,23 @@
+import _ from 'lodash';
+import Time from 'react-pure-time';
+import { shouldUpdate } from '../../utils';
+import React, { Fragment, Component } from 'react';
+
+const Options = ({
+    data,
+    colConfig: { name, options }
+}) => {
+    const value = _.get(data, name);
+
+    if(!options || !options[value]) {
+        return <Fragment>{ value }</Fragment>
+    }
+
+    return (
+        <span className={ (options[value].badge ? 'badge ' + options[value].badge : '') }>
+            { options[value].value }
+        </span>
+    );
+}
+
+export default Options;
diff --git a/src/Datatable/Renderer/Body/Selection.js b/src/Renderer/Body/Selection.js
similarity index 51%
rename from src/Datatable/Renderer/Body/Selection.js
rename to src/Renderer/Body/Selection.js
index ebd8c14..a679f5a 100644
--- a/src/Datatable/Renderer/Body/Selection.js
+++ b/src/Renderer/Body/Selection.js
@@ -2,23 +2,23 @@ import _ from 'lodash';
 import PropTypes from "prop-types";
 import { connect } from 'react-redux';
 import React, { Component } from 'react';
-import { SET_SELECTION } from '../../../actions';
-import { withTableConfig } from '../../../TableProvider';
-import { getParam, getConfigParam, prepareActionPayload } from '../../../utils';
-import { memoizedGetSelection } from '../../../selectors';
+import { SET_SELECTION } from '../../actions';
+import { withTableConfig } from '../../TableProvider';
+import { getParam, getConfigParam, prepareActionPayload } from '../../utils';
+import { memoizedGetSelection } from '../../selectors';
 
-const handleSelection = ({ data, colConfig, action }, event ) => {
-    let paramKey = getConfigParam(colConfig.indexField);
-    let key = getParam(colConfig.indexField, data);
+const handleSelection = ({ data, indexField, action }, event ) => {
+    let paramKey = getConfigParam(indexField);
+    let key = getParam(indexField, data);
     action(SET_SELECTION)({ paramKey, key, value: event.target.checked });
 }
 
-const Selection = ( props ) => {
-    const {
-        data,
-        extraData: { selection },
-        colConfig: { indexField }
-    } = props;
+const Selection = ({
+    action,
+    data,
+    extraData: { selection },
+    colConfig: { indexField }
+}) => {
     const dataKey = getConfigParam(indexField);
     const key = _.get(data, dataKey);
     const value = _.get(selection, [dataKey, key], false);
@@ -28,7 +28,7 @@ const Selection = ( props ) => {
             <input
                 type="checkbox"
                 checked={ value }
-                onChange={ handleSelection.bind(this, props) } />
+                onChange={ handleSelection.bind(this, { data, indexField, action }) } />
         </div>
     );
 }
diff --git a/src/Renderer/Body/Text.js b/src/Renderer/Body/Text.js
new file mode 100644
index 0000000..481dd54
--- /dev/null
+++ b/src/Renderer/Body/Text.js
@@ -0,0 +1,13 @@
+import _ from 'lodash';
+import { shouldUpdate } from '../../utils';
+import React, { Fragment, Component } from 'react';
+
+const Text = ({
+    data,
+    index,
+    colConfig: { name }
+}) => (
+    <Fragment>{ _.get(data, name, '') }</Fragment>
+);
+
+export default Text;
diff --git a/src/Datatable/Renderer/Filter/Date.js b/src/Renderer/Filter/Date.js
similarity index 96%
rename from src/Datatable/Renderer/Filter/Date.js
rename to src/Renderer/Filter/Date.js
index 1a1bdd1..d44e224 100644
--- a/src/Datatable/Renderer/Filter/Date.js
+++ b/src/Renderer/Filter/Date.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { OPERATOR } from '../../../constants';
+import { OPERATOR } from '../../constants';
 import Row from '../../components/Row';
 import Field from '../../components/Field';
 
diff --git a/src/Datatable/Renderer/Filter/Number.js b/src/Renderer/Filter/Number.js
similarity index 96%
rename from src/Datatable/Renderer/Filter/Number.js
rename to src/Renderer/Filter/Number.js
index 8b44dce..f88be69 100644
--- a/src/Datatable/Renderer/Filter/Number.js
+++ b/src/Renderer/Filter/Number.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { OPERATOR } from '../../../constants';
+import { OPERATOR } from '../../constants';
 import Row from '../../components/Row';
 import Field from '../../components/Field';
 
diff --git a/src/Datatable/Renderer/Filter/String.js b/src/Renderer/Filter/String.js
similarity index 92%
rename from src/Datatable/Renderer/Filter/String.js
rename to src/Renderer/Filter/String.js
index d9438ea..7f334ff 100644
--- a/src/Datatable/Renderer/Filter/String.js
+++ b/src/Renderer/Filter/String.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { OPERATOR } from '../../../constants';
+import { OPERATOR } from '../../constants';
 import Field from '../../components/Field';
 
 const applyFilter = ( filterer, event ) => {
diff --git a/src/Datatable/Renderer/Pagination/Limiter.js b/src/Renderer/Pagination/Limiter.js
similarity index 94%
rename from src/Datatable/Renderer/Pagination/Limiter.js
rename to src/Renderer/Pagination/Limiter.js
index 8dc5d15..965b602 100644
--- a/src/Datatable/Renderer/Pagination/Limiter.js
+++ b/src/Renderer/Pagination/Limiter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SET_LIMIT } from '../../../actions';
+import { SET_LIMIT } from '../../actions';
 import Field from '../../components/Field';
 import Label from '../../components/Label';
 
diff --git a/src/Datatable/Renderer/Pagination/Pages.js b/src/Renderer/Pagination/Pages.js
similarity index 95%
rename from src/Datatable/Renderer/Pagination/Pages.js
rename to src/Renderer/Pagination/Pages.js
index e60dc13..d856605 100644
--- a/src/Datatable/Renderer/Pagination/Pages.js
+++ b/src/Renderer/Pagination/Pages.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SET_PAGE } from '../../../actions';
+import { SET_PAGE } from '../../actions';
 import styled from 'styled-components';
 import Button from '../../components/Button';
 
@@ -42,7 +42,6 @@ const Pages = ({ page, total, action, style }) => {
                     { ...style.button }
                     onClick={ setPage.bind(this, link) }
                     active={ page === link }
-                    disabled={ page === link }
                 >{ link }</Button>
             ) }
             <Button { ...style.button } onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Button>
diff --git a/src/Datatable/Renderer/Pagination/ResultCount.js b/src/Renderer/Pagination/ResultCount.js
similarity index 100%
rename from src/Datatable/Renderer/Pagination/ResultCount.js
rename to src/Renderer/Pagination/ResultCount.js
diff --git a/src/Datatable/Renderer/Toolbar/Columns.js b/src/Renderer/Toolbar/Columns.js
similarity index 95%
rename from src/Datatable/Renderer/Toolbar/Columns.js
rename to src/Renderer/Toolbar/Columns.js
index 3bd6efc..d5de94d 100644
--- a/src/Datatable/Renderer/Toolbar/Columns.js
+++ b/src/Renderer/Toolbar/Columns.js
@@ -18,9 +18,9 @@ class Columns extends Component {
         const { columnUpdater } = this.props;
 
         if(event.target.checked) {
-            columnUpdater({ type: 'add', action: { index } })
+            columnUpdater({ type: 'add', index })
         } else {
-            columnUpdater({ type: 'remove', action: { index } })
+            columnUpdater({ type: 'remove', index })
         }
     }
 
diff --git a/src/Datatable/Renderer/Toolbar/MassActions.js b/src/Renderer/Toolbar/MassActions.js
similarity index 100%
rename from src/Datatable/Renderer/Toolbar/MassActions.js
rename to src/Renderer/Toolbar/MassActions.js
diff --git a/src/Datatable/Renderer/Toolbar/ResetFilters.js b/src/Renderer/Toolbar/ResetFilters.js
similarity index 88%
rename from src/Datatable/Renderer/Toolbar/ResetFilters.js
rename to src/Renderer/Toolbar/ResetFilters.js
index da4892f..625d254 100644
--- a/src/Datatable/Renderer/Toolbar/ResetFilters.js
+++ b/src/Renderer/Toolbar/ResetFilters.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SET_FILTER } from '../../../actions';
+import { SET_FILTER } from '../../actions';
 import Button from '../../components/Button';
 
 const ResetFilters = ({ itemConfig, action }) => {
diff --git a/src/Datatable/components/Button.js b/src/components/Button.js
similarity index 69%
rename from src/Datatable/components/Button.js
rename to src/components/Button.js
index b20b5d2..d4e03d4 100644
--- a/src/Datatable/components/Button.js
+++ b/src/components/Button.js
@@ -9,7 +9,6 @@ const Button = styled.button `
         box-shadow 0.15s ease-in-out;
     vertical-align: middle;
     white-space: nowrap;
-    cursor: pointer;
 
     ${({
         background = '#fff',
@@ -21,7 +20,9 @@ const Button = styled.button `
         color = '#6c757d',
         padding = '0.375rem 0.75rem',
         dropdownToggle = false,
-        hover = {}
+        hover = {},
+        active,
+        disabled = false,
     }) => css `
         background: ${background};
         border: ${border};
@@ -47,10 +48,24 @@ const Button = styled.button `
             }
         `}
 
-        &:hover {
-            color: ${hover.color || '#fff'};
-            background-color: ${hover.backgroundColor || '#5a6268'};
-        }
+        ${!disabled && !active && css `
+            cursor: pointer;
+
+            &:hover {
+                color: ${hover.color || '#fff'};
+                background-color: ${hover.backgroundColor || '#5a6268'};
+            }
+        `}
+
+        ${active && css `
+            background: ${props => props.activeBackground || '#007bff'};
+            color: ${props => props.activeColor || '#fff'};
+            font-weight: ${props => props.activeFontWeight || 'normal'}
+        `}
+
+        ${disabled && css `
+            opacity: 0.5;
+        `}
     `}
 `;
 
diff --git a/src/Datatable/components/Container.js b/src/components/Container.js
similarity index 51%
rename from src/Datatable/components/Container.js
rename to src/components/Container.js
index 19dccae..d3c946d 100644
--- a/src/Datatable/components/Container.js
+++ b/src/components/Container.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
+import { getExtendedStyles } from '../utils';
 
 const Container = styled.div `
     width: 100%;
     margin-right: auto;
     margin-left: auto;
-    font-family: ${props =>
-        props.fontFamily ||
-        `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`
-    };
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 `
 
+const ExtendedContainer = styled(Container)(getExtendedStyles());
 export default Container;
diff --git a/src/Datatable/components/Dropdown.js b/src/components/Dropdown.js
similarity index 95%
rename from src/Datatable/components/Dropdown.js
rename to src/components/Dropdown.js
index debcee8..f136804 100644
--- a/src/Datatable/components/Dropdown.js
+++ b/src/components/Dropdown.js
@@ -21,7 +21,6 @@ export const Menu = styled.div `
         fontSize = '14px',
         color = '#6c757d',
         border = '1px solid #ebebeb',
-        right = false,
         backgroundColor = '#fff',
         borderRadius,
         hidden
@@ -37,10 +36,6 @@ export const Menu = styled.div `
             ? `display: none`
             : `display: block`
         }
-        ${right
-            ? `right: 0`
-            : `left: 0`
-        }
     `}
 `;
 
diff --git a/src/Datatable/components/Field.js b/src/components/Field.js
similarity index 100%
rename from src/Datatable/components/Field.js
rename to src/components/Field.js
diff --git a/src/Datatable/components/Label.js b/src/components/Label.js
similarity index 100%
rename from src/Datatable/components/Label.js
rename to src/components/Label.js
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..ca532f9
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getExtendedStyles, getStyles } from '../utils';
+
+const Item = styled.div `
+    display: flex;
+    min-width: 200px;
+    float: left;
+    text-align: left;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+`
+
+const ExtendedItem = styled(Item)(getExtendedStyles());
+
+const isVisible = (visible, position) => (
+    visible === true || (
+        typeof visible === 'object' && (
+            visible[position] === true || visible[position] === undefined
+        )
+    )
+);
+
+export const calculatePaginationProps = (
+    { page, limit = 0, count = 0 },
+    defaultLimit = 10
+) => {
+    page = page > 1 ? page : 1
+    limit = limit != 0 ? limit : defaultLimit;
+
+    let start = (page - 1) * limit
+    let end = start + limit - 1
+
+    return {
+        page: page,
+        start: start,
+        end: (count > end && end >= 0) ? end : count,
+        count: count,
+        limit: limit,
+        total: Math.ceil(count / limit)
+    }
+}
+
+const Pagination = ({
+    children,
+    className,
+    config: { items = {}, visible = true },
+    margin,
+    position,
+    query = {},
+    styles: { item }
+}) => {
+    const defaultLimit = items.limiter.default || 10;
+    const paginationProps = calculatePaginationProps(query, defaultLimit);
+    return(
+        isVisible(visible, position) && <div className={ className }>
+            { Object.keys(items).map((key, index) => {
+                const { visible: itemVisible, style, type } = items[key];
+                return (
+                    itemVisible && <ExtendedItem key={ index } styles={ getStyles(item, type) }>
+                        { children(items[key], paginationProps, index) }
+                    </ExtendedItem>
+                )
+            })}
+        </div>
+    )
+}
+
+const StyledPagination = styled(Pagination) `
+    display: block;
+    width: 100%;
+`
+
+const ExtendedStyledPagination = styled(StyledPagination)(getExtendedStyles('container'));
+
+export default ExtendedStyledPagination;
diff --git a/src/Datatable/components/Row.js b/src/components/Row.js
similarity index 100%
rename from src/Datatable/components/Row.js
rename to src/components/Row.js
diff --git a/src/Datatable/components/SortCaret.js b/src/components/SortCaret.js
similarity index 100%
rename from src/Datatable/components/SortCaret.js
rename to src/components/SortCaret.js
diff --git a/src/Datatable/components/Table.js b/src/components/Table.js
similarity index 100%
rename from src/Datatable/components/Table.js
rename to src/components/Table.js
diff --git a/src/Datatable/components/Tbody.js b/src/components/Tbody.js
similarity index 100%
rename from src/Datatable/components/Tbody.js
rename to src/components/Tbody.js
diff --git a/src/Datatable/components/Td.js b/src/components/Td.js
similarity index 100%
rename from src/Datatable/components/Td.js
rename to src/components/Td.js
diff --git a/src/Datatable/components/Th.js b/src/components/Th.js
similarity index 100%
rename from src/Datatable/components/Th.js
rename to src/components/Th.js
diff --git a/src/Datatable/components/Thead.js b/src/components/Thead.js
similarity index 100%
rename from src/Datatable/components/Thead.js
rename to src/components/Thead.js
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
new file mode 100644
index 0000000..e9b3afa
--- /dev/null
+++ b/src/components/Toolbar.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getExtendedStyles, getStyles } from '../utils';
+
+const Row = styled.div `
+    display: inline-block;
+    width: 100%;
+`
+
+const ExtendedRow = styled(Row)(getExtendedStyles())
+
+const Item = styled.div `
+    display: block;
+    width: auto;
+    float: left;
+`
+
+const ExtendedItem = styled(Item)(getExtendedStyles())
+
+const toolbarItem = ( children, item, index, styles ) => {
+    const { visible } = item;
+    return (
+        <ExtendedItem key={ index } styles={ styles }>
+            { visible !== false && children(item, index)  }
+        </ExtendedItem>
+    );
+}
+
+const Toolbar = ({
+    className,
+    items,
+    children,
+    styles: { item: itemStyles, row }
+}) => (
+    <div className={ className }>
+        { items.map((row, rowIndex) => (
+            <ExtendedRow key={ rowIndex } styles={ row }>
+                { row.map((item, itemIndex) => (
+                    toolbarItem(children, item, itemIndex, getStyles(itemStyles, item.name))
+                )) }
+            </ExtendedRow>
+        ))}
+    </div>
+);
+
+const StyledToolbar = styled(Toolbar) `
+    display: block;
+    width: 100%;
+`;
+
+const ExtendedStyledToolbar = styled(StyledToolbar)(getExtendedStyles('container'));
+
+export default ExtendedStyledToolbar;
diff --git a/src/Datatable/components/Tr.js b/src/components/Tr.js
similarity index 100%
rename from src/Datatable/components/Tr.js
rename to src/components/Tr.js
diff --git a/src/createTable.js b/src/createTable.js
index 437c69b..8ed9422 100755
--- a/src/createTable.js
+++ b/src/createTable.js
@@ -4,18 +4,18 @@ import ReactDOM from 'react-dom';
 import { connect } from "react-redux";
 
 import TableProvider from './TableProvider';
-import Toolbar from './Datatable/Toolbar';
-import Pagination from './Datatable/Pagination';
-import Renderer from './Datatable/Renderer';
-import Table from './Datatable/components/Table';
-import Thead from './Datatable/components/Thead';
-import Tbody from './Datatable/components/Tbody';
-import Tr from './Datatable/components/Tr';
-import Th from './Datatable/components/Th';
-import Td from './Datatable/components/Td';
-import Container from './Datatable/components/Container';
-import SortCaret from './Datatable/components/SortCaret';
-import { createActionCreator, isArray } from './utils';
+import Renderer from './Renderer';
+import Table from './components/Table';
+import Thead from './components/Thead';
+import Tbody from './components/Tbody';
+import Tr from './components/Tr';
+import Th from './components/Th';
+import Td from './components/Td';
+import Toolbar from './components/Toolbar';
+import Pagination from './components/Pagination';
+import Container from './components/Container';
+import SortCaret from './components/SortCaret';
+import { createActionCreator, isArray, getStyles } from './utils';
 import { setPage, setLimit, setSort, SET_SORT, SET_FILTER } from './actions';
 
 const calculateWidth = ( columns, adjustment = 1 ) => (
@@ -47,10 +47,11 @@ const useTableScroll = ( tableBody, tableHeader ) => {
     return [ top, pointerEvents ];
 }
 
-const columnsReducer = (state, { index }) => {
+const columnsReducer = (state, { type, index }) => {
     var visibleColumns = [ ...state ];
-    if(action.type === 'add') {
-        visibleColumns.push(index).sort();
+    if(type === 'add') {
+        visibleColumns.push(index);
+        visibleColumns.sort();
     } else {
         visibleColumns.splice(visibleColumns.indexOf(index), 1).sort();
     }
@@ -105,8 +106,8 @@ const changeSortOrder = ( query, colName, sorter ) => {
     sorter({ sort: colName, dir });
 }
 
-const renderToolbar = ( items = [], action, thunk, columnUpdater, columns, visibleColumns ) => (
-    <Toolbar items={ items }>
+const renderToolbar = ( config = [], action, thunk, columnUpdater, columns, visibleColumns, styles ) => (
+    <Toolbar items={ config } styles={ styles }>
         {({ state, ...itemConfig }) => (
             <Renderer
                 ofType="toolbar"
@@ -122,8 +123,8 @@ const renderToolbar = ( items = [], action, thunk, columnUpdater, columns, visib
     </Toolbar>
 );
 
-const renderPagination = ( position, query, config = {}, action, thunk ) => (
-    <Pagination position={ position } config={ config } query={ query }>
+const renderPagination = ( position, query, config = {}, action, thunk, styles ) => (
+    <Pagination position={ position } config={ config } query={ query } styles={ styles }>
         {(item, paginationProps) => (
             <Renderer
                 ofType="pagination"
@@ -169,12 +170,13 @@ const renderTable = ({
     top,
     visibleHeight,
     width,
-    widthAdjustment = 1
+    widthAdjustment = 1,
+    styles
 }) => (
-    <Container>
-        <Table>
-            <Thead ref={ tableHeader } width={ `${width}px` }>
-                <Tr columns={ columns }>
+    <Container styles={ styles.tableContainer }>
+        <Table styles={ styles.table }>
+            <Thead ref={ tableHeader } width={ `${width}px` } styles={ styles.thead }>
+                <Tr columns={ columns } styles={ getStyles(styles.tr, 'header') }>
                     {({ sortable, width, textAlign, name, label }, index) => {
                         const { sort, dir } = query;
                         return (
@@ -183,6 +185,7 @@ const renderTable = ({
                                 sortable={ sortable }
                                 width={ width * widthAdjustment }
                                 textAlign={ textAlign }
+                                styles={ styles.th }
                                 onClick={ sortable ? changeSortOrder.bind(this, query, name, action(SET_SORT)) : undefined }
                             >
                                 { label }
@@ -191,17 +194,22 @@ const renderTable = ({
                         )
                     }}
                 </Tr>
-                <Tr columns={ columns }>
+                <Tr columns={ columns } styles={ getStyles(styles.tr, 'filter') }>
                     {({ filterable, type, width, ...rest }, index) => {
                         const { name } = rest;
                         const value = _.get(query, ['search', name, 'value']);
                         return (
-                            <Td key={ index } width={ `${width * widthAdjustment}px` }>
+                            <Td
+                                key={ index }
+                                width={ `${width * widthAdjustment}px` }
+                                styles={ getStyles(styles.td, 'filter') }
+                            >
                                 { filterable && <Renderer
                                     ofType="filter"
                                     forItem={ type }
                                     value={ value }
                                     filterer={(key, filter) => action(SET_FILTER)({ key, filter })}
+                                    styles={ getStyles(styles.filter, name) }
                                     { ...rest }
                                 /> }
                             </Td>
@@ -217,6 +225,7 @@ const renderTable = ({
                 startTop={ top }
                 visibleHeight={ visibleHeight }
                 rowHeight={ rowHeight }
+                styles={ styles.tbody }
             >
                 {({ item, top, index: rowIndex }) => (
                     <Tr
@@ -226,11 +235,16 @@ const renderTable = ({
                         columns={ columns }
                         height={ rowHeight }
                         even={ rowIndex % 2 === 0 }
+                        styles={ getStyles(styles.tr, 'body') }
                     >
                         {(column, index) => {
                             const { width, textAlign, name, type } = column;
                             return (
-                                <Td key={ index } width={ `${width * widthAdjustment}px` }>
+                                <Td
+                                    key={ index }
+                                    width={ `${width * widthAdjustment}px` }
+                                    styles={ getStyles(styles.td, 'body') }
+                                >
                                     <Renderer
                                         ofType="body"
                                         forItem={ type }
@@ -239,6 +253,7 @@ const renderTable = ({
                                         extraData={ bodyExtraData[name] }
                                         action={ action }
                                         thunk={ thunk }
+                                        styles={ getStyles(styles.body, name) }
                                     />
                                 </Td>
                             );
@@ -253,7 +268,7 @@ const renderTable = ({
 const ReduxDatatable = ( props ) => {
     const { config = {}, reducerName, tableData, action, thunk, loadData } = props;
     const [ visibleColumns, dispatch ] = useReducer(columnsReducer, _.range(config.columns.length));
-    const { toolbar = [], pagination = {}, filterable, headers, height, rowHeight, style, columns } = config;
+    const { toolbar = [], pagination = {}, filterable, headers, height, rowHeight, styles = {}, columns } = config;
     const tableConfig = {
         ...config,
         updateTableState: dispatch,
@@ -287,8 +302,8 @@ const ReduxDatatable = ( props ) => {
     return (
         <TableProvider config={{ reducerName, ...tableConfig }}>
             <Container>
-                { renderToolbar(toolbar, action, thunk, dispatch, columns, visibleColumns) }
-                { renderPagination('top', query, pagination, action, thunk) }
+                { renderToolbar(toolbar, action, thunk, dispatch, columns, visibleColumns, styles.toolbar) }
+                { renderPagination('top', query, pagination, action, thunk, styles.pagination) }
                 { renderTable({
                     action,
                     bodyExtraData: getExtraBodyRowProps(tableData, tableConfig.visibleColumns),
@@ -305,8 +320,9 @@ const ReduxDatatable = ( props ) => {
                     visibleHeight: height,
                     width,
                     widthAdjustment,
+                    styles
                 }) }
-                { renderPagination('bottom', query, pagination, action, thunk) }
+                { renderPagination('bottom', query, pagination, action, thunk, styles.pagination) }
             </Container>
         </TableProvider>
     );
diff --git a/src/utils.js b/src/utils.js
index 17bc337..4956c95 100755
--- a/src/utils.js
+++ b/src/utils.js
@@ -8,26 +8,6 @@ export const defaultLimiterCongig = {
 
 export const isArray = (value) => Array.isArray(value);
 
-export const calculatePaginationProps = (
-    { page, limit = 0, count = 0 },
-    defaultLimit = 10
-) => {
-    page = page > 1 ? page : 1
-    limit = limit != 0 ? limit : defaultLimit;
-
-    let start = (page - 1) * limit
-    let end = start + limit - 1
-
-    return {
-        page: page,
-        start: start,
-        end: (count > end && end >= 0) ? end : count,
-        count: count,
-        limit: limit,
-        total: Math.ceil(count / limit)
-    }
-}
-
 // export const isSelectionEmpty = (obj)  => {
 //     for(var key in obj) {
 //         if(obj.hasOwnProperty(key))
@@ -111,12 +91,22 @@ export const createActionCreator = ( type ) => ( data ) => {
     return action;
 }
 
-export const createReducer = (reducer, predicate) => (state, action) =>
+export const createReducer = (reducer, predicate) => (state, action) => (
     predicate(action) || state === undefined ? reducer(state, action) : state
+);
 
 export const prepareActionPayload = ({ name, reducerName, routes, entity }) => ( payload = {} ) => ({
     name, reducerName, routes, entity, payload
 })
 
-export const shouldUpdate = ( currentData, nextData, index ) =>
+export const shouldUpdate = ( currentData, nextData, index ) => (
     _.get(currentData, index, '') != _.get(nextData, index, '')
+)
+
+export const getStyles = ( styles, name ) => (
+    name && styles ? styles[name] : undefined
+)
+
+export const getExtendedStyles = ( name ) => ({ styles }) => (
+    name ? styles ? styles[name] : undefined : styles
+)

From a9c28aa55974a6f1f2ad51dfbb0c90ae36f0993a Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 5 Apr 2019 11:05:56 +0530
Subject: [PATCH 08/12] Complete styling api

---
 .babelrc                           |  36 ++++
 demo/src/schema/basic.js           | 305 +++++++++--------------------
 src/Renderer/Pagination/Limiter.js |   1 -
 src/Renderer/Pagination/Pages.js   |   9 +-
 src/components/Container.js        |   3 +-
 src/components/ExtendedDiv.js      |   6 +
 src/components/Pagination.js       |  24 ++-
 src/components/Table.js            |   6 +-
 src/components/Tbody.js            |  49 +++--
 src/components/Td.js               |   8 +-
 src/components/Th.js               |  18 +-
 src/components/Thead.js            |  29 ++-
 src/components/Toolbar.js          |  25 ++-
 src/components/Tr.js               |  18 +-
 src/createTable.js                 | 115 ++++++-----
 src/utils.js                       |  17 --
 16 files changed, 296 insertions(+), 373 deletions(-)
 create mode 100644 .babelrc
 create mode 100644 src/components/ExtendedDiv.js

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..94826a2
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,36 @@
+{
+  "presets": [
+    [
+      "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-preset-env/lib/index.js",
+      {
+        "loose": true,
+        "modules": false
+      }
+    ],
+    "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-preset-react/lib/index.js",
+    "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-preset-stage-1/lib/index.js"
+  ],
+  "plugins": [
+    "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-plugin-transform-decorators-legacy/lib/index.js",
+    [
+      "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-plugin-transform-react-remove-prop-types/lib/index.js",
+      {
+        "mode": "wrap"
+      }
+    ],
+    [
+      "/Users/eon/Documents/GitHub/redux-datatable/node_modules/babel-plugin-transform-runtime/lib/index.js",
+      {
+        "helpers": false,
+        "polyfill": false,
+        "regenerator": true
+      }
+    ]
+  ],
+  "ignore": [
+    ".spec.js",
+    ".test.js",
+    "-test.js",
+    "/__tests__/"
+  ]
+}
\ No newline at end of file
diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
index 72c2879..d3dd6ba 100644
--- a/demo/src/schema/basic.js
+++ b/demo/src/schema/basic.js
@@ -4,67 +4,91 @@ export default {
     rowHeight: 50,
     filterable: true,
     headers: true,
-    styles: {
-        tableContainer: {
-            fontSize: '16px',
-        },
-        // tableContainer:
-        // table:
-        // thead:
-        // tbody:
-        // tr: {
-        //     header:
-        //     filter:
-        //     body:
-        // }
-        // th:
-        // td: {
-        //      filter,
-        //      body
-        // },
-        toolbar: {
-            // item: {
-            //     backgroundColor: '#000',
-            // },
-            // containr:
-            // row:
-            // item:
-            item: {
-                actions: {
-                    marginRight: '5px'
-                },
-                columns: {
-                    float: 'right',
-                    'button': {
-                        background: '#fff',
-                        color: '#6c757d'
-                    },
-                    '> div > div': {
-                        right: 0,
-                        left: ''
-                    }
-                }
-            }
-        },
-        pagination: {
-            // container:
-            // item:
-            // items: {
-            //     [name]:
-            // },
-            item: {
-                pages: {
-                    float: 'right',
-                }
-            }
-        },
-        filter: {
-            // [name]:
-        },
-        body: {
-            // [name]:
-        }
-    },
+    // styles: {
+    //     tableContainer: {
+    //         fontSize: '16px',
+    //     },
+    //     // table: {
+    //     //     background: '#000',
+    //     // },
+    //     // thead: {
+    //     //     background: '#000'
+    //     // },
+    //     // tbody: {
+    //     //     background: '#000'
+    //     // },
+    //     // tr: {
+    //     //     header: { fontWeight: 'normal' },
+    //     //     filter: { },
+    //     //     body: { },
+    //     // },
+    //     // th: { textAlign: 'center', ':last-child': {
+    //     //     textAlign: 'right'
+    //     // }},
+    //     // td: {
+    //     //      filter: {},
+    //     //      body: { textAlign: 'center', ':last-child': {
+    //     //          textAlign: 'right'
+    //     //      }}
+    //     // },
+    //     toolbar: {
+    //         // item: {
+    //         //     backgroundColor: '#000',
+    //         // },
+    //         // containr:
+    //         // row:
+    //         // item:
+    //         item: {
+    //             actions: {
+    //                 marginRight: '5px'
+    //             },
+    //             columns: {
+    //                 float: 'right',
+    //                 'button': {
+    //                     background: '#fff',
+    //                     color: '#6c757d'
+    //                 },
+    //                 '> div > div': {
+    //                     right: 0,
+    //                     left: ''
+    //                 }
+    //             }
+    //         }
+    //     },
+    //     pagination: {
+    //         // container:
+    //         // item:
+    //         // items: {
+    //         //     [name]:
+    //         // },
+    //         item: {
+    //             pages: {
+    //                 float: 'right',
+    //             }
+    //         }
+    //     },
+    //     filter: {
+    //         // pageId: {' input': {
+    //         //     border: '1px solid #000'
+    //         // }}
+    //         // [name]:
+    //     },
+    //     body: {
+    //         actions: {
+    //             ' button': {
+    //                 fontSize: '12px',
+    //                 ':last-child': {
+    //                     background: '#dc3545',
+    //                     color: '#fff',
+    //                     ':hover': {
+    //                         backgroundColor: '#c82333',
+    //                     }
+    //                 }
+    //             }
+    //         }
+    //         // [name]:
+    //     }
+    // },
     pagination: {
         // visible: true, // or an object { top: true, bottom: false } default visible
         items: {
@@ -74,36 +98,19 @@ export default {
                 position: 10,
                 options: [10, 20, 50, 200, 2000],
                 default: 200,
-                style: {
-                    right: false,
-                }
             },
             pages: {
                 type: 'pages',
                 visible: true,
                 position: 20,
-                style: {
-                    right: true,
-                    button: {
-                        background: '#fff',
-                        color: '#6c757d',
-                        border: 'none',
-                        hover: {
-                            color: '#16181b',
-                            backgroundColor: '#f8f9fa'
-                        }
-                    }
-                }
+                right: true,
             },
             resultCount: {
                 type: 'resultCount',
                 visible: true,
                 position: 30,
-                style: {
-                    width: '350px',
-                    textAlign: 'center',
-                }
-            }
+                right: true,
+            },
         }
     },
     routes: {
@@ -152,105 +159,9 @@ export default {
             type: 'columns',
             label: 'Columns',
             visible: true,
-            state: false,
-            // style: {
-            //     right: true,
-            //     button: {
-            //         background: '#fff',
-            //         color: '#6c757d'
-            //     },
-            //     dropdownMenu: {
-            //         right: true
-            //     }
-            // }
-        }/*, {
-            label: 'NACTIONS',
-            id: 'massActions',
-            delete: {
-                type: 'action',
-                name: 'delete',
-                label: 'Delete',
-                indexField: '@id'
-            },
-            visible: true,
-            style: {
-                right: false,
-                width: '200px'
-            }
-        }, {
-            label: '2Actions',
-            id: 'massActions',
-            delete: {
-                type: 'action',
-                name: 'delete',
-                label: 'Delete',
-                indexField: '@id'
-            },
-            visible: true,
-            style: {
-                right: true,
-                width: '100px'
-            }
-        }*/],
-        // [{
-        //     label: 'Actions',
-        //     id: 'massActions',
-        //     delete: {
-        //         type: 'action',
-        //         name: 'delete',
-        //         label: 'Delete',
-        //         indexField: '@id'
-        //     },
-        //     visible: true,
-        //     style: {
-        //         right: false,
-        //         width: '200px'
-        //     }
-        // }, {
-        //     type: 'columns',
-        //     label: 'Columns',
-        //     visible: true,
-        // }, {
-        //     label: 'NACTIONS',
-        //     id: 'massActions',
-        //     delete: {
-        //         type: 'action',
-        //         name: 'delete',
-        //         label: 'Delete',
-        //         indexField: '@id'
-        //     },
-        //     visible: true,
-        //     style: {
-        //         width: '200px'
-        //     }
-        // }, {
-        //     label: '2Actions',
-        //     id: 'massActions',
-        //     delete: {
-        //         type: 'action',
-        //         name: 'delete',
-        //         label: 'Delete',
-        //         indexField: '@id'
-        //     },
-        //     visible: true,
-        //     style: {
-        //         right: true,
-        //         width: '100px'
-        //     }
-        // }]
+            state: false
+        }],
     ],
-    // toolbar: {
-    //     massActions: {
-    //         label: 'Actions',
-    //         delete: {
-    //             type: 'action',
-    //             name: 'delete',
-    //             label: 'Delete',
-    //             indexField: '@id'
-    //         }
-    //     },
-    //     columns: true
-    // },
     columns: [{
         name: 'ids',
         label: '',
@@ -266,32 +177,7 @@ export default {
         width: 150,
         filterable: true,
         sortable: true,
-    }, /*{
-        label: 'Avatar',
-        type: 'image',
-        name: 'avatar',
-        sortable: false,
-        textAlign: 'center',
-        width: 200,
-        filterable: false,
-        imgHeight: 50
-    }, {
-        label: 'First Name',
-        type: 'string',
-        name: 'first_name',
-        sortable: true,
-        textAlign: 'text-left',
-        width: 200,
-        filterable: true,
     }, {
-        label: 'Last Name',
-        type: 'string',
-        name: 'last_name',
-        sortable: true,
-        textAlign: 'text-left',
-        width: 200,
-        filterable: true,
-    },*/{
         label: 'Created at',
         type: 'date',
         name: 'createdAt',
@@ -315,9 +201,6 @@ export default {
             },
             thunk: ( payload ) => ( dispatch, getState ) => {
                 console.log('edit', payload, getState());
-            },
-            style: {
-                fontSize: '12px'
             }
         }, {
             type: 'action',
@@ -332,14 +215,6 @@ export default {
                     ? console.log('delete', getState())
                     : console.log(false);
 
-            },
-            style: {
-                background: '#dc3545',
-                color: '#fff',
-                fontSize: '12px',
-                hover: {
-                    backgroundColor: '#c82333',
-                }
             }
         }]
     }]
diff --git a/src/Renderer/Pagination/Limiter.js b/src/Renderer/Pagination/Limiter.js
index 965b602..056e40b 100644
--- a/src/Renderer/Pagination/Limiter.js
+++ b/src/Renderer/Pagination/Limiter.js
@@ -8,7 +8,6 @@ const Limiter = ({ options, limit, action, style, default: defaultLimit }) => {
     return (
         <Label flex noWrap>
             <Field.Select
-                width="50%"
                 id="limiter"
                 value={ limit || defaultLimit }
                 onChange={ ( event ) => setLimit(event.target.value) }>
diff --git a/src/Renderer/Pagination/Pages.js b/src/Renderer/Pagination/Pages.js
index d856605..257758b 100644
--- a/src/Renderer/Pagination/Pages.js
+++ b/src/Renderer/Pagination/Pages.js
@@ -34,18 +34,17 @@ const Pages = ({ page, total, action, style }) => {
     const setPage = ( page ) =>  action(SET_PAGE)({ page });
     return (
         <List>
-            <Button { ...style.button } onClick={ setPage.bind(this, 1) } disabled={ page == 1 }>First</Button>
-            <Button { ...style.button } onClick={ setPage.bind(this, page - 1) } disabled={ page < 2 } >Previous</Button>
+            <Button onClick={ setPage.bind(this, 1) } disabled={ page == 1 }>First</Button>
+            <Button onClick={ setPage.bind(this, page - 1) } disabled={ page < 2 } >Previous</Button>
             { getPages(page, total).map( (link, index) =>
                 <Button
                     key={ index }
-                    { ...style.button }
                     onClick={ setPage.bind(this, link) }
                     active={ page === link }
                 >{ link }</Button>
             ) }
-            <Button { ...style.button } onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Button>
-            <Button { ...style.button } onClick={ setPage.bind(this, total) } disabled={ page == total }>Last</Button>
+            <Button onClick={ setPage.bind(this, page + 1) } disabled={ page >= total }>Next</Button>
+            <Button onClick={ setPage.bind(this, total) } disabled={ page == total }>Last</Button>
         </List>
     );
 }
diff --git a/src/components/Container.js b/src/components/Container.js
index d3c946d..b0f66b7 100644
--- a/src/components/Container.js
+++ b/src/components/Container.js
@@ -7,9 +7,10 @@ const Container = styled.div `
     margin-right: auto;
     margin-left: auto;
     font-size: 14px;
+    clear: both;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
         sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 `
 
 const ExtendedContainer = styled(Container)(getExtendedStyles());
-export default Container;
+export default ExtendedContainer;
diff --git a/src/components/ExtendedDiv.js b/src/components/ExtendedDiv.js
new file mode 100644
index 0000000..15ed0e5
--- /dev/null
+++ b/src/components/ExtendedDiv.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getExtendedStyles } from '../utils';
+
+const ExtendedDiv = styled.div(getExtendedStyles())
+export default ExtendedDiv;
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
index ca532f9..ddd655b 100644
--- a/src/components/Pagination.js
+++ b/src/components/Pagination.js
@@ -1,15 +1,20 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { getExtendedStyles, getStyles } from '../utils';
 
 const Item = styled.div `
     display: flex;
-    min-width: 200px;
-    float: left;
+    min-width: auto;
+    float: ${props => props.right ? 'right' : 'left'};
     text-align: left;
     flex-direction: column;
     justify-content: center;
     height: 100%;
+    margin-left: 10px;
+
+    ${props => props.first && css `
+        margin-left: 0;
+    `}
 `
 
 const ExtendedItem = styled(Item)(getExtendedStyles());
@@ -56,9 +61,16 @@ const Pagination = ({
     return(
         isVisible(visible, position) && <div className={ className }>
             { Object.keys(items).map((key, index) => {
-                const { visible: itemVisible, style, type } = items[key];
+                const { visible: itemVisible, type, right } = items[key];
                 return (
-                    itemVisible && <ExtendedItem key={ index } styles={ getStyles(item, type) }>
+                    itemVisible && <ExtendedItem
+                        key={ index }
+                        index={ index }
+                        first={ index === 0 }
+                        last={ index === items.length - 1 }
+                        right={ right }
+                        styles={ getStyles(item, type) }
+                    >
                         { children(items[key], paginationProps, index) }
                     </ExtendedItem>
                 )
@@ -71,7 +83,5 @@ const StyledPagination = styled(Pagination) `
     display: block;
     width: 100%;
 `
-
 const ExtendedStyledPagination = styled(StyledPagination)(getExtendedStyles('container'));
-
 export default ExtendedStyledPagination;
diff --git a/src/components/Table.js b/src/components/Table.js
index 6f2d7e4..0c027fb 100644
--- a/src/components/Table.js
+++ b/src/components/Table.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { getExtendedStyles } from '../utils';
 
 const Table = styled.div `
     overflow: hidden;
@@ -7,6 +8,9 @@ const Table = styled.div `
     width: 100%;
     background-color: transparent;
     border-collapse: collapse;
+    clear: both;
+    margin: 10px 0;
 `
 
-export default Table;
+const ExtendedTable = styled(Table)(getExtendedStyles());
+export default ExtendedTable;
diff --git a/src/components/Tbody.js b/src/components/Tbody.js
index 83f88e5..7dafddd 100644
--- a/src/components/Tbody.js
+++ b/src/components/Tbody.js
@@ -1,37 +1,20 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-
-const Outer = styled.div `
-    max-width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    ${props => props.height && css `
-        height: ${props.height}
-    `};
-    overflow-y: scroll;
-    overflow-x: scroll;
-`
-
-export const Inner = styled.div.attrs(({ width = '100%' }) => ({
-    style: { width }
-})) `
-    position: relative;
-    border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
-    ${props => props.height && css `
-        height: ${props.height}
-    `};
-`
+import { getExtendedStyles } from '../utils';
 
 const Tbody = React.forwardRef(({
+    className,
+    style,
     children,
     data,
     height,
+    innerHeight,
     overScanCount = 10,
     rowHeight,
     rowWidth,
     startTop,
     visibleHeight,
-    width
+    width = '100%'
 }, ref) => {
     const visibleLower =  startTop - overScanCount * rowHeight;
     const visibleUpper = startTop + visibleHeight + overScanCount * rowHeight;
@@ -45,15 +28,27 @@ const Tbody = React.forwardRef(({
     const slicedData = data.slice(startIndex, endIndex);
 
     return (
-        <Outer ref={ ref } height={ `${height > visibleHeight ? visibleHeight : height}px` }>
-            <Inner width={ `${width}px` } height={ `${height}px` }>
+        <div className={ className } style={ style } ref={ ref }>
+            <div style={{ width, height: innerHeight, position: 'relative' }}>
                 { slicedData.map((item, index) => {
                     let currentIndex = startIndex + index;
                     return children({ item, top: currentIndex * rowHeight, index: currentIndex })
                 })}
-            </Inner>
-        </Outer>
+            </div>
+        </div>
     );
 });
 
-export default Tbody;
+
+const StyledTbody = styled(Tbody).attrs(({ height }) => ({
+    style: { height }
+})) `
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    border-bottom: 1px solid #ddd;
+`
+const ExtendedStyledTbody = styled(StyledTbody)(getExtendedStyles())
+export default ExtendedStyledTbody;
diff --git a/src/components/Td.js b/src/components/Td.js
index a328343..9c16f8d 100644
--- a/src/components/Td.js
+++ b/src/components/Td.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { getExtendedStyles } from '../utils';
 
 const Td = styled.div.attrs(({ width: maxWidth }) => ({
     style: { maxWidth }
@@ -9,14 +10,15 @@ const Td = styled.div.attrs(({ width: maxWidth }) => ({
     flex: 1;
     display: flex;
     padding: 10px 5px;
-    text-align: ${props => props.textAlign || 'center'};
+    text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: middle;
     width: 100%;
     position: relative;
     overflow: hidden;
-    font-size: ${props => props.fontSize || '14px'};
+    font-size: 14px;
 `
 
-export default Td;
+const ExtendedTd = styled(Td)(getExtendedStyles())
+export default ExtendedTd;
diff --git a/src/components/Th.js b/src/components/Th.js
index eb0395b..5583774 100644
--- a/src/components/Th.js
+++ b/src/components/Th.js
@@ -1,16 +1,14 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
+import { getExtendedStyles } from '../utils';
 
 import Td from './Td';
 
 const Th = styled(Td) `
-    font-weight: ${props => props.fontWeigth || 'bold'};
-    background: ${props => props.background || '#f9fafb'};
-    border-bottom: ${props => props.borderBottom || '1px solid rgba(34,36,38,.1)'};
-
-    ${props => props.sortable && css `
-        cursor: pointer;
-    `}
+    font-weight: bold;
+    background: #f9fafb;
+    border-bottom: 1px solid rgba(34, 36, 38, .1);
+    cursor: ${props => props.sortable ? 'pointer': 'default'};
 `
-
-export default Th;
+const ExtendedTh = styled(Th)(getExtendedStyles())
+export default ExtendedTh;
diff --git a/src/components/Thead.js b/src/components/Thead.js
index b56822a..ecaa635 100644
--- a/src/components/Thead.js
+++ b/src/components/Thead.js
@@ -1,25 +1,22 @@
 import React from 'react';
 import styled from 'styled-components';
+import { getExtendedStyles } from '../utils';
 
-const Outer = styled.div `
+const Thead = React.forwardRef(({ className, children, width = '100%' }, ref) => (
+    <div className={ className } ref={ ref }>
+        <div style={{ width }}>
+            { children }
+        </div>
+    </div>
+));
+
+const StyledThead = styled(Thead) `
     max-width: 100%;
     margin-right: auto;
     margin-left: auto;
     overflow: hidden;
+    border-bottom: 1px solid #ddd;
 `
 
-export const Inner = styled.div.attrs(({ width = '100%' }) => ({
-    style: { width }
-})) `
-    border-bottom: ${props => props.borderBottom || '1px solid #ddd'};
-`
-
-const Thead = React.forwardRef(({ children, width }, ref) => (
-    <Outer ref={ ref }>
-        <Inner width={ width }>
-            { children }
-        </Inner>
-    </Outer>
-));
-
-export default Thead;
+const ExtendedStyledThead = styled(StyledThead)(getExtendedStyles());
+export default ExtendedStyledThead;
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index e9b3afa..fc6e82a 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -6,7 +6,6 @@ const Row = styled.div `
     display: inline-block;
     width: 100%;
 `
-
 const ExtendedRow = styled(Row)(getExtendedStyles())
 
 const Item = styled.div `
@@ -14,13 +13,12 @@ const Item = styled.div `
     width: auto;
     float: left;
 `
-
 const ExtendedItem = styled(Item)(getExtendedStyles())
 
-const toolbarItem = ( children, item, index, styles ) => {
+const toolbarItem = ( children, item, index, first, last, styles ) => {
     const { visible } = item;
     return (
-        <ExtendedItem key={ index } styles={ styles }>
+        <ExtendedItem key={ index } first={ first } laststyles={ styles }>
             { visible !== false && children(item, index)  }
         </ExtendedItem>
     );
@@ -34,9 +32,23 @@ const Toolbar = ({
 }) => (
     <div className={ className }>
         { items.map((row, rowIndex) => (
-            <ExtendedRow key={ rowIndex } styles={ row }>
+            <ExtendedRow
+                key={ rowIndex }
+                index={ rowIndex }
+                first={ rowIndex === 0 }
+                last={ rowIndex === items.length - 1 }
+                styles={ row }
+            >
                 { row.map((item, itemIndex) => (
-                    toolbarItem(children, item, itemIndex, getStyles(itemStyles, item.name))
+                    <ExtendedItem
+                        key={ itemIndex }
+                        index={ itemIndex }
+                        first={ itemIndex === 0 }
+                        last={ itemIndex === row.length - 1 }
+                        styles={ getStyles(itemStyles, item.name) }
+                    >
+                        { item.visible !== false && children(item, itemIndex)  }
+                    </ExtendedItem>
                 )) }
             </ExtendedRow>
         ))}
@@ -49,5 +61,4 @@ const StyledToolbar = styled(Toolbar) `
 `;
 
 const ExtendedStyledToolbar = styled(StyledToolbar)(getExtendedStyles('container'));
-
 export default ExtendedStyledToolbar;
diff --git a/src/components/Tr.js b/src/components/Tr.js
index f6f1647..b6896ab 100644
--- a/src/components/Tr.js
+++ b/src/components/Tr.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
+import { getExtendedStyles } from '../utils';
 
 const Tr = ({ className, children, style, columns }) => (
     <div className={ className } style={ style }>
@@ -14,15 +15,12 @@ const StyledTr = styled(Tr).attrs(({ top }) => ({
 })) `
     display: flex;
     width: 100%;
-    padding: ${props => props.padding || 0};
-    height: ${props => props.height || 'auto'};
+    padding: 0;
+    height: auto;
+    position: relative;
+    background: none;
     position: ${props => props.position || 'relative'};
-    background: ${props => props.background || 'none'};
 
-    ${props => props.even && css `
-        background: ${props.evenBackground || 'none'};
-    `}
 `
-
-
-export default StyledTr;
+const ExtendedStyledTr = styled(StyledTr)(getExtendedStyles())
+export default ExtendedStyledTr;
diff --git a/src/createTable.js b/src/createTable.js
index 8ed9422..5641ed3 100755
--- a/src/createTable.js
+++ b/src/createTable.js
@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 
 import TableProvider from './TableProvider';
 import Renderer from './Renderer';
+import Row from './components/Row';
 import Table from './components/Table';
 import Thead from './components/Thead';
 import Tbody from './components/Tbody';
@@ -15,6 +16,7 @@ import Toolbar from './components/Toolbar';
 import Pagination from './components/Pagination';
 import Container from './components/Container';
 import SortCaret from './components/SortCaret';
+import ExtendedDiv from './components/ExtendedDiv';
 import { createActionCreator, isArray, getStyles } from './utils';
 import { setPage, setLimit, setSort, SET_SORT, SET_FILTER } from './actions';
 
@@ -106,35 +108,39 @@ const changeSortOrder = ( query, colName, sorter ) => {
     sorter({ sort: colName, dir });
 }
 
-const renderToolbar = ( config = [], action, thunk, columnUpdater, columns, visibleColumns, styles ) => (
-    <Toolbar items={ config } styles={ styles }>
-        {({ state, ...itemConfig }) => (
-            <Renderer
-                ofType="toolbar"
-                forItem={ itemConfig.type }
-                itemConfig={ itemConfig }
-                action={ action }
-                thunk={ thunk }
-                columnUpdater={ columnUpdater }
-                columns={ columns }
-                visibleColumns={ visibleColumns }
-            />
-        )}
-    </Toolbar>
+const renderToolbar = ( config = [], action, thunk, columnUpdater, columns, visibleColumns, styles = {} ) => (
+    <Row>
+        <Toolbar items={ config } styles={ styles }>
+            {({ state, ...itemConfig }) => (
+                <Renderer
+                    ofType="toolbar"
+                    forItem={ itemConfig.type }
+                    itemConfig={ itemConfig }
+                    action={ action }
+                    thunk={ thunk }
+                    columnUpdater={ columnUpdater }
+                    columns={ columns }
+                    visibleColumns={ visibleColumns }
+                />
+            )}
+        </Toolbar>
+    </Row>
 );
 
-const renderPagination = ( position, query, config = {}, action, thunk, styles ) => (
-    <Pagination position={ position } config={ config } query={ query } styles={ styles }>
-        {(item, paginationProps) => (
-            <Renderer
-                ofType="pagination"
-                forItem={ item.type }
-                action={ action }
-                { ...item }
-                { ...paginationProps }
-            />
-        )}
-    </Pagination>
+const renderPagination = ( position, query, config = {}, action, thunk, styles = {} ) => (
+    <Row>
+        <Pagination position={ position } config={ config } query={ query } styles={ styles }>
+            {(item, paginationProps) => (
+                <Renderer
+                    ofType="pagination"
+                    forItem={ item.type }
+                    action={ action }
+                    { ...item }
+                    { ...paginationProps }
+                />
+            )}
+        </Pagination>
+    </Row>
 );
 
 const getExtraBodyRowProps = (data, columns) => (
@@ -171,11 +177,11 @@ const renderTable = ({
     visibleHeight,
     width,
     widthAdjustment = 1,
-    styles
+    styles = {}
 }) => (
-    <Container styles={ styles.tableContainer }>
-        <Table styles={ styles.table }>
-            <Thead ref={ tableHeader } width={ `${width}px` } styles={ styles.thead }>
+    <Container styles={ getStyles(styles, 'tableContainer') }>
+        <Table styles={ getStyles(styles, 'table') }>
+            <Thead ref={ tableHeader } width={ `${width}px` } styles={ getStyles(styles, 'thead') }>
                 <Tr columns={ columns } styles={ getStyles(styles.tr, 'header') }>
                     {({ sortable, width, textAlign, name, label }, index) => {
                         const { sort, dir } = query;
@@ -204,14 +210,15 @@ const renderTable = ({
                                 width={ `${width * widthAdjustment}px` }
                                 styles={ getStyles(styles.td, 'filter') }
                             >
-                                { filterable && <Renderer
-                                    ofType="filter"
-                                    forItem={ type }
-                                    value={ value }
-                                    filterer={(key, filter) => action(SET_FILTER)({ key, filter })}
-                                    styles={ getStyles(styles.filter, name) }
-                                    { ...rest }
-                                /> }
+                                { filterable && <ExtendedDiv styles={ getStyles(styles.filter, name) }>
+                                    <Renderer
+                                        ofType="filter"
+                                        forItem={ type }
+                                        value={ value }
+                                        filterer={(key, filter) => action(SET_FILTER)({ key, filter })}
+                                        { ...rest }
+                                    />
+                                </ExtendedDiv> }
                             </Td>
                         )
                     }}
@@ -220,12 +227,13 @@ const renderTable = ({
             <Tbody
                 ref={ tableBody }
                 width={ width }
-                height={ height }
+                height={ `${height > visibleHeight ? visibleHeight : height}px` }
+                innerHeight={ height }
                 data={ items }
                 startTop={ top }
                 visibleHeight={ visibleHeight }
                 rowHeight={ rowHeight }
-                styles={ styles.tbody }
+                styles={ getStyles(styles, 'tbody') }
             >
                 {({ item, top, index: rowIndex }) => (
                     <Tr
@@ -233,7 +241,7 @@ const renderTable = ({
                         position="absolute"
                         top={ `${top}px` }
                         columns={ columns }
-                        height={ rowHeight }
+                        height={ `${rowHeight}px` }
                         even={ rowIndex % 2 === 0 }
                         styles={ getStyles(styles.tr, 'body') }
                     >
@@ -245,16 +253,17 @@ const renderTable = ({
                                     width={ `${width * widthAdjustment}px` }
                                     styles={ getStyles(styles.td, 'body') }
                                 >
-                                    <Renderer
-                                        ofType="body"
-                                        forItem={ type }
-                                        data={ item }
-                                        colConfig={ column }
-                                        extraData={ bodyExtraData[name] }
-                                        action={ action }
-                                        thunk={ thunk }
-                                        styles={ getStyles(styles.body, name) }
-                                    />
+                                    <ExtendedDiv styles={ getStyles(styles.body, name) }>
+                                        <Renderer
+                                            ofType="body"
+                                            forItem={ type }
+                                            data={ item }
+                                            colConfig={ column }
+                                            extraData={ bodyExtraData[name] }
+                                            action={ action }
+                                            thunk={ thunk }
+                                        />
+                                    </ExtendedDiv>
                                 </Td>
                             );
                         }}
@@ -263,7 +272,7 @@ const renderTable = ({
             </Tbody>
         </Table>
     </Container>
-);
+)
 
 const ReduxDatatable = ( props ) => {
     const { config = {}, reducerName, tableData, action, thunk, loadData } = props;
diff --git a/src/utils.js b/src/utils.js
index 4956c95..c8d561c 100755
--- a/src/utils.js
+++ b/src/utils.js
@@ -8,22 +8,8 @@ export const defaultLimiterCongig = {
 
 export const isArray = (value) => Array.isArray(value);
 
-// export const isSelectionEmpty = (obj)  => {
-//     for(var key in obj) {
-//         if(obj.hasOwnProperty(key))
-//             return false;
-//     }
-//
-//     return true;
-// }
-
 export const getUrl = ( baseUrl, endpoint ) =>  baseUrl + endpoint;
 
-// export const pushRoute = ( action, params, context ) => context.router.history.push({
-//     pathname: action.route,
-//     search: '?' + params.toString()
-// });
-
 export const getSelectedKeys = ( data, dataKey ) => {
     if( !data[dataKey] ) {
         return false;
@@ -80,9 +66,6 @@ export const paramsResolver = ( params, data ) => {
     return paramsObject;
 }
 
-// export const getValueByPath = ( obj, path ) =>
-//     path.reduce((acc, currVal) => (acc && acc[currVal]) ? acc[currVal] : null, obj);
-
 export const createActionCreator = ( type ) => ( data ) => {
     const { name, reducerName, routes, entity, payload } = data;
     let action = ({ type, meta: { name, routes, reducerName, entity }, payload });

From 97e690179731e703f1c1d93c06b9b6305daca572 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 5 Apr 2019 11:24:09 +0530
Subject: [PATCH 09/12] Update README.md

---
 README.md | 72 +++++++++++++++++++++++++++++++++----------------------
 1 file changed, 44 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index c4df947..b5f2509 100644
--- a/README.md
+++ b/README.md
@@ -46,33 +46,30 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
 	name: 'your_table_name', // this is the key used to set your table data inside the table reducer
 	height: 500,
 	rowHeight: 50,
-	pagination: {
-		items: [{
-            type: 'limiter',
-            visible: true,
-            position: 10,
-            options: [10, 20, 50, 200, 2000],
-            default: 200,
-            style: {
-                right: false,
-            }
-        }, {
-            type: 'pages',
-            visible: true,
-            position: 20,
-            style: {
+    pagination: {
+        // visible: true, // or an object { top: true, bottom: false } default visible
+        items: {
+            limiter: {
+                type: 'limiter',
+                visible: true,
+                position: 10,
+                options: [10, 20, 50, 200, 2000],
+                default: 200,
+            },
+            pages: {
+                type: 'pages',
+                visible: true,
+                position: 20,
                 right: true,
-            }
-        }, {
-            type: 'resultCount',
-            visible: true,
-            position: 30,
-            style: {
-                width: '350px',
-                textAlign: 'center',
-            }
-        }]
-	},
+            },
+            resultCount: {
+                type: 'resultCount',
+                visible: true,
+                position: 30,
+                right: true,
+            },
+        }
+    },
 	routes: { // You can add other routes and handle them using custom actions.
 		get: { // The route used to fetch data and it's params
 			route: '/{your_route}',
@@ -199,15 +196,16 @@ const YourComponent = () =>
 | 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 | array | false | [] | Array of item objects available for display in the pagination bar. Check below for items available |
+| 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 array:
+##### Pagination items object:
 
 | Key | Type | Required | Default | Description |
 | ------------ | ------------ | ------------ | ------------ | ------------ |
@@ -276,6 +274,24 @@ Toolbar config is an array of array of object where objects are the toolbar item
 | 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) |
+
 ## License
 The MIT License (MIT)
 

From 3b095220fc098e2694d7c523c4b83345748e0888 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 5 Apr 2019 11:25:17 +0530
Subject: [PATCH 10/12] Update README.md

---
 README.md | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/README.md b/README.md
index b5f2509..95a3aff 100644
--- a/README.md
+++ b/README.md
@@ -92,9 +92,6 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
             label: 'Columns',
             visible: true,
             state: false,
-            style: {
-                right: true
-            }
         },
 		...
 		]
@@ -211,15 +208,9 @@ const YourComponent = () =>
 | ------------ | ------------ | ------------ | ------------ | ------------ |
 | type | string | true | - | One of the following: limiter, pages, resultCount |
 | visible | boolean | false | true | Whether the item is visible |
-| style | object | false | {} | Stylable properties |
 | **Limiter specific options** |   |   |   |   |
 | options | array | true | - | Array of integers with limiter options |
 | default | array | true | - | One of the values in the limiter options key |
-| **- style** |   |   |   |   |
-| right | boolean | false | false | Align the item to the right |
-| width | integer | false | 200 | Width of the item |
-| textAlign | string | false | left | Align the text of the item to the right, left or center|
-| fontSize | string | false | 14 | The font size of the text in the item |
 
 #### Routes object
 
@@ -242,7 +233,6 @@ Toolbar config is an array of array of object where objects are the toolbar item
 | 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 |
-| style | object | false | {} | Define toolbar item styles |
 | **For type: actions** |   |   |   |   |
 | options | array | true | - | Array of option objects |
 | **-- options** |   |   |   |   |
@@ -250,10 +240,6 @@ Toolbar config is an array of array of object where objects are the toolbar item
 | 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** |   |   |   |   |
-| right | boolean | false | false | Align the item to the right |
-| width | integer | false | 200 | Width of the item |
-| fontSize | string | false | 14 | The font size of the text in the item |
 
 #### Columns object
 

From 5dcede525e64fa17a1a235f05a2e9da7afd82d0a Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 5 Apr 2019 14:18:13 +0530
Subject: [PATCH 11/12] 0.2.0

---
 package-lock.json | 67 +++++++++++++++++++++++------------------------
 package.json      |  2 +-
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 15f2745..91a8c09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -8,6 +8,7 @@
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
             "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
+            "dev": true,
             "requires": {
                 "@babel/types": "^7.0.0"
             }
@@ -16,6 +17,7 @@
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
             "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
+            "dev": true,
             "requires": {
                 "@babel/types": "^7.0.0"
             }
@@ -32,6 +34,7 @@
             "version": "7.3.4",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.4.tgz",
             "integrity": "sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==",
+            "dev": true,
             "requires": {
                 "esutils": "^2.0.2",
                 "lodash": "^4.17.11",
@@ -41,7 +44,8 @@
                 "to-fast-properties": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-                    "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+                    "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+                    "dev": true
                 }
             }
         },
@@ -49,6 +53,7 @@
             "version": "0.7.3",
             "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
             "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
+            "dev": true,
             "requires": {
                 "@emotion/memoize": "0.7.1"
             }
@@ -56,12 +61,14 @@
         "@emotion/memoize": {
             "version": "0.7.1",
             "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
-            "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+            "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==",
+            "dev": true
         },
         "@emotion/unitless": {
             "version": "0.7.3",
             "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
-            "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
+            "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==",
+            "dev": true
         },
         "@insin/npm-install-webpack-plugin": {
             "version": "5.0.0",
@@ -1122,6 +1129,7 @@
             "version": "1.10.0",
             "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz",
             "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==",
+            "dev": true,
             "requires": {
                 "@babel/helper-annotate-as-pure": "^7.0.0",
                 "@babel/helper-module-imports": "^7.0.0",
@@ -1198,7 +1206,8 @@
         "babel-plugin-syntax-jsx": {
             "version": "6.18.0",
             "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-            "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+            "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+            "dev": true
         },
         "babel-plugin-syntax-object-rest-spread": {
             "version": "6.13.0",
@@ -2471,7 +2480,8 @@
         "camelize": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-            "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+            "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+            "dev": true
         },
         "caniuse-lite": {
             "version": "1.0.30000943",
@@ -3081,7 +3091,8 @@
         "css-color-keywords": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-            "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+            "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
+            "dev": true
         },
         "css-loader": {
             "version": "1.0.0",
@@ -3165,6 +3176,7 @@
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.0.tgz",
             "integrity": "sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==",
+            "dev": true,
             "requires": {
                 "camelize": "^1.0.0",
                 "css-color-keywords": "^1.0.0",
@@ -3934,7 +3946,8 @@
         "esutils": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-            "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+            "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+            "dev": true
         },
         "etag": {
             "version": "1.8.1",
@@ -5386,7 +5399,8 @@
         "has-flag": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+            "dev": true
         },
         "has-symbols": {
             "version": "1.0.0",
@@ -7952,7 +7966,8 @@
         "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=="
+            "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==",
+            "dev": true
         },
         "memory-fs": {
             "version": "0.4.1",
@@ -9565,7 +9580,8 @@
         "postcss-value-parser": {
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-            "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+            "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+            "dev": true
         },
         "prelude-ls": {
             "version": "1.1.2",
@@ -11585,18 +11601,11 @@
                 "schema-utils": "^0.4.5"
             }
         },
-        "styled-button-component": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/styled-button-component/-/styled-button-component-3.0.1.tgz",
-            "integrity": "sha512-Y88+H5GgL9ZXvu4BY2hxRmLp/wDJhcrVpf3fBjay+wBgAPK6JocBAPq8X+/PXYhg8Fzi0GcOilSo0DVh4L06LA==",
-            "requires": {
-                "styled-config": "^3.0.1"
-            }
-        },
         "styled-components": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz",
             "integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==",
+            "dev": true,
             "requires": {
                 "@babel/helper-module-imports": "^7.0.0",
                 "@emotion/is-prop-valid": "^0.7.3",
@@ -11615,34 +11624,24 @@
                     "version": "5.5.0",
                     "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
                     "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                    "dev": true,
                     "requires": {
                         "has-flag": "^3.0.0"
                     }
                 }
             }
         },
-        "styled-config": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/styled-config/-/styled-config-3.0.1.tgz",
-            "integrity": "sha512-dzXbqRgJPTEbm30T2FYx3JyWCLAXI2B7zoyJcukFLB2WqGZlx640/4TqIq8sgpUlkkLZW5ufeX09i79sREwYFw=="
-        },
-        "styled-dropdown-component": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/styled-dropdown-component/-/styled-dropdown-component-3.0.1.tgz",
-            "integrity": "sha512-pjZME8BBAIXdysHMJPMoIaMsDM43RJE9Upb2yqaAzk2sWA08bUXUURNzckTlcj1wLuxp68B9ocUtFXk4DMGxYg==",
-            "requires": {
-                "styled-config": "^3.0.1"
-            }
-        },
         "stylis": {
             "version": "3.5.4",
             "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-            "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+            "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==",
+            "dev": true
         },
         "stylis-rule-sheet": {
             "version": "0.0.10",
             "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-            "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+            "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
+            "dev": true
         },
         "supports-color": {
             "version": "6.1.0",
diff --git a/package.json b/package.json
index 267fde8..23c9b37 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "React-Redux data table",
     "main": "lib/index.js",
     "module": "es/index.js",

From 9f549066d68b3488475fd7f46d7682177841fec9 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 5 Apr 2019 14:31:32 +0530
Subject: [PATCH 12/12] Added Codacy badge

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 95a3aff..4b194e9 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,7 @@
 [Developed by Flipbyte](https://www.flipbyte.com/)
 
 [![npm package][npm-badge]][npm]
+[![Codacy Badge][codacy-badge]][codacy]
 
 Datatable built using React and Redux to fetch JSON data asynchronously using REST API.
 
@@ -283,3 +284,6 @@ 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&amp;utm_medium=referral&amp;utm_content=flipbyte/redux-datatable&amp;utm_campaign=Badge_Grade