Merge pull request #3706 from appsmithorg/fix/filteredData-columnProperties

Fix #3381: Table column properties now map correctly when filtering, sorting or searching

app/client/src/widgets/TableWidget/derived.js

@@ -182,7 +182,7 @@ export default {
     if (!props.sanitizedTableData || !props.sanitizedTableData.length) {
       return [];
     }
-    const derivedTableData = [...props.sanitizedTableData];
+    let derivedTableData = [...props.sanitizedTableData];
     if (props.primaryColumns && _.isPlainObject(props.primaryColumns)) {
       const primaryColumns = props.primaryColumns;
       const columnIds = Object.keys(props.primaryColumns);
@@ -220,6 +220,11 @@ export default {
       });
     }
 
+    derivedTableData = derivedTableData.map((item, index) => ({
+      ...item,
+      __originalIndex__: index,
+    }));
+
     const columns = props.columns;
 
     let sortedTableData;
@@ -280,9 +285,7 @@ export default {
       isExactly: (a, b) => {
         return a.toString() === b.toString();
       },
-      empty: (a) => {
+      empty: _.isEmpty,
-        return a === "" || a === undefined || a === null;
-      },
       notEmpty: (a) => {
         return a !== "" && a !== undefined && a !== null;
       },
@@ -313,28 +316,35 @@ export default {
         return numericA >= numericB;
       },
       contains: (a, b) => {
-        if (_.isString(a) && _.isString(b)) {
+        try {
-          return a.includes(b);
+          return a.toString().includes(b.toString());
+        } catch (e) {
+          return false;
         }
-        return false;
       },
       doesNotContain: (a, b) => {
-        if (_.isString(a) && _.isString(b)) {
+        try {
-          return !a.includes(b);
+          return !this.contains(a, b);
+        } catch (e) {
+          return false;
         }
-        return false;
       },
       startsWith: (a, b) => {
-        if (_.isString(a) && _.isString(b)) {
+        try {
-          return a.indexOf(b) === 0;
+          return a.toString().indexOf(b.toString()) === 0;
+        } catch (e) {
+          return false;
         }
-        return false;
       },
       endsWith: (a, b) => {
-        if (_.isString(a) && _.isString(b)) {
+        try {
-          return a.length === a.indexOf(b) + b.length;
+          const _a = a.toString();
+          const _b = b.toString();
+
+          return _a.length === _a.indexOf(_b) + _b.length;
+        } catch (e) {
+          return false;
         }
-        return false;
       },
       is: (a, b) => {
         return moment(a).isSame(moment(b), "d");

app/client/src/widgets/TableWidget/derived.test.js

@@ -519,8 +519,8 @@ describe("Validates Derived Properties", () => {
       ],
     };
     const expected = [
-      { id: 234, name: "Jane Doe", extra: "Extra2" },
+      { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 1 },
-      { id: 123, name: "John Doe", extra: "Extra1" },
+      { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 0 },
     ];
 
     let result = getFilteredTableData(input, moment, _);
@@ -666,9 +666,9 @@ describe("Validates Derived Properties", () => {
       ],
     };
     const expected = [
-      { id: 1234, name: "Jim Doe", extra: "" },
+      { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
-      { id: 234, name: "Jane Doe", extra: "Extra2" },
+      { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
-      { id: 123, name: "John Doe", extra: "Extra1" },
+      { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
     ];
 
     let result = getFilteredTableData(input, moment, _);

app/client/src/widgets/TableWidget/index.tsx

@@ -182,7 +182,10 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         },
         columnProperties: columnProperties,
         Cell: (props: any) => {
-          const rowIndex: number = props.cell.row.index;
+          let rowIndex: number = props.cell.row.index;
+          const data = this.props.filteredTableData[rowIndex];
+          if (data && data.__originalIndex__) rowIndex = data.__originalIndex__;
+
           const cellProperties = this.getCellProperties(
             columnProperties,
             rowIndex,