Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Option to toggle display of column hide ::[ Table widget ] (#4831)

Browse source 
* feat :: table hide property

* name change

* name update

* name update

* latest

* name change

* typo fix

* fix
This commit is contained in:
Kiran Ashok 2022-12-05 16:53:57 +05:30 committed by GitHub
parent a520cb30a8
commit f631d1a5a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -90,6 +90,7 @@ export function Table({
totalRecords,
rowsPerPage,
enabledSort,
hideColumnSelectorButton,
} = loadPropertiesAndStyles(properties, styles, darkMode, component);
const getItemStyle = ({ isDragging, isDropAnimating }, draggableStyle) => ({
@ -616,51 +617,57 @@ export function Table({
</span>
</OverlayTrigger>
)}
<OverlayTrigger
trigger="click"
rootClose={true}
overlay={
<Popover>
<div
data-cy={`dropdown-hide-column`}
className={`dropdown-table-column-hide-common ${
darkMode ? 'dropdown-table-column-hide-dark-themed' : 'dropdown-table-column-hide'
} `}
>
<div className="dropdown-item">
<IndeterminateCheckbox {...getToggleHideAllColumnsProps()} />
<span className="hide-column-name" data-cy={`options-select-all-coloumn`}>
Select All
</span>
</div>
{allColumns.map((column) => (
<div key={column.id}>
<div>
<label className="dropdown-item">
<input
type="checkbox"
data-cy={`checkbox-coloumn-${String(column.Header).toLowerCase().replace(/\s+/g, '-')}`}
{...column.getToggleHiddenProps()}
/>
<span
className="hide-column-name"
data-cy={`options-coloumn-${String(column.Header).toLowerCase().replace(/\s+/g, '-')}`}
>
{` ${column.Header}`}
</span>
</label>
</div>
{!hideColumnSelectorButton && (
<OverlayTrigger
trigger="click"
rootClose={true}
overlay={
<Popover>
<div
data-cy={`dropdown-hide-column`}
className={`dropdown-table-column-hide-common ${
darkMode ? 'dropdown-table-column-hide-dark-themed' : 'dropdown-table-column-hide'
} `}
>
<div className="dropdown-item">
<IndeterminateCheckbox {...getToggleHideAllColumnsProps()} />
<span className="hide-column-name" data-cy={`options-select-all-coloumn`}>
Select All
</span>
</div>
))}
</div>
</Popover>
}
placement={'bottom-end'}
>
<span data-cy={`select-column-icon`} className={`btn btn-light btn-sm p-1 mb-0 mx-1 `}>
<IconEyeOff style={{ width: '15', height: '15', margin: '0px' }} />
</span>
</OverlayTrigger>
{allColumns.map((column) => (
<div key={column.id}>
<div>
<label className="dropdown-item">
<input
type="checkbox"
data-cy={`checkbox-coloumn-${String(column.Header)
.toLowerCase()
.replace(/\s+/g, '-')}`}
{...column.getToggleHiddenProps()}
/>
<span
className="hide-column-name"
data-cy={`options-coloumn-${String(column.Header)
.toLowerCase()
.replace(/\s+/g, '-')}`}
>
{` ${column.Header}`}
</span>
</label>
</div>
</div>
))}
</div>
</Popover>
}
placement={'bottom-end'}
>
<span data-cy={`select-column-icon`} className={`btn btn-light btn-sm p-1 mb-0 mx-1 `}>
<IconEyeOff style={{ width: '15', height: '15', margin: '0px' }} />
</span>
</OverlayTrigger>
)}
</div>
</div>
</div>

2
frontend/src/Editor/Components/Table/load-properties-and-styles.js
View file

@ -10,6 +10,7 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co
const totalRecords = properties.totalRecords ?? '';
const enabledSort = properties?.enabledSort ?? true;
const hideColumnSelectorButton = properties?.hideColumnSelectorButton ?? false;
const serverSideSort = properties.serverSideSort ?? false;
@ -80,5 +81,6 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co
totalRecords,
rowsPerPage,
enabledSort,
hideColumnSelectorButton,
};
}

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

@ -1042,6 +1042,7 @@ class TableComponent extends React.Component {
'showBulkUpdateActions',
'showBulkSelector',
'highlightSelectedRow',
'hideColumnSelectorButton',
];
let renderOptions = [];

8
frontend/src/Editor/WidgetManager/widgetConfig.js
View file

@ -162,6 +162,13 @@ export const widgets = [
schema: { type: 'boolean' },
},
},
hideColumnSelectorButton: {
type: 'toggle',
displayName: 'Hide column selector button',
validation: {
schema: { type: 'boolean' },
},
},
enablePrevButton: {
type: 'toggle',
displayName: 'Enable previous page button',
@ -422,6 +429,7 @@ export const widgets = [
columnSizes: { value: '{{({})}}' },
actions: { value: [] },
enabledSort: { value: '{{true}}' },
hideColumnSelectorButton: { value: '{{false}}' },
},
events: [],
styles: {