Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-22 16:38:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Feature: display action button on left (#647)

Browse source 
* Add option to set poisition of table action button

* Display table actions on the left if their position is set to left

* Replace 'buttonPosition' with 'position' for table actions

* Use SelectSearch instead of html select

* Display actions column only if actions are present
This commit is contained in:
Sherfin Shamsudeen 2021-08-31 16:07:38 +05:30 committed by GitHub
parent 12d8c4af28
commit 214b99cd10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/Editor/Components/Table/Table.jsx
View file

@ -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) => (
<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, action });
}}
>
{action.buttonText}
</button>
));
}
}
]
: [];
const rightActionsCellData = rightActions().length > 0
? [
{
id: 'rightActions',
Header: 'Actions',
accessor: 'edit',
width: columnSizes.actions || defaultColumn.width,
Cell: (cell) => {
return rightActions().map((action) => (
<button
key={action.name}
className="btn btn-sm m-1 btn-light"
@ -456,9 +485,9 @@ export function Table({
: [];
const columns = useMemo(
() => [...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

17
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -270,6 +270,23 @@ class Table extends React.Component {
value={action.buttonText}
/>
</div>
<div className="field mb-2">
<label className="form-label">Button position</label>
<SelectSearch
options={[
{ name: 'Left', value: 'left' },
{ name: 'Right', value: 'right' },
]}
value={action.position ?? 'right'}
search={false}
closeOnSelect={true}
onChange={value => {
this.onActionButtonPropertyChanged(index, 'position', value);
}}
filterOptions={fuzzySearch}
placeholder="Select position"
/>
</div>
<Color
param={{ name: 'actionButtonBackgroundColor' }}
paramType="properties"