diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx index 85e73cbb42..1026f5a06b 100644 --- a/app/client/src/widgets/TableWidget.tsx +++ b/app/client/src/widgets/TableWidget.tsx @@ -86,11 +86,6 @@ class TableWidget extends BaseWidget { defaultSearchText: VALIDATION_TYPES.TEXT, }; } - static getDerivedPropertiesMap() { - return { - selectedRow: "{{this.filteredTableData[this.selectedRowIndex]}}", - }; - } static getMetaPropertiesMap(): Record { return { @@ -98,6 +93,7 @@ class TableWidget extends BaseWidget { pageSize: undefined, selectedRowIndex: -1, searchText: undefined, + selectedRow: undefined, // The following meta property is used for rendering the table. filteredTableData: undefined, }; @@ -264,7 +260,6 @@ class TableWidget extends BaseWidget { filterTableData = () => { const { searchText, sortedColumn, filters, tableData } = this.props; const columns = this.getTableColumns(tableData); - if (!tableData || !tableData.length) { return []; } @@ -313,8 +308,26 @@ class TableWidget extends BaseWidget { return filteredTableData; }; + getSelectedRow = (filteredTableData: object[]) => { + const { selectedRowIndex } = this.props; + if (selectedRowIndex === undefined || selectedRowIndex === -1) { + const columnKeys: string[] = getAllTableColumnKeys(this.props.tableData); + const selectedRow: { [key: string]: any } = {}; + for (let i = 0; i < columnKeys.length; i++) { + selectedRow[columnKeys[i]] = undefined; + } + return selectedRow; + } + return filteredTableData[selectedRowIndex]; + }; + componentDidMount() { - super.updateWidgetMetaProperty("filteredTableData", this.filterTableData()); + const filteredTableData = this.filterTableData(); + super.updateWidgetMetaProperty("filteredTableData", filteredTableData); + super.updateWidgetMetaProperty( + "selectedRow", + this.getSelectedRow(filteredTableData), + ); } componentDidUpdate(prevProps: TableWidgetProps) { if ( @@ -326,9 +339,11 @@ class TableWidget extends BaseWidget { JSON.stringify(this.props.sortedColumn) !== JSON.stringify(prevProps.sortedColumn) ) { + const filteredTableData = this.filterTableData(); + super.updateWidgetMetaProperty("filteredTableData", filteredTableData); super.updateWidgetMetaProperty( - "filteredTableData", - this.filterTableData(), + "selectedRow", + this.getSelectedRow(filteredTableData), ); } } @@ -488,6 +503,10 @@ class TableWidget extends BaseWidget { handleRowClick = (rowData: object, index: number) => { const { onRowSelected } = this.props; super.updateWidgetMetaProperty("selectedRowIndex", index); + super.updateWidgetMetaProperty( + "selectedRow", + this.props.filteredTableData[index], + ); if (onRowSelected) { super.executeAction({ dynamicString: onRowSelected,