diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index b913bfd5da..3cc00c5bf1 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -429,15 +429,44 @@ export function Table({ tableData = tableData || []; - const actionsCellData = actions.value.length > 0 + const leftActions = () => actions.value.filter(action => action.position === 'left') + const rightActions = () => actions.value.filter(action => [undefined, 'right'].includes(action.position)) + + const leftActionsCellData = leftActions().length > 0 ? [ { - id: 'actions', + id: 'leftActions', Header: 'Actions', accessor: 'edit', width: columnSizes.actions || defaultColumn.width, Cell: (cell) => { - return actions.value.map((action) => ( + return leftActions().map((action) => ( + { + e.stopPropagation(); + onEvent('onTableActionButtonClicked', { component, data: cell.row.original, action }); + }} + > + {action.buttonText} + + )); + } + } + ] + : []; + + const rightActionsCellData = rightActions().length > 0 + ? [ + { + id: 'rightActions', + Header: 'Actions', + accessor: 'edit', + width: columnSizes.actions || defaultColumn.width, + Cell: (cell) => { + return rightActions().map((action) => ( [...columnData, ...actionsCellData], + () => [...leftActionsCellData, ...columnData, ...rightActionsCellData], [JSON.stringify(columnData), - actionsCellData.length, + leftActionsCellData.length + rightActionsCellData.length, componentState.changeSet, JSON.stringify(component.definition.properties.columns) ] // Hack: need to fix diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index 3af854d852..af6b75b80e 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -270,6 +270,23 @@ class Table extends React.Component { value={action.buttonText} /> + + Button position + { + this.onActionButtonPropertyChanged(index, 'position', value); + }} + filterOptions={fuzzySearch} + placeholder="Select position" + /> +