diff --git a/src/Renderer/Toolbar/EditableButtons.js b/src/Renderer/Toolbar/EditableButtons.js
index 834ee3a..212f9b8 100644
--- a/src/Renderer/Toolbar/EditableButtons.js
+++ b/src/Renderer/Toolbar/EditableButtons.js
@@ -2,10 +2,17 @@ import React, { Fragment } from 'react';
import Button from '../../components/Button';
import { TOGGLE_EDITABLE } from '../../constants';
+const defaultLabels = {
+ show: 'Make editable',
+ hide: 'Hide editable',
+ save: 'Save'
+};
+
const EditableButtons = ({ itemConfig, action, isModified, isEditable, isEditing, internalStateUpdater, thunk }) => {
- const { editableLabel, saveLabel, save } = itemConfig;
+ const { save } = itemConfig;
+ const labels = _.merge(defaultLabels, itemConfig.labels);
const toggleEditable = () => internalStateUpdater({ type: TOGGLE_EDITABLE });
- const getEditableLabel = () => !isEditing ? editableLabel[0] || 'Make editable' : editableLabel[1] || 'Hide editable';
+ const getEditableLabel = () => !isEditing ? labels.show : labels.hide;
return isEditable && (
{ !isModified && (
@@ -15,7 +22,7 @@ const EditableButtons = ({ itemConfig, action, isModified, isEditable, isEditing
)}
{ isModified && (
)}
diff --git a/src/components/Field.js b/src/components/Field.js
index 9bb0287..413d710 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -9,7 +9,8 @@ const formControl = ({
color,
padding,
focusShadow,
- focusBorderColor
+ focusBorderColor,
+ modified
}) => css `
display: block;
width: 100%;
@@ -27,6 +28,10 @@ const formControl = ({
box-shadow: ${focusShadow || 'none'};
border-color: ${focusBorderColor || '#80bdff'}
};
+
+ ${modified && css`
+ border: 1px solid #007bff;
+ `}
`;
const Input = styled.input `
diff --git a/src/components/Tbody.js b/src/components/Tbody.js
index 491269a..31b31b1 100644
--- a/src/components/Tbody.js
+++ b/src/components/Tbody.js
@@ -50,14 +50,14 @@ const Tbody = React.forwardRef(({
);
});
-const StyledTbody = styled(Tbody).attrs(({ isPrinting, windowing, height }) => (
+const StyledTbody = styled(Tbody).attrs(({ isPrinting, height }) => (
isPrinting === false ? { style: { height } } : null
))`
max-width: 100%;
margin-right: auto;
margin-left: auto;
- overflow-y: ${props => props.isPrinting ? 'none': 'scroll'};
- overflow-x: ${props => props.isPrinting ? 'none': 'scroll'};
+ overflow-y: ${props => props.isPrinting || props.innerHeight === props.visibleHeight ? 'hidden': 'scroll'};
+ overflow-x: ${props => props.isPrinting ? 'hidden': 'scroll'};
border-bottom: 1px solid #ddd;
`;
const ExtendedStyledTbody = styled(StyledTbody)(getExtendedStyles());
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index 0fd8603..299827a 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -33,6 +33,7 @@ const Toolbar = ({
{ items.map((row, rowIndex) => (
(
visibleHeight ? visibleHeight : height}px` }
+ height={ height > visibleHeight ? visibleHeight : height }
innerHeight={ height }
data={ items }
startTop={ top }
@@ -201,8 +201,9 @@ const renderTable = ({
windowing={ true }
>
{({ item, top, index: rowIndex }) => {
- var data = prepareData(item, schema, state);
- var modifiedData = modified[data[primaryKey]] || {};
+ const data = prepareData(item, schema, state);
+ const primarKeyValue = _.get(data, primaryKey);
+ const modifiedData = modified[primarKeyValue] || {};
return (
{
const { width, textAlign, name, type } = column;
const ColRenderer = column.renderer || Renderer;
+ const modifiedValue = _.get(modifiedData, name);
+ const origValue = _.get(data, name);
+ const value = modifiedValue || origValue;
return (
| {
- const newData = Object.assign({}, data);
+ var newData = { ...modifiedData };
+ _.set(newData, primaryKey, primarKeyValue);
_.set(newData, event.target.name, event.target.value);
- action(MODIFY_DATA)({ key: newData[primaryKey], value: newData })
+ action(MODIFY_DATA)({ key: primarKeyValue, value: newData })
}}
/>
@@ -345,7 +354,7 @@ const ReduxDatatable = ( props ) => {
tableBody,
thunk,
top,
- visibleHeight: height,
+ visibleHeight: height || (rowHeight * ( tableData.items || [] ).length),
width,
widthAdjustment,
}) }
diff --git a/src/reducer.js b/src/reducer.js
index c093a55..ce48da4 100644
--- a/src/reducer.js
+++ b/src/reducer.js
@@ -134,7 +134,7 @@ export default function reducer(state = {}, action) {
},
[actions.MODIFY_DATA]: () => {
var modifiedData = {};
- if (!payload.clear) {
+ if (payload.clear !== true) {
modifiedData = {
...tableState.modified,
[payload.key]: {
@@ -149,7 +149,6 @@ export default function reducer(state = {}, action) {
[name]: {
...tableState,
modified: {
- ...tableState.modified,
...modifiedData
}
}
|