Merge pull request #28 from easeq/master

Modified schema object keys

Author: easeq

README.md

@@ -12,6 +12,7 @@ using REST API.
 -   Pagination
 -   Sortable columns
 -   Configurable column widths
+-   Editable table
 -   Built in windowing to handle large dataset with thousands of rows
 -   Customizable limiter options
 -   Customizable toolbar with the ability to add custom renderers
@@ -217,8 +218,8 @@ const YourComponent = () =>
 | toolbar    | array   | false    | \[]     | Toolbar definition (Check below)                                                                 |
 | columns    | array   | true     | -       | Columns to display                                                                               |
 | styles     | object  | false    | {}      | Custom styles for your table                                                                     |
-| isEditable | boolean | false    | {}      | Set whether the table is editable                                                                |
-| isEditing  | boolean | false    | {}      | Set the default state of the table to be in editing mode                                         |
+| editable | boolean | false    | {}      | Set whether the table is editable                                                                |
+| editing  | boolean | false    | {}      | Set the default state of the table to be in editing mode                                         |
 | primaryKey | string  | true     | {}      | Set the primary key column of the table for actions like editing.                                |
 
 #### Pagination object
@@ -278,7 +279,7 @@ Note: action of type "editable" is required when you set the table to be editabl
 | label                           | string       | true     | -       | Label for the column                                                                                                                                     |
 | sortable                        | boolean      | false    | true    | Whether the column is sortable                                                                                                                           |
 | filterable                      | boolean      | false    | true    | Whether the column is filterable                                                                                                                         |
-| isEditable                      | boolean      | false    | false   | When the table is set to be editable, set whether the respective column is among the editable                                                            |
+| editable                      | boolean      | false    | false   | When the table is set to be editable, set whether the respective column is among the editable                                                            |
 | visible                         | boolean      | false    | true    | Whether the column is visible on load                                                                                                                    |
 | type                            | string       | true     | string  | Available types: selection, number, date, string, image, options, actions                                                                                |
 | width                           | integer      | true     | -       | Width of the column                                                                                                                                      |

demo/src/schema/basic.js

@@ -6,8 +6,8 @@ export default {
     rowHeight: 50,
     filterable: true,
     headers: true,
-    isEditable: true,
-    isEditing: false,
+    editable: true,
+    editing: false,
     primaryKey: 'pageId',
     // styles: {
     //     loader: {
@@ -222,7 +222,7 @@ export default {
         width: 150,
         filterable: true,
         sortable: true,
-        // isEditable: true
+        // editable: true
     }, {
         label: "Status",
         type: "options",
@@ -250,7 +250,7 @@ export default {
                 "label": "Archived"
             }
         },
-        isEditable: true
+        editable: true
         // renderer: ({
         //     data,
         //     colConfig: { name, options }
@@ -262,7 +262,7 @@ export default {
         sortable: true,
         textAlign: 'left',
         width: 200,
-        isEditable: true,
+        editable: true,
         filterable: true,
     }, {
         label: 'Actions',

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.5.0",
+    "version": "0.5.1",
     "description": "React-Redux data table",
     "main": "lib/index.js",
     "module": "es/index.js",

package.json

@@ -10,11 +10,11 @@ const Date = ({
     isEditing,
     handleChange,
     modifiedData,
-    colConfig: { name, textAlign, format, isEditable }
+    colConfig: { name, textAlign, format, editable }
 }) => (
     <Fragment>
-        { (!isEditable || !isEditing) && <Time value={ _.get(data, name, '') } format={ format ? format : 'F j, Y, g:i a' } /> }
-        { !!isEditable && isEditing && (
+        { (!editable || !isEditing) && <Time value={ _.get(data, name, '') } format={ format ? format : 'F j, Y, g:i a' } /> }
+        { !!editable && isEditing && (
             <Row padding="0 0 5px">
                 <Field.Input
                     type="date"

src/Renderer/Body/Date.js

@@ -9,10 +9,10 @@ const Options = ({
     isEditing,
     handleChange,
     modifiedData,
-    colConfig: { name, options, isEditable }
+    colConfig: { name, options, editable }
 }) => {
     const value = _.get(data, name);
-    if (!isEditable || !isEditing) {
+    if (!editable || !isEditing) {
         if(!options || !options[value]) {
             return <Fragment>{ value }</Fragment>;
         }
@@ -24,7 +24,7 @@ const Options = ({
         );
     }
 
-    return !!isEditable && isEditing && (
+    return !!editable && isEditing && (
         <Row padding="0 0 5px">
             <Field.Select name={ name } value={ _.get(modifiedData, name) || value } onChange={ handleChange }>
                 <option></option>

src/Renderer/Body/Options.js

@@ -9,11 +9,11 @@ const Text = ({
     isEditing,
     handleChange,
     modifiedData,
-    colConfig: { name, isEditable }
+    colConfig: { name, editable }
 }) => (
     <Fragment>
-        { (!isEditable || !isEditing) && _.get(data, name, '') }
-        { !!isEditable && isEditing && (
+        { (!editable || !isEditing) && _.get(data, name, '') }
+        { !!editable && isEditing && (
             <Row padding="0 0 5px">
                 <Field.Input
                     type="text"

src/Renderer/Body/Text.js

@@ -61,7 +61,7 @@ const renderToolbar = (
     thunk,
     internalStateUpdater,
     columns,
-    isEditable,
+    editable,
     isEditing,
     isModified,
     visibleColumns,
@@ -80,7 +80,7 @@ const renderToolbar = (
                     columns={ columns }
                     visibleColumns={ visibleColumns }
                     isModified={ isModified }
-                    isEditable={ isEditable }
+                    isEditable={ editable }
                     isEditing={ isEditing }
                 />
             )}
@@ -257,7 +257,7 @@ const ReduxDatatable = ( props ) => {
     const { config = {}, reducerName, tableData, action, thunk, loadData, state } = props;
     const [ tableInternalState, dispatch ] = useReducer(tableReducer, {
         isPrinting: false,
-        isEditing: !!config.isEditing,
+        isEditing: !!config.editing,
         visibleColumnIds: getInitialVisibleColumns(config.columns)
     });
     const {
@@ -270,7 +270,7 @@ const ReduxDatatable = ( props ) => {
         styles = {},
         columns,
         entity = {},
-        isEditable,
+        editable,
         primaryKey
     } = config;
     const { visibleColumnIds, isPrinting, isEditing } = tableInternalState;
@@ -317,7 +317,7 @@ const ReduxDatatable = ( props ) => {
                     thunk,
                     dispatch,
                     columns,
-                    isEditable,
+                    editable,
                     isEditing,
                     !_.isEmpty(tableData.modified), // table data has been modified
                     visibleColumnIds,