diff --git a/app/client/src/components/designSystems/appsmith/Table.tsx b/app/client/src/components/designSystems/appsmith/Table.tsx index e8625ac2a7..0daaaba156 100644 --- a/app/client/src/components/designSystems/appsmith/Table.tsx +++ b/app/client/src/components/designSystems/appsmith/Table.tsx @@ -66,7 +66,7 @@ const defaultColumn = { }; export const Table = (props: TableProps) => { - const dataString = JSON.stringify(props.data); + const data = React.useMemo(() => props.data, [props.data]); const columnString = JSON.stringify({ columns: props.columns, actions: props.columnActions, @@ -74,8 +74,6 @@ export const Table = (props: TableProps) => { compactMode: props.compactMode, }); // eslint-disable-next-line react-hooks/exhaustive-deps - const data = React.useMemo(() => props.data, [dataString]); - // eslint-disable-next-line react-hooks/exhaustive-deps const columns = React.useMemo(() => props.columns, [columnString]); const pageCount = Math.ceil(props.data.length / props.pageSize); diff --git a/app/client/src/components/designSystems/appsmith/TableFilters.tsx b/app/client/src/components/designSystems/appsmith/TableFilters.tsx index 836da587e2..93a61a04b0 100644 --- a/app/client/src/components/designSystems/appsmith/TableFilters.tsx +++ b/app/client/src/components/designSystems/appsmith/TableFilters.tsx @@ -62,7 +62,7 @@ const TableFilters = (props: TableFilterProps) => { ); useEffect(() => { - const filters: ReactTableFilter[] = props.filters || []; + const filters: ReactTableFilter[] = props.filters ? [...props.filters] : []; if (filters.length === 0) { filters.push({ column: "", @@ -150,7 +150,7 @@ const TableFilters = (props: TableFilterProps) => { value={filter.value} columns={columns} applyFilter={(filter: ReactTableFilter, index: number) => { - const updatedFilters = props.filters || []; + const updatedFilters = props.filters ? [...props.filters] : []; updatedFilters[index] = filter; props.applyFilter(updatedFilters); }} diff --git a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx index 11374a97d1..383b77ae0d 100644 --- a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx +++ b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx @@ -33,9 +33,6 @@ export const TableWrapper = styled.div<{ .tbody { overflow: hidden; } - .tr:first-of-type { - width: calc(100% - 6px); - } .tbody { overflow-y: scroll; /* Subtracting 9px to handling widget padding */ @@ -44,7 +41,6 @@ export const TableWrapper = styled.div<{ props.tableSizes.TABLE_HEADER_HEIGHT - props.tableSizes.COLUMN_HEADER_HEIGHT - 9}px; - ${scrollbarLight}; .tr { width: 100%; } diff --git a/app/client/src/components/designSystems/appsmith/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableUtilities.tsx index 3f803620f6..a429b95d19 100644 --- a/app/client/src/components/designSystems/appsmith/TableUtilities.tsx +++ b/app/client/src/components/designSystems/appsmith/TableUtilities.tsx @@ -633,7 +633,12 @@ export const TableHeaderCell = (props: { )} {props.displayColumnActions && ( -
+
) => { + event.stopPropagation(); + }} + > import("components/designSystems/appsmith/ReactTableComponent"), ); @@ -84,7 +83,6 @@ class TableWidget extends BaseWidget { label: VALIDATION_TYPES.TEXT, selectedRowIndex: VALIDATION_TYPES.NUMBER, searchText: VALIDATION_TYPES.TEXT, - // filteredTableData: VALIDATION_TYPES.TABLE_DATA, defaultSearchText: VALIDATION_TYPES.TEXT, }; } @@ -263,106 +261,82 @@ class TableWidget extends BaseWidget { return updatedTableData; }; - filterTableData = memoize( - ( - tableData: object[], - columns: ReactTableColumnProps[], - filters?: ReactTableFilter[], - searchText?: string, - sortedColumn?: { - column: string; - asc: boolean; - }, - ) => { - if (!tableData || !tableData.length) { - return []; - } - let sortedTableData = []; - const searchKey = searchText ? searchText.toUpperCase() : ""; - if (sortedColumn) { - const sortColumn = sortedColumn.column; - const sortOrder = sortedColumn.asc; - sortedTableData = sortTableFunction( - tableData, - columns, - sortColumn, - sortOrder, - ); - } else { - sortedTableData = [...tableData]; - } - const filteredTableData = sortedTableData.filter( - (item: { [key: string]: any }) => { - const searchFound = searchKey - ? Object.values(item) - .join(", ") - .toUpperCase() - .includes(searchKey) - : true; - if (!searchFound) return false; - if (!filters || filters.length === 0) return true; - const filterOperator: Operator = - filters.length >= 2 ? filters[1].operator : OperatorTypes.OR; - let filter = filterOperator === OperatorTypes.AND ? true : false; - for (let i = 0; i < filters.length; i++) { - const filterValue = compare( - item[filters[i].column], - filters[i].value, - filters[i].condition, - ); - if (filterOperator === OperatorTypes.AND) { - filter = filter && filterValue; - } else { - filter = filter || filterValue; - } - } - return filter; - }, - ); - // super.updateWidgetMetaProperty("filteredTableData", filteredTableData); - return filteredTableData; - }, - ); + filterTableData = () => { + const { searchText, sortedColumn, filters, tableData } = this.props; + const columns = this.getTableColumns(tableData); - resetFilteredTableData = ( - filters?: ReactTableFilter[], - searchText?: string, - sortedColumn?: { - column: string; - asc: boolean; - }, - ) => { - const { tableData } = this.props; - const tableColumns = this.getTableColumns(tableData); - this.filterTableData( - tableData, - tableColumns, - filters, - searchText, - sortedColumn, + if (!tableData || !tableData.length) { + return []; + } + let sortedTableData = []; + const searchKey = searchText ? searchText.toUpperCase() : ""; + if (sortedColumn) { + const sortColumn = sortedColumn.column; + const sortOrder = sortedColumn.asc; + sortedTableData = sortTableFunction( + tableData, + columns, + sortColumn, + sortOrder, + ); + } else { + sortedTableData = [...tableData]; + } + const filteredTableData = sortedTableData.filter( + (item: { [key: string]: any }) => { + const searchFound = searchKey + ? Object.values(item) + .join(", ") + .toUpperCase() + .includes(searchKey) + : true; + if (!searchFound) return false; + if (!filters || filters.length === 0) return true; + const filterOperator: Operator = + filters.length >= 2 ? filters[1].operator : OperatorTypes.OR; + let filter = filterOperator === OperatorTypes.AND ? true : false; + for (let i = 0; i < filters.length; i++) { + const filterValue = compare( + item[filters[i].column], + filters[i].value, + filters[i].condition, + ); + if (filterOperator === OperatorTypes.AND) { + filter = filter && filterValue; + } else { + filter = filter || filterValue; + } + } + return filter; + }, ); + return filteredTableData; }; - getPageView() { - const { - tableData, - hiddenColumns, - filters, - searchText, - sortedColumn, - } = this.props; - const tableColumns = this.getTableColumns(tableData); - // Use the filtered data to render the table. - const filteredTableData = this.filterTableData( - tableData, - tableColumns, - filters, - searchText, - sortedColumn, - ); - if (this.props.filteredTableData === undefined) { - super.updateWidgetMetaProperty("filteredTableData", filteredTableData); + componentDidMount() { + super.updateWidgetMetaProperty("filteredTableData", this.filterTableData()); + } + componentDidUpdate(prevProps: TableWidgetProps) { + if ( + JSON.stringify(this.props.tableData) !== + JSON.stringify(prevProps.tableData) || + JSON.stringify(this.props.filters) !== + JSON.stringify(prevProps.filters) || + this.props.searchText !== prevProps.searchText || + JSON.stringify(this.props.sortedColumn) !== + JSON.stringify(prevProps.sortedColumn) + ) { + super.updateWidgetMetaProperty( + "filteredTableData", + this.filterTableData(), + ); } + } + + getPageView() { + const { tableData, hiddenColumns, filteredTableData } = this.props; + const tableColumns = this.getTableColumns(tableData); + const transformedData = this.transformData( filteredTableData || [], tableColumns, @@ -397,7 +371,6 @@ class TableWidget extends BaseWidget { if (pageSize !== this.props.pageSize) { super.updateWidgetMetaProperty("pageSize", pageSize); } - // /* return ( }> { filters={this.props.filters} applyFilter={(filters: ReactTableFilter[]) => { this.resetSelectedRowIndex(); - this.resetFilteredTableData(filters, searchText, sortedColumn); super.updateWidgetMetaProperty("filters", filters); }} compactMode={this.props.compactMode || CompactModeTypes.DEFAULT} @@ -468,7 +440,6 @@ class TableWidget extends BaseWidget { }} sortTableColumn={(column: string, asc: boolean) => { this.resetSelectedRowIndex(); - this.resetFilteredTableData(filters, searchText, { column, asc }); super.updateWidgetMetaProperty("sortedColumn", { column: column, asc: asc, @@ -480,8 +451,7 @@ class TableWidget extends BaseWidget { } handleSearchTable = (searchKey: any) => { - const { onSearchTextChanged, filters, sortedColumn } = this.props; - this.resetFilteredTableData(filters, searchKey, sortedColumn); + const { onSearchTextChanged } = this.props; this.resetSelectedRowIndex(); this.updateWidgetMetaProperty("pageNo", 1); super.updateWidgetMetaProperty("searchText", searchKey); diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 8378011040..c37745e1e7 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -13228,13 +13228,25 @@ pretty-format@^24.9.0: ansi-styles "^3.2.0" react-is "^16.8.4" -prismjs@^1.21.0: +pretty-hrtime@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" + integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= + +prismjs@^1.21.0, prismjs@^1.8.4: version "1.21.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3" integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw== optionalDependencies: clipboard "^2.0.0" +prismjs@~1.17.0: + version "1.17.1" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be" + integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q== + optionalDependencies: + clipboard "^2.0.0" + private@^0.1.6, private@^0.1.8, private@~0.1.5: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"