From a1d67a9992884c0eb4b1838296a7cf432f463ed2 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 12 Jul 2019 09:54:23 +0530
Subject: [PATCH 1/4] Allow custom class names for most of the components

---
 demo/src/schema/basic.js                |  2 +-
 demo/src/schema/normalized.js           |  9 ++++++++-
 src/components/Body.js                  | 22 ++++++++++++++--------
 src/components/Button.js                |  4 ++--
 src/components/Columns.js               | 14 +++++++++-----
 src/components/Editable.js              | 10 ++++++++--
 src/components/Filters.js               | 15 +++++++++++----
 src/components/Header.js                | 14 ++++++++++----
 src/components/Limiter.js               |  6 +++---
 src/components/MassActions.js           | 19 ++++++++++++++-----
 src/components/Pages.js                 | 21 ++++++++++++++-------
 src/components/Print.js                 |  5 +++--
 src/components/Renderer/Body/Actions.js |  9 +++++----
 src/components/ResetFilters.js          |  5 +++--
 src/components/ResultCount.js           |  4 ++--
 src/components/Table.js                 |  8 +++-----
 src/createTable.js                      |  4 ++--
 17 files changed, 112 insertions(+), 59 deletions(-)

diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
index 8a56741..2f8da49 100644
--- a/demo/src/schema/basic.js
+++ b/demo/src/schema/basic.js
@@ -327,7 +327,7 @@ export default {
                     type: 'action',
                     name: 'edit',
                     label: 'Edit',
-                    htmlClass: 'btn btn-secondary',
+                    className: 'btn btn-secondary',
                     thunk: ( config ) => ( dispatch, getState ) => {
                         console.log('edit', config, getState());
                     }
diff --git a/demo/src/schema/normalized.js b/demo/src/schema/normalized.js
index 9bf5414..a2cea06 100644
--- a/demo/src/schema/normalized.js
+++ b/demo/src/schema/normalized.js
@@ -77,6 +77,12 @@ export default {
         //     //     }
         //     // }
         // },
+        // Table: {
+        //     className: 'new-table-class'
+        // },
+        Header: {
+            className: 'new-header-class'
+        },
         ResultCount: {
             styles: {
                 display: 'flex',
@@ -217,6 +223,7 @@ export default {
             // styles: {}
         },
         Table: {
+            className: 'new-table-class',
             styles: {
                 // table: {
                 //     background: '#000',
@@ -344,7 +351,7 @@ export default {
                     type: 'action',
                     name: 'edit',
                     label: 'Edit',
-                    htmlClass: 'btn btn-secondary',
+                    className: 'btn btn-secondary',
                     thunk: ( config ) => ( dispatch, getState ) => {
                         console.log('edit', config, getState());
                     }
diff --git a/src/components/Body.js b/src/components/Body.js
index 7f6201c..0eaef17 100644
--- a/src/components/Body.js
+++ b/src/components/Body.js
@@ -12,14 +12,14 @@ import { createSelector } from 'reselect';
 const addElementResizeEventListener = require('element-resize-event');
 const removeElementResizeEventListener = require('element-resize-event').unbind;
 
-const renderCol = (rowIndex, primaryKey, schema, styles, column, index) => {
+const renderCol = (rowIndex, primaryKey, schema, styles, colClassName, column, index) => {
     const { textAlign, name, type } = column;
     const ColRenderer = getRenderer(column, Renderers);
     return (
         <Td
             key={ index }
             colIndex={ index }
-            className={ `rdt-table-col ${name} ${type}` }
+            className={ `${colClassName} ${name} ${type}` }
             styles={ getStyles(styles.td, 'body') }
         >
             <Div className="rdt-table-col-inner">
@@ -34,10 +34,10 @@ const renderCol = (rowIndex, primaryKey, schema, styles, column, index) => {
     );
 };
 
-const renderRow = (columns, rowHeight, styles, primaryKey, schema, rowIndex, top) => (
+const renderRow = (columns, rowHeight, styles, primaryKey, schema, rowClassName, colClassName, rowIndex, top) => (
     <Tr
         key={ rowIndex }
-        className="rdt-table-row"
+        className={ rowClassName }
         position="absolute"
         top={ top }
         columns={ columns }
@@ -45,11 +45,11 @@ const renderRow = (columns, rowHeight, styles, primaryKey, schema, rowIndex, top
         even={ rowIndex % 2 === 0 }
         styles={ getStyles(styles.tr, 'body') }
     >
-        { renderCol.bind(this, rowIndex, primaryKey, schema, styles) }
+        { renderCol.bind(this, rowIndex, primaryKey, schema, styles, colClassName) }
     </Tr>
 );
 
-const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
+const Body = React.forwardRef(({ top: startTop = 0, config }, ref) => {
     const {
         columns,
         action,
@@ -68,6 +68,12 @@ const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
         }
     } = useContext(ConfigContext);
 
+    const {
+        className = 'table-body',
+        rowClassName = 'rdt-table-row',
+        colClassName = 'rdt-table-col'
+    } = config;
+
     const itemCount = useSelector(getData(tableData => (tableData.items || []).length));
     const isPrinting = useSelector(getData(tableData => !!tableData.isPrinting));
 
@@ -120,7 +126,7 @@ const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
 
     return (
         <Tbody
-            className="table-body"
+            className={ className }
             styles={ getStyles(styles, 'tbody') }
             ref={ ref }
             isPrinting={ isPrinting }
@@ -130,7 +136,7 @@ const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
             range={ range }
             rowHeight={ rowHeight }
         >
-            { renderRow.bind(this, columns, rowHeight, styles, primaryKey, schema) }
+            { renderRow.bind(this, columns, rowHeight, styles, primaryKey, schema, rowClassName, colClassName) }
         </Tbody>
     );
 });
diff --git a/src/components/Button.js b/src/components/Button.js
index 56a7e2f..d07f20d 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -4,10 +4,10 @@ import ConfigContext from '../context';
 
 const Button = ({ config }) => {
     const { thunk } = useContext(ConfigContext);
-    const { thunk: cb, label, name, styles = {} } = config;
+    const { thunk: cb, label, name, styles = {}, className = 'rdt-toolbar-btn' } = config;
     return (
         <StyledButton
-            className={ `rdt-toolbar-btn ${name || ''}` }
+            className={ className }
             onClick={ cb && thunk.bind(this, cb, config) }
             styles={ styles }
         >
diff --git a/src/components/Columns.js b/src/components/Columns.js
index b7d1b61..b15471f 100644
--- a/src/components/Columns.js
+++ b/src/components/Columns.js
@@ -10,7 +10,11 @@ const Columns = ({
     open,
     toggle,
     config: {
-        styles = {}
+        styles = {},
+        className = 'rdt-toolbar-columns',
+        btnClassName = 'rdt-toolbar-button',
+        menuClassName = 'rdt-toolbar-menu',
+        menuItemClassName = 'rdt-toolbar-item',
     }
 }) => {
     const {
@@ -20,15 +24,15 @@ const Columns = ({
     } = useContext(ConfigContext);
     const visibleColumnIds = useSelector(getData(({ visibleColumnIds  }) => visibleColumnIds)) || [];
     return (
-        <Dropdown.Container className="rdt-toolbar-columns">
-            <Button  className="rdt-toolbar-btn" dropdownToggle onClick={ toggle } styles={ styles.button }>
+        <Dropdown.Container className={ className }>
+            <Button  className={ btnClassName } dropdownToggle onClick={ toggle } styles={ styles.button }>
                 Columns
             </Button>
-            <Dropdown.Menu className="rdt-toolbar-menu" hidden={ !open }  styles={ styles.dropdownMenu }>
+            <Dropdown.Menu className={ menuClassName } hidden={ !open }  styles={ styles.dropdownMenu }>
                 { columns.map(({ name, label, width }, index) => (
                     <Dropdown.Item
                         key={ index }
-                        className="rdt-toolbar-item"
+                        className={ menuItemClassName }
                         padding="0.25rem 0.75rem"
                         styles={ styles.dropdownItem }
                         htmlFor={ `rdt-columns-${name}-${index}` }
diff --git a/src/components/Editable.js b/src/components/Editable.js
index 4940d14..d9b009b 100644
--- a/src/components/Editable.js
+++ b/src/components/Editable.js
@@ -13,6 +13,11 @@ const Editable = ({ config }) => {
             hide = 'Hide editable',
             save: saveLabel = 'Save',
         },
+        classNames = {
+            show: 'rdt-toolbar-button',
+            hide: 'rdt-toolbar-button',
+            save: 'rdt-toolbar-button',
+        },
         styles = {}
     } = config;
     const { action, thunk, getData } = useContext(ConfigContext);
@@ -23,11 +28,12 @@ const Editable = ({ config }) => {
     const toggleEditable = () => action(SET_IS_EDITING)({ value: !isEditing });
     const getEditableLabel = () => !isEditing ? show : hide;
     const getEditableStyles = () => !isEditing ? styles.show : styles.hide;
+    const getEditableClassName = () => !isEditing ? classNames.show : classNames.hide;
     return (
         <Fragment>
             { !isModified && (
                 <Button
-                    className="rdt-toolbar-button reset-filters"
+                    className={ getEditableClassName() }
                     onClick={ toggleEditable.bind(this) }
                     styles={ getEditableStyles() }
                 >
@@ -36,7 +42,7 @@ const Editable = ({ config }) => {
             )}
             { isModified && (
                 <Button
-                    className="rdt-toolbar-button reset-filters"
+                    className={ classNames.save }
                     onClick={ save && thunk.bind(this, save, { config }) }
                     styles={ styles.save }
                 >
diff --git a/src/components/Filters.js b/src/components/Filters.js
index 966d079..e633e9a 100644
--- a/src/components/Filters.js
+++ b/src/components/Filters.js
@@ -8,7 +8,7 @@ import { SET_FILTER } from '../actions';
 import { withScrollSpy } from '../hoc';
 import ConfigContext from '../context';
 
-const Filters = React.forwardRef(({ children }, ref) => {
+const Filters = React.forwardRef(({ children, config }, ref) => {
     const {
         columns,
         action,
@@ -19,13 +19,20 @@ const Filters = React.forwardRef(({ children }, ref) => {
         },
         getData
     } = useContext(ConfigContext);
+
+    const {
+        className = 'table-filters',
+        rowClassName = 'rdt-table-row',
+        colClassName = 'rdt-table-col'
+    } = config;
+
     const search = useSelector(getData(tableData => tableData.query ? tableData.query.search : {}));
     const width = useSelector(getData(tableData => tableData.table ? tableData.table.width : 0));
 
     return (
-        <Thead className="table-filters" styles={ getStyles(styles, 'filters') } ref={ ref }>
+        <Thead className={ className } styles={ getStyles(styles, 'filters') } ref={ ref }>
             <div style={{ width }}>
-                <Tr className="rdt-table-row" columns={ columns } styles={ getStyles(styles.tr, 'filters') }>
+                <Tr className={ rowClassName } columns={ columns } styles={ getStyles(styles.tr, 'filters') }>
                     {(config, index) => {
                         const { filterable, type, ...rest } = config;
                         const { name } = rest;
@@ -35,7 +42,7 @@ const Filters = React.forwardRef(({ children }, ref) => {
                             <Td
                                 key={ index }
                                 colIndex={ index }
-                                className={ `rdt-table-col filter ${name} ${type}` }
+                                className={ `${colClassName} filter ${name} ${type}` }
                                 styles={ getStyles(styles.td, 'filters') }
                             >
                                 { filterable && Component && (
diff --git a/src/components/Header.js b/src/components/Header.js
index 8ed97dc..6d1bd4d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -25,7 +25,7 @@ const changeSortOrder = ( query, colName, sorter ) => {
     sorter({ sort: colName, dir });
 };
 
-const Header = React.forwardRef(({ children }, ref) => {
+const Header = React.forwardRef(({ children, config }, ref) => {
     const {
         action,
         columns,
@@ -38,13 +38,19 @@ const Header = React.forwardRef(({ children }, ref) => {
         getData
     } = useContext(ConfigContext);
 
+    const {
+        className = 'table-header',
+        rowClassName = 'rdt-table-row',
+        colClassName = 'rdt-th'
+    } = config;
+
     const query = useSelector(getData(tableData => tableData.query || {}));
     const width = useSelector(getData(tableData => tableData.table ? tableData.table.width : 0));
 
     return (
-        <Thead className="table-header" styles={ getStyles(styles, 'thead') } ref={ ref }>
+        <Thead className={ className } styles={ getStyles(styles, 'thead') } ref={ ref }>
             <div style={{ width }}>
-                <Tr className="rdt-table-row" columns={ columns } styles={ getStyles(styles.tr, 'header') }>
+                <Tr className={ rowClassName } columns={ columns } styles={ getStyles(styles.tr, 'header') }>
                     {(config, index) => {
                         const { sortable, textAlign, name, type, ...rest } = config;
                         const { sort, dir } = query;
@@ -53,7 +59,7 @@ const Header = React.forwardRef(({ children }, ref) => {
                             <Th
                                 key={ index }
                                 colIndex={ index }
-                                className={ `rdt-th ${name} ${type}` }
+                                className={ `${colClassName} ${name} ${type}` }
                                 sortable={ sortable }
                                 textAlign={ textAlign }
                                 styles={ styles.th }
diff --git a/src/components/Limiter.js b/src/components/Limiter.js
index efaab6b..7752f19 100644
--- a/src/components/Limiter.js
+++ b/src/components/Limiter.js
@@ -6,7 +6,7 @@ import { Field, Label } from '../styled-components';
 import ConfigContext from '../context';
 
 const Limiter = ({
-    config: { options, styles }
+    config: { options, styles, className = 'rdt-limiter-label', selectClassName = 'rdt-limiter-select' }
 }) => {
     const {
         action,
@@ -18,10 +18,10 @@ const Limiter = ({
     const { limit } = calculatePaginationProps(query, defaultLimit);
     const setLimit = ( limit ) => action(SET_LIMIT)({ limit });
     return (
-        <Label className="rdt-limiter-label" flex noWrap styles={ styles }>
+        <Label className={ className } flex noWrap styles={ styles }>
             <Field.Select
                 id="limiter"
-                className="rdt-limiter-select"
+                className={ selectClassName }
                 value={ limit }
                 onChange={ ( event ) => setLimit(event.target.value) }>
                 { options.map( (option, index) =>
diff --git a/src/components/MassActions.js b/src/components/MassActions.js
index 99742fe..7a8ebcd 100644
--- a/src/components/MassActions.js
+++ b/src/components/MassActions.js
@@ -6,18 +6,27 @@ import ConfigContext from '../context';
 const MassActions = ({
     toggle,
     open,
-    config: { label, name, options, styles = {} },
+    config: {
+        label,
+        name,
+        options,
+        styles = {},
+        className = 'rdt-toolbar-mass-actions',
+        btnClassName = 'rdt-toolbar-button',
+        menuClassName = 'rdt-toolbar-menu',
+        menuItemClassName = 'rdt-toolbar-item',
+    },
 }) => {
     const { thunk } = useContext(ConfigContext);
     return (
-        <Dropdown.Container className={ `rdt-toolbar-mass-actions ${name || ''}` }>
-            <Button className="rdt-toolbar-button" dropdownToggle onClick={ toggle } styles={ styles.button }>
+        <Dropdown.Container className={ className }>
+            <Button className={ btnClassName } dropdownToggle onClick={ toggle } styles={ styles.button }>
                 { label }
             </Button>
-            <Dropdown.Menu className="rdt-toolbar-menu" hidden={ !open } styles={ styles.dropdownMenu }>
+            <Dropdown.Menu className={ menuClassName } hidden={ !open } styles={ styles.dropdownMenu }>
                 { options.map(({ thunk: cb, ...option, styles: itemStyles }, index) =>
                     <Dropdown.Item
-                        className="rdt-toolbar-item"
+                        className={ menuItemClassName }
                         key={ index }
                         onClick={ cb && thunk.bind(this, cb, { option }) }
                         styles={ itemStyles || styles.dropdownItem }
diff --git a/src/components/Pages.js b/src/components/Pages.js
index b5fd2ab..afe1eee 100644
--- a/src/components/Pages.js
+++ b/src/components/Pages.js
@@ -33,7 +33,14 @@ const getPages = ( currentPage = 1, total = 0 ) => {
 
 const Pages = ({
     config: {
-        styles = {}
+        styles = {},
+        className = 'rdt-pg-list',
+        firstClassName = 'rdt-pg-first',
+        lastClassName = 'rdt-pg-last',
+        previousClassName = 'rdt-pg-prev',
+        nextClassName = 'rdt-pg-next',
+        activeClassName = 'active',
+        pageNumberClassName = 'rdt-pg-num'
     }
 }) => {
     const {
@@ -46,9 +53,9 @@ const Pages = ({
     const { page, total } = calculatePaginationProps(query, defaultLimit);
     const setPage = ( page ) => action(SET_PAGE)({ page });
     return (
-        <ExtendedList className="rdt-pg-list" styles={ styles.list }>
+        <ExtendedList className={ className } styles={ styles.list }>
             <Button
-                className="rdt-pg-first"
+                className={ firstClassName }
                 onClick={() => setPage(1)}
                 disabled={ page === 1 }
                 styles={ styles.first }
@@ -56,7 +63,7 @@ const Pages = ({
                 First
             </Button>
             <Button
-                className="rdt-pg-prev"
+                className={ previousClassName }
                 onClick={() => setPage(page - 1)}
                 disabled={ page < 2 }
                 styles={ styles.previous }
@@ -66,14 +73,14 @@ const Pages = ({
             { getPages(page, total).map( (link, index) =>
                 <Button
                     key={ index }
-                    className={ `rdt-pg-num ${page === link ? 'active' : ''}` }
+                    className={ `${pageNumberClassName} ${page === link ? activeClassName : ''}` }
                     onClick={() => setPage(link)}
                     active={ page === link }
                      styles={ styles.pageNumber }
                 >{ link }</Button>
             ) }
             <Button
-                className="rdt-pg-next"
+                className={ nextClassName }
                 onClick={() => setPage(page + 1)}
                 disabled={ page >= total }
                 styles={ styles.next }
@@ -81,7 +88,7 @@ const Pages = ({
                 Next
             </Button>
             <Button
-                className="rdt-pg-last"
+                className={ lastClassName }
                 onClick={() => setPage(total)}
                 disabled={ total === 0 || page === total }
                 styles={ styles.last }
diff --git a/src/components/Print.js b/src/components/Print.js
index 7fa13b4..ec0e04c 100644
--- a/src/components/Print.js
+++ b/src/components/Print.js
@@ -6,13 +6,14 @@ import { SET_IS_PRINTING } from '../actions';
 const Print = ({
     config: {
         label = 'Print',
-        styles = {}
+        styles = {},
+        className = 'rdt-toolbar-btn print'
     }
 }) => {
     const { action } = useContext(ConfigContext);
     return (
         <Button
-            className="rdt-toolbar-button print"
+            className={ className }
             onClick={() => action(SET_IS_PRINTING)({ value: true })}
             styles={ styles }
         >
diff --git a/src/components/Renderer/Body/Actions.js b/src/components/Renderer/Body/Actions.js
index 6795b21..e5bc476 100644
--- a/src/components/Renderer/Body/Actions.js
+++ b/src/components/Renderer/Body/Actions.js
@@ -5,15 +5,16 @@ import { withData } from '../../../hoc';
 const Actions = ({
     thunk,
     colConfig: { items },
-    value
+    value,
+    className = 'btn-group-sm'
 }) => (
-    <div className="btn-group-sm">
+    <div className={ className }>
         { items.map((item, index) => {
-            const { thunk: cb, styles, label, icon, name, htmlClass } = item;
+            const { thunk: cb, styles, label, icon, name, className = 'rdt-body-actions button' } = item;
             return (
                 <Button
                     key={ index }
-                    className={ `rdt-body-actions button ${htmlClass || ''} ${name || ''}` }
+                    className={ className }
                     onClick={ cb && thunk.bind(this, cb, { item, value }) }
                     styles={ styles }
                 >
diff --git a/src/components/ResetFilters.js b/src/components/ResetFilters.js
index e8684ce..7afc58e 100644
--- a/src/components/ResetFilters.js
+++ b/src/components/ResetFilters.js
@@ -6,13 +6,14 @@ import ConfigContext from '../context';
 const ResetFilters = ({
     config: {
         label = 'Reset Filters',
-        styles = {}
+        styles = {},
+        className = 'rdt-toolbar-button reset-filters'
     }
 }) => {
     const { action } = useContext(ConfigContext);
     const clearFilter = () => action(SET_FILTER)({ clear: true });
     return (
-        <Button className="rdt-toolbar-button reset-filters" onClick={ clearFilter.bind(this) } styles={ styles }>
+        <Button className={ className } onClick={ clearFilter.bind(this) } styles={ styles }>
             { label }
         </Button>
     );
diff --git a/src/components/ResultCount.js b/src/components/ResultCount.js
index f29b228..9a48de9 100644
--- a/src/components/ResultCount.js
+++ b/src/components/ResultCount.js
@@ -8,13 +8,13 @@ const lowerLimit = ( page, limit ) => ((page - 1) * limit) + 1;
 const upperLimit = ( page, limit, count ) =>  (page * limit) > count || limit === 0 ? count : page * limit;
 
 const ResultCount = ({
-    config: { styles = {} }
+    config: { styles = {}, className = 'rdt-pg-res-cnt' }
 }) => {
     const { defaultLimit, getData } = useContext(ConfigContext);
     const query = useSelector(getData((tableData) => tableData.query));
     const { page, limit, count } = calculatePaginationProps(query, defaultLimit);
     return !!count > 0 && (
-        <Div className="rdt-pg-res-cnt" styles={ styles }>
+        <Div className={ className } styles={ styles }>
             Showing { lowerLimit(page, limit) } to { upperLimit(page, limit, count) } of { count } entries
         </Div>
     );
diff --git a/src/components/Table.js b/src/components/Table.js
index 85cb6a0..0134f73 100644
--- a/src/components/Table.js
+++ b/src/components/Table.js
@@ -1,12 +1,10 @@
 import React, { useContext } from 'react';
 import { Table as StyledTable } from '../styled-components';
-import ConfigContext from '../context';
 
-const Table = ({ children }) => {
-    const { config } = useContext(ConfigContext);
-    const { styles = {} } = config.components.Table;
+const Table = ({ children, config }) => {
+    const { styles = {}, className = 'rdt-table' } = config;
     return (
-        <StyledTable className="rdt-table" styles={ styles.table }>
+        <StyledTable className={ className } styles={ styles.table }>
             { children }
         </StyledTable>
     );
diff --git a/src/createTable.js b/src/createTable.js
index 7ee5af5..f278c10 100755
--- a/src/createTable.js
+++ b/src/createTable.js
@@ -103,8 +103,8 @@ const ReduxDatatable = ( props ) => {
             {(item, index) => {
                 var id = item;
                 if (isObject(item)) {
-                    const { Component } = getComponent(item.id);
-                    return <Component key={ index }>{ render(item.layout) }</Component>;
+                    const { Component, componentConfig } = getComponent(item.id);
+                    return <Component key={ index } config={ componentConfig }>{ render(item.layout) }</Component>;
                 }
 
                 const { Component, componentConfig } = getComponent(id);

From c6bd0c3ecb1b4dc0a0bc86c87b3396b3cb901b39 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 12 Jul 2019 10:09:50 +0530
Subject: [PATCH 2/4] Update README.md

---
 README.md | 109 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 89 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 2dbc548..68a0c66 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,21 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
         ['Limiter', 'Spacer', 'ResultCount', 'Spacer', 'Pages'],
     ],
     components: {
+        Header: {
+            rowClassName: 'your custom class names',
+            colClassName: 'your custom class names',
+            className: 'your custom class names',
+        },
+        Body: {
+            rowClassName: 'your custom class names',
+            colClassName: 'your custom class names',
+            className: 'your custom class names',
+        },
+        Filters: {
+            rowClassName: 'your custom class names',
+            colClassName: 'your custom class names',
+            className: 'your custom class names',
+        },
         Loader: {
             styles: {
                 mask: { ... },
@@ -91,9 +106,16 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
             }
         },
         ResultCount: {
+            className: 'your custom class names',
             styles: { ... }
         },
         Pages: {
+            firstClassName: 'your custom class names',
+            lastClassName: 'your custom class names',
+            nextClassName: 'your custom class names',
+            prevClassName: 'your custom class names',
+            pageNumberClassName: 'your custom class names',
+            activeClassName: 'your custom class names',
             styles: {
                 first: { ... },
                 last: { ... },
@@ -109,6 +131,11 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
                 hide: 'Hide editable',
                 save: 'Save',
             },
+            classNames: {
+                show: 'your custom class names',
+                hide: 'your custom class names',
+                save: 'your custom class names',
+            },
             save: ( config ) => ( dispatch, getState ) => {
                 const tableState = getState()[config.reducerName][config.name];
                 console.log('toolbar save click with modified data', config, tableState.modified);
@@ -127,6 +154,10 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
             name: 'actions',
             label: 'Actions',
             id: 'dropdown',
+            className: 'your custom class names',
+            btnClassName: 'your custom class names',
+            menuClassName: 'your custom class names',
+            menuItemClassName: 'your custom class names',
             styles: {
                 button: { ... },
                 dropdownMenu: { ... },
@@ -159,17 +190,20 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
         SimpleButton: {
             type: 'button',
             label: 'Simple Button',
+            className: 'your custom class names',
             thunk: ( config ) => ( dispatch, getState ) => { ... },
             styles: { ... }
         },
         ResetFilters: {
             type: 'reset-filters',
             label: 'Reset Filters',
+            className: 'your custom class names',
             styles: { ... }
         },
         Print: {
             type: 'print',
             label: 'Print Table',
+            className: 'your custom class names',
             styles: { ... }
         },
         Columns: {
@@ -177,6 +211,10 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
             type: 'columns',
             label: 'Columns',
             visible: true,
+            className: 'your custom class names',
+            btnClassName: 'your custom class names',
+            menuClassName: 'your custom class names',
+            menuItemClassName: 'your custom class names',
             styles: {
                 button: { ... },
                 dropdownMenu: { ... },
@@ -187,9 +225,12 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
             type: 'limiter',
             options: [10, 20, 50, 200, 2000, 0],
             default: 200,
+            className: 'your custom class names',
+            selectClassName: 'your custom class names',
             styles: { ... }
         },
         Table: {
+            className: 'your custom class names',
             styles: {
                 table: { ... },
                 thead: { ... },
@@ -359,11 +400,12 @@ Note: Check the [example](https://github.com/flipbyte/redux-datatable/blob/maste
 
 **_Common Properties_**
 
-| Key      | Type     | Required | Default | Description                                                                                        |
-| -------- | -------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
-| styles   | object   | false    | {}      | styled-component styles object or key-value pairs with values being styled-component styles object |
-| renderer | function | false    | -       | returns a react component                                                                          |
-| type     | string   | true     | -       | the type of the object                                                                             |
+| Key       | Type     | Required | Default | Description                                                                                        |
+| --------- | -------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
+| styles    | object   | false    | {}      | styled-component styles object or key-value pairs with values being styled-component styles object |
+| renderer  | function | false    | -       | returns a react component                                                                          |
+| type      | string   | true     | -       | the type of the object                                                                             |
+| className | string   | true     | varies  | html class names for top-level html element in the component                                       |
 
 ##### Loader
 
@@ -382,6 +424,17 @@ No unique properties
 
 ##### Pages
 
+**_Properties_**
+
+| Key                 | Type   | Required | Default      | Description      |
+| ------------------- | ------ | -------- | ------------ | ---------------- |
+| firstClassName      | string | false    | rdt-pg-first | html class names |
+| lastClassName       | string | false    | rdt-pg-last  | html class names |
+| prevClassName       | string | false    | rdt-pg-prev  | html class names |
+| nextClassName       | string | false    | rdt-pg-next  | html class names |
+| pageNumberClassName | string | false    | rdt-pg-num   | html class names |
+| activeClassName     | string | false    | active       | html class names |
+
 **_Styles object properties_**
 
 | Key        | Type   | Required | Default | Description                    |
@@ -398,10 +451,19 @@ Toggles the table between editable and non-editable and shows a save button when
 
 **_Properties_**
 
-| Key    | Type     | Required | Default     | Description                                     |
-| ------ | -------- | -------- | ----------- | ----------------------------------------------- |
-| labels | object   | false    | check below | check below                                     |
-| save   | function | false    | -           | ( config ) => ( dispatch, getState ) => { ... } |
+| Key        | Type     | Required | Default     | Description                                     |
+| ---------- | -------- | -------- | ----------- | ----------------------------------------------- |
+| labels     | object   | false    | check below | check below                                     |
+| save       | function | false    | -           | ( config ) => ( dispatch, getState ) => { ... } |
+| classNames | object   | false    | check below | check below                                     |
+
+**_classNames object properties_**
+
+| Key  | Type   | Required | Default                | Description      |
+| ---- | ------ | -------- | ---------------------- | ---------------- |
+| show | string | false    | rdt-toolbar-button     | html class names |
+| hide | string | false    | rdt-toolbar-button     | html class names |
+| save | string | false    | Sardt-toolbar-buttonve | html class names |
 
 **_Labels object properties_**
 
@@ -423,10 +485,13 @@ Toggles the table between editable and non-editable and shows a save button when
 
 **_Properties_**
 
-| Key     | Type   | Required | Default | Description                           |
-| ------- | ------ | -------- | ------- | ------------------------------------- |
-| options | array  | required | \[]     | array of actions objects              |
-| label   | string | required | -       | Label for the actions dropdown button |
+| Key               | Type   | Required | Default            | Description                           |
+| ----------------- | ------ | -------- | ------------------ | ------------------------------------- |
+| options           | array  | true     | \[]                | array of actions objects              |
+| label             | string | true     | -                  | Label for the actions dropdown button |
+| btnClassName      | string | false    | rdt-toolbar-button | html class names                      |
+| menuClassName     | string | false    | rdt-toolbar-menu   | html class names                      |
+| menuItemClassName | string | false    | rdt-toolbar-item   | html class names                      |
 
 **_Actions object properties_**
 
@@ -477,9 +542,12 @@ Shows the columns toggling dropdown.
 
 **_Properties_**
 
-| Key   | Type   | Required | Default | Description                           |
-| ----- | ------ | -------- | ------- | ------------------------------------- |
-| label | string | required | -       | Label for the actions dropdown button |
+| Key               | Type   | Required | Default            | Description                           |
+| ----------------- | ------ | -------- | ------------------ | ------------------------------------- |
+| label             | string | required | -                  | Label for the actions dropdown button |
+| btnClassName      | string | false    | rdt-toolbar-button | html class names                      |
+| menuClassName     | string | false    | rdt-toolbar-menu   | html class names                      |
+| menuItemClassName | string | false    | rdt-toolbar-item   | html class names                      |
 
 **_Styles object properties_**
 
@@ -491,10 +559,11 @@ Shows the columns toggling dropdown.
 
 ##### Limiter (type: limiter)
 
-| Key     | Type    | Required | Default | Description                                                           |
-| ------- | ------- | -------- | ------- | --------------------------------------------------------------------- |
-| options | array   | required | \[]     | array of limiter counts                                               |
-| default | integer | required | \[]     | default limiter option (should be a value in the options array above) |
+| Key             | Type    | Required | Default            | Description                                                           |
+| --------------- | ------- | -------- | ------------------ | --------------------------------------------------------------------- |
+| options         | array   | required | \[]                | array of limiter counts                                               |
+| default         | integer | required | \[]                | default limiter option (should be a value in the options array above) |
+| selectClassName | string  | false    | rdt-limiter-select | html class names                                                      |
 
 ##### Table (type: table)
 

From c5b960b7ce77ba7d4c486b96c5865699e030460c Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 12 Jul 2019 11:33:08 +0530
Subject: [PATCH 3/4] Fixed checkbox flickering on initial label hover

* Changed lable to div and added a click handler
---
 src/components/Columns.js         | 12 +++++++-----
 src/styled-components/Dropdown.js |  3 +--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Columns.js b/src/components/Columns.js
index b15471f..d0b1166 100644
--- a/src/components/Columns.js
+++ b/src/components/Columns.js
@@ -35,19 +35,21 @@ const Columns = ({
                         className={ menuItemClassName }
                         padding="0.25rem 0.75rem"
                         styles={ styles.dropdownItem }
-                        htmlFor={ `rdt-columns-${name}-${index}` }
+                        onClick={(event) => {
+                            action(SET_VISIBLE_COLUMN_IDS)({ index, checked: !event.target.firstChild.checked, width })
+                        }}
                     >
                         <input
-                            id={ `rdt-columns-${name}-${index}` }
                             name={ name }
                             type="checkbox"
                             style={{ margin: 5 }}
                             checked={ -1 !== visibleColumnIds.indexOf(index) }
-                            onChange={(event) => (
+                            onClick={(event) => event.stopPropagation()}
+                            onChange={(event) => {
                                 action(SET_VISIBLE_COLUMN_IDS)({ index, checked: event.target.checked, width })
-                            )}
+                            }}
                         />
-                        <label>{ label }</label>
+                        { label }
                     </Dropdown.Item>
                 ))}
             </Dropdown.Menu>
diff --git a/src/styled-components/Dropdown.js b/src/styled-components/Dropdown.js
index bbd4c9d..b4214ed 100644
--- a/src/styled-components/Dropdown.js
+++ b/src/styled-components/Dropdown.js
@@ -37,8 +37,7 @@ export const Menu = styled.div `
     `};
 `;
 
-export const Item = styled.label `
-    display: block;
+export const Item = styled.div `
     clear: both;
     text-align: inherit;
     white-space: nowrap;

From 940cc685e02d2c4ce3d11b25537be105ab67b9b9 Mon Sep 17 00:00:00 2001
From: ES <eon@earncef.com>
Date: Fri, 12 Jul 2019 11:34:18 +0530
Subject: [PATCH 4/4] 0.7.11

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

diff --git a/package-lock.json b/package-lock.json
index c9e7c5a..46cfcfd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.7.10",
+    "version": "0.7.11",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index 6d9d296..e3e70d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.7.10",
+    "version": "0.7.11",
     "description": "React-Redux data table",
     "main": "lib/index.js",
     "module": "es/index.js",