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

Make table always apply filters and expose filtered data (#3968)

Browse source 
* Make table always apply filters and expose filtered data

* Re-render table when computed table data changes

* Re-apply global filter using search text when table data changes

* Stringify table data before sending it as dependency for table data to be displayed

* Use data returned from Table internal state to ensure filters are always applied

* Do not autoreset filteres in table when data changes

* Show row count of filtered row set in Table
This commit is contained in:
Sherfin Shamsudeen 2022-09-08 15:51:45 +05:30 committed by GitHub
parent 0471b72fc4
commit 0061b8b7e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -43,6 +43,7 @@ export function Table({
fireEvent,
setExposedVariable,
registerAction,
properties,
}) {
const color =
component.definition.styles.textColor.value !== '#000'
@ -751,7 +752,12 @@ export function Table({
const data = useMemo(
() => tableData,
[tableData.length, componentState.changeSet, component.definition.properties.data.value]
[
tableData.length,
componentState.changeSet,
component.definition.properties.data.value,
JSON.stringify(properties.data),
]
);
const computedStyles = {
@ -777,12 +783,15 @@ export function Table({
setAllFilters,
preGlobalFilteredRows,
setGlobalFilter,
state: { pageIndex, pageSize },
state: { pageIndex, globalFilter },
exportData,
selectedFlatRows,
globalFilteredRows,
} = useTable(
{
autoResetPage: false,
autoResetGlobalFilter: false,
autoResetFilters: false,
columns,
data,
defaultColumn,
@ -874,6 +883,13 @@ export function Table({
const tableRef = React.useRef();
useEffect(() => {
setExposedVariable(
'filteredData',
globalFilteredRows.map((row) => row.original)
);
}, [JSON.stringify(globalFilteredRows.map((row) => row.original))]);
return (
<div
data-disabled={parsedDisabledState}
@ -1082,7 +1098,7 @@ export function Table({
</button>
</>
) : (
<span>{`${preGlobalFilteredRows.length} Records`}</span>
<span>{`${globalFilteredRows.length} Records`}</span>
)}
</div>
</div>