diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index e25ac49c38..2f4453d134 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -276,10 +276,18 @@ export function Table({ const cellValue = rowChangeSet ? rowChangeSet[column.name] || cell.value : cell.value; if (columnType === 'string' || columnType === undefined || columnType === 'default') { + + const textColor = resolveReferences(column.textColor, currentState, { cellValue }); + + const cellStyles = { + color: textColor === undefined ? darkMode === true ? '#fff' : 'black' : textColor + } + if (column.isEditable) { return ( { if (e.key === 'Enter') { if(e.target.defaultValue !== e.target.value) { @@ -297,7 +305,7 @@ export function Table({ /> ); } - return {cellValue}; + return {cellValue}; } if (columnType === 'text') { return column.id === cell.column.id)?.accessor; + const currentColumn = columnData.find(column => column.id === cell.column.id); - if (_.get(componentState.changeSet[cell.row.index], accessor, undefined) !== undefined) { + if (_.get(componentState.changeSet[cell.row.index], currentColumn?.accessor, undefined) !== undefined) { console.log('componentState.changeSet', componentState.changeSet); cellProps.style.backgroundColor = '#ffffde'; } diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index af6b75b80e..98261d41f5 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -152,6 +152,21 @@ class Table extends React.Component { /> + {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && + + Text color + this.onColumnItemChange(index, 'textColor', value)} + /> + + } + {column.columnType === 'toggle' && @@ -228,7 +243,7 @@ class Table extends React.Component { )} - + make editable - - this.removeAction(index)}> - Remove - ); diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js index c888c51ab8..f39c376f7a 100644 --- a/frontend/src/_helpers/utils.js +++ b/frontend/src/_helpers/utils.js @@ -34,15 +34,15 @@ export function resolveAll(data, state) { } -export function resolveReferences(object, state) { +export function resolveReferences(object, state, customObjects) { if (typeof object === 'string') { if (object.startsWith('{{') && object.endsWith('}}')) { const code = object.replace('{{', '').replace('}}', ''); let result = ''; try { - const evalFunction = Function(['components', 'queries', 'globals', 'moment', '_'], `return ${code}`); - result = evalFunction(state.components, state.queries, state.globals, moment, _); + const evalFunction = Function(['components', 'queries', 'globals', 'moment', '_', ...Object.keys(customObjects)], `return ${code}`); + result = evalFunction(state.components, state.queries, state.globals, moment, _, ...Object.values(customObjects)); } catch (err) { console.log('eval_error', err); }