chore: Split derived.test.js to separate files. (#38162)

## Description
This PR started with this goal:
- Deleted the unreadable `derived.test.js` (4668 lines) file and split
each suite to its file.
- Moved all `derived.js` related specs in widget folder to __tests__
folder

Later we found that `testRegex` in `jest.config` will treat anything
inside `__tests__` as runnable, so we modify this rule and are moving to
a consistent naming for our unit tests(any file ending with `.test.` or
`.spec.`

This refactor aims to improve maintainability and ensure that the table
widget's derived properties are thoroughly tested.


Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags=""

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!WARNING]
> Tests have not run on the HEAD
b3168bb1a6d3070a910972d1d9a78d61a3aaee91 yet
> <hr>Tue, 17 Dec 2024 10:20:54 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Expanded properties for table widget configuration.
- Introduced sample data constants for column schemas and processed
table data.

- **Bug Fixes**
- Improved validation tests for editable cells and row selection
functions.

- **Tests**
- Added comprehensive test suites for various table widget
functionalities, including filtering, sorting, and row selection.
	- Introduced tests for handling HTML content within table columns.
	- Added tests for new functions related to row updates and indices.
- Enhanced test coverage for existing utility functions and table
properties.

- **Chores**
- Updated import paths to reflect a new directory structure across
various test files.
- Modified Jest configuration for improved readability and regex
adjustments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/jest.config.js

@@ -23,17 +23,19 @@ module.exports = {
           before: [
             {
               path: "node_modules/ts-jest-mock-import-meta",
-              options: { metaObjectReplacement: { url: "https://www.url.com" } },
+              options: {
+                metaObjectReplacement: { url: "https://www.url.com" },
+              },
             },
           ],
         },
-      }
+      },
     ],
   },
   testEnvironment: "jsdom",
   testTimeout: 9000,
   setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
-  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(tsx|ts|js)?$",
+  testRegex: "\\.(test|spec)\\.(tsx|ts|js)?$",
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"],
   moduleDirectories: ["node_modules", "src", "test"],
   transformIgnorePatterns: [
@@ -68,8 +70,7 @@ module.exports = {
       "<rootDir>/node_modules/@blueprintjs/select/lib/esnext",
     "@appsmith/ads": "<rootDir>/node_modules/@appsmith/ads",
     "^canvas$": "jest-canvas-mock",
-    "^entities/(.*)$": "<rootDir>/src/entities/$1",  // Match 'entities/*'
+    "^entities/(.*)$": "<rootDir>/src/entities/$1", // Match 'entities/*'
-
   },
   globals: {
     APPSMITH_FEATURE_CONFIGS: {

app/client/src/widgets/TableWidgetV2/widget/__tests__/TableRendered.test.ts

@@ -1,6 +1,6 @@
 import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
-import TableWidgetV2 from ".";
+import TableWidgetV2 from "..";
-import type { TableWidgetProps } from "../constants";
+import type { TableWidgetProps } from "../../constants";
 
 describe("TableWidgetV2 getWidgetView", () => {
   const tableWidgetProps: TableWidgetProps = {

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/fixture.js

@@ -0,0 +1,191 @@
+export const samplePrimaryColumns = {
+  step: {
+    index: 0,
+    width: 150,
+    id: "step",
+    originalId: "step",
+    alias: "step",
+    horizontalAlignment: "LEFT",
+    verticalAlignment: "CENTER",
+    columnType: "text",
+    textSize: "0.875rem",
+    enableFilter: true,
+    enableSort: true,
+    isVisible: true,
+    isCellVisible: true,
+    isCellEditable: false,
+    isDerived: false,
+    label: "step",
+    computedValue: ["#1", "#2", "#3"],
+    labelColor: "#FFFFFF",
+    cellBackground: "",
+    textColor: "",
+    fontStyle: "",
+  },
+  task: {
+    index: 1,
+    width: 150,
+    id: "task",
+    originalId: "task",
+    alias: "task",
+    horizontalAlignment: "LEFT",
+    verticalAlignment: "CENTER",
+    columnType: "text",
+    textSize: "0.875rem",
+    enableFilter: true,
+    enableSort: true,
+    isVisible: true,
+    isCellVisible: true,
+    isCellEditable: false,
+    isDerived: false,
+    label: "task",
+    computedValue: [
+      "Drop a table",
+      "Create a query fetch_users with the Mock DB",
+      "Bind the query using => fetch_users.data",
+    ],
+    labelColor: "#FFFFFF",
+    cellBackground: "",
+    textColor: "",
+    fontStyle: "",
+  },
+  status: {
+    index: 2,
+    width: 150,
+    id: "status",
+    originalId: "status",
+    alias: "status",
+    horizontalAlignment: "LEFT",
+    verticalAlignment: "CENTER",
+    columnType: "text",
+    textSize: "0.875rem",
+    enableFilter: true,
+    enableSort: true,
+    isVisible: true,
+    isCellVisible: true,
+    isCellEditable: false,
+    isDerived: false,
+    label: "status",
+    computedValue: ["✅", "--", "--"],
+    labelColor: "#FFFFFF",
+    cellBackground: "",
+    textColor: "",
+    fontStyle: "",
+  },
+  action: {
+    index: 3,
+    width: 150,
+    id: "action",
+    originalId: "action",
+    alias: "action",
+    horizontalAlignment: "LEFT",
+    verticalAlignment: "CENTER",
+    columnType: "button",
+    textSize: "0.875rem",
+    enableFilter: true,
+    enableSort: true,
+    isVisible: true,
+    isCellVisible: true,
+    isCellEditable: false,
+    isDisabled: false,
+    isDerived: false,
+    label: "action",
+    onClick:
+      "{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}",
+    computedValue: ["", "", ""],
+    labelColor: "#FFFFFF",
+    buttonColor: ["#553DE9", "#553DE9", "#553DE9"],
+    borderRadius: ["0.375rem", "0.375rem", "0.375rem"],
+    boxShadow: ["none", "none", "none"],
+    buttonLabel: ["Action", "Action", "Action"],
+    buttonVariant: "PRIMARY",
+  },
+  customColumn1: {
+    allowCellWrapping: false,
+    index: 4,
+    width: 150,
+    originalId: "customColumn1",
+    id: "customColumn1",
+    alias: "customColumn1",
+    horizontalAlignment: "LEFT",
+    verticalAlignment: "CENTER",
+    columnType: "menuButton",
+    textSize: "0.875rem",
+    enableFilter: true,
+    enableSort: true,
+    isVisible: true,
+    isDisabled: false,
+    isCellEditable: false,
+    isEditable: false,
+    isCellVisible: true,
+    isDerived: true,
+    label: "menu",
+    isSaveVisible: true,
+    isDiscardVisible: true,
+    computedValue: "",
+    buttonStyle: "rgb(3, 179, 101)",
+    labelColor: "#FFFFFF",
+    menuColor: ["#553DE9", "#553DE9", "#553DE9"],
+    borderRadius: ["0.375rem", "0.375rem", "0.375rem"],
+    boxShadow: ["none", "none", "none"],
+    customAlias: "",
+    menuButtonLabel: ["Open Menu", "Open Menu", "Open Menu"],
+    menuVariant: "PRIMARY",
+    menuButtoniconName: "",
+  },
+  customColumn2: {
+    allowCellWrapping: false,
+    index: 5,
+    width: 150,
+    originalId: "customColumn2",
+    id: "customColumn2",
+    alias: "customColumn2",
+    horizontalAlignment: "LEFT",
+    verticalAlignment: "CENTER",
+    columnType: "iconButton",
+    textSize: "0.875rem",
+    enableFilter: true,
+    enableSort: true,
+    isVisible: true,
+    isDisabled: false,
+    isCellEditable: false,
+    isEditable: false,
+    isCellVisible: true,
+    isDerived: true,
+    label: "icon",
+    isSaveVisible: true,
+    isDiscardVisible: true,
+    computedValue: "",
+    buttonStyle: "rgb(3, 179, 101)",
+    labelColor: "#FFFFFF",
+    buttonColor: ["#553DE9", "#553DE9", "#553DE9"],
+    borderRadius: ["0.375rem", "0.375rem", "0.375rem"],
+    boxShadow: ["none", "none", "none"],
+    customAlias: "",
+    buttonVariant: "PRIMARY",
+    iconName: "add",
+  },
+};
+export const sampleProcessedTableData = [
+  {
+    step: "#1",
+    task: "Drop a table",
+    status: "✅",
+    action: "",
+    __originalIndex__: 0,
+  },
+  {
+    step: "#2",
+    task: "Create a query fetch_users with the Mock DB",
+    status: "--",
+    action: "",
+    __originalIndex__: 1,
+  },
+  {
+    step: "#3",
+    task: "Bind the query using => fetch_users.data",
+    status: "--",
+    action: "",
+    __originalIndex__: 2,
+  },
+];

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getOrderedTableColumns.test.js

@@ -0,0 +1,169 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+
+describe("Validate getOrderedTableColumns function", () => {
+  it("should test tht it returns the columns array from the primaryColumn", () => {
+    const { getOrderedTableColumns } = derivedProperty;
+
+    const input = {
+      columnOrder: ["id", "name"],
+      primaryColumns: {
+        id: {
+          index: 0,
+          id: "id",
+        },
+        name: {
+          index: 1,
+          id: "name",
+        },
+      },
+    };
+
+    const expected = [
+      {
+        index: 0,
+        id: "id",
+        isAscOrder: undefined,
+      },
+      {
+        index: 1,
+        id: "name",
+        isAscOrder: undefined,
+      },
+    ];
+
+    expect(getOrderedTableColumns(input, moment, _)).toStrictEqual(expected);
+  });
+
+  it("should test that it returns the columns array from the primaryColumn based on column order", () => {
+    const { getOrderedTableColumns } = derivedProperty;
+
+    const input = {
+      columnOrder: ["name", "id"],
+      primaryColumns: {
+        id: {
+          index: 0,
+          id: "id",
+        },
+        name: {
+          index: 1,
+          id: "name",
+        },
+      },
+    };
+
+    const expected = [
+      {
+        index: 0,
+        id: "name",
+        isAscOrder: undefined,
+      },
+      {
+        index: 1,
+        id: "id",
+        isAscOrder: undefined,
+      },
+    ];
+
+    expect(getOrderedTableColumns(input, moment, _)).toStrictEqual(expected);
+  });
+
+  it("should test that it returns the columns array from the primaryColumn based on column order and sets sort order details", () => {
+    const { getOrderedTableColumns } = derivedProperty;
+
+    let input = {
+      columnOrder: ["name", "id"],
+      primaryColumns: {
+        id: {
+          index: 0,
+          id: "id",
+        },
+        name: {
+          index: 1,
+          id: "name",
+        },
+      },
+      sortOrder: {
+        column: "name",
+        order: "asc",
+      },
+    };
+
+    let expected = [
+      {
+        index: 0,
+        id: "name",
+        isAscOrder: true,
+      },
+      {
+        index: 1,
+        id: "id",
+        isAscOrder: undefined,
+      },
+    ];
+
+    expect(getOrderedTableColumns(input, moment, _)).toStrictEqual(expected);
+
+    input = {
+      columnOrder: ["name", "id"],
+      primaryColumns: {
+        id: {
+          index: 0,
+          id: "id",
+        },
+        name: {
+          index: 1,
+          id: "name",
+        },
+      },
+      sortOrder: {
+        column: "name",
+        order: "desc",
+      },
+    };
+
+    expected = [
+      {
+        index: 0,
+        id: "name",
+        isAscOrder: false,
+      },
+      {
+        index: 1,
+        id: "id",
+        isAscOrder: undefined,
+      },
+    ];
+
+    expect(getOrderedTableColumns(input, moment, _)).toStrictEqual(expected);
+  });
+
+  it("should test that it removes the column with empty name", () => {
+    const { getOrderedTableColumns } = derivedProperty;
+
+    const input = {
+      columnOrder: ["name", ""],
+      primaryColumns: {
+        "": {
+          index: 0,
+          id: "",
+        },
+        name: {
+          index: 1,
+          id: "name",
+        },
+      },
+    };
+
+    const expected = [
+      {
+        index: 0,
+        id: "name",
+        isAscOrder: undefined,
+      },
+    ];
+
+    expect(getOrderedTableColumns(input, moment, _)).toStrictEqual(expected);
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getPageOffset.test.js

@@ -0,0 +1,91 @@
+import derivedProperty from "../../derived";
+
+describe("getPageOffset -", () => {
+  it("should return 0 when pageNo is null", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: null,
+        pageSize: 0,
+      }),
+    ).toEqual(0);
+  });
+
+  it("should return 0 when pageSize is null", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: 0,
+        pageSize: null,
+      }),
+    ).toEqual(0);
+  });
+
+  it("should return 0 when pageSize is undefined", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: 0,
+        pageSize: undefined,
+      }),
+    ).toEqual(0);
+  });
+
+  it("should return 0 when pageNo is undefined", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: undefined,
+        pageSize: 0,
+      }),
+    ).toEqual(0);
+  });
+
+  it("should return 0 when pageSize is 0 and pageNo is any random number >= 0", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: 10,
+        pageSize: 0,
+      }),
+    ).toEqual(0);
+  });
+
+  it("should return 0 when pageNo is 0 and pageSize is any random number >= 0", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: 0,
+        pageSize: 100,
+      }),
+    ).toEqual(0);
+  });
+
+  it("should return 0 when pageNo is NaN", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: NaN,
+        pageSize: 0,
+      }),
+    ).toEqual(0);
+  });
+
+  it("should return 10 when pageSize is 5 and pageNo is 3", () => {
+    const { getPageOffset } = derivedProperty;
+
+    expect(
+      getPageOffset({
+        pageNo: 3,
+        pageSize: 5,
+      }),
+    ).toEqual(10);
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getSelectedRow.test.js

@@ -0,0 +1,244 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+
+import { samplePrimaryColumns, sampleProcessedTableData } from "./fixture";
+describe("Validate getSelectedRow function", () => {
+  it("Multple row selection, with selected rows", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [0, 1],
+      selectedRowIndex: 1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: 234,
+      name: "Jane Doe",
+      extra: "Extra2",
+    });
+  });
+
+  it("Multple row selection, with no selected rows", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [],
+      selectedRowIndex: 1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("Single row selection, with selected row", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: false,
+      selectedRowIndices: [],
+      selectedRowIndex: 1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: 234,
+      name: "Jane Doe",
+      extra: "Extra2",
+    });
+  });
+
+  it("Single row selection, without selected row", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [],
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should return empty row when selectedRowIndices is a string value 'test'", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: ["test"],
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should return empty row when selectedRowIndices is undefined", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: undefined,
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should return empty row when selectedRowIndices contains undefined value", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [undefined],
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should return empty row when selectedRowIndices contains null value", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [null],
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should return empty row when selectedRowIndices contains string numbers", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: ["1", "2"],
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should return empty row when selectedRowIndices is a single string number", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: "1",
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should return empty row when selectedRowIndices is a non-numeric string", () => {
+    const { getSelectedRow } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: "test",
+      selectedRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("Single row selection should not have non data columns", () => {
+    const { getSelectedRow } = derivedProperty;
+
+    const input = {
+      multiRowSelection: false,
+      selectedRowIndices: [],
+      selectedRowIndex: 1,
+      processedTableData: sampleProcessedTableData,
+      primaryColumns: samplePrimaryColumns,
+    };
+
+    expect(getSelectedRow(input, moment, _)).toStrictEqual({
+      step: "#2",
+      task: "Create a query fetch_users with the Mock DB",
+      status: "--",
+    });
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getSelectedRows.test.js

@@ -0,0 +1,99 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+import { samplePrimaryColumns, sampleProcessedTableData } from "./fixture";
+
+describe("Validate getSelectedRows function", () => {
+  it("with valid index", () => {
+    const { getSelectedRows } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [1],
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRows(input, moment, _)).toStrictEqual([
+      {
+        id: 234,
+        name: "Jane Doe",
+        extra: "Extra2",
+      },
+    ]);
+  });
+
+  it("with valid indices", () => {
+    const { getSelectedRows } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [0, 1],
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRows(input, moment, _)).toStrictEqual([
+      {
+        id: 1234,
+        name: "Jim Doe",
+        extra: "",
+      },
+      {
+        id: 234,
+        name: "Jane Doe",
+        extra: "Extra2",
+      },
+    ]);
+  });
+
+  it("with invalid indices", () => {
+    const { getSelectedRows } = derivedProperty;
+    const input = {
+      selectedRowIndices: [0, "test"],
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRows(input, moment, _)).toStrictEqual([]);
+  });
+
+  it("with no indices", () => {
+    const { getSelectedRows } = derivedProperty;
+    const input = {
+      selectedRowIndices: [],
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getSelectedRows(input, moment, _)).toStrictEqual([]);
+  });
+
+  it("for removal of non data columns", () => {
+    const { getSelectedRows } = derivedProperty;
+    const input = {
+      multiRowSelection: true,
+      selectedRowIndices: [1],
+      processedTableData: sampleProcessedTableData,
+      primaryColumns: samplePrimaryColumns,
+    };
+
+    expect(getSelectedRows(input, moment, _)).toStrictEqual([
+      {
+        step: "#2",
+        task: "Create a query fetch_users with the Mock DB",
+        status: "--",
+      },
+    ]);
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getTriggeredRow.test.js

@@ -0,0 +1,111 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+import { samplePrimaryColumns, sampleProcessedTableData } from "./fixture";
+
+describe("Validate getTriggeredRow function", () => {
+  it("with valid triggered row index", () => {
+    const { getTriggeredRow } = derivedProperty;
+    const input = {
+      triggeredRowIndex: 1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getTriggeredRow(input, moment, _)).toStrictEqual({
+      id: 123,
+      name: "John Doe",
+      extra: "Extra1",
+    });
+  });
+
+  it("with valid triggered row index", () => {
+    const { getTriggeredRow } = derivedProperty;
+    const input = {
+      triggeredRowIndex: 0,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getTriggeredRow(input, moment, _)).toStrictEqual({
+      id: 1234,
+      name: "Jim Doe",
+      extra: "",
+    });
+  });
+
+  it("with triggered row index -1", () => {
+    const { getTriggeredRow } = derivedProperty;
+    const input = {
+      triggeredRowIndex: -1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getTriggeredRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("with invalid triggered row index", () => {
+    const { getTriggeredRow } = derivedProperty;
+    const input = {
+      triggeredRowIndex: "test",
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getTriggeredRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("with invalid triggered row index", () => {
+    const { getTriggeredRow } = derivedProperty;
+    const input = {
+      triggeredRowIndex: undefined,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getTriggeredRow(input, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("for removal of non data columns", () => {
+    const { getTriggeredRow } = derivedProperty;
+    const input = {
+      triggeredRowIndex: 1,
+      processedTableData: sampleProcessedTableData,
+      primaryColumns: samplePrimaryColumns,
+    };
+
+    expect(getTriggeredRow(input, moment, _)).toStrictEqual({
+      step: "#2",
+      task: "Create a query fetch_users with the Mock DB",
+      status: "--",
+    });
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getUpdatedRow.test.js

@@ -0,0 +1,99 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+import { samplePrimaryColumns, sampleProcessedTableData } from "./fixture";
+
+describe("validate getUpdatedRow", () => {
+  it("should check that valid updated row index returns the valid value", () => {
+    const { getUpdatedRow } = derivedProperty;
+    const input1 = {
+      updatedRowIndex: 1,
+      processedTableData: [
+        { id: 1234, name: "Jim Doe", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe1", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+    const input2 = {
+      updatedRowIndex: 0,
+      processedTableData: [
+        { id: 1, name: "Lorem Ipsum", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getUpdatedRow(input1, moment, _)).toStrictEqual({
+      id: 123,
+      name: "John Doe1",
+      extra: "Extra1",
+    });
+    expect(getUpdatedRow(input2, moment, _)).toStrictEqual({
+      id: 1,
+      name: "Lorem Ipsum",
+      extra: "",
+    });
+  });
+
+  it("should check that it returns empty values when updateRowIndex is invalid or -1", () => {
+    const { getUpdatedRow } = derivedProperty;
+    const input1 = {
+      updatedRowIndex: -1,
+      processedTableData: [
+        { id: 1, name: "Lorem Ipsum", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+    const input2 = {
+      updatedRowIndex: "dummyIndex",
+      processedTableData: [
+        { id: 1, name: "Lorem Ipsum", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    const input3 = {
+      updatedRowIndex: undefined,
+      processedTableData: [
+        { id: 1, name: "Lorem Ipsum", extra: "", __originalIndex__: 0 },
+        { id: 234, name: "Jane Doe", extra: "Extra2", __originalIndex__: 2 },
+        { id: 123, name: "John Doe", extra: "Extra1", __originalIndex__: 1 },
+      ],
+    };
+
+    expect(getUpdatedRow(input1, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+
+    expect(getUpdatedRow(input2, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+
+    expect(getUpdatedRow(input3, moment, _)).toStrictEqual({
+      id: "",
+      name: "",
+      extra: "",
+    });
+  });
+
+  it("should check that it removes non data columns", () => {
+    const { getUpdatedRow } = derivedProperty;
+    const input = {
+      updatedRowIndex: 1,
+      processedTableData: sampleProcessedTableData,
+      primaryColumns: samplePrimaryColumns,
+    };
+
+    expect(getUpdatedRow(input, moment, _)).toStrictEqual({
+      step: "#2",
+      task: "Create a query fetch_users with the Mock DB",
+      status: "--",
+    });
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getUpdatedRowIndices.test.js

@@ -0,0 +1,64 @@
+import derivedProperty from "../../derived";
+
+describe("getUpdatedRowIndices -", () => {
+  it("should test that it returns empty array when transientTableData is empty", () => {
+    const { getUpdatedRowIndices } = derivedProperty;
+
+    expect(
+      getUpdatedRowIndices({
+        transientTableData: {},
+      }),
+    ).toEqual([]);
+  });
+
+  it("should test that it returns empty array when transientTableData is null", () => {
+    const { getUpdatedRowIndices } = derivedProperty;
+
+    expect(
+      getUpdatedRowIndices({
+        transientTableData: null,
+      }),
+    ).toEqual([]);
+  });
+
+  it("should test that it returns empty array when transientTableData is undefined", () => {
+    const { getUpdatedRowIndices } = derivedProperty;
+
+    expect(
+      getUpdatedRowIndices({
+        transientTableData: undefined,
+      }),
+    ).toEqual([]);
+  });
+
+  it("should test that it returns empty array when transientTableData has one value", () => {
+    const { getUpdatedRowIndices } = derivedProperty;
+
+    expect(
+      getUpdatedRowIndices({
+        transientTableData: {
+          1: {
+            column1: "newValue",
+          },
+        },
+      }),
+    ).toEqual([1]);
+  });
+
+  it("should test that it returns empty array when transientTableData has two value", () => {
+    const { getUpdatedRowIndices } = derivedProperty;
+
+    expect(
+      getUpdatedRowIndices({
+        transientTableData: {
+          1: {
+            column1: "newValue",
+          },
+          2: {
+            column1: "newValue",
+          },
+        },
+      }),
+    ).toEqual([1, 2]);
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getUpdatedRows.test.js

@@ -0,0 +1,243 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+import { samplePrimaryColumns, sampleProcessedTableData } from "./fixture";
+
+describe("getUpdatedRows -", () => {
+  it("should test that it returns empty array when transientTableData is empty", () => {
+    const { getUpdatedRows } = derivedProperty;
+
+    expect(
+      getUpdatedRows(
+        {
+          transientTableData: {},
+        },
+        null,
+        _,
+      ),
+    ).toEqual([]);
+  });
+
+  it("should test that it returns empty array when transientTableData is null", () => {
+    const { getUpdatedRows } = derivedProperty;
+
+    expect(
+      getUpdatedRows(
+        {
+          transientTableData: null,
+        },
+        null,
+        _,
+      ),
+    ).toEqual([]);
+  });
+
+  it("should test that it returns empty array when transientTableData is undefined", () => {
+    const { getUpdatedRows } = derivedProperty;
+
+    expect(
+      getUpdatedRows(
+        {
+          transientTableData: null,
+        },
+        null,
+        _,
+      ),
+    ).toEqual([]);
+  });
+
+  it("should test that it returns expected array when transientTableData has data with invalid index", () => {
+    const { getUpdatedRows } = derivedProperty;
+
+    const input = {
+      transientTableData: {
+        test: {
+          column1: "newValue",
+        },
+      },
+      processedTableData: [
+        {
+          column1: "oldValue",
+          column2: "oldValue",
+          __originalIndex__: 0,
+        },
+        {
+          column1: "newValue",
+          column2: "oldValue",
+          __originalIndex__: 1,
+        },
+      ],
+    };
+
+    const expected = [];
+
+    expect(getUpdatedRows(input, null, _)).toEqual(expected);
+  });
+
+  it("should test that it returns expected array when transientTableData has data", () => {
+    const { getUpdatedRows } = derivedProperty;
+
+    const input = {
+      transientTableData: {
+        1: {
+          column1: "newValue",
+        },
+      },
+      processedTableData: [
+        {
+          column1: "oldValue",
+          column2: "oldValue",
+          __originalIndex__: 0,
+        },
+        {
+          column1: "newValue",
+          column2: "oldValue",
+          __originalIndex__: 1,
+        },
+      ],
+    };
+
+    const expected = [
+      {
+        index: 1,
+        updatedFields: {
+          column1: "newValue",
+        },
+        allFields: {
+          column1: "newValue",
+          column2: "oldValue",
+        },
+      },
+    ];
+
+    expect(getUpdatedRows(input, null, _)).toEqual(expected);
+  });
+
+  it("should test that it returns expected array when transientTableData has data with primary column", () => {
+    const { getUpdatedRows } = derivedProperty;
+
+    const input = {
+      primaryColumnId: "column2",
+      transientTableData: {
+        1: {
+          column1: "newValue",
+        },
+      },
+      processedTableData: [
+        {
+          column1: "oldValue1",
+          column2: "oldValue1",
+          __originalIndex__: 0,
+        },
+        {
+          column1: "newValue",
+          column2: "oldValue2",
+          __originalIndex__: 1,
+        },
+      ],
+    };
+
+    const expected = [
+      {
+        index: 1,
+        column2: "oldValue2",
+        updatedFields: {
+          column1: "newValue",
+        },
+        allFields: {
+          column1: "newValue",
+          column2: "oldValue2",
+        },
+      },
+    ];
+
+    expect(getUpdatedRows(input, null, _)).toEqual(expected);
+  });
+
+  it("should test that it returns expected array when transientTableData has data with primary column and bigger tableData", () => {
+    const { getUpdatedRows } = derivedProperty;
+
+    const input = {
+      primaryColumnId: "column3",
+      transientTableData: {
+        1: {
+          column1: "newValue",
+          column2: "newValue1",
+        },
+      },
+      processedTableData: [
+        {
+          column1: "oldValue1",
+          column2: "oldValue1",
+          column3: "oldValue1",
+          __originalIndex__: 0,
+        },
+        {
+          column1: "newValue",
+          column2: "newValue1",
+          column3: "oldValue2",
+          __originalIndex__: 1,
+        },
+        {
+          column1: "oldValue3",
+          column2: "oldValue3",
+          column3: "oldValue3",
+          __originalIndex__: 2,
+        },
+        {
+          column1: "oldValue3",
+          column2: "oldValue3",
+          column3: "oldValue4",
+          __originalIndex__: 3,
+        },
+      ],
+    };
+
+    const expected = [
+      {
+        index: 1,
+        column3: "oldValue2",
+        updatedFields: {
+          column1: "newValue",
+          column2: "newValue1",
+        },
+        allFields: {
+          column1: "newValue",
+          column2: "newValue1",
+          column3: "oldValue2",
+        },
+      },
+    ];
+
+    expect(getUpdatedRows(input, null, _)).toEqual(expected);
+  });
+
+  it("Verify for removal of non data columns", () => {
+    const { getUpdatedRows } = derivedProperty;
+    const input = {
+      transientTableData: {
+        0: {
+          task: "Drop a table first",
+        },
+      },
+      primaryColumnId: "step",
+      processedTableData: sampleProcessedTableData,
+      primaryColumns: samplePrimaryColumns,
+    };
+
+    expect(getUpdatedRows(input, moment, _)).toStrictEqual([
+      {
+        index: 0,
+        step: "#1",
+        updatedFields: {
+          task: "Drop a table first",
+        },
+        allFields: {
+          step: "#1",
+          task: "Drop a table",
+          status: "✅",
+        },
+      },
+    ]);
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/htmlColumns.test.js

@@ -0,0 +1,579 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+
+describe("HTML columns", () => {
+  const input = {
+    tableData: [
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span style='color: green;'>Active</span>",
+      },
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: "<span style='color: yellow;'>Pending</span>",
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span style='color: green;'>Active</span>",
+      },
+    ],
+    processedTableData: [
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 0,
+      },
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: "<span style='color: yellow;'>Pending</span>",
+        __originalIndex__: 1,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 2,
+      },
+    ],
+    sortOrder: { column: "id", order: "asc" },
+    columnOrder: ["id", "name", "status"],
+    primaryColumns: {
+      id: {
+        index: 1,
+        width: 150,
+        id: "id",
+        alias: "id",
+        originalId: "id",
+        horizontalAlignment: "LEFT",
+        verticalAlignment: "CENTER",
+        columnType: "number",
+        textColor: "#231F20",
+        textSize: "PARAGRAPH",
+        fontStyle: "REGULAR",
+        enableFilter: true,
+        enableSort: true,
+        isVisible: true,
+        isDerived: false,
+        label: "id",
+        isAscOrder: false,
+      },
+      name: {
+        index: 0,
+        width: 150,
+        id: "name",
+        alias: "name",
+        originalId: "name",
+        horizontalAlignment: "LEFT",
+        verticalAlignment: "CENTER",
+        columnType: "text",
+        textColor: "#231F20",
+        textSize: "PARAGRAPH",
+        fontStyle: "REGULAR",
+        enableFilter: true,
+        enableSort: true,
+        isVisible: true,
+        isDerived: false,
+        label: "awesome",
+        isAscOrder: undefined,
+      },
+      status: {
+        index: 0,
+        width: 150,
+        id: "status",
+        alias: "status",
+        originalId: "status",
+        horizontalAlignment: "LEFT",
+        verticalAlignment: "CENTER",
+        columnType: "html",
+        textColor: "#231F20",
+        textSize: "PARAGRAPH",
+        fontStyle: "REGULAR",
+        enableFilter: true,
+        enableSort: true,
+        isVisible: true,
+        isDerived: false,
+        label: "Status",
+        isAscOrder: undefined,
+      },
+    },
+    tableColumns: [
+      {
+        index: 0,
+        width: 150,
+        id: "name",
+        horizontalAlignment: "LEFT",
+        verticalAlignment: "CENTER",
+        columnType: "text",
+        textColor: "#231F20",
+        textSize: "PARAGRAPH",
+        fontStyle: "REGULAR",
+        enableFilter: true,
+        enableSort: true,
+        isVisible: true,
+        isDerived: false,
+        label: "awesome",
+        isAscOrder: undefined,
+      },
+      {
+        index: 1,
+        width: 150,
+        id: "id",
+        horizontalAlignment: "LEFT",
+        verticalAlignment: "CENTER",
+        columnType: "number",
+        textColor: "#231F20",
+        textSize: "PARAGRAPH",
+        fontStyle: "REGULAR",
+        enableFilter: true,
+        enableSort: true,
+        isVisible: true,
+        isDerived: false,
+        label: "id",
+        isAscOrder: false,
+      },
+      {
+        index: 0,
+        width: 150,
+        id: "status",
+        alias: "status",
+        originalId: "status",
+        horizontalAlignment: "LEFT",
+        verticalAlignment: "CENTER",
+        columnType: "html",
+        textColor: "#231F20",
+        textSize: "PARAGRAPH",
+        fontStyle: "REGULAR",
+        enableFilter: true,
+        enableSort: true,
+        isVisible: true,
+        isDerived: false,
+        label: "Status",
+        isAscOrder: undefined,
+      },
+    ],
+  };
+
+  input.orderedTableColumns = Object.values(input.primaryColumns).sort(
+    (a, b) => {
+      return input.columnOrder[a.id] < input.columnOrder[b.id];
+    },
+  );
+  const { getFilteredTableData } = derivedProperty;
+
+  it("validate search on table for HTML columns", () => {
+    input.searchText = "Pending";
+    const expected = [
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: "<span style='color: yellow;'>Pending</span>",
+        __originalIndex__: 1,
+      },
+    ];
+
+    let result = getFilteredTableData(input, moment, _);
+
+    expect(result).toStrictEqual(expected);
+    delete input.searchText;
+  });
+
+  it("validates filters on table for HTML columns", () => {
+    input.filters = [
+      {
+        condition: "contains",
+        column: "status",
+        value: "Active",
+      },
+    ];
+    const expected = [
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 0,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 2,
+      },
+    ];
+
+    let result = getFilteredTableData(input, moment, _);
+
+    expect(result).toStrictEqual(expected);
+    delete input.filters;
+  });
+
+  it("validates sort on table for HTML columns", () => {
+    input.sortOrder = { column: "status", order: "desc" };
+    let expected = [
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: "<span style='color: yellow;'>Pending</span>",
+        __originalIndex__: 1,
+      },
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 0,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 2,
+      },
+    ];
+
+    let result = getFilteredTableData(input, moment, _);
+
+    expect(result).toStrictEqual(expected);
+
+    input.sortOrder = { column: "status", order: "asc" };
+    expected = [
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 2,
+      },
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span style='color: green;'>Active</span>",
+        __originalIndex__: 0,
+      },
+
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: "<span style='color: yellow;'>Pending</span>",
+        __originalIndex__: 1,
+      },
+    ];
+
+    result = getFilteredTableData(input, moment, _);
+    expect(result).toStrictEqual(expected);
+  });
+
+  it("validates tags are not filterable in html content", () => {
+    input.filters = [
+      {
+        condition: "contains",
+        column: "status",
+        value: "span",
+      },
+    ];
+    const expected = [];
+
+    let result = getFilteredTableData(input, moment, _);
+
+    expect(result).toStrictEqual(expected);
+
+    input.filters = [
+      {
+        condition: "contains",
+        column: "status",
+        value: "color",
+      },
+    ];
+    result = getFilteredTableData(input, moment, _);
+    expect(result).toStrictEqual(expected);
+    delete input.filters;
+  });
+  it("validates tags are not searchable in html content", () => {
+    input.searchText = "span";
+
+    const expected = [];
+
+    let result = getFilteredTableData(input, moment, _);
+
+    expect(result).toStrictEqual(expected);
+
+    input.searchText = "color";
+    result = getFilteredTableData(input, moment, _);
+    expect(result).toStrictEqual(expected);
+    delete input.searchText;
+  });
+
+  it("validates multiple HTML column filters with AND condition", () => {
+    const multiFilterInput = _.cloneDeep(input);
+
+    multiFilterInput.processedTableData = [
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span style='color: green;'>Active</span>",
+        role: "<div>Admin</div>",
+        __originalIndex__: 0,
+      },
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: "<span style='color: yellow;'>Pending</span>",
+        role: "<div>User</div>",
+        __originalIndex__: 1,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span style='color: green;'>Active</span>",
+        role: "<div>Admin</div>",
+        __originalIndex__: 2,
+      },
+    ];
+
+    multiFilterInput.primaryColumns.role = {
+      index: 3,
+      width: 150,
+      id: "role",
+      alias: "role",
+      originalId: "role",
+      horizontalAlignment: "LEFT",
+      verticalAlignment: "CENTER",
+      columnType: "html",
+      textColor: "#231F20",
+      textSize: "PARAGRAPH",
+      fontStyle: "REGULAR",
+      enableFilter: true,
+      enableSort: true,
+      isVisible: true,
+      isDerived: false,
+      label: "Role",
+      isAscOrder: undefined,
+    };
+
+    multiFilterInput.filters = [
+      {
+        condition: "contains",
+        column: "status",
+        value: "Active",
+      },
+      {
+        condition: "contains",
+        column: "role",
+        value: "Admin",
+        operator: "AND",
+      },
+    ];
+
+    const expected = [
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span style='color: green;'>Active</span>",
+        role: "<div>Admin</div>",
+        __originalIndex__: 2,
+      },
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span style='color: green;'>Active</span>",
+        role: "<div>Admin</div>",
+        __originalIndex__: 0,
+      },
+    ];
+
+    let result = getFilteredTableData(multiFilterInput, moment, _);
+
+    expect(result).toStrictEqual(expected);
+    delete input.filters;
+  });
+
+  it("validates complex HTML content with nested elements and attributes", () => {
+    const complexHTMLInput = _.cloneDeep(input);
+
+    complexHTMLInput.processedTableData = [
+      {
+        id: 1,
+        name: "Jim Doe",
+        status:
+          '<div class="status-badge"><span style="color: green">Active</span></div>',
+        __originalIndex__: 0,
+      },
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status:
+          '<div class="status-badge"><span style="color: orange">Pending</span></div>',
+        __originalIndex__: 1,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status:
+          '<div class="status-badge"><span style="color: green">Active</span></div>',
+        __originalIndex__: 2,
+      },
+    ];
+
+    // Test searching through complex HTML
+    complexHTMLInput.searchText = "Active";
+    let expected = [
+      {
+        id: 3,
+        name: "Elon Musk",
+        status:
+          '<div class="status-badge"><span style="color: green">Active</span></div>',
+        __originalIndex__: 2,
+      },
+      {
+        id: 1,
+        name: "Jim Doe",
+        status:
+          '<div class="status-badge"><span style="color: green">Active</span></div>',
+        __originalIndex__: 0,
+      },
+    ];
+
+    let result = getFilteredTableData(complexHTMLInput, moment, _);
+
+    expect(result).toStrictEqual(expected);
+    delete complexHTMLInput.searchText;
+
+    // Test sorting with complex HTML
+    complexHTMLInput.sortOrder = { column: "status", order: "desc" };
+    expected = [
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status:
+          '<div class="status-badge"><span style="color: orange">Pending</span></div>',
+        __originalIndex__: 1,
+      },
+      {
+        id: 1,
+        name: "Jim Doe",
+        status:
+          '<div class="status-badge"><span style="color: green">Active</span></div>',
+        __originalIndex__: 0,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status:
+          '<div class="status-badge"><span style="color: green">Active</span></div>',
+        __originalIndex__: 2,
+      },
+    ];
+
+    result = getFilteredTableData(complexHTMLInput, moment, _);
+    expect(result).toStrictEqual(expected);
+  });
+
+  it("validates HTML columns with special characters and entities", () => {
+    const specialCharHTMLInput = _.cloneDeep(input);
+
+    specialCharHTMLInput.processedTableData = [
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span>&copy; Active &amp; Ready</span>",
+        __originalIndex__: 0,
+      },
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: "<span>Pending &gt; Review</span>",
+        __originalIndex__: 1,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span>&copy; Active &amp; Ready</span>",
+        __originalIndex__: 2,
+      },
+    ];
+
+    // Test filtering with HTML entities
+    specialCharHTMLInput.filters = [
+      {
+        condition: "contains",
+        column: "status",
+        value: "Active & Ready",
+      },
+    ];
+
+    const expected = [
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span>&copy; Active &amp; Ready</span>",
+        __originalIndex__: 2,
+      },
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: "<span>&copy; Active &amp; Ready</span>",
+        __originalIndex__: 0,
+      },
+    ];
+
+    let result = getFilteredTableData(specialCharHTMLInput, moment, _);
+
+    expect(result).toStrictEqual(expected);
+    delete specialCharHTMLInput.filters;
+  });
+
+  it("validates filtering with null and undefined values in HTML columns", () => {
+    const nullUndefinedInput = _.cloneDeep(input);
+
+    nullUndefinedInput.processedTableData = [
+      {
+        id: 1,
+        name: "Jim Doe",
+        status: null,
+        __originalIndex__: 0,
+      },
+      {
+        id: 2,
+        name: "Usain Bolt",
+        status: undefined,
+        __originalIndex__: 1,
+      },
+      {
+        id: 3,
+        name: "Elon Musk",
+        status: "<span>Active</span>",
+        __originalIndex__: 2,
+      },
+    ];
+
+    // Test filtering for null values
+    nullUndefinedInput.filters = [
+      {
+        condition: "contains",
+        column: "status",
+        value: "null",
+      },
+    ];
+
+    let result = getFilteredTableData(nullUndefinedInput, moment, _);
+
+    expect(result).toStrictEqual([]);
+
+    // Test filtering for undefined values
+    nullUndefinedInput.filters = [
+      {
+        condition: "contains",
+        column: "status",
+        value: "undefined",
+      },
+    ];
+
+    result = getFilteredTableData(nullUndefinedInput, moment, _);
+    expect(result).toStrictEqual([]);
+
+    delete nullUndefinedInput.filters;
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/tableHeaders.test.js

@@ -0,0 +1,111 @@
+import derivedProperty from "../../derived";
+
+describe("Validate tableHeaders function", () => {
+  const { getTableHeaders } = derivedProperty;
+
+  it("should test that it returns empty array when primaryColumns is undefined", () => {
+    expect(
+      getTableHeaders({
+        primaryColumns: undefined,
+      }),
+    ).toEqual([]);
+  });
+
+  it("should test that it returns expected array when primaryColumns value is undefined", () => {
+    expect(
+      getTableHeaders({
+        primaryColumns: {
+          "some value": undefined,
+        },
+      }),
+    ).toEqual([
+      {
+        id: undefined,
+        label: undefined,
+        isVisible: undefined,
+      },
+    ]);
+  });
+
+  it("should test that it returns expected array when primaryColumns data is undefined", () => {
+    expect(
+      getTableHeaders({
+        primaryColumns: {
+          "some value": {
+            id: "some value",
+            label: undefined,
+            isVisible: true,
+          },
+        },
+      }),
+    ).toEqual([
+      {
+        id: "some value",
+        label: undefined,
+        isVisible: true,
+      },
+    ]);
+  });
+
+  it("should test that it returns expected array with the same length as that of primaryColumns", () => {
+    expect(
+      getTableHeaders({
+        primaryColumns: {
+          "some value": {
+            id: "some value",
+            label: "some value",
+            isVisible: true,
+          },
+          "some other value": {
+            id: "some other value",
+            label: "some other value",
+            isVisible: true,
+          },
+        },
+      }).length,
+    ).toEqual(2);
+  });
+
+  it("should test that it returns expected array sorted", () => {
+    expect(
+      getTableHeaders({
+        primaryColumns: {
+          "value 02": {
+            id: "value 02",
+            label: "value 02",
+            isVisible: true,
+            index: "2",
+          },
+          "value 03": {
+            id: "value 03",
+            label: "value 03",
+            isVisible: true,
+            index: "3",
+          },
+          "value 01": {
+            id: "value 01",
+            label: "value 01",
+            isVisible: true,
+            index: "1",
+          },
+        },
+      }),
+    ).toEqual([
+      {
+        id: "value 01",
+        label: "value 01",
+        isVisible: true,
+      },
+      {
+        id: "value 02",
+        label: "value 02",
+        isVisible: true,
+      },
+      {
+        id: "value 03",
+        label: "value 03",
+        isVisible: true,
+      },
+    ]);
+  });
+});

app/client/src/widgets/TableWidgetV2/widget/__tests__/propertyUtils.test.ts

@@ -9,10 +9,10 @@ import {
   updateCustomColumnAliasOnLabelChange,
   selectColumnOptionsValidation,
   allowedFirstDayOfWeekRange,
-} from "./propertyUtils";
+} from "../propertyUtils";
 import _ from "lodash";
-import type { ColumnTypes, TableWidgetProps } from "../constants";
+import type { ColumnTypes, TableWidgetProps } from "../../constants";
-import { StickyType } from "../component/Constants";
+import { StickyType } from "../../component/Constants";
 
 describe("PropertyUtils - ", () => {
   it("totalRecordsCountValidation - should test with all possible values", () => {

app/client/src/widgets/TableWidgetV2/widget/__tests__/utilities.test.ts

@@ -1,6 +1,6 @@
-import type { ColumnProperties, TableStyles } from "../component/Constants";
+import type { ColumnProperties, TableStyles } from "../../component/Constants";
-import { StickyType } from "../component/Constants";
+import { StickyType } from "../../component/Constants";
-import { ColumnTypes } from "../constants";
+import { ColumnTypes } from "../../constants";
 import {
   convertNumToCompactString,
   escapeString,
@@ -17,7 +17,7 @@ import {
   getSourceDataAndCaluclateKeysForEventAutoComplete,
   getTableStyles,
   reorderColumns,
-} from "./utilities";
+} from "../utilities";
 
 const getCurrentRowBinding = (
   entityName: string,