mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 17:08:34 +00:00
Fixes incorrect resolving of cellValue
This commit is contained in:
navaneeth
parent
525daca83e
commit
4d01aa31a1
1 changed files with 105 additions and 106 deletions
|
|
@ -324,7 +324,7 @@ export function Table({
|
|||
case 'string':
|
||||
case undefined:
|
||||
case 'default': {
|
||||
const textColor = resolveReferences(column.textColor, currentState, { cellValue });
|
||||
const textColor = resolveReferences(column.textColor, currentState, '', { cellValue });
|
||||
|
||||
const cellStyles = {
|
||||
color: textColor ?? '',
|
||||
|
|
@ -561,65 +561,65 @@ export function Table({
|
|||
const leftActionsCellData =
|
||||
leftActions().length > 0
|
||||
? [
|
||||
{
|
||||
id: 'leftActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.leftActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return leftActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
},
|
||||
{
|
||||
id: 'leftActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.leftActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return leftActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
: [];
|
||||
|
||||
const rightActionsCellData =
|
||||
rightActions().length > 0
|
||||
? [
|
||||
{
|
||||
id: 'rightActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.rightActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return rightActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
},
|
||||
{
|
||||
id: 'rightActions',
|
||||
Header: 'Actions',
|
||||
accessor: 'edit',
|
||||
width: columnSizes.rightActions || defaultColumn.width,
|
||||
Cell: (cell) => {
|
||||
return rightActions().map((action) => (
|
||||
<button
|
||||
key={action.name}
|
||||
className="btn btn-sm m-1 btn-light"
|
||||
style={{ background: action.backgroundColor, color: action.textColor }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEvent('onTableActionButtonClicked', {
|
||||
component,
|
||||
data: cell.row.original,
|
||||
rowId: cell.row.id,
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{action.buttonText}
|
||||
</button>
|
||||
));
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
: [];
|
||||
|
||||
const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
|
||||
|
|
@ -835,9 +835,8 @@ export function Table({
|
|||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className={`table-row ${
|
||||
highlightSelectedRow && row.id === componentState.selectedRowId ? 'selected' : ''
|
||||
}`}
|
||||
className={`table-row ${highlightSelectedRow && row.id === componentState.selectedRowId ? 'selected' : ''
|
||||
}`}
|
||||
{...row.getRowProps()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -899,62 +898,62 @@ export function Table({
|
|||
Object.keys(componentState.changeSet || {}).length > 0 ||
|
||||
showFilterButton ||
|
||||
showDownloadButton) && (
|
||||
<div className="card-footer d-flex align-items-center jet-table-footer">
|
||||
<div className="table-footer row">
|
||||
<div className="col">
|
||||
{(clientSidePagination || serverSidePagination) && (
|
||||
<Pagination
|
||||
lastActivePageIndex={pageIndex}
|
||||
serverSide={serverSidePagination}
|
||||
autoGotoPage={gotoPage}
|
||||
autoCanNextPage={canNextPage}
|
||||
autoPageCount={pageCount}
|
||||
autoPageOptions={pageOptions}
|
||||
onPageIndexChanged={onPageIndexChanged}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0 && (
|
||||
<div className="card-footer d-flex align-items-center jet-table-footer">
|
||||
<div className="table-footer row">
|
||||
<div className="col">
|
||||
<button
|
||||
className={`btn btn-primary btn-sm ${componentState.isSavingChanges ? 'btn-loading' : ''}`}
|
||||
onClick={() =>
|
||||
onEvent('onBulkUpdate', { component }).then(() => {
|
||||
handleChangesSaved();
|
||||
})
|
||||
}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button className="btn btn-light btn-sm mx-2" onClick={() => handleChangesDiscarded()}>
|
||||
Discard changes
|
||||
</button>
|
||||
{(clientSidePagination || serverSidePagination) && (
|
||||
<Pagination
|
||||
lastActivePageIndex={pageIndex}
|
||||
serverSide={serverSidePagination}
|
||||
autoGotoPage={gotoPage}
|
||||
autoCanNextPage={canNextPage}
|
||||
autoPageCount={pageCount}
|
||||
autoPageOptions={pageOptions}
|
||||
onPageIndexChanged={onPageIndexChanged}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-auto">
|
||||
{showFilterButton && (
|
||||
<span data-tip="Filter data" className="btn btn-light btn-sm p-1 mx-2" onClick={() => showFilters()}>
|
||||
<img src="/assets/images/icons/filter.svg" width="13" height="13" />
|
||||
{filters.length > 0 && (
|
||||
<a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{showDownloadButton && (
|
||||
<span
|
||||
data-tip="Download as CSV"
|
||||
className="btn btn-light btn-sm p-1"
|
||||
onClick={() => exportData('csv', true)}
|
||||
>
|
||||
<img src="/assets/images/icons/download.svg" width="13" height="13" />
|
||||
</span>
|
||||
{showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0 && (
|
||||
<div className="col">
|
||||
<button
|
||||
className={`btn btn-primary btn-sm ${componentState.isSavingChanges ? 'btn-loading' : ''}`}
|
||||
onClick={() =>
|
||||
onEvent('onBulkUpdate', { component }).then(() => {
|
||||
handleChangesSaved();
|
||||
})
|
||||
}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button className="btn btn-light btn-sm mx-2" onClick={() => handleChangesDiscarded()}>
|
||||
Discard changes
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-auto">
|
||||
{showFilterButton && (
|
||||
<span data-tip="Filter data" className="btn btn-light btn-sm p-1 mx-2" onClick={() => showFilters()}>
|
||||
<img src="/assets/images/icons/filter.svg" width="13" height="13" />
|
||||
{filters.length > 0 && (
|
||||
<a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{showDownloadButton && (
|
||||
<span
|
||||
data-tip="Download as CSV"
|
||||
className="btn btn-light btn-sm p-1"
|
||||
onClick={() => exportData('csv', true)}
|
||||
>
|
||||
<img src="/assets/images/icons/download.svg" width="13" height="13" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{isFiltersVisible && (
|
||||
<div className="table-filters card">
|
||||
<div className="card-header row">
|
||||
|
|
|
|||
Loading…
Reference in a new issue