diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
index 35cb8ff5e6da..0d2f336b6c09 100644
--- a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
@@ -67,7 +67,7 @@ export class LightModeTheme implements ColorModeTheme {
       bgNegative: this.bgNegative.to("sRGB").toString(),
       bgNegativeHover: this.bgNegativeHover.to("sRGB").toString(),
       bgNegativeActive: this.bgNegativeActive.to("sRGB").toString(),
-      bgNegativeSubtle: this.bgNegativeActive.to("sRGB").toString(),
+      bgNegativeSubtle: this.bgNegativeSubtle.to("sRGB").toString(),
       bgNegativeSubtleHover: this.bgNegativeSubtleHover.to("sRGB").toString(),
       bgNegativeSubtleActive: this.bgNegativeSubtleActive.to("sRGB").toString(),
       bgWarning: this.bgWarning.to("sRGB").toString(),
diff --git a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
index 565cb6f6e701..1d8c702cabcd 100644
--- a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
+++ b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
@@ -476,7 +476,7 @@ describe("bgNegativeSubtle color", () => {
     const { bgNegativeSubtle } = new LightModeTheme(
       "oklch(0.55 0.22 27)",
     ).getColors();
-    expect(bgNegativeSubtle).toEqual("rgb(80.074% 0% 19.209%)");
+    expect(bgNegativeSubtle).toEqual("rgb(100% 89.936% 89.52%)");
   });
 });
 
diff --git a/app/client/packages/design-system/widgets/src/components/Link/index.ts b/app/client/packages/design-system/widgets/src/components/Link/index.ts
new file mode 100644
index 000000000000..3bd16e178a03
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Link/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/app/client/packages/design-system/widgets/src/components/Link/src/Link.tsx b/app/client/packages/design-system/widgets/src/components/Link/src/Link.tsx
new file mode 100644
index 000000000000..88e6e128b5f5
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Link/src/Link.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Text } from "../../Text";
+import type { LinkProps } from "./types";
+import styles from "./styles.module.css";
+
+export function Link(props: LinkProps) {
+  const { children, href, rel, target, ...rest } = props;
+
+  return (
+    <Text {...rest}>
+      <a className={styles.link} href={href} rel={rel} target={target}>
+        {children}
+      </a>
+    </Text>
+  );
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Link/src/index.ts b/app/client/packages/design-system/widgets/src/components/Link/src/index.ts
new file mode 100644
index 000000000000..3b40a46d8b6b
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Link/src/index.ts
@@ -0,0 +1 @@
+export * from "./Link";
diff --git a/app/client/packages/design-system/widgets/src/components/Link/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Link/src/styles.module.css
new file mode 100644
index 000000000000..8ca5a569c23c
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Link/src/styles.module.css
@@ -0,0 +1,10 @@
+.link {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: currentColor;
+    text-decoration-color: currentColor;
+  }
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Link/src/types.ts b/app/client/packages/design-system/widgets/src/components/Link/src/types.ts
new file mode 100644
index 000000000000..8da1bbd6bb47
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Link/src/types.ts
@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+
+import type { TextProps } from "../../Text";
+
+export interface LinkProps extends TextProps {
+  href?: string;
+  target?: ComponentProps<"a">["target"];
+  rel?: string;
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx b/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx
index c549bd73bb5e..1ed09327a176 100644
--- a/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx
@@ -19,7 +19,7 @@ const _Text = (props: TextProps, ref: Ref<HTMLParagraphElement>) => {
     isItalic = false,
     lineClamp,
     style,
-    textAlign = "left",
+    textAlign = "start",
     title,
     variant = "body",
     ...rest
diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/index.ts b/app/client/packages/design-system/widgets/src/components/Text/src/index.ts
index 7afe56f372c3..041a2819179b 100644
--- a/app/client/packages/design-system/widgets/src/components/Text/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/components/Text/src/index.ts
@@ -1 +1,2 @@
 export { Text } from "./Text";
+export type { TextProps } from "./types";
diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/types.ts b/app/client/packages/design-system/widgets/src/components/Text/src/types.ts
index 5bc70beeecb9..125109197b5d 100644
--- a/app/client/packages/design-system/widgets/src/components/Text/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Text/src/types.ts
@@ -29,7 +29,7 @@ export interface TextProps {
   /** Sets the horizontal alignment of the inline-level content inside a block element or table-cell box. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
    * @default left
    */
-  textAlign?: "left" | "center" | "right";
+  textAlign?: "start" | "center" | "end" | "left" | "right";
   /** Allows limiting of the contents of a block to the specified number of lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp). */
   lineClamp?: number;
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */
diff --git a/app/client/packages/design-system/widgets/src/index.ts b/app/client/packages/design-system/widgets/src/index.ts
index 1ccdb1ad112c..a314a5a513bc 100644
--- a/app/client/packages/design-system/widgets/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/index.ts
@@ -21,6 +21,7 @@ export * from "./components/ActionGroup";
 export * from "./components/ButtonGroup";
 export * from "./components/Select";
 export * from "./components/ContextualHelp";
+export * from "./components/Link";
 
 export * from "./utils";
 export * from "./styles";
diff --git a/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx b/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx
index bb618d1948ad..aeff49f06d9c 100644
--- a/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx
+++ b/app/client/src/components/propertyControls/PrimaryColumnsControlV2.tsx
@@ -201,22 +201,24 @@ class PrimaryColumnsControlV2 extends BaseControl<ControlProps, State> {
     const isFocused =
       !_.isNull(this.state.focusedIndex) &&
       _.includes(this.state.duplicateColumnIds, column?.id);
+
     return (
       <>
         <div className="flex pt-2 pb-2 justify-between">
           <div>{Object.values(reorderedColumns).length} columns</div>
-          {this.isEditableColumnPresent() && (
-            <EdtiableCheckboxWrapper
-              className="flex t--uber-editable-checkbox"
-              rightPadding={this.state.hasScrollableList}
-            >
-              <span className="mr-2">Editable</span>
-              <Checkbox
-                isSelected={this.isAllColumnsEditable()}
-                onChange={this.toggleAllColumnsEditability}
-              />
-            </EdtiableCheckboxWrapper>
-          )}
+          {this.props.widgetProperties.type !== "WDS_TABLE_WIDGET" &&
+            this.isEditableColumnPresent() && (
+              <EdtiableCheckboxWrapper
+                className="flex t--uber-editable-checkbox"
+                rightPadding={this.state.hasScrollableList}
+              >
+                <span className="mr-2">Editable</span>
+                <Checkbox
+                  isSelected={this.isAllColumnsEditable()}
+                  onChange={this.toggleAllColumnsEditability}
+                />
+              </EdtiableCheckboxWrapper>
+            )}
         </div>
         <div className="flex flex-col w-full gap-1">
           <EvaluatedValuePopupWrapper {...this.props} isFocused={isFocused}>
@@ -233,26 +235,34 @@ class PrimaryColumnsControlV2 extends BaseControl<ControlProps, State> {
               renderComponent={(props: any) =>
                 DraggableListCard({
                   ...props,
-                  showCheckbox: true,
+                  showCheckbox:
+                    this.props.widgetProperties.type !== "WDS_TABLE_WIDGET" &&
+                    true,
                   placeholder: "Column title",
                 })
               }
               toggleCheckbox={this.toggleCheckbox}
-              toggleVisibility={this.toggleVisibility}
+              toggleVisibility={
+                this.props.widgetProperties.type !== "WDS_TABLE_WIDGET"
+                  ? this.toggleVisibility
+                  : undefined
+              }
               updateFocus={this.updateFocus}
               updateItems={this.updateItems}
               updateOption={this.updateOption}
             />
           </EvaluatedValuePopupWrapper>
-          <Button
-            className="self-end t--add-column-btn"
-            kind="tertiary"
-            onClick={this.addNewColumn}
-            size="sm"
-            startIcon="plus"
-          >
-            Add new column
-          </Button>
+          {this.props.widgetProperties.type !== "WDS_TABLE_WIDGET" && (
+            <Button
+              className="self-end t--add-column-btn"
+              kind="tertiary"
+              onClick={this.addNewColumn}
+              size="sm"
+              startIcon="plus"
+            >
+              Add new column
+            </Button>
+          )}
         </div>
       </>
     );
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts b/app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts
index 703c84edbee2..bd8b38ad9706 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts
@@ -17,6 +17,8 @@ import type {
 import type { ColumnTypes } from "../constants";
 import type { TimePrecision } from "widgets/DatePickerWidget2/constants";
 import { generateReactKey } from "widgets/WidgetUtils";
+import type { PlainTextCellProps } from "./cellComponents/PlainTextCell";
+import type { ButtonCellProps } from "./cellComponents/ButtonCell";
 
 export interface TableSizes {
   COLUMN_HEADER_HEIGHT: number;
@@ -112,8 +114,8 @@ export interface TableStyles {
 export type CompactMode = keyof typeof CompactModeTypes;
 export type Condition = keyof typeof ConditionFunctions | "";
 export type Operator = keyof typeof OperatorTypes;
-export type CellAlignment = keyof typeof CellAlignmentTypes;
-export type VerticalAlignment = keyof typeof VerticalAlignmentTypes;
+export type CellAlignment = "start" | "center" | "end";
+export type VerticalAlignment = "start" | "center" | "end";
 export type ImageSize = keyof typeof ImageSizes;
 
 export interface ReactTableFilter {
@@ -153,7 +155,7 @@ export interface CellWrappingProperties {
 }
 
 export interface ButtonCellProperties {
-  buttonVariant: ButtonVariant;
+  buttonVariant: ButtonCellProps["buttonVariant"];
   buttonColor?: string;
   buttonLabel?: string;
   isCompact?: boolean;
@@ -212,24 +214,17 @@ export interface BaseCellProperties {
   cellBackground?: string;
   isVisible?: boolean;
   isDisabled?: boolean;
-  borderRadius: string;
-  boxShadow: string;
   isCellVisible: boolean;
   isCellDisabled?: boolean;
 }
 
 export interface CellLayoutProperties
-  extends EditActionCellProperties,
-    InlineEditingCellProperties,
-    CellWrappingProperties,
+  extends CellWrappingProperties,
     ButtonCellProperties,
     URLCellProperties,
-    MenuButtonCellProperties,
-    SelectCellProperties,
-    ImageCellProperties,
-    DateCellProperties,
-    CurrencyCellProperties,
-    BaseCellProperties {}
+    BaseCellProperties {
+  cellColor?: "default" | PlainTextCellProps["cellColor"];
+}
 
 export interface TableColumnMetaProps {
   isHidden: boolean;
@@ -280,7 +275,6 @@ export interface ColumnBaseProperties {
   enableFilter?: boolean;
   enableSort?: boolean;
   isDerived: boolean;
-  computedValue: string;
   isCellVisible?: boolean;
   isAscOrder?: boolean;
   alias: string;
@@ -353,38 +347,26 @@ export interface CurrencyColumnProperties {
 export interface ColumnProperties
   extends ColumnBaseProperties,
     ColumnStyleProperties,
-    DateColumnProperties,
-    ColumnEditabilityProperties,
-    CurrencyColumnProperties,
-    EditActionColumnProperties {
+    ColumnEditabilityProperties {
   allowSameOptionsInNewRow?: boolean;
   newRowSelectOptions?: DropdownOption[];
   buttonLabel?: string;
-  menuButtonLabel?: string;
   buttonColor?: string;
   onClick?: string;
   dropdownOptions?: string;
   onOptionChange?: string;
   displayText?: string;
   buttonVariant?: ButtonVariant;
-  isCompact?: boolean;
-  menuItems?: MenuItems;
-  menuVariant?: ButtonVariant;
-  menuColor?: string;
-  borderRadius?: ButtonBorderRadius;
-  boxShadow?: string;
-  boxShadowColor?: string;
   iconName?: IconName;
-  menuButtoniconName?: IconName;
   iconAlign?: Alignment;
   onItemClicked?: (onClick: string | undefined) => void;
   iconButtonStyle?: ButtonStyleType;
   imageSize?: ImageSize;
   sticky?: StickyType;
   getVisibleItems?: () => Array<MenuItem>;
-  menuItemsSource?: MenuItemsSource;
   configureMenuItems?: ConfigureMenuItems;
   sourceData?: Array<Record<string, unknown>>;
+  cellColor?: PlainTextCellProps["cellColor"];
 }
 
 export const ConditionFunctions: {
@@ -494,7 +476,6 @@ export enum IMAGE_VERTICAL_ALIGN {
 }
 
 export interface BaseCellComponentProps {
-  compactMode: string;
   isHidden: boolean;
   allowCellWrapping?: boolean;
   horizontalAlignment?: CellAlignment;
@@ -502,8 +483,6 @@ export interface BaseCellComponentProps {
   cellBackground?: string;
   isCellVisible: boolean;
   fontStyle?: string;
-  textColor?: string;
-  textSize?: string;
   isCellDisabled?: boolean;
 }
 
@@ -513,29 +492,6 @@ export enum CheckboxState {
   PARTIAL = 2,
 }
 
-export const scrollbarOnHoverCSS = `
-  .track-horizontal {
-    height: 6px;
-    bottom: 1px;
-    width: 100%;
-    opacity: 0;
-    transition: opacity 0.15s ease-in;
-    &:active {
-      opacity: 1;
-    }
-  }
-  &:hover {
-    .track-horizontal {
-      opacity: 1;
-    }
-  }
-  .thumb-horizontal {
-    &:hover, &:active {
-      height: 6px !important;
-    }
-  }
-`;
-
 export const MULTISELECT_CHECKBOX_WIDTH = 40;
 
 export enum AddNewRowActions {
@@ -543,20 +499,6 @@ export enum AddNewRowActions {
   DISCARD = "DISCARD",
 }
 
-export const EDITABLE_CELL_PADDING_OFFSET = 8;
-
-export const TABLE_SCROLLBAR_WIDTH = 10;
-export const TABLE_SCROLLBAR_HEIGHT = 8;
-
-export const POPOVER_ITEMS_TEXT_MAP = {
-  SORT_ASC: "Sort column ascending",
-  SORT_DSC: "Sort column descending",
-  FREEZE_LEFT: "Freeze column left",
-  FREEZE_RIGHT: "Freeze column right",
-};
-
-export const HEADER_MENU_PORTAL_CLASS = ".header-menu-portal";
-export const MENU_CONTENT_CLASS = ".menu-content";
 export const DEFAULT_FILTER = {
   id: generateReactKey(),
   column: "",
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx
index 3fb405f0f27e..9a933814e350 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/StaticTable.tsx
@@ -7,7 +7,7 @@ import type {
 import type { ReactElementType } from "react-window";
 import "simplebar-react/dist/simplebar.min.css";
 import type { ReactTableColumnProps, TableSizes } from "./Constants";
-import { MULTISELECT_CHECKBOX_WIDTH, TABLE_SCROLLBAR_WIDTH } from "./Constants";
+import { MULTISELECT_CHECKBOX_WIDTH } from "./Constants";
 import type { TableColumnHeaderProps } from "./TableHeader/TableColumnHeader";
 import TableColumnHeader from "./TableHeader/TableColumnHeader";
 import { TableBody } from "./TableBody";
@@ -86,7 +86,7 @@ const StaticTable = (props: StaticTableProps) => {
         selectedRowIndex={props.selectedRowIndex}
         selectedRowIndices={props.selectedRowIndices}
         useVirtual={props.useVirtual}
-        width={props.width - TABLE_SCROLLBAR_WIDTH / 2}
+        width={props.width}
       />
     </>
   );
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx
index fe2a414ab487..9f682223049b 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/Table.tsx
@@ -9,7 +9,6 @@ import {
   useRowSelect,
 } from "react-table";
 import { useSticky } from "react-table-sticky";
-import { TableWrapper } from "./TableStyledWrappers";
 import { TableHeader } from "./TableHeader";
 import { Classes } from "@blueprintjs/core";
 import type {
@@ -20,7 +19,6 @@ import type {
   StickyType,
 } from "./Constants";
 import { TABLE_SIZES, CompactModeTypes } from "./Constants";
-import { Colors } from "constants/Colors";
 import type { EventType } from "constants/AppsmithActionConstants/ActionConstants";
 import type { EditableCell, TableVariant } from "../constants";
 import "simplebar-react/dist/simplebar.min.css";
@@ -73,7 +71,6 @@ export interface TableProps {
   triggerRowSelection: boolean;
   onSearch: (searchKey: any) => void;
   filters?: ReactTableFilter[];
-  applyFilter: (filters: ReactTableFilter[]) => void;
   compactMode?: CompactMode;
   isVisibleDownload?: boolean;
   isVisibleFilters?: boolean;
@@ -117,8 +114,6 @@ export interface HeaderComponentProps {
   ) => void;
   handleReorderColumn: (columnOrder: string[]) => void;
   columnOrder?: string[];
-  accentColor: string;
-  borderRadius: string;
   headerGroups: any;
   canFreezeColumn?: boolean;
   editMode: boolean;
@@ -182,7 +177,6 @@ export function Table(props: TableProps) {
     getTableProps,
     headerGroups,
     page,
-    pageOptions,
     prepareRow,
     state,
     totalColumnsWidth,
@@ -283,60 +277,29 @@ export function Table(props: TableProps) {
           onConnectData={props.onConnectData}
         />
       )}
-      <TableWrapper
-        accentColor={props.accentColor}
-        backgroundColor={Colors.ATHENS_GRAY_DARKER}
-        borderColor={props.borderColor}
-        borderRadius={props.borderRadius}
-        borderWidth={props.borderWidth}
-        boxShadow={props.boxShadow}
+      <div
         className={styles.table}
         data-status={props.isAddRowInProgress ? "add-row-in-progress" : ""}
         data-type={shouldUseVirtual ? "virtualized" : "static"}
         data-variant={variant}
-        height={props.height}
         id={`table${props.widgetId}`}
-        isAddRowInProgress={props.isAddRowInProgress}
-        isHeaderVisible={isHeaderVisible}
-        isResizingColumn={isResizingColumn.current}
-        tableSizes={tableSizes}
-        triggerRowSelection={props.triggerRowSelection}
-        variant={props.variant}
-        width={props.width}
       >
         {isHeaderVisible && (
           <TableHeader
-            allowAddNewRow={props.allowAddNewRow}
-            applyFilter={props.applyFilter}
             columns={tableHeadercolumns}
             currentPageIndex={currentPageIndex}
-            delimiter={props.delimiter}
-            disableAddNewRow={!!props.editableCell?.column}
-            disabledAddNewRowSave={props.disabledAddNewRowSave}
-            filters={props.filters}
-            isAddRowInProgress={props.isAddRowInProgress}
-            isVisibleDownload={props.isVisibleDownload}
-            isVisibleFilters={props.isVisibleFilters}
             isVisiblePagination={props.isVisiblePagination}
             isVisibleSearch={props.isVisibleSearch}
             nextPageClick={props.nextPageClick}
-            onAddNewRow={props.onAddNewRow}
-            onAddNewRowAction={props.onAddNewRowAction}
             onSearch={props.onSearch}
             pageCount={pageCount}
             pageNo={props.pageNo}
-            pageOptions={pageOptions}
             prevPageClick={props.prevPageClick}
             searchKey={props.searchKey}
             serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-            tableColumns={columns}
             tableData={data}
-            tableSizes={tableSizes}
             totalRecordsCount={props.totalRecordsCount}
             updatePageNo={props.updatePageNo}
-            widgetId={props.widgetId}
-            widgetName={props.widgetName}
-            width={props.width}
           />
         )}
         <div
@@ -422,7 +385,7 @@ export function Table(props: TableProps) {
             )}
           </div>
         </div>
-      </TableWrapper>
+      </div>
     </>
   );
 }
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/Row.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/Row.tsx
index 804b98ae01c9..992dba4a707a 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/Row.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/Row.tsx
@@ -2,7 +2,7 @@ import type { CSSProperties, Key } from "react";
 import React, { useContext } from "react";
 import type { Row as ReactTableRowType } from "react-table";
 import type { ListChildComponentProps } from "react-window";
-import { BodyContext } from ".";
+import { TableBodyContext } from "./context";
 import { renderEmptyRows } from "../cellComponents/EmptyCell";
 import { renderBodyCheckBoxCell } from "../cellComponents/SelectionCheckboxCell";
 import { MULTISELECT_CHECKBOX_WIDTH, StickyType } from "../Constants";
@@ -16,8 +16,6 @@ interface RowType {
 
 export function Row(props: RowType) {
   const {
-    accentColor,
-    borderRadius,
     columns,
     isAddRowInProgress,
     multiRowSelection,
@@ -26,7 +24,7 @@ export function Row(props: RowType) {
     selectedRowIndex,
     selectedRowIndices,
     selectTableRow,
-  } = useContext(BodyContext);
+  } = useContext(TableBodyContext);
 
   prepareRow?.(props.row);
   const rowProps = {
@@ -62,18 +60,22 @@ export function Row(props: RowType) {
       key={key}
       onClick={onClickRow}
     >
-      {multiRowSelection &&
-        renderBodyCheckBoxCell(isRowSelected, accentColor, borderRadius)}
+      {multiRowSelection && renderBodyCheckBoxCell(isRowSelected)}
       {props.row.cells.map((cell, cellIndex) => {
         const cellProperties = cell.getCellProps();
 
         cellProperties["style"] = {
           ...cellProperties.style,
+          display: "flex",
+          alignItems: columns[cellIndex].columnProperties.verticalAlignment,
+          justifyContent:
+            columns[cellIndex].columnProperties.horizontalAlignment,
           left:
             columns[cellIndex].sticky === StickyType.LEFT && multiRowSelection
               ? cell.column.totalLeft + MULTISELECT_CHECKBOX_WIDTH
               : cellProperties?.style?.left,
         };
+
         return (
           <div
             {...cellProperties}
@@ -89,7 +91,9 @@ export function Row(props: RowType) {
                       : ""
                   }`
             }
+            data-cell-color={columns[cellIndex].columnProperties.cellColor}
             data-colindex={cellIndex}
+            data-column-type={columns[cellIndex].columnProperties.columnType}
             data-rowindex={props.index}
             key={cellIndex}
           >
@@ -113,7 +117,7 @@ export const EmptyRows = (props: {
     prepareRow,
     rows,
     width,
-  } = useContext(BodyContext);
+  } = useContext(TableBodyContext);
 
   return (
     <>
@@ -141,7 +145,7 @@ export const EmptyRow = (props: { style?: CSSProperties }) => {
     prepareRow,
     rows,
     width,
-  } = useContext(BodyContext);
+  } = useContext(TableBodyContext);
 
   return renderEmptyRows(
     1,
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/StaticTableBody.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/StaticTableBody.tsx
index 3030999e5053..e7edf832aa59 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/StaticTableBody.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/StaticTableBody.tsx
@@ -1,6 +1,19 @@
 import React from "react";
 import { EmptyRows, Row } from "./Row";
-import type { StaticTableProps } from "./types";
+import type {
+  TableBodyProps,
+  TableBodyPropGetter,
+  Row as ReactTableRowType,
+} from "react-table";
+
+export interface StaticTableProps {
+  getTableBodyProps(
+    propGetter?: TableBodyPropGetter<Record<string, unknown>> | undefined,
+  ): TableBodyProps;
+  pageSize: number;
+  rows: ReactTableRowType<Record<string, unknown>>[];
+  height: number;
+}
 
 export const StaticTableBody = (props: StaticTableProps) => {
   return (
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/VirtualTableBody.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/VirtualTableBody.tsx
index 4aae1d28920b..1137ed82891e 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/VirtualTableBody.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/VirtualTableBody.tsx
@@ -1,11 +1,16 @@
 import React, { useCallback } from "react";
 import { useLayoutEffect, useRef } from "react";
-import type { VirtualTableBodyProps } from "./types";
-
+import type { ReactElementType } from "react-window";
+import { useResizeObserver } from "@react-aria/utils";
 import { FixedSizeList, areEqual } from "react-window";
 import type { ListChildComponentProps } from "react-window";
+
 import { Row, EmptyRow } from "./Row";
-import { useResizeObserver } from "@react-aria/utils";
+import type { StaticTableProps } from "./StaticTableBody";
+
+export interface VirtualTableBodyProps extends StaticTableProps {
+  innerElementType?: ReactElementType;
+}
 
 export const VirtualTableBody = (props: VirtualTableBodyProps) => {
   const ref = useRef<HTMLDivElement>(null);
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/context.ts b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/context.ts
new file mode 100644
index 000000000000..bcccab3287fb
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/context.ts
@@ -0,0 +1,45 @@
+import type {
+  Row as ReactTableRowType,
+  TableBodyPropGetter,
+  TableBodyProps,
+} from "react-table";
+import React from "react";
+
+import type { HeaderComponentProps } from "../Table";
+import type { ReactTableColumnProps } from "../Constants";
+
+export type TableBodyContextType = {
+  accentColor: string;
+  borderRadius: string;
+  multiRowSelection: boolean;
+  prepareRow?(row: ReactTableRowType<Record<string, unknown>>): void;
+  selectTableRow?: (row: {
+    original: Record<string, unknown>;
+    index: number;
+  }) => void;
+  selectedRowIndex: number;
+  selectedRowIndices: number[];
+  columns: ReactTableColumnProps[];
+  width: number;
+  rows: ReactTableRowType<Record<string, unknown>>[];
+  primaryColumnId?: string;
+  isAddRowInProgress: boolean;
+  getTableBodyProps?(
+    propGetter?: TableBodyPropGetter<Record<string, unknown>> | undefined,
+  ): TableBodyProps;
+  totalColumnsWidth?: number;
+} & Partial<HeaderComponentProps>;
+
+export const TableBodyContext = React.createContext<TableBodyContextType>({
+  accentColor: "",
+  borderRadius: "",
+  multiRowSelection: false,
+  selectedRowIndex: -1,
+  selectedRowIndices: [],
+  columns: [],
+  width: 0,
+  rows: [],
+  primaryColumnId: "",
+  isAddRowInProgress: false,
+  totalColumnsWidth: 0,
+});
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx
index ee33c93a8ff8..b68e0d62d55b 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/index.tsx
@@ -1,53 +1,13 @@
 import React from "react";
-import type {
-  Row as ReactTableRowType,
-  TableBodyPropGetter,
-  TableBodyProps,
-} from "react-table";
-import type { ReactTableColumnProps } from "../Constants";
-import type { HeaderComponentProps } from "../Table";
+
+import { TableBodyContext } from "./context";
 import { StaticTableBody } from "./StaticTableBody";
+import type { TableBodyContextType } from "./context";
+import type { VirtualTableBodyProps } from "./VirtualTableBody";
 import { VirtualTableBody } from "./VirtualTableBody";
-import type { VirtualTableBodyProps } from "./types";
-
-export type BodyContextType = {
-  accentColor: string;
-  borderRadius: string;
-  multiRowSelection: boolean;
-  prepareRow?(row: ReactTableRowType<Record<string, unknown>>): void;
-  selectTableRow?: (row: {
-    original: Record<string, unknown>;
-    index: number;
-  }) => void;
-  selectedRowIndex: number;
-  selectedRowIndices: number[];
-  columns: ReactTableColumnProps[];
-  width: number;
-  rows: ReactTableRowType<Record<string, unknown>>[];
-  primaryColumnId?: string;
-  isAddRowInProgress: boolean;
-  getTableBodyProps?(
-    propGetter?: TableBodyPropGetter<Record<string, unknown>> | undefined,
-  ): TableBodyProps;
-  totalColumnsWidth?: number;
-} & Partial<HeaderComponentProps>;
-
-export const BodyContext = React.createContext<BodyContextType>({
-  accentColor: "",
-  borderRadius: "",
-  multiRowSelection: false,
-  selectedRowIndex: -1,
-  selectedRowIndices: [],
-  columns: [],
-  width: 0,
-  rows: [],
-  primaryColumnId: "",
-  isAddRowInProgress: false,
-  totalColumnsWidth: 0,
-});
 
 export const TableBody = (
-  props: VirtualTableBodyProps & BodyContextType & { useVirtual: boolean },
+  props: VirtualTableBodyProps & TableBodyContextType & { useVirtual: boolean },
 ) => {
   const {
     accentColor,
@@ -81,7 +41,7 @@ export const TableBody = (
   } = props;
 
   return (
-    <BodyContext.Provider
+    <TableBodyContext.Provider
       value={{
         accentColor,
         canFreezeColumn,
@@ -107,17 +67,19 @@ export const TableBody = (
         selectedRowIndices,
         selectTableRow,
         columns,
-        width,
         rows,
+        width,
         getTableBodyProps: props.getTableBodyProps,
         totalColumnsWidth: props.totalColumnsWidth,
       }}
     >
       {useVirtual ? (
-        <VirtualTableBody rows={rows} width={width} {...restOfProps} />
+        <VirtualTableBody rows={rows} {...restOfProps} />
       ) : (
         <StaticTableBody rows={rows} {...restOfProps} />
       )}
-    </BodyContext.Provider>
+    </TableBodyContext.Provider>
   );
 };
+
+export { TableBodyContext };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/types.ts b/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/types.ts
deleted file mode 100644
index e1698391936c..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableBody/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type {
-  TableBodyProps,
-  TableBodyPropGetter,
-  Row as ReactTableRowType,
-} from "react-table";
-import type { ReactElementType } from "react-window";
-
-export interface StaticTableProps {
-  getTableBodyProps(
-    propGetter?: TableBodyPropGetter<Record<string, unknown>> | undefined,
-  ): TableBodyProps;
-  pageSize: number;
-  rows: ReactTableRowType<Record<string, unknown>>[];
-  height: number;
-  width?: number;
-}
-
-export interface VirtualTableBodyProps extends StaticTableProps {
-  innerElementType?: ReactElementType;
-}
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/Actions.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/Actions.tsx
deleted file mode 100644
index ef3817d122d6..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/Actions.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { ActionGroup, Item } from "@design-system/widgets";
-import type { Key } from "react";
-import React, { useCallback } from "react";
-import type {
-  ReactTableColumnProps,
-  TableSizes,
-  ReactTableFilter,
-} from "../Constants";
-import type { EventType } from "constants/AppsmithActionConstants/ActionConstants";
-import {
-  downloadDataAsCSV,
-  transformTableDataIntoCsv,
-  transformTableDataIntoExcel,
-} from "../utilities";
-import zipcelx from "zipcelx";
-import { useDispatch } from "react-redux";
-import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-
-export interface ActionsPropsType {
-  updatePageNo: (pageNo: number, event?: EventType) => void;
-  nextPageClick: () => void;
-  prevPageClick: () => void;
-  pageNo: number;
-  totalRecordsCount?: number;
-  tableData: Array<Record<string, unknown>>;
-  tableColumns: ReactTableColumnProps[];
-  pageCount: number;
-  currentPageIndex: number;
-  pageOptions: number[];
-  columns: ReactTableColumnProps[];
-  hiddenColumns?: string[];
-  widgetName: string;
-  widgetId: string;
-  serverSidePaginationEnabled: boolean;
-  filters?: ReactTableFilter[];
-  applyFilter: (filters: ReactTableFilter[]) => void;
-  tableSizes: TableSizes;
-  isVisibleDownload?: boolean;
-  isVisibleFilters?: boolean;
-  isVisiblePagination?: boolean;
-  delimiter: string;
-  allowAddNewRow: boolean;
-  onAddNewRow: () => void;
-  disableAddNewRow: boolean;
-  width: number;
-}
-
-export const Actions = (props: ActionsPropsType) => {
-  const dispatch = useDispatch();
-  const { allowAddNewRow, isVisibleDownload, isVisibleFilters, widgetId } =
-    props;
-
-  const toggleFilterPane = useCallback(
-    (selected: boolean) => {
-      if (selected) {
-        dispatch({
-          type: ReduxActionTypes.SHOW_TABLE_FILTER_PANE,
-          payload: { widgetId, force: true },
-        });
-      } else {
-        dispatch({
-          type: ReduxActionTypes.HIDE_TABLE_FILTER_PANE,
-          payload: { widgetId },
-        });
-      }
-    },
-    [widgetId],
-  );
-
-  // if no columns are present, return
-  if (!props.columns.length) return null;
-
-  // if none of the actions are visible, return
-  if (!(isVisibleFilters || isVisibleDownload || allowAddNewRow)) return null;
-
-  const onAction = (key: Key) => {
-    switch (key) {
-      case "filter":
-        toggleFilterPane(true);
-        break;
-      case "add-row":
-        props.onAddNewRow();
-        break;
-      case "download-csv":
-        const csvData = transformTableDataIntoCsv({
-          columns: props.columns,
-          data: props.tableData,
-        });
-
-        downloadDataAsCSV({
-          csvData: csvData,
-          delimiter: props.delimiter,
-          fileName: `${props.widgetName}.csv`,
-        });
-        break;
-      case "download-excel":
-        const tableData = transformTableDataIntoExcel({
-          columns: props.columns,
-          data: props.tableData,
-        });
-
-        zipcelx({
-          filename: props.widgetName,
-          sheet: {
-            data: tableData,
-          },
-        });
-        break;
-      default:
-        break;
-    }
-  };
-
-  const actionItems = (() => {
-    const items = [];
-
-    if (isVisibleFilters)
-      items.push(
-        <Item icon="filter" key="filter">
-          Filters
-        </Item>,
-      );
-    if (isVisibleDownload) {
-      items.push(
-        <Item icon="download" key="download-csv">
-          CSV
-        </Item>,
-      );
-      items.push(
-        <Item icon="download" key="download-excel">
-          Excel
-        </Item>,
-      );
-    }
-    if (allowAddNewRow)
-      items.push(
-        <Item icon="plus" key="add-row">
-          Add Row
-        </Item>,
-      );
-
-    return items;
-  })();
-
-  return (
-    <ActionGroup
-      data-table-actions=""
-      onAction={onAction}
-      size="small"
-      variant="ghost"
-    >
-      {actionItems}
-    </ActionGroup>
-  );
-};
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/AddNewRowBanner.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/AddNewRowBanner.tsx
deleted file mode 100644
index feb95b29bf87..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/AddNewRowBanner.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useState } from "react";
-import { Text, Button, Flex } from "@design-system/widgets";
-
-import { AddNewRowActions } from "../Constants";
-
-export interface AddNewRowBannerProps {
-  onAddNewRowAction: (
-    type: AddNewRowActions,
-    onActionComplete: () => void,
-  ) => void;
-  disabledAddNewRowSave: boolean;
-}
-
-function AddNewRowBanner(props: AddNewRowBannerProps) {
-  const [isDiscardLoading, setIsDiscardLoading] = useState(false);
-  const [isSaveLoading, setIsSaveLoading] = useState(false);
-
-  return (
-    <Flex alignItems="center" gap="spacing-1" width="100%">
-      <Text variant="caption">Add New Row</Text>
-      <Flex gap="spacing-1" marginLeft="auto">
-        <Button
-          isDisabled={isSaveLoading}
-          isLoading={isDiscardLoading}
-          onPress={() => {
-            setIsDiscardLoading(true);
-            props.onAddNewRowAction(AddNewRowActions.DISCARD, () =>
-              setIsDiscardLoading(false),
-            );
-          }}
-          size="small"
-          variant="ghost"
-        >
-          Discard
-        </Button>
-        <Button
-          isDisabled={props.disabledAddNewRowSave || isDiscardLoading}
-          isLoading={isSaveLoading}
-          onPress={() => {
-            setIsSaveLoading(true);
-            props.onAddNewRowAction(AddNewRowActions.SAVE, () =>
-              setIsSaveLoading(false),
-            );
-          }}
-          size="small"
-        >
-          Save row
-        </Button>
-      </Flex>
-    </Flex>
-  );
-}
-
-const MemoizedAddNewRowBanner = React.memo(AddNewRowBanner);
-
-export { MemoizedAddNewRowBanner as AddNewRowBanner };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/CascadeFields.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/CascadeFields.tsx
deleted file mode 100644
index e86e93a5b15e..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/CascadeFields.tsx
+++ /dev/null
@@ -1,641 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import styled from "styled-components";
-import { InputGroup } from "@blueprintjs/core";
-import { debounce, isNaN } from "lodash";
-
-import CustomizedDropdown from "pages/common/CustomizedDropdown";
-import { Directions } from "utils/helpers";
-import { Colors } from "constants/Colors";
-import { Skin } from "constants/DefaultTheme";
-import AutoToolTipComponent from "../cellComponents/AutoToolTipComponent";
-import type { Condition, Operator, ReactTableFilter } from "../Constants";
-import { OperatorTypes } from "../Constants";
-import { RenderOptionWrapper } from "../TableStyledWrappers";
-
-//TODO(abhinav): Fix this cross import between widgets
-import DatePickerComponent from "widgets/DatePickerWidget2/component";
-import { TimePrecision } from "widgets/DatePickerWidget2/constants";
-import { ColumnTypes, ReadOnlyColumnTypes } from "../../constants";
-import { importRemixIcon } from "design-system-old";
-import type { DropdownOption } from "./FilterPaneContent";
-
-const CloseIcon = importRemixIcon(
-  async () => import("remixicon-react/CloseCircleFillIcon"),
-);
-const ArrowDownIcon = importRemixIcon(
-  async () => import("remixicon-react/ArrowDownSLineIcon"),
-);
-
-const LabelWrapper = styled.div`
-  width: 95px;
-  margin-left: 10px;
-  color: var(--wds-color-text-light);
-  font-size: 14px;
-  font-weight: 500;
-`;
-
-const FieldWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 14px;
-`;
-
-const DropdownWrapper = styled.div<{ width: number }>`
-  width: ${(props) => props.width}px;
-  margin-left: 10px;
-`;
-
-const StyledInputGroup = styled(InputGroup)<{
-  borderRadius?: string;
-}>`
-  background: var(--wds-color-bg);
-  border: 1px solid var(--wds-color-border);
-  box-sizing: border-box;
-  border-radius: ${(props) => props.borderRadius || "0"};
-  color: var(--wds-color-text);
-  height: 32px;
-  width: 120px;
-  margin-left: 10px;
-  overflow: hidden;
-
-  input {
-    box-shadow: none;
-  }
-
-  input:focus {
-    box-shadow: none;
-  }
-  &:hover {
-    border-color: var(--wds-color-border-hover);
-  }
-`;
-
-const DatePickerWrapper = styled.div`
-  margin-left: 10px;
-  width: 150px;
-`;
-
-const DropdownTrigger = styled.div<{
-  borderRadius?: string;
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 32px;
-  background: var(--wds-color-bg);
-  border: 1px solid var(--wds-color-border);
-  box-sizing: border-box;
-  border-radius: ${(props) => props.borderRadius || "0"};
-  font-size: 14px;
-  padding: 5px 12px 7px;
-  color: var(--wds-color-text);
-  cursor: pointer;
-
-  &:hover {
-    border-color: var(--wds-color-border-hover);
-  }
-  &&& span {
-    margin-right: 0;
-  }
-`;
-
-const AutoToolTipComponentWrapper = styled(AutoToolTipComponent)`
-  width: 100%;
-  color: ${Colors.OXFORD_BLUE};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 5px;
-`;
-
-const typeOperatorsMap: Record<ReadOnlyColumnTypes, DropdownOption[]> = {
-  [ColumnTypes.TEXT]: [
-    { label: "contains", value: "contains", type: "input" },
-    { label: "does not contain", value: "doesNotContain", type: "input" },
-    { label: "starts with", value: "startsWith", type: "input" },
-    { label: "ends with", value: "endsWith", type: "input" },
-    { label: "is exactly", value: "isExactly", type: "input" },
-    { label: "empty", value: "empty", type: "" },
-    { label: "not empty", value: "notEmpty", type: "" },
-  ],
-  [ColumnTypes.URL]: [
-    { label: "contains", value: "contains", type: "input" },
-    { label: "does not contain", value: "doesNotContain", type: "input" },
-    { label: "starts with", value: "startsWith", type: "input" },
-    { label: "ends with", value: "endsWith", type: "input" },
-    { label: "is exactly", value: "isExactly", type: "input" },
-    { label: "empty", value: "empty", type: "" },
-    { label: "not empty", value: "notEmpty", type: "" },
-  ],
-  [ColumnTypes.DATE]: [
-    { label: "is", value: "is", type: "date" },
-    { label: "is before", value: "isBefore", type: "date" },
-    { label: "is after", value: "isAfter", type: "date" },
-    { label: "is not", value: "isNot", type: "date" },
-    { label: "empty", value: "empty", type: "" },
-    { label: "not empty", value: "notEmpty", type: "" },
-  ],
-  [ColumnTypes.IMAGE]: [
-    { label: "empty", value: "empty", type: "" },
-    { label: "not empty", value: "notEmpty", type: "" },
-  ],
-  [ColumnTypes.VIDEO]: [
-    { label: "empty", value: "empty", type: "" },
-    { label: "not empty", value: "notEmpty", type: "" },
-  ],
-  [ColumnTypes.NUMBER]: [
-    { label: "is equal to", value: "isEqualTo", type: "input" },
-    { label: "not equal to", value: "notEqualTo", type: "input" },
-    { label: "greater than", value: "greaterThan", type: "input" },
-    {
-      label: "greater than or equal to",
-      value: "greaterThanEqualTo",
-      type: "input",
-    },
-    { label: "less than", value: "lessThan", type: "input" },
-    {
-      label: "less than or equal to",
-      value: "lessThanEqualTo",
-      type: "input",
-    },
-    { label: "empty", value: "empty", type: "" },
-    { label: "not empty", value: "notEmpty", type: "" },
-  ],
-  [ColumnTypes.CHECKBOX]: [
-    { label: "is checked", value: "isChecked", type: "" },
-    { label: "is unchecked", value: "isUnChecked", type: "" },
-  ],
-  [ColumnTypes.SWITCH]: [
-    { label: "is checked", value: "isChecked", type: "" },
-    { label: "is unchecked", value: "isUnChecked", type: "" },
-  ],
-  [ColumnTypes.SELECT]: [
-    { label: "contains", value: "contains", type: "input" },
-    { label: "does not contain", value: "doesNotContain", type: "input" },
-    { label: "starts with", value: "startsWith", type: "input" },
-    { label: "ends with", value: "endsWith", type: "input" },
-    { label: "is exactly", value: "isExactly", type: "input" },
-    { label: "empty", value: "empty", type: "" },
-    { label: "not empty", value: "notEmpty", type: "" },
-  ],
-};
-
-const operatorOptions: DropdownOption[] = [
-  { label: "OR", value: OperatorTypes.OR, type: "" },
-  { label: "AND", value: OperatorTypes.AND, type: "" },
-];
-
-const columnTypeNameMap: Record<ReadOnlyColumnTypes, string> = {
-  [ReadOnlyColumnTypes.TEXT]: "Text",
-  [ReadOnlyColumnTypes.VIDEO]: "Video",
-  [ReadOnlyColumnTypes.IMAGE]: "Image",
-  [ReadOnlyColumnTypes.NUMBER]: "Num",
-  [ReadOnlyColumnTypes.DATE]: "Date",
-  [ReadOnlyColumnTypes.URL]: "Url",
-  [ReadOnlyColumnTypes.CHECKBOX]: "Check",
-  [ReadOnlyColumnTypes.SWITCH]: "Check",
-  [ReadOnlyColumnTypes.SELECT]: "Text",
-};
-
-function RenderOption(props: { type: string; title: string; active: boolean }) {
-  return (
-    <RenderOptionWrapper selected={props.active}>
-      <div className="title">{props.title}</div>
-      <div className="type">
-        {columnTypeNameMap[props.type as ReadOnlyColumnTypes]}
-      </div>
-    </RenderOptionWrapper>
-  );
-}
-
-function RenderOptions(props: {
-  columns: DropdownOption[];
-  selectItem: (column: DropdownOption) => void;
-  placeholder: string;
-  value?: string | Condition;
-  showType?: boolean;
-  className?: string;
-  borderRadius?: string;
-}) {
-  const [selectedValue, selectValue] = useState(props.placeholder);
-  const configs = {
-    sections: [
-      {
-        options: props.columns.map((column: DropdownOption) => {
-          const isActive = column.value === props.value;
-          return {
-            content: props.showType ? (
-              <RenderOption
-                active={isActive}
-                title={column.label}
-                type={column.type}
-              />
-            ) : (
-              column.label
-            ),
-            value: column.value,
-            active: isActive,
-            onSelect: () => {
-              selectValue(column.label);
-              props.selectItem(column);
-            },
-          };
-        }),
-      },
-    ],
-    openDirection: Directions.DOWN,
-    trigger: {
-      content: (
-        <DropdownTrigger
-          borderRadius={props.borderRadius}
-          className={props.className}
-        >
-          <AutoToolTipComponentWrapper disablePadding title={selectedValue}>
-            {selectedValue}
-          </AutoToolTipComponentWrapper>
-          <ArrowDownIcon className="w-5 h-5" color="var(--wds-color-icon)" />
-        </DropdownTrigger>
-      ),
-    },
-    skin: Skin.LIGHT,
-    borderRadius: props.borderRadius,
-    customizedDropdownId: "cascade-dropdown",
-  };
-  useEffect(() => {
-    if (props.value && props.columns) {
-      const selectedOptions = props.columns.filter(
-        (i) => i.value === props.value,
-      );
-      if (selectedOptions && selectedOptions.length) {
-        selectValue(selectedOptions[0].label);
-      } else {
-        selectValue(props.placeholder);
-      }
-    } else {
-      selectValue(props.placeholder);
-    }
-  }, [props.value, props.placeholder, props.columns]);
-  return <CustomizedDropdown {...configs} />;
-}
-
-function RenderInput(props: {
-  value: string;
-  onChange: (value: string) => void;
-  className?: string;
-  borderRadius?: string;
-}) {
-  const debouncedOnChange = useCallback(debounce(props.onChange, 400), []);
-  const [value, setValue] = useState(props.value);
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    setValue(value);
-    debouncedOnChange(value);
-  };
-  useEffect(() => {
-    setValue(props.value);
-  }, [props.value]);
-  return (
-    <StyledInputGroup
-      borderRadius={props.borderRadius}
-      className={props.className}
-      defaultValue={value}
-      onChange={onChange}
-      placeholder="Enter value"
-      type="text"
-    />
-  );
-}
-
-interface CascadeFieldProps {
-  columns: DropdownOption[];
-  column: string;
-  condition: Condition;
-  value: any;
-  operator: Operator;
-  id: string;
-  index: number;
-  hasAnyFilters: boolean;
-  applyFilter: (
-    filter: ReactTableFilter,
-    index: number,
-    isOperatorChange: boolean,
-  ) => void;
-  removeFilter: (index: number) => void;
-}
-
-interface CascadeFieldState {
-  column: string;
-  condition: Condition;
-  value: any;
-  operator: Operator;
-  conditions: DropdownOption[];
-  showConditions: boolean;
-  showInput: boolean;
-  showDateInput: boolean;
-  isDeleted: boolean;
-  isUpdate: boolean;
-  isOperatorChange: boolean;
-}
-
-const getConditions = (props: CascadeFieldProps) => {
-  const columnValue = props.column || "";
-  const filteredColumn = props.columns.filter((column: DropdownOption) => {
-    return columnValue === column.value;
-  });
-  if (filteredColumn.length) {
-    const type: ReadOnlyColumnTypes = filteredColumn[0]
-      .type as ReadOnlyColumnTypes;
-    return typeOperatorsMap[type];
-  } else {
-    return new Array<DropdownOption>(0);
-  }
-};
-
-const showConditionsField = (props: CascadeFieldProps) => {
-  const columnValue = props.column || "";
-  const filteredColumn = props.columns.filter((column: DropdownOption) => {
-    return columnValue === column.value;
-  });
-  return !!filteredColumn.length;
-};
-
-const showInputField = (
-  props: CascadeFieldProps,
-  conditions: DropdownOption[],
-) => {
-  const conditionValue = props.condition || "";
-  const filteredConditions =
-    conditions &&
-    conditions.filter((condition: DropdownOption) => {
-      return condition.value === conditionValue;
-    });
-  return !!filteredConditions.length && filteredConditions[0].type === "input";
-};
-
-const showDateInputField = (
-  props: CascadeFieldProps,
-  conditions: DropdownOption[],
-) => {
-  const conditionValue = props.condition || "";
-  const filteredConditions =
-    conditions &&
-    conditions.filter((condition: DropdownOption) => {
-      return condition.value === conditionValue;
-    });
-  return !!filteredConditions.length && filteredConditions[0].type === "date";
-};
-
-function calculateInitialState(props: CascadeFieldProps) {
-  const showConditions = showConditionsField(props);
-  const conditions = getConditions(props);
-  const showInput = showInputField(props, conditions);
-  const showDateInput = showDateInputField(props, conditions);
-  return {
-    operator: props.operator,
-    column: props.column,
-    condition: props.condition,
-    value: props.value,
-    conditions: conditions,
-    showConditions: showConditions,
-    showInput: showInput,
-    showDateInput: showDateInput,
-    isDeleted: false,
-    isUpdate: false,
-    isOperatorChange: false,
-  };
-}
-
-export enum CascadeFieldActionTypes {
-  SELECT_COLUMN = "SELECT_COLUMN",
-  SELECT_CONDITION = "SELECT_CONDITION",
-  CHANGE_VALUE = "CHANGE_VALUE",
-  SELECT_OPERATOR = "SELECT_OPERATOR",
-  UPDATE_FILTER = "UPDATE_FILTER",
-  DELETE_FILTER = "DELETE_FILTER",
-}
-
-type CascadeFieldAction = keyof typeof CascadeFieldActionTypes;
-
-function CaseCaseFieldReducer(
-  state: CascadeFieldState,
-  action: {
-    type: CascadeFieldAction;
-    payload?: any;
-  },
-) {
-  switch (action.type) {
-    case CascadeFieldActionTypes.SELECT_COLUMN:
-      const type: ReadOnlyColumnTypes = action.payload.type;
-      return {
-        ...state,
-        column: action.payload.value,
-        condition: "",
-        conditions: typeOperatorsMap[type],
-        showConditions: true,
-        isUpdate: true,
-      };
-    case CascadeFieldActionTypes.SELECT_CONDITION:
-      return {
-        ...state,
-        condition: action.payload.value,
-        showInput: action.payload.type === "input",
-        showDateInput: action.payload.type === "date",
-        value: action.payload.type === "" ? "" : state.value,
-        isUpdate: true,
-      };
-    case CascadeFieldActionTypes.CHANGE_VALUE:
-      return {
-        ...state,
-        value: action.payload,
-        isUpdate: true,
-      };
-    case CascadeFieldActionTypes.SELECT_OPERATOR:
-      return {
-        ...state,
-        operator: action.payload,
-        isUpdate: true,
-        isOperatorChange: true,
-      };
-    case CascadeFieldActionTypes.UPDATE_FILTER:
-      const calculatedState = calculateInitialState(action.payload);
-      return {
-        ...calculatedState,
-        isUpdate: false,
-      };
-    case CascadeFieldActionTypes.DELETE_FILTER:
-      return {
-        ...state,
-        isDeleted: true,
-      };
-    default:
-      throw new Error();
-  }
-}
-
-function CascadeField(props: CascadeFieldProps) {
-  const memoizedState = React.useMemo(
-    () => calculateInitialState(props),
-    [props],
-  );
-  return <Fields state={memoizedState} {...props} />;
-}
-
-function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
-  const { applyFilter, hasAnyFilters, id, index, removeFilter } = props;
-  const [state, dispatch] = React.useReducer(CaseCaseFieldReducer, props.state);
-  const handleRemoveFilter = () => {
-    dispatch({ type: CascadeFieldActionTypes.DELETE_FILTER });
-  };
-  const selectColumn = (column: DropdownOption) => {
-    dispatch({
-      type: CascadeFieldActionTypes.SELECT_COLUMN,
-      payload: column,
-    });
-  };
-  const selectCondition = (condition: DropdownOption) => {
-    dispatch({
-      type: CascadeFieldActionTypes.SELECT_CONDITION,
-      payload: condition,
-    });
-  };
-  const onValueChange = (value: string) => {
-    const parsedValue = value && !isNaN(Number(value)) ? Number(value) : value;
-    dispatch({
-      type: CascadeFieldActionTypes.CHANGE_VALUE,
-      payload: parsedValue,
-    });
-  };
-  const onDateSelected = (date: string) => {
-    dispatch({
-      type: CascadeFieldActionTypes.CHANGE_VALUE,
-      payload: date,
-    });
-  };
-  const selectOperator = (option: DropdownOption) => {
-    dispatch({
-      type: CascadeFieldActionTypes.SELECT_OPERATOR,
-      payload: OperatorTypes[option.value as Operator],
-    });
-  };
-
-  const {
-    column,
-    condition,
-    conditions,
-    isDeleted,
-    isOperatorChange,
-    isUpdate,
-    operator,
-    showConditions,
-    showDateInput,
-    showInput,
-    value,
-  } = state;
-  useEffect(() => {
-    if (!isDeleted && isUpdate) {
-      applyFilter(
-        { id, operator, column, condition, value },
-        index,
-        isOperatorChange,
-      );
-    } else if (isDeleted) {
-      removeFilter(index);
-    }
-  }, [
-    operator,
-    column,
-    condition,
-    value,
-    isDeleted,
-    isOperatorChange,
-    isUpdate,
-    index,
-    applyFilter,
-    removeFilter,
-  ]);
-
-  useEffect(() => {
-    dispatch({
-      type: CascadeFieldActionTypes.UPDATE_FILTER,
-      payload: props,
-    });
-  }, [props]);
-  return (
-    <FieldWrapper className="t--table-filter">
-      <CloseIcon
-        className={`t--table-filter-remove-btn w-6 h-6 cursor-pointer ${
-          hasAnyFilters ? "" : "hidden"
-        }`}
-        color="var(--wds-color-icon)"
-        onClick={handleRemoveFilter}
-      />
-      {index === 1 ? (
-        <DropdownWrapper width={95}>
-          <RenderOptions
-            className="t--table-filter-operators-dropdown"
-            columns={operatorOptions}
-            placeholder="or"
-            selectItem={selectOperator}
-            value={operator}
-          />
-        </DropdownWrapper>
-      ) : (
-        <LabelWrapper>
-          {index === 0 ? "Where" : OperatorTypes[props.operator]}
-        </LabelWrapper>
-      )}
-      <DropdownWrapper width={120}>
-        <RenderOptions
-          className="t--table-filter-columns-dropdown"
-          columns={props.columns}
-          placeholder="Attribute"
-          selectItem={selectColumn}
-          showType
-          value={column}
-        />
-      </DropdownWrapper>
-      {showConditions ? (
-        <DropdownWrapper width={200}>
-          <RenderOptions
-            className="t--table-filter-conditions-dropdown"
-            columns={conditions}
-            placeholder=""
-            selectItem={selectCondition}
-            value={condition}
-          />
-        </DropdownWrapper>
-      ) : null}
-      {showInput ? (
-        <RenderInput
-          className="t--table-filter-value-input"
-          onChange={onValueChange}
-          value={value}
-        />
-      ) : null}
-      {showDateInput ? (
-        <DatePickerWrapper className="t--table-filter-date-input">
-          {/*@ts-expect-error: types mismatch because we don't use settings styles through props anymore. Remove this after creating WDS datepicker. */}
-          <DatePickerComponent
-            backgroundColor="#fff"
-            closeOnSelection
-            compactMode
-            dateFormat="YYYY-MM-DD HH:mm"
-            datePickerType="DATE_PICKER"
-            isDisabled={false}
-            isLoading={false}
-            labelText=""
-            onDateSelected={onDateSelected}
-            selectedDate={value}
-            shortcuts={false}
-            timePrecision={TimePrecision.MINUTE}
-            widgetId=""
-          />
-        </DatePickerWrapper>
-      ) : null}
-    </FieldWrapper>
-  );
-}
-
-export default CascadeField;
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/FilterPane.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/FilterPane.tsx
deleted file mode 100644
index 6c6fa8a29ddc..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/FilterPane.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { get } from "lodash";
-import * as log from "loglevel";
-import type { AppState } from "@appsmith/reducers";
-import styled from "styled-components";
-
-import { Colors } from "constants/Colors";
-import type { ReactTableColumnProps, ReactTableFilter } from "../Constants";
-import TableFilterPaneContent from "./FilterPaneContent";
-import { getCurrentThemeMode, ThemeMode } from "selectors/themeSelectors";
-import { Layers } from "constants/Layers";
-import Popper from "pages/Editor/Popper";
-import { getTableFilterState } from "selectors/tableFilterSelectors";
-import { getWidgetMetaProps } from "sagas/selectors";
-import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-import type { WidgetProps } from "widgets/BaseWidget";
-import { selectWidgetInitAction } from "actions/widgetSelectionActions";
-import { SelectionRequestType } from "sagas/WidgetSelectUtils";
-import { importSvg } from "design-system-old";
-import { CANVAS_ART_BOARD } from "constants/componentClassNameConstants";
-
-const DragHandleIcon = importSvg(
-  async () => import("assets/icons/ads/app-icons/draghandler.svg"),
-);
-
-const DragBlock = styled.div`
-  height: 40px;
-  width: 83px;
-  background: var(--wds-color-bg-light);
-  box-sizing: border-box;
-  font-size: 12px;
-  color: ${Colors.GREY_11};
-  letter-spacing: 0.04em;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  span {
-    padding-left: 8px;
-    color: var(--wds-color-text-light);
-  }
-`;
-
-export interface TableFilterPaneProps {
-  widgetId: string;
-  columns: ReactTableColumnProps[];
-  filters?: ReactTableFilter[];
-  applyFilter: (filters: ReactTableFilter[]) => void;
-  targetNode?: Element;
-}
-
-interface PositionPropsInt {
-  top: number;
-  left: number;
-}
-
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  TableFilterPaneProps;
-
-class TableFilterPane extends Component<Props> {
-  getPopperTheme() {
-    return ThemeMode.LIGHT;
-  }
-
-  handlePositionUpdate = (position: any) => {
-    this.props.setPanePosition(
-      this.props.tableFilterPane.widgetId as string,
-      position,
-    );
-  };
-
-  render() {
-    if (
-      this.props.tableFilterPane.isVisible &&
-      this.props.tableFilterPane.widgetId === this.props.widgetId
-    ) {
-      log.debug("tablefilter pane rendered");
-
-      /*
-        Prevent the FilterPane from overflowing the canvas when the
-        table widget is on the very top of the canvas.
-      */
-      const boundaryParent = document.querySelector("#root");
-
-      return (
-        <Popper
-          boundaryParent={boundaryParent || "viewport"}
-          disablePopperEvents={
-            get(this.props, "metaProps.isMoved", false) as boolean
-          }
-          isDraggable
-          isOpen
-          onPositionChange={this.handlePositionUpdate}
-          parentElement={boundaryParent}
-          placement="top"
-          portalContainer={
-            document.getElementById(CANVAS_ART_BOARD) || undefined
-          }
-          position={get(this.props, "metaProps.position") as PositionPropsInt}
-          renderDragBlock={
-            <DragBlock>
-              <DragHandleIcon />
-              <span>Move</span>
-            </DragBlock>
-          }
-          renderDragBlockPositions={{
-            left: "0px",
-          }}
-          targetNode={this.props.targetNode}
-          themeMode={this.getPopperTheme()}
-          zIndex={Layers.tableFilterPane}
-        >
-          <TableFilterPaneContent {...this.props} />
-        </Popper>
-      );
-    } else {
-      return null;
-    }
-  }
-}
-
-const mapStateToProps = (state: AppState, ownProps: TableFilterPaneProps) => {
-  const widgetLikeProps = {
-    widgetId: ownProps.widgetId,
-  } as WidgetProps;
-
-  return {
-    tableFilterPane: getTableFilterState(state),
-    themeMode: getCurrentThemeMode(state),
-    metaProps: getWidgetMetaProps(state, widgetLikeProps),
-  };
-};
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    setPanePosition: (widgetId: string, position: any) => {
-      dispatch({
-        type: ReduxActionTypes.TABLE_PANE_MOVED,
-        payload: {
-          widgetId,
-          position,
-        },
-      });
-      dispatch(selectWidgetInitAction(SelectionRequestType.One, [widgetId]));
-    },
-    hideFilterPane: (widgetId: string) => {
-      dispatch({
-        type: ReduxActionTypes.HIDE_TABLE_FILTER_PANE,
-        payload: { widgetId },
-      });
-      dispatch(selectWidgetInitAction(SelectionRequestType.One, [widgetId]));
-    },
-  };
-};
-export default connect(mapStateToProps, mapDispatchToProps)(TableFilterPane);
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/FilterPaneContent.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/FilterPaneContent.tsx
deleted file mode 100644
index d5a360b27cdc..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/FilterPaneContent.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import React, { useEffect, useCallback } from "react";
-import styled from "styled-components";
-import { Classes } from "@blueprintjs/core";
-import { Colors } from "constants/Colors";
-import type {
-  ReactTableColumnProps,
-  ReactTableFilter,
-  Operator,
-} from "../Constants";
-import { OperatorTypes, DEFAULT_FILTER } from "../Constants";
-import CascadeFields from "./CascadeFields";
-import {
-  createMessage,
-  TABLE_FILTER_COLUMN_TYPE_CALLOUT,
-} from "@appsmith/constants/messages";
-import { Icon, IconSize } from "@design-system/widgets-old";
-import { StyledButton as Button } from "widgets/ButtonWidget/component";
-import { ButtonVariantTypes } from "components/constants";
-
-import { cloneDeep } from "lodash";
-import {
-  ColumnTypes,
-  FilterableColumnTypes,
-} from "widgets/wds/WDSTableWidget/constants";
-import { generateReactKey } from "utils/generators";
-import { importRemixIcon } from "design-system-old";
-
-export interface DropdownOption {
-  label: string;
-  value: string;
-  type: string;
-}
-
-const AddIcon = importRemixIcon(
-  async () => import("remixicon-react/AddLineIcon"),
-);
-
-const TableFilterOuterWrapper = styled.div<{
-  borderRadius?: string;
-}>`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: ${Colors.WHITE};
-  box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15);
-  border-radius: ${(props) => props.borderRadius || "0"};
-`;
-
-const TableFilerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 2px 16px 14px;
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  background: ${Colors.WHITE};
-  margin-top: 14px;
-  &&& button:hover {
-    background: transparent;
-  }
-  .${Classes.BUTTON_TEXT} {
-    font-weight: 600 !important;
-  }
-`;
-
-const ButtonActionsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  &&& button {
-    margin-left: 14px;
-  }
-`;
-
-// margin-left is same as move block width in TableFilterPane.tsx
-const ColumnTypeBindingMessage = styled.div`
-  height: 40px;
-  line-height: 40px;
-  background: var(--wds-color-bg-light);
-  box-sizing: border-box;
-  font-size: 12px;
-  color: var(--wds-color-text-light);
-  letter-spacing: 0.04em;
-  font-weight: 500;
-  margin-left: 83px;
-  min-width: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  & .message-text {
-    padding: 0 8px 0 16px;
-  }
-
-  & .close-button {
-    cursor: pointer;
-    margin: 3px;
-    height: 34px;
-    width: 34px;
-    display: flex;
-    justify-content: center;
-    &:hover {
-      background-color: ${Colors.GREY_3};
-      svg path {
-        fill: ${Colors.GREY_10};
-      }
-    }
-  }
-`;
-
-interface TableFilterProps {
-  columns: ReactTableColumnProps[];
-  filters?: ReactTableFilter[];
-  applyFilter: (filters: ReactTableFilter[]) => void;
-  hideFilterPane: (widgetId: string) => void;
-  widgetId: string;
-}
-
-const defaultFilters = [{ ...DEFAULT_FILTER }];
-const getTableFilters = (filters: ReactTableFilter[] | undefined) => {
-  if (!filters || filters.length === 0) {
-    return defaultFilters;
-  }
-  return filters;
-};
-
-function TableFilterPaneContent(props: TableFilterProps) {
-  const [filters, updateFilters] = React.useState(
-    getTableFilters(props.filters),
-  );
-
-  useEffect(() => {
-    const updatedFiltersState = getTableFilters(props.filters);
-    //if props has been updated update the filters state
-    if (updatedFiltersState !== filters) {
-      updateFilters(updatedFiltersState);
-    }
-  }, [props.filters]);
-
-  const addFilter = () => {
-    const updatedFilters = filters ? [...filters] : [];
-    let operator: Operator = OperatorTypes.OR;
-    if (updatedFilters.length >= 2) {
-      operator = updatedFilters[1].operator;
-    }
-    // New id is generated for new filter here
-    updatedFilters.push({
-      ...DEFAULT_FILTER,
-      id: generateReactKey(),
-      operator,
-    });
-    updateFilters(updatedFilters);
-  };
-
-  const applyFilter = () => {
-    props.applyFilter(filters);
-  };
-
-  const hideFilter = () => {
-    props.hideFilterPane(props.widgetId);
-  };
-
-  const clearFilters = useCallback(() => {
-    props.applyFilter([]);
-  }, [props]);
-
-  const columns: DropdownOption[] = props.columns
-    .map((column: ReactTableColumnProps) => {
-      const type = column.metaProperties?.type || ColumnTypes.TEXT;
-
-      return {
-        label: column.Header,
-        value: column.alias,
-        type: type,
-      };
-    })
-    .filter((column: { label: string; value: string; type: ColumnTypes }) => {
-      return FilterableColumnTypes.includes(column.type);
-    });
-
-  const hasAnyFilters = !!(
-    filters.length >= 1 &&
-    filters[0].column &&
-    filters[0].condition
-  );
-
-  return (
-    <TableFilterOuterWrapper
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      <ColumnTypeBindingMessage>
-        <div className="message-text">
-          {createMessage(TABLE_FILTER_COLUMN_TYPE_CALLOUT)}
-        </div>
-        <div className="close-button t--close-filter-btn" onClick={hideFilter}>
-          <Icon fillColor={Colors.GREY_6} name="close-x" size={IconSize.XXL} />
-        </div>
-      </ColumnTypeBindingMessage>
-      <TableFilerWrapper onClick={(e) => e.stopPropagation()}>
-        {filters.map((filter: ReactTableFilter, index: number) => {
-          return (
-            <CascadeFields
-              applyFilter={(
-                filter: ReactTableFilter,
-                index: number,
-                isOperatorChange: boolean,
-              ) => {
-                // here updated filters store in state, not in redux
-                const updatedFilters = filters ? cloneDeep(filters) : [];
-                updatedFilters[index] = filter;
-                if (isOperatorChange) {
-                  /*
-                    This if-block updates the operator for all filters after
-                    second filter if the second filter operator is changed
-                  */
-                  let index = 2;
-                  while (index < updatedFilters.length) {
-                    updatedFilters[index].operator = updatedFilters[1].operator;
-                    index++;
-                  }
-                }
-                updateFilters(updatedFilters);
-              }}
-              column={filter.column}
-              columns={columns}
-              condition={filter.condition}
-              hasAnyFilters={hasAnyFilters}
-              id={filter.id}
-              index={index}
-              key={filter.id}
-              operator={
-                filters.length >= 2 ? filters[1].operator : filter.operator
-              }
-              removeFilter={(index: number) => {
-                const updatedFilters = cloneDeep(filters);
-                let newFilters: Array<ReactTableFilter> = [];
-                if (updatedFilters) {
-                  if (index === 1 && updatedFilters.length > 2) {
-                    updatedFilters[2].operator = updatedFilters[1].operator;
-                  }
-                  newFilters = [
-                    ...updatedFilters.slice(0, index),
-                    ...updatedFilters.slice(index + 1),
-                  ];
-                }
-                // removed filter directly update redux
-                // with redux update, useEffect will update local state too
-                props.applyFilter(newFilters);
-              }}
-              value={filter.value}
-            />
-          );
-        })}
-        {hasAnyFilters ? (
-          <ButtonWrapper>
-            <Button
-              buttonVariant={ButtonVariantTypes.TERTIARY}
-              className="t--add-filter-btn"
-              icon={<AddIcon className="w-5 h-5" />}
-              onClick={addFilter}
-              size="small"
-              text="Add Filter"
-            />
-            <ButtonActionsWrapper>
-              <Button
-                buttonVariant={ButtonVariantTypes.SECONDARY}
-                className="t--clear-all-filter-btn"
-                onClick={clearFilters}
-                text="CLEAR ALL"
-              />
-              <Button
-                buttonVariant={ButtonVariantTypes.PRIMARY}
-                className="t--apply-filter-btn"
-                onClick={applyFilter}
-                text="APPLY"
-              />
-            </ButtonActionsWrapper>
-          </ButtonWrapper>
-        ) : null}
-      </TableFilerWrapper>
-    </TableFilterOuterWrapper>
-  );
-}
-
-export default TableFilterPaneContent;
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/Pagination.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/Pagination.tsx
index c8d2398e853e..2fad3a26febf 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/Pagination.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/Pagination.tsx
@@ -1,12 +1,9 @@
+import React from "react";
 import { IconButton, Text } from "@design-system/widgets";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
-import React from "react";
+
+import type { ReactTableColumnProps } from "../Constants";
 import { PageNumberInput } from "./PageNumberInput";
-import type {
-  ReactTableColumnProps,
-  ReactTableFilter,
-  TableSizes,
-} from "../Constants";
 
 export interface PaginationProps {
   updatePageNo: (pageNo: number, event?: EventType) => void;
@@ -15,116 +12,60 @@ export interface PaginationProps {
   pageNo: number;
   totalRecordsCount?: number;
   tableData: Array<Record<string, unknown>>;
-  tableColumns: ReactTableColumnProps[];
   pageCount: number;
   currentPageIndex: number;
-  pageOptions: number[];
   columns: ReactTableColumnProps[];
-  hiddenColumns?: string[];
-  widgetName: string;
-  widgetId: string;
-  searchKey: string;
-  searchTableData: (searchKey: any) => void;
   serverSidePaginationEnabled: boolean;
-  filters?: ReactTableFilter[];
-  applyFilter: (filters: ReactTableFilter[]) => void;
-  tableSizes: TableSizes;
-  isVisibleDownload?: boolean;
-  isVisibleFilters?: boolean;
   isVisiblePagination?: boolean;
-  isVisibleSearch?: boolean;
-  delimiter: string;
-  allowAddNewRow: boolean;
-  onAddNewRow: () => void;
-  disableAddNewRow: boolean;
-  width: number;
 }
 
 export const Pagination = (props: PaginationProps) => {
-  const pageCount = `${props.pageNo + 1}${
-    props.totalRecordsCount ? ` of ${props.pageCount}` : ``
-  }`;
+  if (!props.columns.length) return null;
+  if (!props.isVisiblePagination) return null;
 
   return (
-    <>
-      {!!props.columns.length &&
-        props.isVisiblePagination &&
-        props.serverSidePaginationEnabled && (
-          <div data-table-header-pagination="">
-            {props.totalRecordsCount ? (
-              <Text lineClamp={1} variant="footnote">
-                {props.totalRecordsCount} Records
-              </Text>
-            ) : null}
-            <IconButton
-              icon="chevron-left"
-              isDisabled={props.pageNo === 0}
-              onPress={props.prevPageClick}
-              size="small"
-              variant="outlined"
-            />
-            <Text lineClamp={1} variant="footnote">
-              Page {pageCount}
-            </Text>
-            <IconButton
-              icon="chevron-right"
-              isDisabled={
-                !!props.totalRecordsCount &&
-                props.pageNo === props.pageCount - 1
-              }
-              onPress={props.nextPageClick}
-              size="small"
-              variant="outlined"
-            />
-          </div>
-        )}
-      {!!props.columns.length &&
-        props.isVisiblePagination &&
-        !props.serverSidePaginationEnabled && (
-          <div data-table-header-pagination="">
-            <Text lineClamp={1} variant="footnote">
-              {props.tableData?.length} Records
-            </Text>
-            <IconButton
-              icon="chevron-left"
-              isDisabled={props.currentPageIndex === 0}
-              onPress={() => {
-                const pageNo =
-                  props.currentPageIndex > 0 ? props.currentPageIndex - 1 : 0;
-                !(props.currentPageIndex === 0) &&
-                  props.updatePageNo(pageNo + 1, EventType.ON_PREV_PAGE);
-              }}
-              size="small"
-              variant="outlined"
-            />
-            <Text lineClamp={1} variant="footnote">
-              Page
-            </Text>
-            <PageNumberInput
-              disabled={props.pageCount === 1}
-              pageCount={props.pageCount}
-              pageNo={props.pageNo + 1}
-              updatePageNo={props.updatePageNo}
-            />
-            <Text lineClamp={1} variant="footnote">
-              of {props.pageCount}
-            </Text>
-            <IconButton
-              icon="chevron-right"
-              isDisabled={props.currentPageIndex === props.pageCount - 1}
-              onPress={() => {
-                const pageNo =
-                  props.currentPageIndex < props.pageCount - 1
-                    ? props.currentPageIndex + 1
-                    : 0;
-                !(props.currentPageIndex === props.pageCount - 1) &&
-                  props.updatePageNo(pageNo + 1, EventType.ON_NEXT_PAGE);
-              }}
-              size="small"
-              variant="outlined"
-            />
-          </div>
-        )}
-    </>
+    <div data-table-header-pagination="">
+      <Text lineClamp={1} variant="footnote">
+        {props.tableData?.length} Records
+      </Text>
+      <IconButton
+        icon="chevron-left"
+        isDisabled={props.currentPageIndex === 0}
+        onPress={() => {
+          const pageNo =
+            props.currentPageIndex > 0 ? props.currentPageIndex - 1 : 0;
+          !(props.currentPageIndex === 0) &&
+            props.updatePageNo(pageNo + 1, EventType.ON_PREV_PAGE);
+        }}
+        size="small"
+        variant="outlined"
+      />
+      <Text lineClamp={1} variant="footnote">
+        Page
+      </Text>
+      <PageNumberInput
+        disabled={props.pageCount === 1}
+        pageCount={props.pageCount}
+        pageNo={props.pageNo + 1}
+        updatePageNo={props.updatePageNo}
+      />
+      <Text lineClamp={1} variant="footnote">
+        of {props.pageCount}
+      </Text>
+      <IconButton
+        icon="chevron-right"
+        isDisabled={props.currentPageIndex === props.pageCount - 1}
+        onPress={() => {
+          const pageNo =
+            props.currentPageIndex < props.pageCount - 1
+              ? props.currentPageIndex + 1
+              : 0;
+          !(props.currentPageIndex === props.pageCount - 1) &&
+            props.updatePageNo(pageNo + 1, EventType.ON_NEXT_PAGE);
+        }}
+        size="small"
+        variant="outlined"
+      />
+    </div>
   );
 };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/TableColumnHeader.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/TableColumnHeader.tsx
index e83e4860c779..1ce88b7bbab6 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/TableColumnHeader.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/TableColumnHeader.tsx
@@ -68,8 +68,6 @@ const TableColumnHeader = (props: TableColumnHeaderProps) => {
               renderHeaderCheckBoxCell(
                 props.handleAllRowSelectClick,
                 props.rowSelectionState,
-                props.accentColor,
-                props.borderRadius,
               )}
 
             {headerGroup.headers.map((column: any, columnIndex: number) => {
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/VirtualTableInnerElement.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/VirtualTableInnerElement.tsx
index b9b378ffa6f6..97abea1feff7 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/VirtualTableInnerElement.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/VirtualTableInnerElement.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import { useContext } from "react";
 import styled from "styled-components";
-import { MULTISELECT_CHECKBOX_WIDTH } from "../Constants";
-import { BodyContext } from "../TableBody";
+
+import { TableBodyContext } from "../TableBody";
 import TableColumnHeader from "./TableColumnHeader";
+import { MULTISELECT_CHECKBOX_WIDTH } from "../Constants";
 
 const StyledTableBodyWrapper = styled.div<{
   multiRowSelection?: boolean;
@@ -44,7 +45,7 @@ const VirtualTableInnerElement = ({
     totalColumnsWidth,
     widgetId,
     width,
-  } = useContext(BodyContext) as any;
+  } = useContext(TableBodyContext) as any;
 
   return (
     <>
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/index.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/index.tsx
index 2448ba22be11..655dce0bac17 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/index.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableHeader/index.tsx
@@ -1,50 +1,30 @@
 import React, { useRef } from "react";
+import { Flex } from "@design-system/widgets";
 
 import { Search } from "./Search";
-import { Actions } from "./Actions";
-import type { SearchProps } from "./Search";
-import type { ActionsPropsType } from "./Actions";
-import { AddNewRowBanner } from "./AddNewRowBanner";
-import type { AddNewRowBannerProps } from "./AddNewRowBanner";
-
-import FilterPane from "./FilterPane";
 import styles from "./styles.module.css";
+import type { SearchProps } from "./Search";
+import type { PaginationProps } from "./Pagination";
 import { Pagination } from "./Pagination";
-import { Flex } from "@design-system/widgets";
 
-interface TableHeaderProps
-  extends ActionsPropsType,
-    AddNewRowBannerProps,
-    SearchProps {
-  isAddRowInProgress: boolean;
-}
+interface TableHeaderProps extends SearchProps, PaginationProps {}
 
 function TableHeader(props: TableHeaderProps) {
   const {
-    applyFilter,
     columns,
-    disabledAddNewRowSave,
-    isAddRowInProgress,
+    isVisiblePagination,
     isVisibleSearch,
-    onAddNewRowAction,
     onSearch,
     searchKey,
     tableData,
-    widgetId,
     ...rest
   } = props;
+
   const tableHeaderRef = useRef<HTMLDivElement>(null);
 
-  const content = (() => {
-    if (isAddRowInProgress) {
-      return (
-        <AddNewRowBanner
-          disabledAddNewRowSave={disabledAddNewRowSave}
-          onAddNewRowAction={onAddNewRowAction}
-        />
-      );
-    }
+  if (!(isVisibleSearch || isVisiblePagination)) return null;
 
+  const content = (() => {
     return (
       <>
         <Search
@@ -53,20 +33,10 @@ function TableHeader(props: TableHeaderProps) {
           searchKey={searchKey}
         />
         <Flex flexGrow={1} gap="spacing-1" justifyContent="space-between">
-          <Actions
-            applyFilter={applyFilter}
-            columns={columns}
-            tableData={tableData}
-            widgetId={widgetId}
-            {...rest}
-          />
           <Pagination
-            applyFilter={applyFilter}
             columns={columns}
-            searchKey={searchKey}
-            searchTableData={onSearch}
+            isVisiblePagination={isVisiblePagination}
             tableData={tableData}
-            widgetId={widgetId}
             {...rest}
           />
         </Flex>
@@ -75,12 +45,9 @@ function TableHeader(props: TableHeaderProps) {
   })();
 
   return (
-    <>
-      <div className={styles["table-header"]} ref={tableHeaderRef}>
-        <div data-layout="">{content}</div>
-      </div>
-      <FilterPane {...props} targetNode={tableHeaderRef.current ?? undefined} />
-    </>
+    <div className={styles["table-header"]} ref={tableHeaderRef}>
+      <div data-layout="">{content}</div>
+    </div>
   );
 }
 
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx
index a95fa8373741..949dbe026fa6 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/TableStyledWrappers.tsx
@@ -1,53 +1,25 @@
 import styled, { css } from "styled-components";
 import type {
-  TableSizes,
   CellLayoutProperties,
   CellAlignment,
   VerticalAlignment,
   ImageSize,
 } from "./Constants";
 import {
-  JUSTIFY_CONTENT,
-  ALIGN_ITEMS,
-  IMAGE_HORIZONTAL_ALIGN,
-  IMAGE_VERTICAL_ALIGN,
-  TEXT_ALIGN,
   TABLE_SIZES,
   ImageSizes,
   MULTISELECT_CHECKBOX_WIDTH,
 } from "./Constants";
-import type { Color } from "constants/Colors";
 import { Colors } from "constants/Colors";
 import { invisible } from "constants/DefaultTheme";
 import { lightenColor, darkenColor } from "widgets/WidgetUtils";
 import { FontStyleTypes } from "constants/WidgetConstants";
 import { Classes } from "@blueprintjs/core";
-import type { TableVariant } from "../constants";
 import { Layers } from "constants/Layers";
 
 const BORDER_RADIUS = "border-radius: 4px;";
 const HEADER_CONTROL_FONT_SIZE = "12px";
 
-export const TableWrapper = styled.div<{
-  width: number;
-  height: number;
-  tableSizes: TableSizes;
-  accentColor: string;
-  backgroundColor?: Color;
-  triggerRowSelection: boolean;
-  isHeaderVisible?: boolean;
-  borderRadius: string;
-  boxShadow?: string;
-  borderColor?: string;
-  borderWidth?: number;
-  isResizingColumn?: boolean;
-  variant?: TableVariant;
-  isAddRowInProgress: boolean;
-}>`
-  .column-freeze {
-  }
-`;
-
 export const DropDownWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -169,12 +141,6 @@ export const CellWrapper = styled.div<{
     props.fontStyle?.includes(FontStyleTypes.UNDERLINE) && props.isTextType
       ? "underline"
       : ""};
-  justify-content: ${(props) =>
-    props.horizontalAlignment && JUSTIFY_CONTENT[props.horizontalAlignment]};
-  text-align: ${(props) =>
-    props.horizontalAlignment && TEXT_ALIGN[props.horizontalAlignment]};
-  align-items: ${(props) =>
-    props.verticalAlignment && ALIGN_ITEMS[props.verticalAlignment]};
 
   background: ${(props) => {
     if (props.isCellDisabled) {
@@ -219,16 +185,6 @@ export const CellWrapper = styled.div<{
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;`}
-  .image-cell-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: ${(props) =>
-      props.verticalAlignment && IMAGE_VERTICAL_ALIGN[props.verticalAlignment]};
-    justify-content: ${(props) =>
-      props.horizontalAlignment &&
-      IMAGE_HORIZONTAL_ALIGN[props.horizontalAlignment]};
-  }
   .image-cell {
     height: ${(props) =>
       props.imageSize ? ImageSizes[props.imageSize] : ImageSizes.DEFAULT};
@@ -254,14 +210,6 @@ export const CellWrapper = styled.div<{
       ${BORDER_RADIUS}
     }
   }
-  .link-text {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-word;
-    text-align: ${(props) =>
-      props.horizontalAlignment && TEXT_ALIGN[props.horizontalAlignment]};
-  }
   .hidden-icon {
     display: none;
   }
@@ -272,34 +220,12 @@ export const CellWrapper = styled.div<{
   }
 `;
 
-export const CellCheckboxWrapper = styled(CellWrapper)<{
-  isChecked?: boolean;
-  accentColor?: string;
-  borderRadius?: string;
-}>`
+export const CellCheckboxWrapper = styled(CellWrapper)`
   left: 0;
   z-index: ${Layers.modalWidget};
   justify-content: center;
   width: ${MULTISELECT_CHECKBOX_WIDTH}px;
   height: auto;
-  & > div {
-    border-radius: ${({ borderRadius }) => borderRadius};
-
-    ${(props) =>
-      props.isChecked
-        ? `
-          background: ${props.accentColor};
-          &:hover {
-            background: ${darkenColor(props.accentColor)};
-          }
-            `
-        : `
-          border: 1px solid ${Colors.GREY_3};
-          &:hover {
-            border: 1px solid ${Colors.GREY_5};
-          }
-        `};
-  }
 `;
 
 export const CellCheckbox = styled.div`
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/BasicCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/BasicCell.tsx
deleted file mode 100644
index 2e30ed6185e6..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/BasicCell.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import type { Ref } from "react";
-import React, { useCallback } from "react";
-import { Tooltip } from "@blueprintjs/core";
-import styled from "styled-components";
-import type { BaseCellComponentProps } from "../Constants";
-import { TABLE_SIZES } from "../Constants";
-import { TooltipContentWrapper } from "../TableStyledWrappers";
-import AutoToolTipComponent from "./AutoToolTipComponent";
-import { importSvg } from "design-system-old";
-
-const EditIcon = importSvg(
-  async () => import("assets/icons/control/edit-variant1.svg"),
-);
-
-const Wrapper = styled.div<{
-  allowWrapping?: boolean;
-  compactMode: string;
-  isCellEditMode?: boolean;
-}>`
-  display: flex;
-  position: relative;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  opacity: ${(props) => (props.isCellEditMode ? 0 : 1)};
-
-  &:hover {
-    .editable-cell-icon {
-      display: ${(props) => (props.isCellEditMode ? "none" : "block")};
-    }
-  }
-`;
-
-const StyledAutoToolTipComponent = styled(AutoToolTipComponent)`
-  width: 100%;
-`;
-
-const UnsavedChangesMarker = styled.div<{ accentColor: string }>`
-  position: absolute;
-  top: -1px;
-  right: -3px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid ${(props) => props.accentColor};
-  transform: rotateZ(45deg);
-`;
-
-const Content = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const StyledEditIcon = styled.div<{
-  accentColor?: string;
-  backgroundColor?: string;
-  compactMode: string;
-  disabledEditIcon: boolean;
-}>`
-  position: absolute;
-  right: 6px;
-  top: ${(props) => TABLE_SIZES[props.compactMode].EDIT_ICON_TOP}px;
-  background: ${(props) =>
-    props.disabledEditIcon ? "#999" : props.accentColor};
-  padding: 2px;
-  cursor: ${(props) => (props.disabledEditIcon ? "default" : "pointer")};
-  display: none;
-  & svg {
-    transform: scale(0.9);
-    path {
-      fill: #fff;
-    }
-  }
-`;
-
-type PropType = BaseCellComponentProps & {
-  accentColor: string;
-  value: any;
-  columnType: string;
-  tableWidth: number;
-  isCellEditable?: boolean;
-  isCellEditMode?: boolean;
-  hasUnsavedChanges?: boolean;
-  displayText?: string;
-  disabledEditIcon: boolean;
-  onEdit?: () => void;
-  url?: string;
-  disabledEditIconMessage: string;
-};
-
-export const BasicCell = React.forwardRef(
-  (
-    {
-      accentColor,
-      allowCellWrapping,
-      cellBackground,
-      columnType,
-      compactMode,
-      disabledEditIcon,
-      disabledEditIconMessage,
-      fontStyle,
-      hasUnsavedChanges,
-      horizontalAlignment,
-      isCellDisabled,
-      isCellEditable,
-      isCellEditMode,
-      isCellVisible,
-      isHidden,
-      onEdit,
-      tableWidth,
-      textColor,
-      textSize,
-      url,
-      value,
-      verticalAlignment,
-    }: PropType,
-    contentRef: Ref<HTMLDivElement>,
-  ) => {
-    const onEditHandler = useCallback(
-      (e: React.MouseEvent<SVGElement | HTMLDivElement>) => {
-        if (isCellEditable && !disabledEditIcon && onEdit) {
-          e.stopPropagation();
-          onEdit();
-        }
-      },
-      [onEdit, disabledEditIcon, isCellEditable],
-    );
-
-    return (
-      <Wrapper
-        allowWrapping={allowCellWrapping}
-        compactMode={compactMode}
-        isCellEditMode={isCellEditMode}
-        onDoubleClick={onEditHandler}
-      >
-        {hasUnsavedChanges && (
-          <UnsavedChangesMarker accentColor={accentColor} />
-        )}
-        <StyledAutoToolTipComponent
-          allowCellWrapping={allowCellWrapping}
-          cellBackground={cellBackground}
-          className={isCellEditable ? "editable-cell" : ""}
-          columnType={columnType}
-          compactMode={compactMode}
-          fontStyle={fontStyle}
-          horizontalAlignment={horizontalAlignment}
-          isCellDisabled={isCellDisabled}
-          isCellVisible={isCellVisible}
-          isHidden={isHidden}
-          tableWidth={tableWidth}
-          textColor={textColor}
-          textSize={textSize}
-          title={!!value ? value.toString() : ""}
-          url={url}
-          verticalAlignment={verticalAlignment}
-        >
-          <Content ref={contentRef}>{value}</Content>
-        </StyledAutoToolTipComponent>
-        {isCellEditable && (
-          <StyledEditIcon
-            accentColor={accentColor}
-            backgroundColor={cellBackground}
-            className="editable-cell-icon t--editable-cell-icon"
-            compactMode={compactMode}
-            disabledEditIcon={disabledEditIcon}
-            onMouseUp={onEditHandler}
-          >
-            {disabledEditIcon ? (
-              <Tooltip
-                autoFocus={false}
-                content={
-                  <TooltipContentWrapper>
-                    {disabledEditIconMessage}
-                  </TooltipContentWrapper>
-                }
-                hoverOpenDelay={200}
-                position="top"
-              >
-                <EditIcon onClick={(e) => e.stopPropagation()} />
-              </Tooltip>
-            ) : (
-              <EditIcon onClick={(e) => e.stopPropagation()} />
-            )}
-          </StyledEditIcon>
-        )}
-      </Wrapper>
-    );
-  },
-);
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/Button.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/Button.tsx
deleted file mode 100644
index 6267ea0cd6eb..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/Button.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { useState } from "react";
-
-import { ActionWrapper } from "../TableStyledWrappers";
-import { BaseButton } from "widgets/ButtonWidget/component";
-import type { ButtonColumnActions } from "widgets/wds/WDSTableWidget/constants";
-import styled from "styled-components";
-
-const StyledButton = styled(BaseButton)<{
-  compactMode?: string;
-}>`
-  min-width: 40px;
-
-  min-height: ${({ compactMode }) =>
-    compactMode === "SHORT" ? "24px" : "30px"};
-  font-size: ${({ compactMode }) =>
-    compactMode === "SHORT" ? "12px" : "14px"};
-  line-height: ${({ compactMode }) =>
-    compactMode === "SHORT" ? "24px" : "28px"};
-`;
-
-interface ButtonProps {
-  isCellVisible: boolean;
-  isSelected: boolean;
-  isDisabled?: boolean;
-  action: ButtonColumnActions;
-  compactMode?: string;
-  onCommandClick: (dynamicTrigger: string, onComplete: () => void) => void;
-}
-
-export function Button(props: ButtonProps) {
-  const [loading, setLoading] = useState(false);
-  const onComplete = () => {
-    setLoading(false);
-  };
-  const handleClick = () => {
-    setLoading(true);
-    props.onCommandClick(props.action.dynamicTrigger, onComplete);
-  };
-
-  return (
-    <ActionWrapper
-      disabled={!!props.isDisabled}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      {props.isCellVisible && props.action.isVisible ? (
-        <StyledButton
-          borderRadius={props.action.borderRadius}
-          boxShadow={props.action.boxShadow}
-          buttonColor={props.action.backgroundColor}
-          buttonVariant={props.action.variant}
-          compactMode={props.compactMode}
-          disabled={props.isDisabled}
-          iconAlign={props.action.iconAlign}
-          iconName={props.action.iconName}
-          loading={loading}
-          onClick={handleClick}
-          text={props.action.label}
-        />
-      ) : null}
-    </ActionWrapper>
-  );
-}
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx
index 2af13fb8ae53..6596385c2353 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx
@@ -1,87 +1,46 @@
-import React, { memo } from "react";
+import React, { memo, useState } from "react";
+import type { ButtonProps, COLORS } from "@design-system/widgets";
+import { Button } from "@design-system/widgets";
 
-import { CellWrapper } from "../TableStyledWrappers";
 import type { BaseCellComponentProps } from "../Constants";
-import { TABLE_SIZES } from "../Constants";
-import { Button } from "./Button";
-import type { ButtonColumnActions } from "widgets/wds/WDSTableWidget/constants";
-import styled from "styled-components";
 
-const StyledButton = styled(Button)<{ compactMode: string }>`
-  max-height: ${(props) => TABLE_SIZES[props.compactMode].ROW_HEIGHT}px;
-`;
-
-export interface RenderActionProps extends BaseCellComponentProps {
-  isSelected: boolean;
-  columnActions?: ButtonColumnActions[];
-  isDisabled: boolean;
-  onCommandClick: (dynamicTrigger: string, onComplete: () => void) => void;
+export interface ButtonCellProps {
+  buttonLabel?: string;
+  cellColor?: "default" | keyof typeof COLORS;
+  buttonVariant?: ButtonProps["variant"];
+  onClick?: (onComplete: () => void) => void;
+  isDisabled?: boolean;
 }
 
-function ButtonCellComponent(props: RenderActionProps) {
-  const {
-    allowCellWrapping,
-    cellBackground,
-    columnActions,
-    compactMode,
-    fontStyle,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellVisible,
-    isDisabled,
-    isHidden,
-    isSelected,
-    onCommandClick,
-    textColor,
-    textSize,
-    verticalAlignment,
-  } = props;
+function ButtonCell(props: ButtonCellProps & BaseCellComponentProps) {
+  const { buttonLabel, buttonVariant, cellColor, isDisabled } = props;
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onComplete = () => {
+    setIsLoading(false);
+  };
+
+  const onClick = () => {
+    setIsLoading(true);
 
-  if (!columnActions)
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        compactMode={compactMode}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      />
-    );
+    if (props.onClick) {
+      props.onClick(onComplete);
+    }
+  };
 
   return (
-    <CellWrapper
-      allowCellWrapping={allowCellWrapping}
-      cellBackground={cellBackground}
-      compactMode={compactMode}
-      fontStyle={fontStyle}
-      horizontalAlignment={horizontalAlignment}
-      isCellDisabled={isCellDisabled}
-      isCellVisible={isCellVisible}
-      isHidden={isHidden}
-      textColor={textColor}
-      textSize={textSize}
-      verticalAlignment={verticalAlignment}
+    <Button
+      color={cellColor === "default" ? "accent" : cellColor}
+      isDisabled={isDisabled}
+      isLoading={isLoading}
+      onPress={onClick}
+      variant={buttonVariant}
     >
-      {columnActions.map((action: ButtonColumnActions) => {
-        return (
-          <StyledButton
-            action={action}
-            compactMode={compactMode}
-            isCellVisible={isCellVisible}
-            isDisabled={isDisabled}
-            isSelected={isSelected}
-            key={action.id}
-            onCommandClick={onCommandClick}
-          />
-        );
-      })}
-    </CellWrapper>
+      {buttonLabel}
+    </Button>
   );
 }
-export const ButtonCell = memo(ButtonCellComponent);
+
+const MemoizedButtonCell = memo(ButtonCell);
+
+export { MemoizedButtonCell as ButtonCell };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/CheckboxCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/CheckboxCell.tsx
index b1200db93137..6eca71158daf 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/CheckboxCell.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/CheckboxCell.tsx
@@ -1,51 +1,6 @@
 import React, { memo } from "react";
-import type { BaseCellComponentProps, CellAlignment } from "../Constants";
-import { ALIGN_ITEMS, JUSTIFY_CONTENT } from "../Constants";
-import { CellWrapper, TooltipContentWrapper } from "../TableStyledWrappers";
-import CheckboxComponent from "widgets/CheckboxWidget/component/index";
-import { LabelPosition } from "components/constants";
-import styled from "styled-components";
-import { Tooltip } from "@blueprintjs/core";
-
-const UnsavedChangesMarker = styled.div<{ accentColor: string }>`
-  position: absolute;
-  top: -1px;
-  right: -3px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid ${(props) => props.accentColor};
-  transform: rotateZ(45deg);
-`;
-
-const CheckboxCellWrapper = styled(CellWrapper)<{
-  horizontalAlignment?: CellAlignment;
-}>`
-  & div {
-    justify-content: ${(props) =>
-      props.horizontalAlignment &&
-      JUSTIFY_CONTENT[props.horizontalAlignment]} !important;
-
-    align-items: ${(props) =>
-      props.verticalAlignment &&
-      ALIGN_ITEMS[props.verticalAlignment]} !important;
-
-    & .bp3-checkbox {
-      gap: 0px;
-    }
-  }
-  & .bp3-disabled {
-    cursor: grab !important;
-    & .bp3-control-indicator::before {
-      cursor: grab !important;
-    }
-  }
-
-  & > .bp3-popover-wrapper {
-    overflow: unset;
-  }
-`;
+import type { BaseCellComponentProps } from "../Constants";
+import { Checkbox } from "@design-system/widgets";
 
 type CheckboxCellProps = BaseCellComponentProps & {
   value: boolean;
@@ -60,67 +15,16 @@ type CheckboxCellProps = BaseCellComponentProps & {
 };
 
 const CheckboxCellComponent = (props: CheckboxCellProps) => {
-  const {
-    accentColor,
-    borderRadius,
-    cellBackground,
-    compactMode,
-    disabledCheckbox,
-    disabledCheckboxMessage,
-    hasUnSavedChanges,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellEditable,
-    isCellVisible,
-    isHidden,
-    onChange,
-    value,
-    verticalAlignment,
-  } = props;
+  const { disabledCheckbox, isCellEditable, onChange, value } = props;
 
-  const checkbox = (
-    <CheckboxComponent
-      accentColor={accentColor}
-      borderRadius={borderRadius}
-      isChecked={value}
+  return (
+    <Checkbox
       isDisabled={!!disabledCheckbox || !isCellEditable}
-      isLoading={false}
       isRequired={false}
-      label=""
-      labelPosition={LabelPosition.Auto}
-      onCheckChange={() => onChange()}
-      widgetId={""}
+      isSelected={value}
+      onChange={() => onChange()}
     />
   );
-  return (
-    <CheckboxCellWrapper
-      cellBackground={cellBackground}
-      compactMode={compactMode}
-      horizontalAlignment={horizontalAlignment}
-      isCellDisabled={isCellDisabled}
-      isCellVisible={isCellVisible}
-      isHidden={isHidden}
-      verticalAlignment={verticalAlignment}
-    >
-      {hasUnSavedChanges && <UnsavedChangesMarker accentColor={accentColor} />}
-      {isCellEditable && !!disabledCheckbox ? (
-        <Tooltip
-          autoFocus={false}
-          content={
-            <TooltipContentWrapper>
-              {disabledCheckboxMessage}
-            </TooltipContentWrapper>
-          }
-          hoverOpenDelay={200}
-          position="top"
-        >
-          {checkbox}
-        </Tooltip>
-      ) : (
-        checkbox
-      )}
-    </CheckboxCellWrapper>
-  );
 };
 
 export const CheckboxCell = memo(CheckboxCellComponent);
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/DateCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/DateCell.tsx
deleted file mode 100644
index a60ae8f6a18c..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/DateCell.tsx
+++ /dev/null
@@ -1,358 +0,0 @@
-import React, { useMemo, useRef, useState } from "react";
-import type { VerticalAlignment } from "../Constants";
-import {
-  ALIGN_ITEMS,
-  EDITABLE_CELL_PADDING_OFFSET,
-  TABLE_SIZES,
-} from "../Constants";
-import DateComponent from "widgets/DatePickerWidget2/component";
-import { TimePrecision } from "widgets/DatePickerWidget2/constants";
-import type { RenderDefaultPropsType } from "./PlainTextCell";
-import styled from "styled-components";
-import { EditableCellActions } from "widgets/wds/WDSTableWidget/constants";
-import { ISO_DATE_FORMAT } from "constants/WidgetValidation";
-import moment from "moment";
-import { BasicCell } from "./BasicCell";
-import { Colors } from "constants/Colors";
-import ErrorTooltip from "components/editorComponents/ErrorTooltip";
-import {
-  createMessage,
-  INPUT_WIDGET_DEFAULT_VALIDATION_ERROR,
-} from "@appsmith/constants/messages";
-
-type DateComponentProps = RenderDefaultPropsType &
-  editPropertyType & {
-    accentColor?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    closeOnSelection: boolean;
-    maxDate: string;
-    minDate: string;
-    onDateChange?: string;
-    shortcuts: boolean;
-    timePrecision: TimePrecision;
-    inputFormat: string;
-    outputFormat: string;
-    onDateSave: (
-      rowIndex: number,
-      alias: string,
-      value: string,
-      onSubmit?: string,
-    ) => void;
-    onDateSelectedString: string;
-    firstDayOfWeek?: number;
-    isRequired: boolean;
-    updateNewRowValues: (
-      alias: string,
-      value: unknown,
-      parsedValue: unknown,
-    ) => void;
-  };
-
-const COMPONENT_DEFAULT_VALUES = {
-  maxDate: "2121-12-31T18:29:00.000Z",
-  minDate: "1920-12-31T18:30:00.000Z",
-  timePrecision: TimePrecision.MINUTE,
-};
-
-interface editPropertyType {
-  alias: string;
-  onDateSelectedString: string;
-  rowIndex: number;
-}
-
-const DEFAULT_BORDER_RADIUS = "0";
-
-const Container = styled.div<{
-  isCellEditMode?: boolean;
-  verticalAlignment?: VerticalAlignment;
-  cellBackground?: string;
-}>`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: ${(props) =>
-    props.verticalAlignment && ALIGN_ITEMS[props.verticalAlignment]};
-`;
-
-const FOCUS_CLASS = "has-focus";
-
-const Wrapper = styled.div<{
-  accentColor: string;
-  compactMode: string;
-  allowCellWrapping?: boolean;
-  verticalAlignment?: VerticalAlignment;
-  textSize?: string;
-  isEditableCellValid: boolean;
-  paddedInput: boolean;
-}>`
-  padding: 1px;
-  border: 1px solid
-    ${(props) => (!props.isEditableCellValid ? Colors.DANGER_SOLID : "#fff")};
-  background: #fff;
-  position: absolute;
-  width: ${(props) =>
-    props.paddedInput
-      ? `calc(100% - ${EDITABLE_CELL_PADDING_OFFSET}px)`
-      : "100%"};
-  left: 50%;
-  transform: translate(-50%, 0);
-  overflow: hidden;
-  border-radius: 3px;
-  display: flex;
-  height: ${(props) => {
-    if (props.allowCellWrapping) {
-      return props.paddedInput
-        ? `calc(100% - ${EDITABLE_CELL_PADDING_OFFSET}px)`
-        : "100%";
-    } else {
-      return props.paddedInput
-        ? `${
-            TABLE_SIZES[props.compactMode].ROW_HEIGHT -
-            EDITABLE_CELL_PADDING_OFFSET
-          }px`
-        : `${TABLE_SIZES[props.compactMode].ROW_HEIGHT}px`;
-    }
-  }};
-  ${(props) => {
-    switch (props.verticalAlignment) {
-      case "TOP":
-        return `top: 0;`;
-      case "BOTTOM":
-        return `bottom: 0;`;
-      case "CENTER":
-        return `
-            top: calc(50% - (${TABLE_SIZES[props.compactMode].ROW_HEIGHT}/2)px);
-          `;
-    }
-  }}
-
-  &&&&& {
-    .bp3-input,
-    .bp3-input:focus {
-      border: none;
-      /*
-        * using !important since underlying
-        * component styles has !important
-      */
-      box-shadow: none !important;
-      padding: 0px 5px 0px 6px;
-      font-size: ${(props) => props.textSize};
-      background: transparent;
-      color: inherit;
-    }
-  }
-
-  &.${FOCUS_CLASS} {
-    ${(props) =>
-      props.isEditableCellValid && `border: 1px solid ${props.accentColor}`}
-  }
-`;
-
-export const DateCell = (props: DateComponentProps) => {
-  const {
-    accentColor,
-    alias,
-    allowCellWrapping,
-    borderRadius,
-    cellBackground,
-    columnType,
-    compactMode,
-    disabledEditIcon,
-    disabledEditIconMessage,
-    firstDayOfWeek,
-    fontStyle,
-    hasUnsavedChanges,
-    horizontalAlignment,
-    inputFormat,
-    isCellDisabled,
-    isCellEditable,
-    isCellEditMode,
-    isCellVisible,
-    isHidden,
-    isNewRow,
-    isRequired,
-    maxDate,
-    minDate,
-    onDateSave,
-    onDateSelectedString,
-    outputFormat,
-    rowIndex,
-    shortcuts,
-    tableWidth,
-    textColor,
-    textSize,
-    timePrecision,
-    toggleCellEditMode,
-    updateNewRowValues,
-    validationErrorMessage,
-    value,
-    verticalAlignment,
-    widgetId,
-  } = props;
-
-  const [hasFocus, setHasFocus] = useState(false);
-  const [isValid, setIsValid] = useState(true);
-  const [showRequiredError, setShowRequiredError] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const valueInISOFormat = useMemo(() => {
-    if (typeof value !== "string") return "";
-
-    if (moment(value, ISO_DATE_FORMAT, true).isValid()) {
-      return value;
-    }
-
-    const valueInSelectedFormat = moment(value, props.outputFormat, true);
-
-    if (valueInSelectedFormat.isValid()) {
-      return valueInSelectedFormat.format(ISO_DATE_FORMAT);
-    }
-
-    return value;
-  }, [value, props.outputFormat]);
-
-  const onDateSelected = (date: string) => {
-    if (isNewRow) {
-      updateNewRowValues(alias, date, date);
-      return;
-    }
-
-    if (isRequired && !date) {
-      setIsValid(false);
-      setShowRequiredError(true);
-      return;
-    }
-    setIsValid(true);
-    setShowRequiredError(false);
-    setHasFocus(false);
-
-    const formattedDate = date ? moment(date).format(inputFormat) : "";
-    onDateSave(rowIndex, alias, formattedDate, onDateSelectedString);
-  };
-
-  const onDateCellEdit = () => {
-    setHasFocus(true);
-    if (isRequired && !value) {
-      setIsValid(false);
-      setShowRequiredError(true);
-    }
-    toggleCellEditMode(true, rowIndex, alias, value);
-  };
-
-  const onPopoverClosed = () => {
-    setHasFocus(false);
-    setIsValid(true);
-    toggleCellEditMode(
-      false,
-      rowIndex,
-      alias,
-      value,
-      "",
-      EditableCellActions.DISCARD,
-    );
-  };
-
-  const onDateOutOfRange = () => {
-    setIsValid(false);
-    setShowRequiredError(false);
-  };
-
-  const onDateInputFocus = () => {
-    if (isNewRow) {
-      setHasFocus(true);
-    }
-  };
-
-  let editor;
-
-  if (isCellEditMode) {
-    editor = (
-      <Wrapper
-        accentColor={accentColor}
-        allowCellWrapping={allowCellWrapping}
-        className={`${hasFocus ? FOCUS_CLASS : ""} t--inlined-cell-editor ${
-          !isValid && "t--inlined-cell-editor-has-error"
-        }`}
-        compactMode={compactMode}
-        isEditableCellValid={isValid}
-        paddedInput
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      >
-        <ErrorTooltip
-          isOpen={showRequiredError && !isValid}
-          message={
-            validationErrorMessage ||
-            createMessage(INPUT_WIDGET_DEFAULT_VALIDATION_ERROR)
-          }
-        >
-          <DateComponent
-            accentColor={accentColor}
-            borderRadius={borderRadius || DEFAULT_BORDER_RADIUS}
-            closeOnSelection
-            compactMode
-            dateFormat={outputFormat}
-            datePickerType="DATE_PICKER"
-            firstDayOfWeek={firstDayOfWeek}
-            isDisabled={!isNewRow}
-            isLoading={false}
-            /*
-             * Reason for using `undefined`
-             * https://github.com/appsmithorg/appsmith/pull/19181#discussion_r1066871100
-             **/
-            isPopoverOpen={isNewRow ? undefined : true}
-            labelText=""
-            maxDate={maxDate || COMPONENT_DEFAULT_VALUES.maxDate}
-            minDate={minDate || COMPONENT_DEFAULT_VALUES.minDate}
-            onDateOutOfRange={onDateOutOfRange}
-            onDateSelected={onDateSelected}
-            onFocus={onDateInputFocus}
-            onPopoverClosed={onPopoverClosed}
-            selectedDate={valueInISOFormat}
-            shortcuts={shortcuts}
-            timePrecision={
-              timePrecision || COMPONENT_DEFAULT_VALUES.timePrecision
-            }
-            widgetId={widgetId}
-          />
-        </ErrorTooltip>
-      </Wrapper>
-    );
-  }
-
-  return (
-    <Container
-      cellBackground={cellBackground}
-      className="t--table-text-cell"
-      isCellEditMode={isCellEditMode}
-      verticalAlignment={verticalAlignment}
-    >
-      <BasicCell
-        accentColor={accentColor}
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        columnType={columnType}
-        compactMode={compactMode}
-        disabledEditIcon={disabledEditIcon}
-        disabledEditIconMessage={disabledEditIconMessage}
-        fontStyle={fontStyle}
-        hasUnsavedChanges={hasUnsavedChanges}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellEditMode={isCellEditMode}
-        isCellEditable={isCellEditable}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        onEdit={onDateCellEdit}
-        ref={contentRef}
-        tableWidth={tableWidth}
-        textColor={textColor}
-        textSize={textSize}
-        value={value}
-        verticalAlignment={verticalAlignment}
-      />
-      {editor}
-    </Container>
-  );
-};
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/EditActionsCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/EditActionsCell.tsx
deleted file mode 100644
index 5e65c9b1621a..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/EditActionsCell.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { memo } from "react";
-import type { EventType } from "constants/AppsmithActionConstants/ActionConstants";
-import type { ButtonColumnActions } from "widgets/wds/WDSTableWidget/constants";
-import { EditableCellActions } from "widgets/wds/WDSTableWidget/constants";
-import { Button } from "./Button";
-import type { BaseCellComponentProps } from "../Constants";
-import { CellWrapper } from "../TableStyledWrappers";
-
-type RenderEditActionsProps = BaseCellComponentProps & {
-  isSelected: boolean;
-  columnActions: ButtonColumnActions[];
-  onCommandClick: (
-    dynamicTrigger: string,
-    onComplete: () => void,
-    eventType: EventType,
-  ) => void;
-  onDiscard: () => void;
-};
-
-function EditActionCellComponent(props: RenderEditActionsProps) {
-  const {
-    allowCellWrapping,
-    cellBackground,
-    columnActions,
-    compactMode,
-    fontStyle,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellVisible,
-    isHidden,
-    isSelected,
-    onCommandClick,
-    onDiscard,
-    textColor,
-    textSize,
-    verticalAlignment,
-  } = props;
-
-  if (!columnActions) {
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        compactMode={compactMode}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      />
-    );
-  }
-
-  return (
-    <CellWrapper
-      allowCellWrapping={allowCellWrapping}
-      cellBackground={cellBackground}
-      className="cell-wrapper"
-      compactMode={compactMode}
-      horizontalAlignment={horizontalAlignment}
-      isCellDisabled={isCellDisabled}
-      isCellVisible={isCellVisible}
-      isHidden={isHidden}
-      verticalAlignment={verticalAlignment}
-    >
-      {columnActions.map((action: ButtonColumnActions) => {
-        return (
-          <Button
-            action={action}
-            isCellVisible={isCellVisible}
-            isDisabled={action.isDisabled}
-            isSelected={isSelected}
-            key={action.id}
-            onCommandClick={(
-              dynamicTrigger: string,
-              onComplete: () => void,
-            ) => {
-              if (action.id === EditableCellActions.DISCARD) {
-                onDiscard();
-              }
-
-              onCommandClick(dynamicTrigger, onComplete, action.eventType);
-            }}
-          />
-        );
-      })}
-    </CellWrapper>
-  );
-}
-export const EditActionCell = memo(EditActionCellComponent);
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/EmptyCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/EmptyCell.tsx
index e68a00278714..c4378ad3808a 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/EmptyCell.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/EmptyCell.tsx
@@ -46,8 +46,7 @@ export const renderEmptyRows = (
       };
       return (
         <div {...rowProps} className="tr" key={index}>
-          {multiRowSelection &&
-            renderBodyCheckBoxCell(false, accentColor, borderRadius)}
+          {multiRowSelection && renderBodyCheckBoxCell(false)}
           {row.cells.map(
             (cell: Cell<Record<string, unknown>>, cellIndex: number) => {
               const cellProps = cell.getCellProps();
@@ -100,8 +99,7 @@ export const renderEmptyRows = (
     return rows.map((row: string, index: number) => {
       return (
         <EmptyRow className="tr" key={index} role="row" style={style}>
-          {multiRowSelection &&
-            renderBodyCheckBoxCell(false, accentColor, borderRadius)}
+          {multiRowSelection && renderBodyCheckBoxCell(false)}
           {tableColumns.map((column: any, colIndex: number) => {
             const distanceFromEdge: {
               left?: number;
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/HeaderCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/HeaderCell.tsx
index 1b6ef81fea67..eaaf8225e5c7 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/HeaderCell.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/HeaderCell.tsx
@@ -189,7 +189,11 @@ const HeaderCellComponent = (props: HeaderProps) => {
           </Text>
         </Flex>
       </div>
-      <Flex alignItems="center" gap="spacing-1">
+      <Flex
+        alignItems="center"
+        gap="spacing-1"
+        style={{ pointerEvents: "none" }}
+      >
         {props.isAscOrder !== undefined && (
           <Icon
             name={props.isAscOrder ? "arrow-up" : "arrow-down"}
@@ -206,11 +210,6 @@ const HeaderCellComponent = (props: HeaderProps) => {
           <MenuList>
             <Item key="sort-asc">Sort column ascending</Item>
             <Item key="sort-desc">Sort column descending</Item>
-            <Item isSeparator key="separator">
-              Separator
-            </Item>
-            <Item key="freeze-left">Freeze column left</Item>
-            <Item key="freeze-right">Freeze column right</Item>
           </MenuList>
         </Menu>
       </Flex>
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/IconButtonCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/IconButtonCell.tsx
deleted file mode 100644
index 426ecdce670d..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/IconButtonCell.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { useState } from "react";
-
-import type { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
-import type { IconName } from "@blueprintjs/icons";
-import type { ButtonVariant } from "components/constants";
-import type { BaseCellComponentProps } from "../Constants";
-import { CellWrapper, IconButtonWrapper } from "../TableStyledWrappers";
-import { StyledButton } from "widgets/IconButtonWidget/component";
-
-interface RenderIconButtonProps extends BaseCellComponentProps {
-  isSelected: boolean;
-  columnActions?: ColumnAction[];
-  iconName?: IconName;
-  buttonVariant: ButtonVariant;
-  buttonColor: string;
-  borderRadius: string;
-  boxShadow: string;
-  onCommandClick: (dynamicTrigger: string, onComplete: () => void) => void;
-  disabled: boolean;
-}
-
-function IconButton(props: {
-  iconName?: IconName;
-  onCommandClick: (dynamicTrigger: string, onComplete: () => void) => void;
-  isSelected: boolean;
-  action: ColumnAction;
-  buttonColor: string;
-  buttonVariant: ButtonVariant;
-  borderRadius: string;
-  boxShadow: string;
-  disabled: boolean;
-  compactMode?: string;
-}): JSX.Element {
-  const [loading, setLoading] = useState(false);
-  const onComplete = () => {
-    setLoading(false);
-  };
-  const handlePropagation = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => {
-    if (props.isSelected) {
-      e.stopPropagation();
-    }
-  };
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    if (props.action.dynamicTrigger) {
-      setLoading(true);
-      props.onCommandClick(props.action.dynamicTrigger, onComplete);
-    }
-  };
-  return (
-    <IconButtonWrapper disabled={props.disabled} onClick={handlePropagation}>
-      <StyledButton
-        borderRadius={props.borderRadius}
-        boxShadow={props.boxShadow}
-        buttonColor={props.buttonColor}
-        buttonVariant={props.buttonVariant}
-        compactMode={props.compactMode}
-        disabled={props.disabled}
-        /**
-         * We pass hasOnClickAction as true because Icon buttons in tables are always used as button
-         * and not Icons (which do not have hover state).
-         * Hene we pass hasOnClickAction true to enable BG color change on hover.
-         **/
-        hasOnClickAction
-        icon={props.iconName}
-        loading={loading}
-        onClick={handleClick}
-      />
-    </IconButtonWrapper>
-  );
-}
-
-export function IconButtonCell(props: RenderIconButtonProps) {
-  const {
-    allowCellWrapping,
-    borderRadius,
-    boxShadow,
-    buttonColor,
-    buttonVariant,
-    cellBackground,
-    columnActions,
-    compactMode,
-    disabled,
-    fontStyle,
-    horizontalAlignment,
-    iconName,
-    isCellDisabled,
-    isCellVisible,
-    isHidden,
-    isSelected,
-    onCommandClick,
-    textColor,
-    textSize,
-    verticalAlignment,
-  } = props;
-
-  if (!columnActions)
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isHidden={isHidden}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      />
-    );
-
-  return (
-    <CellWrapper
-      allowCellWrapping={allowCellWrapping}
-      cellBackground={cellBackground}
-      compactMode={compactMode}
-      fontStyle={fontStyle}
-      horizontalAlignment={horizontalAlignment}
-      isCellDisabled={isCellDisabled}
-      isCellVisible={isCellVisible}
-      isHidden={isHidden}
-      textColor={textColor}
-      textSize={textSize}
-      verticalAlignment={verticalAlignment}
-    >
-      {columnActions.map((action: ColumnAction, index: number) => {
-        return (
-          <IconButton
-            action={action}
-            borderRadius={borderRadius}
-            boxShadow={boxShadow}
-            buttonColor={buttonColor}
-            buttonVariant={buttonVariant}
-            compactMode={compactMode}
-            disabled={disabled}
-            iconName={iconName}
-            isSelected={isSelected}
-            key={index}
-            onCommandClick={onCommandClick}
-          />
-        );
-      })}
-    </CellWrapper>
-  );
-}
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ImageCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ImageCell.tsx
deleted file mode 100644
index 66ce26513a42..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ImageCell.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React from "react";
-import { isString, noop } from "lodash";
-
-import { CellWrapper } from "../TableStyledWrappers";
-import type { BaseCellComponentProps, ImageSize } from "../Constants";
-
-/*
- * Function to split the CSV of image url's
- */
-function getImageArray(value: unknown) {
-  // better regex: /(?<!base64),/g ; can't use due to safari incompatibility
-  const imageSplitRegex = /[^(base64)],/g;
-
-  return (
-    (value as string)
-      .toString()
-      // imageSplitRegex matched "," and char before it, so add space before ","
-      .replace(imageSplitRegex, (match) =>
-        match.length > 1 ? `${match.charAt(0)} ,` : " ,",
-      )
-      .split(imageSplitRegex)
-  );
-}
-
-type renderImageType = BaseCellComponentProps & {
-  value: unknown;
-  onClick?: () => void;
-  isSelected?: boolean;
-  imageSize?: ImageSize;
-};
-
-export function ImageCell(props: renderImageType) {
-  const {
-    allowCellWrapping,
-    cellBackground,
-    compactMode,
-    fontStyle,
-    horizontalAlignment,
-    imageSize,
-    isCellDisabled,
-    isCellVisible,
-    isHidden,
-    onClick = noop,
-    textColor,
-    textSize,
-    value,
-    verticalAlignment,
-  } = props;
-
-  if (!value) {
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        compactMode={compactMode}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        imageSize={imageSize}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      />
-    );
-  } else if (!isString(value)) {
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        compactMode={compactMode}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        imageSize={imageSize}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      >
-        <div>Invalid Image </div>
-      </CellWrapper>
-    );
-  }
-
-  const imageUrlRegex =
-    /(http(s?):)([/|.|\w|\s|-])*\.(?:jpeg|jpg|gif|png)??(?:&?[^=&]*=[^=&]*)*/;
-  const base64ImageRegex = /^data:image\/.*;base64/;
-  return (
-    <CellWrapper
-      allowCellWrapping={allowCellWrapping}
-      cellBackground={cellBackground}
-      compactMode={compactMode}
-      fontStyle={fontStyle}
-      horizontalAlignment={horizontalAlignment}
-      imageSize={imageSize}
-      isCellDisabled={isCellDisabled}
-      isCellVisible={isCellVisible}
-      isHidden={isHidden}
-      textColor={textColor}
-      textSize={textSize}
-      verticalAlignment={verticalAlignment}
-    >
-      {getImageArray(value).map((item: string, index: number) => {
-        if (imageUrlRegex.test(item) || base64ImageRegex.test(item)) {
-          return (
-            <div
-              className="image-cell-wrapper"
-              key={index}
-              onClick={(e) => {
-                e.stopPropagation();
-                onClick();
-              }}
-            >
-              <img className="image-cell" src={item} />
-            </div>
-          );
-        } else {
-          return <div key={index}>Invalid Image</div>;
-        }
-      })}
-    </CellWrapper>
-  );
-}
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/InlineCellEditor.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/InlineCellEditor.tsx
deleted file mode 100644
index e85305009588..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/InlineCellEditor.tsx
+++ /dev/null
@@ -1,304 +0,0 @@
-import { Colors } from "constants/Colors";
-import { isNil } from "lodash";
-import React, {
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import styled from "styled-components";
-import type { InputHTMLType } from "widgets/BaseInputWidget/component";
-import BaseInputComponent from "widgets/BaseInputWidget/component";
-import { InputTypes } from "widgets/BaseInputWidget/constants";
-import type { EditableCell } from "widgets/wds/WDSTableWidget/constants";
-import type { VerticalAlignment } from "../Constants";
-import { EDITABLE_CELL_PADDING_OFFSET, TABLE_SIZES } from "../Constants";
-import {
-  getLocaleDecimalSeperator,
-  getLocaleThousandSeparator,
-} from "widgets/WidgetUtils";
-import { limitDecimalValue } from "widgets/CurrencyInputWidget/component/utilities";
-import * as Sentry from "@sentry/react";
-import { getLocale } from "utils/helpers";
-
-const FOCUS_CLASS = "has-focus";
-
-const Wrapper = styled.div<{
-  accentColor: string;
-  compactMode: string;
-  allowCellWrapping?: boolean;
-  verticalAlignment?: VerticalAlignment;
-  textSize?: string;
-  isEditableCellValid: boolean;
-  paddedInput: boolean;
-}>`
-  padding: 1px;
-  border: 1px solid
-    ${(props) => (!props.isEditableCellValid ? Colors.DANGER_SOLID : "#fff")};
-  background: #fff;
-  position: absolute;
-  width: ${(props) =>
-    props.paddedInput
-      ? `calc(100% - ${EDITABLE_CELL_PADDING_OFFSET}px)`
-      : "100%"};
-  left: 50%;
-  transform: translate(-50%, 0);
-  overflow: hidden;
-  border-radius: 3px;
-  height: ${(props) => {
-    if (props.allowCellWrapping) {
-      return props.paddedInput
-        ? `calc(100% - ${EDITABLE_CELL_PADDING_OFFSET}px)`
-        : "100%";
-    } else {
-      return props.paddedInput
-        ? `${
-            TABLE_SIZES[props.compactMode].ROW_HEIGHT -
-            EDITABLE_CELL_PADDING_OFFSET
-          }px`
-        : `${TABLE_SIZES[props.compactMode].ROW_HEIGHT}px`;
-    }
-  }};
-  ${(props) => {
-    switch (props.verticalAlignment) {
-      case "TOP":
-        return `top: 0;`;
-      case "BOTTOM":
-        return `bottom: 0;`;
-      case "CENTER":
-        return `
-          top: calc(50% - (${TABLE_SIZES[props.compactMode].ROW_HEIGHT}/2)px);
-        `;
-    }
-  }}
-
-  &&&&& {
-    .bp3-input,
-    .bp3-input:focus {
-      border: none;
-      /*
-       * using !important since underlying
-       * component styles has !important
-       */
-      box-shadow: none !important;
-      padding: 0px 5px 0px 6px;
-      min-height: 34px;
-      font-size: ${(props) => props.textSize};
-    }
-
-    .currency-change-dropdown-trigger {
-      border: none;
-      height: ${(props) =>
-        TABLE_SIZES[props.compactMode].EDITABLE_CELL_HEIGHT}px;
-      padding: 0 0 0 5px;
-      margin-right: 0;
-    }
-
-    .bp3-button-group.bp3-vertical {
-      display: none;
-    }
-
-    textarea.bp3-input {
-      &,
-      &:focus {
-        line-height: 28px;
-        padding: ${(props) =>
-            TABLE_SIZES[props.compactMode].VERTICAL_EDITOR_PADDING}px
-          6px 0px 6px;
-      }
-    }
-
-    .text-input-wrapper {
-      height: calc(100% + 4px);
-      border: none;
-      box-shadow: none !important;
-    }
-  }
-
-  &.${FOCUS_CLASS} {
-    ${(props) =>
-      props.isEditableCellValid && `border: 1px solid ${props.accentColor}`}
-  }
-`;
-
-function convertToNumber(inputValue: string) {
-  inputValue = inputValue.replace(
-    new RegExp(`[${getLocaleDecimalSeperator()}]`),
-    ".",
-  );
-
-  const parsedValue = Number(inputValue);
-
-  if (isNaN(parsedValue) || inputValue.trim() === "" || isNil(inputValue)) {
-    return null;
-  } else if (Number.isFinite(parsedValue)) {
-    return parsedValue;
-  } else {
-    return null;
-  }
-}
-
-interface InlineEditorPropsType {
-  accentColor: string;
-  compactMode: string;
-  inputType: InputTypes;
-  inputHTMLType: InputHTMLType;
-  multiline: boolean;
-  onChange: (value: EditableCell["value"], inputValue: string) => void;
-  onDiscard: () => void;
-  onSave: () => void;
-  value: any;
-  allowCellWrapping?: boolean;
-  verticalAlignment?: VerticalAlignment;
-  textSize?: string;
-  isEditableCellValid: boolean;
-  validationErrorMessage: string;
-  widgetId: string;
-  paddedInput: boolean;
-  autoFocus: boolean;
-  additionalProps: Record<string, unknown>;
-}
-
-export function InlineCellEditor({
-  accentColor,
-  additionalProps = {},
-  allowCellWrapping,
-  autoFocus,
-  compactMode,
-  inputHTMLType,
-  inputType = InputTypes.TEXT,
-  isEditableCellValid,
-  multiline,
-  onChange,
-  onDiscard,
-  onSave,
-  textSize,
-  validationErrorMessage,
-  value,
-  verticalAlignment,
-  widgetId,
-}: InlineEditorPropsType) {
-  const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
-  const [hasFocus, setHasFocus] = useState(false);
-  const [cursorPos, setCursorPos] = useState(value.length);
-
-  const onFocusChange = useCallback(
-    (focus: boolean) => {
-      !focus && onSave();
-      setHasFocus(focus);
-    },
-    [onSave],
-  );
-
-  const onKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { key } = event;
-
-      switch (key) {
-        case "Escape":
-          onDiscard();
-          break;
-        case "Enter":
-          if (!event.shiftKey) {
-            onSave();
-            event.preventDefault();
-          }
-          break;
-      }
-    },
-    [onDiscard, onSave],
-  );
-
-  const onTextChange = useCallback(
-    (inputValue: string) => {
-      setCursorPos(inputRef.current?.selectionStart);
-
-      let value: EditableCell["value"] = inputValue;
-
-      if (inputType === InputTypes.NUMBER) {
-        value = convertToNumber(inputValue);
-      } else if (inputType === InputTypes.CURRENCY) {
-        const decimalSeperator = getLocaleDecimalSeperator();
-
-        try {
-          if (inputValue && inputValue.includes(decimalSeperator)) {
-            inputValue = limitDecimalValue(
-              additionalProps.decimals as number,
-              inputValue,
-            );
-          }
-
-          value = convertToNumber(inputValue);
-        } catch (e) {
-          Sentry.captureException(e);
-        }
-      }
-
-      onChange(value, inputValue);
-    },
-    [setCursorPos, onChange, inputType],
-  );
-
-  useLayoutEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.selectionStart = cursorPos;
-
-      if (cursorPos < value.length) {
-        inputRef.current.selectionEnd = cursorPos;
-      }
-    }
-  }, [multiline]);
-
-  const parsedValue = useMemo(() => {
-    if (inputType === InputTypes.CURRENCY && typeof value === "number") {
-      return Intl.NumberFormat(getLocale(), {
-        style: "decimal",
-        minimumFractionDigits: additionalProps.decimals as number,
-        maximumFractionDigits: additionalProps.decimals as number,
-      })
-        .format(value)
-        .replaceAll(getLocaleThousandSeparator(), "");
-    } else {
-      return value;
-    }
-  }, [value]);
-
-  return (
-    <Wrapper
-      accentColor={accentColor}
-      allowCellWrapping={allowCellWrapping}
-      className={`${hasFocus ? FOCUS_CLASS : ""} t--inlined-cell-editor ${
-        !isEditableCellValid && "t--inlined-cell-editor-has-error"
-      }`}
-      compactMode={compactMode}
-      isEditableCellValid={isEditableCellValid}
-      paddedInput
-      textSize={textSize}
-      verticalAlignment={verticalAlignment}
-    >
-      <BaseInputComponent
-        accentColor={accentColor}
-        autoFocus={hasFocus || autoFocus}
-        compactMode
-        disableNewLineOnPressEnterKey={false}
-        errorMessage={validationErrorMessage}
-        errorTooltipBoundary={`#table${widgetId} .tableWrap`}
-        inputHTMLType={inputHTMLType}
-        inputRef={inputRef}
-        inputType={inputType}
-        isInvalid={hasFocus && !isEditableCellValid}
-        isLoading={false}
-        label=""
-        multiline={multiline}
-        onFocusChange={onFocusChange}
-        onKeyDown={onKeyDown}
-        onValueChange={onTextChange}
-        showError
-        value={parsedValue}
-        widgetId=""
-        {...additionalProps}
-      />
-    </Wrapper>
-  );
-}
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/MenuButtonCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/MenuButtonCell.tsx
deleted file mode 100644
index 9f521301c02a..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/MenuButtonCell.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from "react";
-import type { IconName } from "@blueprintjs/icons";
-import type { Alignment } from "@blueprintjs/core";
-
-import type { BaseCellComponentProps } from "../Constants";
-import type { ButtonVariant } from "components/constants";
-import { CellWrapper } from "../TableStyledWrappers";
-import type { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
-import MenuButtonTableComponent from "./menuButtonTableComponent";
-import type {
-  ConfigureMenuItems,
-  MenuItem,
-  MenuItems,
-  MenuItemsSource,
-} from "widgets/MenuButtonWidget/constants";
-
-interface MenuButtonProps extends Omit<RenderMenuButtonProps, "columnActions"> {
-  action?: ColumnAction;
-}
-
-function MenuButton({
-  borderRadius,
-  boxShadow,
-  compactMode,
-  configureMenuItems,
-  getVisibleItems,
-  iconAlign,
-  iconName,
-  isCompact,
-  isDisabled,
-  isSelected,
-  label,
-  menuColor,
-  menuItems,
-  menuItemsSource,
-  menuVariant,
-  onCommandClick,
-  rowIndex,
-  sourceData,
-}: MenuButtonProps): JSX.Element {
-  const handlePropagation = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => {
-    if (isSelected) {
-      e.stopPropagation();
-    }
-  };
-  const onItemClicked = (onClick?: string, index?: number) => {
-    if (onClick) {
-      onCommandClick(onClick, index);
-    }
-  };
-
-  return (
-    <div onClick={handlePropagation}>
-      <MenuButtonTableComponent
-        borderRadius={borderRadius}
-        boxShadow={boxShadow}
-        compactMode={compactMode}
-        configureMenuItems={configureMenuItems}
-        getVisibleItems={getVisibleItems}
-        iconAlign={iconAlign}
-        iconName={iconName}
-        isCompact={isCompact}
-        isDisabled={isDisabled}
-        label={label}
-        menuColor={menuColor}
-        menuItems={{ ...menuItems }}
-        menuItemsSource={menuItemsSource}
-        menuVariant={menuVariant}
-        onItemClicked={onItemClicked}
-        rowIndex={rowIndex}
-        sourceData={sourceData}
-      />
-    </div>
-  );
-}
-
-export interface RenderMenuButtonProps extends BaseCellComponentProps {
-  isSelected: boolean;
-  label: string;
-  isDisabled: boolean;
-  onCommandClick: (
-    dynamicTrigger: string,
-    index?: number,
-    onComplete?: () => void,
-  ) => void;
-  isCompact?: boolean;
-  menuItems: MenuItems;
-  menuVariant?: ButtonVariant;
-  menuColor?: string;
-  borderRadius?: string;
-  boxShadow?: string;
-  iconName?: IconName;
-  iconAlign?: Alignment;
-  rowIndex: number;
-  getVisibleItems: (rowIndex: number) => Array<MenuItem>;
-  menuItemsSource: MenuItemsSource;
-  configureMenuItems: ConfigureMenuItems;
-  sourceData?: Array<Record<string, unknown>>;
-}
-
-export function MenuButtonCell(props: RenderMenuButtonProps) {
-  const {
-    allowCellWrapping,
-    cellBackground,
-    compactMode,
-    fontStyle,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellVisible,
-    isHidden,
-    textColor,
-    textSize,
-    verticalAlignment,
-  } = props;
-
-  return (
-    <CellWrapper
-      allowCellWrapping={allowCellWrapping}
-      cellBackground={cellBackground}
-      compactMode={compactMode}
-      fontStyle={fontStyle}
-      horizontalAlignment={horizontalAlignment}
-      isCellDisabled={isCellDisabled}
-      isCellVisible={isCellVisible}
-      isHidden={isHidden}
-      textColor={textColor}
-      textSize={textSize}
-      verticalAlignment={verticalAlignment}
-    >
-      <MenuButton {...props} iconName={props.iconName} />
-    </CellWrapper>
-  );
-}
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.test.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.test.tsx
deleted file mode 100644
index 533b1070bad0..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.test.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { getCellText } from "./PlainTextCell";
-import { ColumnTypes } from "widgets/wds/WDSTableWidget/constants";
-
-describe("DefaultRendere - ", () => {
-  describe("getCellText", () => {
-    it("should test with different values", () => {
-      [
-        {
-          value: "#1",
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.TEXT,
-          expected: "#1",
-        },
-        {
-          value: 1,
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.TEXT,
-          expected: "1",
-        },
-        {
-          value: true,
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.TEXT,
-          expected: "true",
-        },
-        {
-          value: undefined,
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.TEXT,
-          expected: "",
-        },
-        {
-          value: null,
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.TEXT,
-          expected: "",
-        },
-        {
-          value: NaN,
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.TEXT,
-          expected: "",
-        },
-        {
-          value: "www.appsmith.com",
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.URL,
-          expected: "test",
-        },
-        {
-          value: { test: 1 },
-          cellProperties: { displayText: "test" },
-          columnType: ColumnTypes.TEXT,
-          expected: "[object Object]",
-        },
-      ].forEach((testValue) => {
-        expect(
-          getCellText(
-            testValue.value,
-            testValue.columnType,
-            testValue.cellProperties.displayText,
-          ),
-        ).toEqual(testValue.expected);
-      });
-    });
-  });
-});
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.tsx
index 75d6cd2254ac..b8a5749528b8 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/PlainTextCell.tsx
@@ -1,326 +1,35 @@
-import type { RefObject } from "react";
-import React, { memo, useEffect, useMemo, useRef, useState } from "react";
-import { isNumber, isNil } from "lodash";
+import React, { memo } from "react";
+import type { COLORS } from "@design-system/widgets";
+import { Text } from "@design-system/widgets";
 
-import type { BaseCellComponentProps, VerticalAlignment } from "../Constants";
-import { ALIGN_ITEMS } from "../Constants";
-import type { EditableCell } from "widgets/wds/WDSTableWidget/constants";
-import {
-  ColumnTypes,
-  EditableCellActions,
-} from "widgets/wds/WDSTableWidget/constants";
-import { InputTypes } from "widgets/BaseInputWidget/constants";
-import { CELL_WRAPPER_LINE_HEIGHT } from "../TableStyledWrappers";
-import { BasicCell } from "./BasicCell";
-import { InlineCellEditor } from "./InlineCellEditor";
-import styled from "styled-components";
-import fastdom from "fastdom";
-import CurrencyTypeDropdown, {
-  CurrencyDropdownOptions,
-} from "widgets/CurrencyInputWidget/component/CurrencyCodeDropdown";
-import { getLocale } from "utils/helpers";
-import * as Sentry from "@sentry/react";
-import { getLocaleThousandSeparator } from "widgets/WidgetUtils";
+import type { BaseCellComponentProps } from "../Constants";
 
-const Container = styled.div<{
-  isCellEditMode?: boolean;
-  verticalAlignment?: VerticalAlignment;
-  cellBackground?: string;
-}>`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: ${(props) =>
-    props.verticalAlignment && ALIGN_ITEMS[props.verticalAlignment]};
-`;
-
-export type RenderDefaultPropsType = BaseCellComponentProps & {
-  accentColor: string;
+export interface PlainTextCellProps {
   value: any;
-  columnType: string;
-  tableWidth: number;
-  isCellEditable: boolean;
-  isCellEditMode?: boolean;
-  onCellTextChange: (
-    value: EditableCell["value"],
-    inputValue: string,
-    alias: string,
-  ) => void;
-  toggleCellEditMode: (
-    enable: boolean,
-    rowIndex: number,
-    alias: string,
-    value: string | number,
-    onSubmit?: string,
-    action?: EditableCellActions,
-  ) => void;
-  hasUnsavedChanges?: boolean;
-  displayText?: string;
-  disabledEditIcon: boolean;
-  isEditableCellValid: boolean;
-  validationErrorMessage: string;
-  widgetId: string;
-  disabledEditIconMessage: string;
-  isNewRow: boolean;
-};
-
-export interface RenderCurrencyPropsType {
-  currencyCode?: string;
-  decimals?: number;
-  notation?: Intl.NumberFormatOptions["notation"];
-  thousandSeparator?: boolean;
-}
-
-interface editPropertyType {
-  alias: string;
-  onSubmitString: string;
-  rowIndex: number;
+  cellColor?: "default" | keyof typeof COLORS;
+  isBold?: boolean;
+  isUnderline?: boolean;
+  isItalic?: boolean;
 }
 
-export function getCellText(
-  value: unknown,
-  columnType: string,
-  displayText?: string,
-) {
-  let text;
+function PlainTextCell(props: PlainTextCellProps & BaseCellComponentProps) {
+  const { allowCellWrapping, cellColor, isBold, isItalic, value } = props;
+  const lineClamp = allowCellWrapping ? undefined : 1;
 
-  if (value && columnType === ColumnTypes.URL && displayText) {
-    text = displayText;
-  } else if (columnType === ColumnTypes.CURRENCY) {
-    text = value ?? "";
-  } else if (!isNil(value) && (!isNumber(value) || !isNaN(value))) {
-    text = (value as string).toString();
-  } else {
-    text = "";
-  }
-
-  return text;
-}
-
-function getContentHeight(ref: RefObject<HTMLDivElement>) {
   return (
-    !!ref.current?.offsetHeight &&
-    ref.current?.offsetHeight / CELL_WRAPPER_LINE_HEIGHT > 1
-  );
-}
-
-function PlainTextCell(
-  props: RenderDefaultPropsType & editPropertyType & RenderCurrencyPropsType,
-) {
-  const {
-    accentColor,
-    alias,
-    allowCellWrapping,
-    cellBackground,
-    columnType,
-    compactMode,
-    currencyCode,
-    decimals,
-    disabledEditIcon,
-    disabledEditIconMessage,
-    displayText,
-    fontStyle,
-    hasUnsavedChanges,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellEditable,
-    isCellEditMode,
-    isCellVisible,
-    isEditableCellValid,
-    isHidden,
-    isNewRow,
-    notation,
-    onCellTextChange,
-    onSubmitString,
-    rowIndex,
-    tableWidth,
-    textColor,
-    textSize,
-    thousandSeparator,
-    toggleCellEditMode,
-    validationErrorMessage,
-    verticalAlignment,
-    widgetId,
-  } = props;
-
-  let value = props.value;
-
-  const editEvents = useMemo(
-    () => ({
-      onChange: (value: EditableCell["value"], inputValue: string) =>
-        onCellTextChange(value, inputValue, alias),
-      onDiscard: () =>
-        toggleCellEditMode(
-          false,
-          rowIndex,
-          alias,
-          value,
-          "",
-          EditableCellActions.DISCARD,
-        ),
-      onEdit: () => toggleCellEditMode(true, rowIndex, alias, value),
-      onSave: () =>
-        toggleCellEditMode(
-          false,
-          rowIndex,
-          alias,
-          value,
-          onSubmitString,
-          EditableCellActions.SAVE,
-        ),
-    }),
-    [
-      onCellTextChange,
-      toggleCellEditMode,
-      value,
-      rowIndex,
-      alias,
-      onSubmitString,
-    ],
-  );
-
-  value = getCellText(value, columnType, displayText);
-
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  let editor;
-
-  const [isMultiline, setIsMultiline] = useState(false);
-
-  useEffect(() => {
-    if (isCellEditMode) {
-      fastdom.measure(() => {
-        setIsMultiline(getContentHeight(contentRef));
-      });
-    }
-  }, [value, isCellEditMode]);
-
-  const currency = useMemo(
-    () => CurrencyDropdownOptions.find((d) => d.value === currencyCode),
-    [currencyCode],
-  );
-
-  const formattedValue = useMemo(() => {
-    if (columnType === ColumnTypes.CURRENCY) {
-      try {
-        const floatVal = parseFloat(value);
-
-        if (isNaN(floatVal)) {
-          return value;
-        } else {
-          let formattedValue = Intl.NumberFormat(getLocale(), {
-            style: "decimal",
-            minimumFractionDigits: decimals,
-            maximumFractionDigits: decimals,
-            notation: notation,
-          }).format(floatVal);
-
-          if (!thousandSeparator) {
-            formattedValue = formattedValue.replaceAll(
-              getLocaleThousandSeparator(),
-              "",
-            );
-          }
-
-          return currency?.id + " " + formattedValue;
-        }
-      } catch (e) {
-        Sentry.captureException(e);
-        return value;
-      }
-    } else {
-      return value;
-    }
-  }, [value, decimals, currencyCode, notation, thousandSeparator, columnType]);
-
-  if (isCellEditMode) {
-    const [inputType, inputHTMLType]: [InputTypes, "TEXT" | "NUMBER"] = (() => {
-      switch (columnType) {
-        case ColumnTypes.NUMBER:
-          return [InputTypes.NUMBER, "NUMBER"];
-        case ColumnTypes.CURRENCY:
-          return [InputTypes.CURRENCY, "NUMBER"];
-        default:
-          return [InputTypes.TEXT, "TEXT"];
-      }
-    })();
-
-    const additionalProps: Record<string, unknown> = {};
-
-    if (inputType === InputTypes.CURRENCY) {
-      additionalProps.inputHTMLType = "NUMBER";
-      additionalProps.leftIcon = (
-        <CurrencyTypeDropdown
-          accentColor={accentColor}
-          allowCurrencyChange={false}
-          options={CurrencyDropdownOptions}
-          selected={currencyCode}
-          widgetId={widgetId}
-        />
-      );
-      additionalProps.shouldUseLocale = true;
-      additionalProps.decimals = decimals;
-    }
-
-    editor = (
-      <InlineCellEditor
-        accentColor={accentColor}
-        additionalProps={additionalProps}
-        allowCellWrapping={allowCellWrapping}
-        autoFocus={!isNewRow}
-        compactMode={compactMode}
-        inputHTMLType={inputHTMLType}
-        inputType={inputType}
-        isEditableCellValid={isEditableCellValid}
-        multiline={isMultiline}
-        onChange={editEvents.onChange}
-        onDiscard={editEvents.onDiscard}
-        onSave={editEvents.onSave}
-        paddedInput={isNewRow}
-        textSize={textSize}
-        validationErrorMessage={validationErrorMessage}
-        value={value}
-        verticalAlignment={verticalAlignment}
-        widgetId={widgetId}
-      />
-    );
-  }
-
-  return (
-    <Container
-      cellBackground={cellBackground}
-      className="t--table-text-cell"
-      isCellEditMode={isCellEditMode}
-      verticalAlignment={verticalAlignment}
+    <Text
+      color={cellColor === "default" ? undefined : cellColor}
+      isBold={isBold}
+      isItalic={isItalic}
+      lineClamp={lineClamp}
+      title={value}
+      variant="body"
     >
-      <BasicCell
-        accentColor={accentColor}
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        columnType={columnType}
-        compactMode={compactMode}
-        disabledEditIcon={disabledEditIcon}
-        disabledEditIconMessage={disabledEditIconMessage}
-        fontStyle={fontStyle}
-        hasUnsavedChanges={hasUnsavedChanges}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellEditMode={isCellEditMode}
-        isCellEditable={isCellEditable}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        onEdit={editEvents.onEdit}
-        ref={contentRef}
-        tableWidth={tableWidth}
-        textColor={textColor}
-        textSize={textSize}
-        url={columnType === ColumnTypes.URL ? props.value : null}
-        value={formattedValue}
-        verticalAlignment={verticalAlignment}
-      />
-      {editor}
-    </Container>
+      {value}
+    </Text>
   );
 }
 
-export default memo(PlainTextCell);
+const MemoizedPlainText = memo(PlainTextCell);
+
+export { MemoizedPlainText as PlainTextCell };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SelectCell.tsx
deleted file mode 100644
index 6c2e74224559..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SelectCell.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import React from "react";
-import SelectComponent from "widgets/SelectWidget/component";
-import styled from "styled-components";
-import type { DropdownOption } from "widgets/SelectWidget/constants";
-import type { BaseCellComponentProps } from "../Constants";
-import { EDITABLE_CELL_PADDING_OFFSET, TABLE_SIZES } from "../Constants";
-import { CellWrapper } from "../TableStyledWrappers";
-import type { EditableCellActions } from "widgets/wds/WDSTableWidget/constants";
-import { BasicCell } from "./BasicCell";
-import { useCallback } from "react";
-
-const StyledSelectComponent = styled(SelectComponent)<{
-  accentColor: string;
-  height: number;
-  isNewRow: boolean;
-}>`
-  &&& {
-    width: ${(props) =>
-      props.isNewRow
-        ? `calc(100% - ${EDITABLE_CELL_PADDING_OFFSET}px)`
-        : "100%"};
-
-    .bp3-control-group {
-      height: ${(props) => {
-        return props.isNewRow
-          ? `${props.height - EDITABLE_CELL_PADDING_OFFSET}px`
-          : `${props.height}px`;
-      }};
-
-      & > :only-child {
-        border-radius: 0;
-      }
-
-      & button.bp3-button {
-        border-color: #fff;
-        padding: 0 9px;
-        min-height: ${(props) => {
-          return props.isNewRow
-            ? `${props.height - EDITABLE_CELL_PADDING_OFFSET}px`
-            : `${props.height}px`;
-        }};
-        border-radius: 3px;
-      }
-    }
-
-    .bp3-popover-target > div {
-      width: 100%;
-    }
-  }
-`;
-
-const StyledCellWrapper = styled(CellWrapper)`
-  padding: 0px;
-  justify-content: center;
-`;
-
-type SelectProps = BaseCellComponentProps & {
-  alias: string;
-  accentColor: string;
-  autoOpen: boolean;
-  columnType: string;
-  borderRadius: string;
-  options?: DropdownOption[];
-  onFilterChange: (
-    text: string,
-    rowIndex: number,
-    serverSideFiltering: boolean,
-    alias: string,
-    action?: string,
-  ) => void;
-  onItemSelect: (
-    value: string | number,
-    rowIndex: number,
-    column: string,
-    action?: string,
-  ) => void;
-  value: string;
-  width: number;
-  isEditable: boolean;
-  tableWidth: number;
-  isCellEditable?: boolean;
-  isCellEditMode?: boolean;
-  disabledEditIcon: boolean;
-  hasUnsavedChanges?: boolean;
-  toggleCellEditMode: (
-    enable: boolean,
-    rowIndex: number,
-    alias: string,
-    value: string | number,
-    onSubmit?: string,
-    action?: EditableCellActions,
-  ) => void;
-  rowIndex: number;
-  isFilterable?: boolean;
-  serverSideFiltering?: boolean;
-  filterText?: string;
-  placeholderText?: string;
-  resetFilterTextOnClose?: boolean;
-  onOptionSelectActionString?: string;
-  onFilterChangeActionString?: string;
-  disabledEditIconMessage: string;
-  isNewRow: boolean;
-};
-
-/*
- * TODO: Need a widgetId for each select cell.
- */
-export const SelectCell = (props: SelectProps) => {
-  const {
-    accentColor,
-    alias,
-    allowCellWrapping,
-    autoOpen,
-    borderRadius,
-    cellBackground,
-    columnType,
-    compactMode,
-    disabledEditIcon,
-    disabledEditIconMessage,
-    filterText,
-    fontStyle,
-    hasUnsavedChanges,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellEditable,
-    isCellEditMode,
-    isCellVisible,
-    isEditable,
-    isFilterable = false,
-    isHidden,
-    isNewRow,
-    onFilterChange,
-    onFilterChangeActionString,
-    onItemSelect,
-    onOptionSelectActionString,
-    options = [],
-    placeholderText,
-    resetFilterTextOnClose,
-    rowIndex,
-    serverSideFiltering = false,
-    tableWidth,
-    textColor,
-    textSize,
-    toggleCellEditMode,
-    value,
-    verticalAlignment,
-    width,
-  } = props;
-  const onSelect = useCallback(
-    (option: DropdownOption) => {
-      onItemSelect(
-        option.value || "",
-        rowIndex,
-        alias,
-        onOptionSelectActionString,
-      );
-    },
-    [onItemSelect, rowIndex, alias, onOptionSelectActionString],
-  );
-
-  const onFilter = useCallback(
-    (text: string) => {
-      onFilterChange(
-        text,
-        rowIndex,
-        serverSideFiltering,
-        alias,
-        onFilterChangeActionString,
-      );
-    },
-    [
-      onFilterChange,
-      rowIndex,
-      serverSideFiltering,
-      onFilterChangeActionString,
-      alias,
-    ],
-  );
-
-  const onClose = useCallback(
-    () => toggleCellEditMode(false, rowIndex, alias, value),
-    [toggleCellEditMode, rowIndex, alias, value],
-  );
-
-  const onClick = useCallback((e) => e.stopPropagation(), []);
-
-  const selectedIndex = (Array.isArray(options) ? options : [])
-    .filter((d: DropdownOption) => d)
-    .map((d: DropdownOption) => d.value)
-    .indexOf(value);
-
-  if (isEditable && isCellEditable && isCellEditMode) {
-    return (
-      <StyledCellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        compactMode={compactMode}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        onClick={onClick}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      >
-        <StyledSelectComponent
-          accentColor={accentColor}
-          borderRadius={borderRadius}
-          compactMode
-          dropDownWidth={width}
-          filterText={filterText}
-          height={TABLE_SIZES[compactMode].ROW_HEIGHT}
-          hideCancelIcon
-          isFilterable={isFilterable}
-          isLoading={false}
-          isNewRow={isNewRow}
-          isOpen={autoOpen}
-          isValid
-          labelText=""
-          onClose={onClose}
-          onFilterChange={onFilter}
-          onOptionSelected={onSelect}
-          options={options}
-          placeholder={placeholderText}
-          resetFilterTextOnClose={resetFilterTextOnClose}
-          selectedIndex={selectedIndex}
-          serverSideFiltering={serverSideFiltering}
-          value={value}
-          widgetId={""}
-          width={width}
-        />
-      </StyledCellWrapper>
-    );
-  } else {
-    const onEdit = () => toggleCellEditMode(true, rowIndex, alias, value);
-
-    return (
-      <BasicCell
-        accentColor={accentColor}
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        columnType={columnType}
-        compactMode={compactMode}
-        disabledEditIcon={disabledEditIcon}
-        disabledEditIconMessage={disabledEditIconMessage}
-        fontStyle={fontStyle}
-        hasUnsavedChanges={hasUnsavedChanges}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellEditMode={isCellEditMode}
-        isCellEditable={isCellEditable}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        onEdit={onEdit}
-        tableWidth={tableWidth}
-        textColor={textColor}
-        textSize={textSize}
-        value={value}
-        verticalAlignment={verticalAlignment}
-      />
-    );
-  }
-};
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SelectionCheckboxCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SelectionCheckboxCell.tsx
index cc03ff6e895b..0f81cbf475ff 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SelectionCheckboxCell.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SelectionCheckboxCell.tsx
@@ -1,62 +1,33 @@
 import React from "react";
 
-import { CellCheckboxWrapper, CellCheckbox } from "../TableStyledWrappers";
+import { CellCheckboxWrapper } from "../TableStyledWrappers";
 import { CheckboxState } from "../Constants";
-import { importSvg } from "design-system-old";
+import { Checkbox } from "@design-system/widgets";
 
-const CheckBoxCheckIcon = importSvg(
-  async () => import("assets/icons/widget/table/checkbox-check.svg"),
-);
-const CheckBoxLineIcon = importSvg(
-  async () => import("assets/icons/widget/table/checkbox-line.svg"),
-);
-
-export const renderBodyCheckBoxCell = (
-  isChecked: boolean,
-  accentColor?: string,
-  borderRadius?: string,
-) => (
+export const renderBodyCheckBoxCell = (isChecked: boolean) => (
   <CellCheckboxWrapper
-    accentColor={accentColor}
-    borderRadius={borderRadius}
     className="td t--table-multiselect"
     data-sticky-td="true"
     isCellVisible
-    isChecked={isChecked}
     role="cell"
   >
-    <CellCheckbox>
-      {isChecked && <CheckBoxCheckIcon className="th-svg" />}
-    </CellCheckbox>
+    <Checkbox isSelected={!!isChecked} />
   </CellCheckboxWrapper>
 );
 
-const STYLE = { padding: "0px", justifyContent: "center" };
-
 export const renderHeaderCheckBoxCell = (
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void,
   checkState: number | null,
-  accentColor: string,
-  borderRadius: string,
 ) => (
   <CellCheckboxWrapper
-    accentColor={accentColor}
-    borderRadius={borderRadius}
     className="th header-reorder t--table-multiselect-header"
     data-sticky-td="true"
-    isChecked={!!checkState}
     onClick={onClick}
     role="columnheader"
-    style={STYLE}
   >
-    <CellCheckbox>
-      {/*1 - all row selected | 2 - some rows selected */}
-      {checkState === CheckboxState.CHECKED && (
-        <CheckBoxCheckIcon className="th-svg" />
-      )}
-      {checkState === CheckboxState.PARTIAL && (
-        <CheckBoxLineIcon className="th-svg t--table-multiselect-header-half-check-svg" />
-      )}
-    </CellCheckbox>
+    <Checkbox
+      isIndeterminate={checkState === CheckboxState.PARTIAL}
+      isSelected={!!checkState}
+    />
   </CellCheckboxWrapper>
 );
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SwitchCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SwitchCell.tsx
deleted file mode 100644
index f3918e93b2d7..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/SwitchCell.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react";
-import type { BaseCellComponentProps, CellAlignment } from "../Constants";
-import { ALIGN_ITEMS, JUSTIFY_CONTENT } from "../Constants";
-import { CellWrapper, TooltipContentWrapper } from "../TableStyledWrappers";
-import { LabelPosition } from "components/constants";
-import styled from "styled-components";
-import SwitchComponent from "widgets/SwitchWidget/component";
-import { AlignWidgetTypes } from "WidgetProvider/constants";
-import { Tooltip } from "@blueprintjs/core";
-
-const UnsavedChangesMarker = styled.div<{ accentColor: string }>`
-  position: absolute;
-  top: -1px;
-  right: -3px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid ${(props) => props.accentColor};
-  transform: rotateZ(45deg);
-`;
-
-const SwitchCellWrapper = styled(CellWrapper)<{
-  horizontalAlignment?: CellAlignment;
-}>`
-  & div {
-    justify-content: ${(props) =>
-      props.horizontalAlignment &&
-      JUSTIFY_CONTENT[props.horizontalAlignment]} !important;
-
-    align-items: ${(props) =>
-      props.verticalAlignment &&
-      ALIGN_ITEMS[props.verticalAlignment]} !important;
-
-    & .bp3-switch {
-      gap: 0px;
-      width: max-content;
-    }
-  }
-  & .bp3-disabled {
-    cursor: grab !important;
-    & .bp3-control-indicator {
-      cursor: grab !important;
-    }
-  }
-
-  & > .bp3-popover-wrapper {
-    overflow: unset;
-  }
-`;
-
-type SwitchCellProps = BaseCellComponentProps & {
-  value: boolean;
-  accentColor: string;
-  onChange: () => void;
-  disabledSwitch: boolean;
-  isCellEditable: boolean;
-  hasUnSavedChanges?: boolean;
-  disabledSwitchMessage: string;
-};
-
-export const SwitchCell = (props: SwitchCellProps) => {
-  const {
-    accentColor,
-    cellBackground,
-    compactMode,
-    disabledSwitch,
-    disabledSwitchMessage,
-    hasUnSavedChanges,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellEditable,
-    isCellVisible,
-    isHidden,
-    onChange,
-    value,
-    verticalAlignment,
-  } = props;
-
-  const switchComponent = (
-    <SwitchComponent
-      accentColor={accentColor}
-      alignWidget={AlignWidgetTypes.LEFT}
-      isDisabled={!!disabledSwitch || !isCellEditable}
-      isLoading={false}
-      isSwitchedOn={value}
-      label=""
-      labelPosition={LabelPosition.Auto}
-      onChange={() => onChange()}
-      widgetId={""}
-    />
-  );
-
-  return (
-    <SwitchCellWrapper
-      cellBackground={cellBackground}
-      compactMode={compactMode}
-      horizontalAlignment={horizontalAlignment}
-      isCellDisabled={isCellDisabled}
-      isCellVisible={isCellVisible}
-      isHidden={isHidden}
-      verticalAlignment={verticalAlignment}
-    >
-      {hasUnSavedChanges && <UnsavedChangesMarker accentColor={accentColor} />}
-      {isCellEditable && !!disabledSwitch ? (
-        <Tooltip
-          autoFocus={false}
-          content={
-            <TooltipContentWrapper>
-              {disabledSwitchMessage}
-            </TooltipContentWrapper>
-          }
-          hoverOpenDelay={200}
-          position="top"
-        >
-          {switchComponent}
-        </Tooltip>
-      ) : (
-        switchComponent
-      )}
-    </SwitchCellWrapper>
-  );
-};
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/URLCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/URLCell.tsx
new file mode 100644
index 000000000000..561146be07f7
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/URLCell.tsx
@@ -0,0 +1,39 @@
+import React, { memo } from "react";
+import { Link } from "@design-system/widgets";
+
+import type {
+  BaseCellComponentProps,
+  CellLayoutProperties,
+} from "../Constants";
+
+export interface NumberCellProps {
+  href?: string;
+  text?: string;
+  cellColor?: CellLayoutProperties["cellColor"];
+  isBold?: boolean;
+  isUnderline?: boolean;
+  isItalic?: boolean;
+}
+
+function URLCell(props: NumberCellProps & BaseCellComponentProps) {
+  const { allowCellWrapping, cellColor, href, isBold, isItalic, text } = props;
+  const lineClamp = allowCellWrapping ? undefined : 1;
+
+  return (
+    <Link
+      color={cellColor === "default" ? undefined : cellColor}
+      href={href}
+      isBold={isBold}
+      isItalic={isItalic}
+      lineClamp={lineClamp}
+      title={text}
+      variant="body"
+    >
+      {text}
+    </Link>
+  );
+}
+
+const MemoizedURLCell = memo(URLCell);
+
+export { MemoizedURLCell as URLCell };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/VideoCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/VideoCell.tsx
deleted file mode 100644
index d479c961bb49..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/VideoCell.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-
-import type { BaseCellComponentProps } from "../Constants";
-import { CellWrapper } from "../TableStyledWrappers";
-import PopoverVideo from "widgets/VideoWidget/component/PopoverVideo";
-import { isString } from "lodash";
-import { YOUTUBE_URL_REGEX } from "WidgetProvider/constants";
-
-type renderCellType = BaseCellComponentProps & {
-  value: unknown;
-};
-
-export const VideoCell = (props: renderCellType) => {
-  const {
-    allowCellWrapping,
-    cellBackground,
-    compactMode,
-    fontStyle,
-    horizontalAlignment,
-    isCellDisabled,
-    isCellVisible,
-    isHidden,
-    textColor,
-    textSize,
-    value,
-    verticalAlignment,
-  } = props;
-
-  if (!value) {
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        compactMode={compactMode}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      />
-    );
-  } else if (isString(value) && YOUTUBE_URL_REGEX.test(value)) {
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        cellBackground={cellBackground}
-        className="video-cell"
-        compactMode={compactMode}
-        fontStyle={fontStyle}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        textColor={textColor}
-        textSize={textSize}
-        verticalAlignment={verticalAlignment}
-      >
-        <PopoverVideo url={value} />
-      </CellWrapper>
-    );
-  } else {
-    return (
-      <CellWrapper
-        allowCellWrapping={allowCellWrapping}
-        compactMode={compactMode}
-        horizontalAlignment={horizontalAlignment}
-        isCellDisabled={isCellDisabled}
-        isCellVisible={isCellVisible}
-        isHidden={isHidden}
-        verticalAlignment={verticalAlignment}
-      >
-        Invalid Video Link
-      </CellWrapper>
-    );
-  }
-};
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/index.ts b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/index.ts
new file mode 100644
index 000000000000..e78fa7b69b95
--- /dev/null
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/index.ts
@@ -0,0 +1,3 @@
+export { URLCell } from "./URLCell";
+export { ButtonCell } from "./ButtonCell";
+export { PlainTextCell } from "./PlainTextCell";
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/menuButtonTableComponent.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/menuButtonTableComponent.tsx
deleted file mode 100644
index a2df411b3a99..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/menuButtonTableComponent.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-import * as React from "react";
-import styled, { createGlobalStyle } from "styled-components";
-import {
-  Alignment,
-  Button,
-  Classes as BlueprintCoreClasses,
-  Icon,
-  Menu,
-  MenuItem as BlueprintMenuItem,
-  Classes as BlueprintClasses,
-} from "@blueprintjs/core";
-import { Classes, Popover2 } from "@blueprintjs/popover2";
-import type { IconName } from "@blueprintjs/icons";
-import {
-  getCustomBackgroundColor,
-  getCustomBorderColor,
-  getCustomHoverColor,
-  lightenColor,
-  getComplementaryGrayscaleColor,
-} from "widgets/WidgetUtils";
-import { darkenActive, darkenHover } from "constants/DefaultTheme";
-import type { ButtonVariant } from "components/constants";
-import { ButtonVariantTypes } from "components/constants";
-import tinycolor from "tinycolor2";
-import { Colors } from "constants/Colors";
-import {
-  getBooleanPropertyValue,
-  getPropertyValue,
-} from "widgets/wds/WDSTableWidget/widget/utilities";
-import type { ThemeProp } from "WidgetProvider/constants";
-import type {
-  ConfigureMenuItems,
-  MenuItem,
-  MenuItems,
-  MenuItemsSource,
-} from "widgets/MenuButtonWidget/constants";
-
-const MenuButtonContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  text-align: center;
-
-  & > .${Classes.POPOVER2_TARGET} {
-    height: 100%;
-  }
-`;
-
-const PopoverStyles = createGlobalStyle<{
-  borderRadius: string;
-  accentColor: string;
-}>`
-   .table-menu-button-popover {
-     box-shadow: none;
-     & > .${Classes.POPOVER2_CONTENT} {
-      background: none;
-      box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
-      margin-top: 8px !important;
-      border-radius: ${({ borderRadius }) =>
-        borderRadius >= `1.5rem` ? `0.375rem` : borderRadius};
-      overflow-x: hidden;
-      overflow-y: auto;
-      max-height: 400px;
-    }
-
-    & .${BlueprintClasses.MENU_ITEM} {
-      padding: 9px 12px;
-      border-radius: 0;
-      &:hover {
-        background-color:  ${({ accentColor }) => lightenColor(accentColor)};
-      }
-    }
-   }
-  .table-menu-button-popover-backdrop {
-    background-color: transparent !important;
-  }
-`;
-
-interface BaseStyleProps {
-  backgroundColor?: string;
-  borderRadius?: string;
-  boxShadow?: string;
-  boxShadowColor?: string;
-  buttonColor?: string;
-  buttonVariant?: ButtonVariant;
-  isCompact?: boolean;
-  textColor?: string;
-  compactMode?: string;
-}
-
-const BaseButton = styled(Button)<ThemeProp & BaseStyleProps>`
-  height: 100%;
-  background-image: none !important;
-  font-weight: 400;
-  outline: none;
-  padding: 0px 10px;
-  overflow: hidden;
-  border: 1.2px solid #ebebeb;
-  border-radius: 0;
-  box-shadow: none !important;
-  min-height: ${({ compactMode }) =>
-    compactMode === "SHORT" ? "24px" : "30px"};
-  font-size: ${({ compactMode }) =>
-    compactMode === "SHORT" ? "12px" : "14px"};
-  line-height: ${({ compactMode }) =>
-    compactMode === "SHORT" ? "24px" : "28px"};
-
-  ${({ buttonColor, buttonVariant, theme }) => `
-    &:enabled {
-      background: ${
-        getCustomBackgroundColor(buttonVariant, buttonColor) !== "none"
-          ? getCustomBackgroundColor(buttonVariant, buttonColor)
-          : buttonVariant === ButtonVariantTypes.PRIMARY
-            ? theme.colors.button.primary.primary.bgColor
-            : "none"
-      } !important;
-    }
-
-    &:hover:enabled, &:active:enabled, &:focus:enabled {
-      background: ${
-        getCustomHoverColor(theme, buttonVariant, buttonColor) !== "none"
-          ? getCustomHoverColor(theme, buttonVariant, buttonColor)
-          : buttonVariant === ButtonVariantTypes.SECONDARY
-            ? theme.colors.button.primary.secondary.hoverColor
-            : buttonVariant === ButtonVariantTypes.TERTIARY
-              ? theme.colors.button.primary.tertiary.hoverColor
-              : theme.colors.button.primary.primary.hoverColor
-      } !important;
-    }
-
-    &:disabled {
-      background-color: ${theme.colors.button.disabled.bgColor} !important;
-      color: ${theme.colors.button.disabled.textColor} !important;
-    }
-
-    border: ${
-      getCustomBorderColor(buttonVariant, buttonColor) !== "none"
-        ? `1px solid ${getCustomBorderColor(buttonVariant, buttonColor)}`
-        : buttonVariant === ButtonVariantTypes.SECONDARY
-          ? `1px solid ${theme.colors.button.primary.secondary.borderColor}`
-          : "none"
-    } !important;
-
-    & > span {
-      max-height: 100%;
-      max-width: 99%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-
-      color: ${
-        buttonVariant === ButtonVariantTypes.PRIMARY
-          ? getComplementaryGrayscaleColor(buttonColor)
-          : getCustomBackgroundColor(ButtonVariantTypes.PRIMARY, buttonColor)
-      } !important;
-    }
-  `}
-
-  border-radius: ${({ borderRadius }) => borderRadius};
-  box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
-`;
-
-const BaseMenuItem = styled(BlueprintMenuItem)<ThemeProp & BaseStyleProps>`
-  &.${BlueprintCoreClasses.MENU_ITEM}.${BlueprintCoreClasses.DISABLED} {
-    background-color: ${Colors.GREY_1} !important;
-  }
-  ${({ backgroundColor, theme }) =>
-    backgroundColor
-      ? `
-      background-color: ${backgroundColor} !important;
-      &:hover {
-        background-color: ${darkenHover(backgroundColor)} !important;
-      }
-      &:active {
-        background-color: ${darkenActive(backgroundColor)} !important;
-      }
-  `
-      : `
-    background: none !important
-      &:hover {
-        background-color: ${tinycolor(
-          theme.colors.button.primary.primary.textColor,
-        )
-          .darken()
-          .toString()} !important;
-      }
-      &:active {
-        background-color: ${tinycolor(
-          theme.colors.button.primary.primary.textColor,
-        )
-          .darken()
-          .toString()} !important;
-      }
-    `}
-  ${({ textColor }) =>
-    textColor &&
-    `
-      color: ${textColor} !important;
-  `}
-  ${({ isCompact }) =>
-    isCompact &&
-    `
-      padding-top: 3px !important;
-      padding-bottom: 3px !important;
-      font-size: 12px;
-  `}
-`;
-
-const StyledMenu = styled(Menu)`
-  padding: 0;
-  background: none;
-`;
-
-interface PopoverContentProps {
-  menuItems: MenuItems;
-  onItemClicked: (
-    onClick: string | undefined,
-    index?: number,
-    onComplete?: () => void,
-  ) => void;
-  getVisibleItems: (rowIndex: number) => Array<MenuItem>;
-  isCompact?: boolean;
-  rowIndex: number;
-  menuItemsSource: MenuItemsSource;
-  configureMenuItems: ConfigureMenuItems;
-  sourceData?: Array<Record<string, unknown>>;
-}
-
-function PopoverContent(props: PopoverContentProps) {
-  const { getVisibleItems, isCompact, onItemClicked, rowIndex } = props;
-
-  const visibleItems = getVisibleItems(rowIndex);
-
-  if (!visibleItems?.length) {
-    return <StyledMenu />;
-  } else {
-    const listItems = visibleItems.map((item: MenuItem, index: number) => {
-      const {
-        backgroundColor,
-        iconAlign,
-        iconColor,
-        iconName,
-        id,
-        isDisabled,
-        label,
-        onClick,
-        textColor,
-      } = item;
-
-      return (
-        <BaseMenuItem
-          backgroundColor={
-            getPropertyValue(backgroundColor, rowIndex) || "#FFFFFF"
-          }
-          disabled={getBooleanPropertyValue(isDisabled, rowIndex)}
-          icon={
-            iconAlign !== Alignment.RIGHT && iconName ? (
-              <Icon color={iconColor} icon={iconName} />
-            ) : undefined
-          }
-          isCompact={isCompact}
-          key={id}
-          labelElement={
-            iconAlign === Alignment.RIGHT && iconName ? (
-              <Icon color={iconColor} icon={iconName} />
-            ) : undefined
-          }
-          onClick={() => onItemClicked(onClick, index)}
-          text={label}
-          textColor={getPropertyValue(textColor, rowIndex)}
-        />
-      );
-    });
-
-    return <StyledMenu>{listItems}</StyledMenu>;
-  }
-}
-
-interface PopoverTargetButtonProps {
-  borderRadius?: string;
-  boxShadow?: string;
-  boxShadowColor?: string;
-  buttonColor?: string;
-  buttonVariant?: ButtonVariant;
-  iconName?: IconName;
-  iconAlign?: Alignment;
-  isDisabled?: boolean;
-  label?: string;
-  compactMode?: string;
-}
-
-function PopoverTargetButton(props: PopoverTargetButtonProps) {
-  const {
-    borderRadius,
-    boxShadow,
-    buttonColor,
-    buttonVariant,
-    compactMode,
-    iconAlign,
-    iconName,
-    isDisabled,
-    label,
-  } = props;
-
-  return (
-    <BaseButton
-      alignText={iconName ? Alignment.LEFT : Alignment.CENTER}
-      borderRadius={borderRadius}
-      boxShadow={boxShadow}
-      buttonColor={buttonColor}
-      buttonVariant={buttonVariant}
-      compactMode={compactMode}
-      disabled={isDisabled}
-      fill
-      icon={iconAlign !== Alignment.RIGHT ? iconName : undefined}
-      rightIcon={iconAlign === Alignment.RIGHT ? iconName : undefined}
-      text={label}
-    />
-  );
-}
-
-export interface MenuButtonComponentProps {
-  label?: string;
-  isDisabled?: boolean;
-  isVisible?: boolean;
-  isCompact?: boolean;
-  menuItems: MenuItems;
-  getVisibleItems: (rowIndex: number) => Array<MenuItem>;
-  menuVariant?: ButtonVariant;
-  menuColor?: string;
-  borderRadius?: string;
-  boxShadow?: string;
-  boxShadowColor?: string;
-  iconName?: IconName;
-  iconAlign?: Alignment;
-  onItemClicked: (
-    onClick: string | undefined,
-    index?: number,
-    onComplete?: () => void,
-  ) => void;
-  rowIndex: number;
-  compactMode?: string;
-  menuItemsSource: MenuItemsSource;
-  configureMenuItems: ConfigureMenuItems;
-  sourceData?: Array<Record<string, unknown>>;
-}
-
-function MenuButtonTableComponent(props: MenuButtonComponentProps) {
-  const {
-    borderRadius = "0px",
-    boxShadow,
-    boxShadowColor,
-    compactMode,
-    configureMenuItems,
-    getVisibleItems,
-    iconAlign,
-    iconName,
-    isCompact,
-    isDisabled,
-    label,
-    menuColor = "#e1e1e1",
-    menuItems,
-    menuItemsSource,
-    menuVariant,
-    onItemClicked,
-    rowIndex,
-    sourceData,
-  } = props;
-
-  return (
-    <MenuButtonContainer
-      onClick={(e) => {
-        //Stop propagating event so selectedRow will remain unchanged
-        e.stopPropagation();
-      }}
-    >
-      <PopoverStyles accentColor={menuColor} borderRadius={borderRadius} />
-      <Popover2
-        backdropProps={{
-          className: "table-menu-button-popover-backdrop",
-        }}
-        content={
-          <PopoverContent
-            configureMenuItems={configureMenuItems}
-            getVisibleItems={getVisibleItems}
-            isCompact={isCompact}
-            menuItems={menuItems}
-            menuItemsSource={menuItemsSource}
-            onItemClicked={onItemClicked}
-            rowIndex={rowIndex}
-            sourceData={sourceData}
-          />
-        }
-        disabled={isDisabled}
-        fill
-        minimal
-        placement="bottom-end"
-        popoverClassName="table-menu-button-popover"
-      >
-        <PopoverTargetButton
-          borderRadius={borderRadius}
-          boxShadow={boxShadow}
-          boxShadowColor={boxShadowColor}
-          buttonColor={menuColor}
-          buttonVariant={menuVariant}
-          compactMode={compactMode}
-          iconAlign={iconAlign}
-          iconName={iconName}
-          isDisabled={isDisabled}
-          label={label}
-        />
-      </Popover2>
-    </MenuButtonContainer>
-  );
-}
-
-export default MenuButtonTableComponent;
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/index.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/index.tsx
index 2ba1a9b1fe62..344e6fbcd36d 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/index.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/index.tsx
@@ -51,7 +51,6 @@ interface ReactTableComponentProps {
   handleReorderColumn: (columnOrder: string[]) => void;
   onSearch: (searchKey: any) => void;
   filters?: ReactTableFilter[];
-  applyFilter: (filters: ReactTableFilter[]) => void;
   columns: ReactTableColumnProps[];
   compactMode?: CompactMode;
   isVisibleSearch?: boolean;
@@ -89,7 +88,6 @@ function ReactTableComponent(props: ReactTableComponentProps) {
     allowAddNewRow,
     allowRowSelection,
     allowSorting,
-    applyFilter,
     borderColor,
     borderWidth,
     canFreezeColumn,
@@ -199,7 +197,6 @@ function ReactTableComponent(props: ReactTableComponentProps) {
     <Table
       accentColor={props.accentColor}
       allowAddNewRow={allowAddNewRow}
-      applyFilter={applyFilter}
       borderColor={borderColor}
       borderRadius={props.borderRadius}
       borderWidth={borderWidth}
@@ -260,7 +257,6 @@ function ReactTableComponent(props: ReactTableComponentProps) {
 
 export default React.memo(ReactTableComponent, (prev, next) => {
   return (
-    prev.applyFilter === next.applyFilter &&
     prev.compactMode === next.compactMode &&
     prev.delimiter === next.delimiter &&
     prev.disableDrag === next.disableDrag &&
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css b/app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css
index f2c7da2127d0..35834435e9de 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css
+++ b/app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css
@@ -1,3 +1,6 @@
+/* TODO(pawan): can we access css module variable from packages/widgets */
+@value colors: accent, neutral, negative, warning, positive;
+
 .table {
   --th-height: calc(
     var(--caption-line-height) + var(--caption-margin-end) +
@@ -21,7 +24,7 @@
   /* adding overflow hidden so that the scollbar at the bottom does not flow out */
   overflow: hidden;
 
-  & [aria-hidden] {
+  & [aria-hidden]:not([role="presentation"]) {
     opacity: 0.6;
   }
 
@@ -72,7 +75,8 @@
    * TH
    *-------------------------------------------------------------------------- */
   & thead [role="columnheader"] {
-    padding-inline: var(--outer-spacing-1);
+    padding-inline-start: var(--outer-spacing-3);
+    padding-inline-end: var(--outer-spacing-1);
     padding-block: var(--outer-spacing-1);
     background: var(--color-bg-elevation-3);
     font-weight: bold;
@@ -107,7 +111,7 @@
     inset: 0;
     display: flex;
     align-items: items;
-    padding-inline: var(--outer-spacing-2);
+    padding-inline: var(--outer-spacing-3);
     padding-inline-end: var(--padding-inline-end);
   }
 
@@ -124,14 +128,12 @@
   }
 
   & thead [role="columnheader"][data-sticky-last-left-td]:not([aria-hidden]) {
-    /*important is added below because the useSticky hooks adds left as inline css */
-    left: 0px !important;
+    left: 0px;
     border-right: 3px solid var(--color-bd);
   }
 
   & thead [role="columnheader"][data-sticky-first-right-td]:not([aria-hidden]) {
-    /*important is added below because the useSticky hooks adds left as inline css */
-    right: 0px !important;
+    right: 0px;
     border-left: 3px solid var(--color-bd);
   }
 
@@ -140,17 +142,19 @@
    *-------------------------------------------------------------------------- */
   & [role="row"] {
     display: flex;
-    block-size: var(--tr-height);
+    min-block-size: var(--tr-height);
   }
 
   & [role="row"]:has([role="columnheader"]) {
     block-size: var(--th-height);
+    min-block-size: auto;
   }
 
   /*-------------------------------------------------------------------------
   * Cell ( td )
   *-------------------------------------------------------------------------- */
   & [role="cell"] {
+    position: relative;
     background-color: var(--color-bg-elevation-3);
   }
 
@@ -181,14 +185,12 @@
   }
 
   & [role="cell"][data-sticky-last-left-td]:not([aria-hidden]) {
-    /*important is added below because the useSticky hooks adds left as inline css */
-    left: 0px !important;
+    left: 0px;
     border-right: 3px solid var(--color-bd);
   }
 
   & [role="cell"][data-sticky-first-right-td]:not([aria-hidden]) {
-    /*important is below here because the useSticky hooks adds left as inline css */
-    right: 0px !important;
+    right: 0px;
     border-left: 3px solid var(--color-bd);
   }
 
@@ -198,6 +200,37 @@
     left: unset !important;
     right: unset !important;
   }
+
+  /*-------------------------------------------------------------------------
+  * Column Types
+  *-------------------------------------------------------------------------- */
+  &
+    [role="cell"]:is(
+      [data-column-type="text"],
+      [data-column-type="number"],
+      [data-column-type="url"],
+      [data-column-type="date"]
+    ) {
+    padding: var(--outer-spacing-4) var(--outer-spacing-3);
+  }
+
+  & [role="cell"]:is([data-column-type="button"]) {
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  @each $color in colors {
+    & [role="cell"][data-cell-color="$(color)"] {
+      background-color: var(--color-bg-$(color)-subtle);
+    }
+
+    &
+      [role="row"][aria-checked="true"]
+      [role="cell"][data-cell-color="$(color)"] {
+      background-color: var(--color-bg-$(color)-subtle-active);
+    }
+  }
+
   /* --------------------------------------------------------------------------
   * Resizor
   *-------------------------------------------------------------------------- */
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/utilities.test.ts b/app/client/src/widgets/wds/WDSTableWidget/component/utilities.test.ts
deleted file mode 100644
index ab4d92a0fa03..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/utilities.test.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { ColumnTypes } from "../constants";
-import type { TableColumnProps } from "./Constants";
-import { transformTableDataIntoCsv } from "./utilities";
-
-describe("TransformTableDataIntoArrayOfArray", () => {
-  const columns: TableColumnProps[] = [
-    {
-      Header: "Id",
-      id: "id",
-      alias: "id",
-      accessor: "id",
-      minWidth: 60,
-      draggable: true,
-      metaProperties: {
-        isHidden: false,
-        type: ColumnTypes.TEXT,
-      },
-      columnProperties: {
-        id: "id",
-        originalId: "id",
-        alias: "id",
-        label: "Id",
-        columnType: "string",
-        isVisible: true,
-        index: 0,
-        width: 60,
-        isDerived: false,
-        computedValue: "",
-        isCellEditable: false,
-        isEditable: false,
-        allowCellWrapping: false,
-      },
-    },
-  ];
-  it("work as expected", () => {
-    const data = [
-      {
-        id: "abc",
-      },
-      {
-        id: "xyz",
-      },
-    ];
-    const csvData = transformTableDataIntoCsv({
-      columns,
-      data,
-    });
-    const expectedCsvData = [["Id"], ["abc"], ["xyz"]];
-    expect(JSON.stringify(csvData)).toStrictEqual(
-      JSON.stringify(expectedCsvData),
-    );
-  });
-  it("work as expected with newline", () => {
-    const data = [
-      {
-        id: "abc\ntest",
-      },
-      {
-        id: "xyz",
-      },
-    ];
-    const csvData = transformTableDataIntoCsv({
-      columns,
-      data,
-    });
-    const expectedCsvData = [["Id"], ["abc test"], ["xyz"]];
-    expect(JSON.stringify(csvData)).toStrictEqual(
-      JSON.stringify(expectedCsvData),
-    );
-  });
-  it("work as expected with comma", () => {
-    const data = [
-      {
-        id: "abc,test",
-      },
-      {
-        id: "xyz",
-      },
-    ];
-    const csvData = transformTableDataIntoCsv({
-      columns,
-      data,
-    });
-    const expectedCsvData = [["Id"], ['"abc,test"'], ["xyz"]];
-    expect(JSON.stringify(csvData)).toStrictEqual(
-      JSON.stringify(expectedCsvData),
-    );
-  });
-});
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/utilities.ts b/app/client/src/widgets/wds/WDSTableWidget/component/utilities.ts
deleted file mode 100644
index aa2b9a37c2f5..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/component/utilities.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { TableColumnProps } from "./Constants";
-import { isString } from "lodash";
-
-interface DataCellProps {
-  value: string | number;
-  type: "string" | "number";
-}
-
-/**
- * downloads the data as CSV
- *
- * @param props
- */
-export const downloadDataAsCSV = (props: {
-  csvData: Array<Array<any>>;
-  delimiter: string;
-  fileName: string;
-}) => {
-  let csvContent = "";
-  props.csvData.forEach((infoArray: Array<any>, index: number) => {
-    const dataString = infoArray.join(props.delimiter);
-    csvContent += index < props.csvData.length ? dataString + "\n" : dataString;
-  });
-  const anchor = document.createElement("a");
-  const mimeType = "application/octet-stream";
-  // @ts-expect-error: msSaveBlob does not exists on navigator
-  if (navigator.msSaveBlob) {
-    // @ts-expect-error: msSaveBlob does not exists on navigator
-    navigator.msSaveBlob(
-      new Blob([csvContent], {
-        type: mimeType,
-      }),
-      props.fileName,
-    );
-  } else if (URL && "download" in anchor) {
-    anchor.href = URL.createObjectURL(
-      new Blob([csvContent], {
-        type: mimeType,
-      }),
-    );
-    anchor.setAttribute("download", props.fileName);
-    document.body.appendChild(anchor);
-    anchor.click();
-    document.body.removeChild(anchor);
-  }
-};
-
-export const transformTableDataIntoCsv = (props: {
-  columns: TableColumnProps[];
-  data: Array<Record<string, unknown>>;
-}) => {
-  const csvData = [];
-
-  csvData.push(
-    props.columns
-      .map((column: TableColumnProps) => {
-        if (column.metaProperties && !column.metaProperties.isHidden) {
-          return column.Header;
-        }
-        return null;
-      })
-      .filter((i) => !!i),
-  );
-
-  for (let row = 0; row < props.data.length; row++) {
-    const data: { [key: string]: any } = props.data[row];
-    const csvDataRow = [];
-    for (let colIndex = 0; colIndex < props.columns.length; colIndex++) {
-      const column = props.columns[colIndex];
-      let value = data[column.alias];
-      if (column.metaProperties && !column.metaProperties.isHidden) {
-        value =
-          isString(value) && value.includes("\n")
-            ? value.replace("\n", " ")
-            : value;
-        if (isString(value) && value.includes(",")) {
-          csvDataRow.push(`"${value}"`);
-        } else {
-          csvDataRow.push(value);
-        }
-      }
-    }
-
-    csvData.push(csvDataRow);
-  }
-
-  return csvData;
-};
-
-export function transformTableDataIntoExcel(props: {
-  columns: TableColumnProps[];
-  data: Array<Record<string, unknown>>;
-}) {
-  const tableData: Array<Array<DataCellProps>> = [];
-  const tableHeaders: Array<DataCellProps> = props.columns
-    .filter((column: TableColumnProps) => {
-      return column.metaProperties && !column.metaProperties.isHidden;
-    })
-    .map((column: TableColumnProps) => {
-      return {
-        value: column.Header,
-        type:
-          column.columnProperties?.columnType === "number"
-            ? "number"
-            : "string",
-      };
-    });
-
-  tableData.push(tableHeaders);
-
-  for (let row = 0; row < props.data.length; row++) {
-    const data: { [key: string]: any } = props.data[row];
-    const tableRow: Array<DataCellProps> = [];
-    for (let colIndex = 0; colIndex < props.columns.length; colIndex++) {
-      const column = props.columns[colIndex];
-      const type =
-        column.columnProperties?.columnType === "number" ? "number" : "string";
-      if (column.metaProperties && !column.metaProperties.isHidden) {
-        tableRow.push({
-          value: data[column.alias],
-          type: type,
-        });
-      }
-    }
-    tableData.push(tableRow);
-  }
-
-  return tableData;
-}
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts
index c836f03a9542..65f305f918fd 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts
@@ -1,5 +1,4 @@
 import { InlineEditingSaveOptions } from "../constants";
-import { Colors } from "constants/Colors";
 import type { WidgetDefaultProps } from "WidgetProvider/constants";
 import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
 
@@ -13,14 +12,11 @@ export const defaultsConfig = {
   label: "Data",
   widgetName: "Table",
   searchKey: "",
-  textSize: "0.875rem",
-  horizontalAlignment: "LEFT",
-  verticalAlignment: "CENTER",
+  horizontalAlignment: "start",
+  verticalAlignment: "center",
   totalRecordsCount: 0,
   defaultPageSize: 0,
   dynamicPropertyPathList: [],
-  borderColor: Colors.GREY_5,
-  borderWidth: "1",
   dynamicBindingPathList: [],
   primaryColumns: {},
   tableData: "",
@@ -36,4 +32,6 @@ export const defaultsConfig = {
   version: 2,
   inlineEditingSaveOption: InlineEditingSaveOptions.ROW_LEVEL,
   pageSize: 8,
+  buttonLabel: "Action",
+  buttonVariant: "filled",
 } as unknown as WidgetDefaultProps;
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts
index bce35acb55cb..3483b77dc927 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/methodsConfig.ts
@@ -8,31 +8,17 @@ import type {
   WidgetQueryGenerationFormConfig,
 } from "WidgetQueryGenerators/types";
 import type { WidgetProps } from "widgets/BaseWidget";
-import { ColumnTypes, type TableWidgetProps } from "../constants";
 import type { DynamicPath } from "utils/DynamicBindingUtils";
-import { createEditActionColumn } from "../widget/utilities";
 import { TableIcon, TableThumbnail } from "appsmith-icons";
 
 export const methodsConfig = {
   IconCmp: TableIcon,
   ThumbnailCmp: TableThumbnail,
-  getQueryGenerationConfig: (widget: WidgetProps) => {
+  getQueryGenerationConfig: () => {
     return {
       select: {
-        limit: `${widget.widgetName}.pageSize`,
-        where: `${widget.widgetName}.searchText`,
-        offset: `${widget.widgetName}.pageOffset`,
-        orderBy: `${widget.widgetName}.sortOrder.column`,
-        sortOrder: `${widget.widgetName}.sortOrder.order !== "desc"`,
+        limit: `100`,
       },
-      create: {
-        value: `(${widget.widgetName}.newRow || {})`,
-      },
-      update: {
-        value: `${widget.widgetName}.updatedRow`,
-        where: `${widget.widgetName}.updatedRow`,
-      },
-      totalRecord: true,
     };
   },
   getPropertyUpdatesForQueryBinding: (
@@ -40,87 +26,19 @@ export const methodsConfig = {
     _widget: WidgetProps,
     formConfig: WidgetQueryGenerationFormConfig,
   ) => {
-    const widget = _widget as TableWidgetProps;
-
     let modify = {};
     const dynamicPropertyPathList: DynamicPath[] = [];
 
     if (queryConfig.select) {
       modify = merge(modify, {
         tableData: queryConfig.select.data,
-        onPageChange: queryConfig.select.run,
-        serverSidePaginationEnabled: true,
-        onSearchTextChanged: formConfig.searchableColumn
-          ? queryConfig.select.run
-          : undefined,
-        onSort: queryConfig.select.run,
-        enableClientSideSearch: !formConfig.searchableColumn,
+        serverSidePaginationEnabled: false,
+        enableClientSideSearch: true,
         primaryColumnId: formConfig.primaryColumn,
         isVisibleDownload: false,
       });
     }
 
-    if (queryConfig.create) {
-      modify = merge(modify, {
-        onAddNewRowSave: queryConfig.create.run,
-        allowAddNewRow: true,
-        ...Object.keys(widget.primaryColumns).reduce(
-          (prev: Record<string, boolean>, curr) => {
-            if (formConfig.primaryColumn !== curr) {
-              prev[`primaryColumns.${curr}.isEditable`] = true;
-              prev[`primaryColumns.${curr}.isCellEditable`] = true;
-            }
-
-            prev[`showInlineEditingOptionDropdown`] = true;
-
-            return prev;
-          },
-          {},
-        ),
-      });
-    }
-
-    if (queryConfig.update) {
-      let editAction = {};
-
-      if (
-        !Object.values(widget.primaryColumns).some(
-          (column) => column.columnType === ColumnTypes.EDIT_ACTIONS,
-        )
-      ) {
-        editAction = Object.values(createEditActionColumn(widget)).reduce(
-          (
-            prev: Record<string, unknown>,
-            curr: {
-              propertyPath: string;
-              propertyValue: unknown;
-              isDynamicPropertyPath?: boolean;
-            },
-          ) => {
-            prev[curr.propertyPath] = curr.propertyValue;
-
-            if (curr.isDynamicPropertyPath) {
-              dynamicPropertyPathList.push({ key: curr.propertyPath });
-            }
-
-            return prev;
-          },
-          {},
-        );
-      }
-
-      modify = merge(modify, {
-        ...editAction,
-        [`primaryColumns.EditActions1.onSave`]: queryConfig.update.run,
-      });
-    }
-
-    if (queryConfig.total_record) {
-      modify = merge(modify, {
-        totalRecordsCount: queryConfig.total_record.data,
-      });
-    }
-
     return {
       modify,
       dynamicUpdates: {
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Alignment.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Alignment.ts
index e456ff26f10a..bff24713d33b 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Alignment.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Alignment.ts
@@ -5,14 +5,6 @@ import { hideByColumnType } from "../../../widget/propertyUtils";
 
 export default {
   sectionName: "Alignment",
-  hidden: (props: TableWidgetProps, propertyPath: string) => {
-    return hideByColumnType(
-      props,
-      propertyPath,
-      [ColumnTypes.CHECKBOX, ColumnTypes.SWITCH],
-      true,
-    );
-  },
   children: [
     {
       propertyName: "horizontalAlignment",
@@ -22,18 +14,18 @@ export default {
       options: [
         {
           startIcon: "align-left",
-          value: "LEFT",
+          value: "start",
         },
         {
           startIcon: "align-center",
-          value: "CENTER",
+          value: "center",
         },
         {
           startIcon: "align-right",
-          value: "RIGHT",
+          value: "end",
         },
       ],
-      defaultValue: "LEFT",
+      defaultValue: "start",
       isJSConvertible: true,
       customJSControl: "TABLE_COMPUTE_VALUE",
       dependencies: ["primaryColumns", "columnOrder"],
@@ -43,20 +35,16 @@ export default {
         params: {
           type: ValidationTypes.TEXT,
           params: {
-            allowedValues: ["LEFT", "CENTER", "RIGHT"],
+            allowedValues: ["start", "center", "end"],
           },
         },
       },
       isTriggerProperty: false,
       hidden: (props: TableWidgetProps, propertyPath: string) => {
         return hideByColumnType(props, propertyPath, [
+          ColumnTypes.URL,
           ColumnTypes.TEXT,
-          ColumnTypes.DATE,
           ColumnTypes.NUMBER,
-          ColumnTypes.CURRENCY,
-          ColumnTypes.URL,
-          ColumnTypes.CHECKBOX,
-          ColumnTypes.SWITCH,
         ]);
       },
     },
@@ -68,18 +56,18 @@ export default {
       options: [
         {
           startIcon: "vertical-align-top",
-          value: "TOP",
+          value: "start",
         },
         {
           startIcon: "vertical-align-middle",
-          value: "CENTER",
+          value: "center",
         },
         {
           startIcon: "vertical-align-bottom",
-          value: "BOTTOM",
+          value: "end",
         },
       ],
-      defaultValue: "CENTER",
+      defaultValue: "center",
       isJSConvertible: true,
       customJSControl: "TABLE_COMPUTE_VALUE",
       dependencies: ["primaryColumns", "columnOrder"],
@@ -89,20 +77,16 @@ export default {
         params: {
           type: ValidationTypes.TEXT,
           params: {
-            allowedValues: ["TOP", "CENTER", "BOTTOM"],
+            allowedValues: ["start", "center", "end"],
           },
         },
       },
       isTriggerProperty: false,
       hidden: (props: TableWidgetProps, propertyPath: string) => {
         return hideByColumnType(props, propertyPath, [
+          ColumnTypes.URL,
           ColumnTypes.TEXT,
-          ColumnTypes.DATE,
           ColumnTypes.NUMBER,
-          ColumnTypes.CURRENCY,
-          ColumnTypes.URL,
-          ColumnTypes.CHECKBOX,
-          ColumnTypes.SWITCH,
         ]);
       },
     },
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Basic.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Basic.ts
index 5f7ef038a106..1002eb3496ea 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Basic.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Basic.ts
@@ -3,15 +3,9 @@ import type { TableWidgetProps } from "widgets/wds/WDSTableWidget/constants";
 import { ColumnTypes, ICON_NAMES } from "widgets/wds/WDSTableWidget/constants";
 import {
   hideByColumnType,
-  hideByMenuItemsSource,
-  hideIfMenuItemsSourceDataIsFalsy,
   updateIconAlignment,
-  updateMenuItemsSource,
 } from "../../../widget/propertyUtils";
 import { IconNames } from "@blueprintjs/icons";
-import { MenuItemsSource } from "widgets/MenuButtonWidget/constants";
-import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
-import configureMenuItemsConfig from "./childPanels/configureMenuItemsConfig";
 
 export default {
   sectionName: "Basic",
@@ -34,7 +28,6 @@ export default {
       updateHook: updateIconAlignment,
       dependencies: ["primaryColumns", "columnOrder"],
       controlType: "ICON_SELECT",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       defaultIconName: "add",
       isJSConvertible: true,
       isBindProperty: true,
@@ -54,7 +47,7 @@ export default {
       propertyName: "buttonLabel",
       label: "Text",
       helpText: "Sets the label of the button",
-      controlType: "TABLE_COMPUTE_VALUE",
+      controlType: "INPUT_TEXT",
       defaultValue: "Action",
       hidden: (props: TableWidgetProps, propertyPath: string) => {
         return hideByColumnType(props, propertyPath, [ColumnTypes.BUTTON]);
@@ -63,332 +56,6 @@ export default {
       isBindProperty: true,
       isTriggerProperty: false,
     },
-    {
-      propertyName: "menuButtonLabel",
-      label: "Text",
-      helpText: "Sets the label of the button",
-      controlType: "TABLE_COMPUTE_VALUE",
-      defaultValue: "Open Menu",
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [ColumnTypes.MENU_BUTTON]);
-      },
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      isTriggerProperty: false,
-    },
-    {
-      propertyName: "menuItemsSource",
-      helpText: "Sets the source for the menu items",
-      label: "Menu items source",
-      controlType: "ICON_TABS",
-      fullWidth: true,
-      defaultValue: MenuItemsSource.STATIC,
-      options: [
-        {
-          label: "Static",
-          value: MenuItemsSource.STATIC,
-        },
-        {
-          label: "Dynamic",
-          value: MenuItemsSource.DYNAMIC,
-        },
-      ],
-      isJSConvertible: false,
-      isBindProperty: false,
-      isTriggerProperty: false,
-      validation: { type: ValidationTypes.TEXT },
-      updateHook: updateMenuItemsSource,
-      dependencies: [
-        "primaryColumns",
-        "columnOrder",
-        "sourceData",
-        "configureMenuItems",
-      ],
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(
-          props,
-          propertyPath,
-          [ColumnTypes.MENU_BUTTON],
-          false,
-        );
-      },
-    },
-    {
-      helpText: "Takes in an array of items to display the menu items.",
-      propertyName: "sourceData",
-      label: "Source data",
-      controlType: "TABLE_COMPUTE_VALUE",
-      placeholderText: "{{Query1.data}}",
-      isBindProperty: true,
-      isTriggerProperty: false,
-      validation: {
-        type: ValidationTypes.ARRAY,
-        params: {
-          required: true,
-          default: [],
-          children: {
-            type: ValidationTypes.ARRAY,
-            params: {
-              required: true,
-              default: [],
-              children: {
-                type: ValidationTypes.UNION,
-                params: {
-                  required: true,
-                  types: [
-                    {
-                      type: ValidationTypes.TEXT,
-                      params: {
-                        required: true,
-                      },
-                    },
-                    {
-                      type: ValidationTypes.NUMBER,
-                      params: {
-                        required: true,
-                      },
-                    },
-                    {
-                      type: ValidationTypes.OBJECT,
-                      params: {
-                        required: true,
-                      },
-                    },
-                  ],
-                },
-              },
-            },
-          },
-        },
-      },
-      evaluationSubstitutionType: EvaluationSubstitutionType.SMART_SUBSTITUTE,
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return (
-          hideByColumnType(
-            props,
-            propertyPath,
-            [ColumnTypes.MENU_BUTTON],
-            false,
-          ) ||
-          hideByMenuItemsSource(props, propertyPath, MenuItemsSource.STATIC)
-        );
-      },
-      dependencies: ["primaryColumns", "columnOrder", "menuItemsSource"],
-    },
-    {
-      helpText: "Configure how each menu item will appear.",
-      propertyName: "configureMenuItems",
-      controlType: "OPEN_CONFIG_PANEL",
-      buttonConfig: {
-        label: "Configure",
-        icon: "settings-2-line",
-      },
-      label: "Configure menu items",
-      isBindProperty: false,
-      isTriggerProperty: false,
-      hidden: (props: TableWidgetProps, propertyPath: string) =>
-        hideByColumnType(
-          props,
-          propertyPath,
-          [ColumnTypes.MENU_BUTTON],
-          false,
-        ) ||
-        hideIfMenuItemsSourceDataIsFalsy(props, propertyPath) ||
-        hideByMenuItemsSource(props, propertyPath, MenuItemsSource.STATIC),
-      dependencies: [
-        "primaryColumns",
-        "columnOrder",
-        "menuItemsSource",
-        "sourceData",
-      ],
-      panelConfig: configureMenuItemsConfig,
-    },
-    {
-      helpText: "Menu items",
-      propertyName: "menuItems",
-      controlType: "MENU_ITEMS",
-      label: "Menu items",
-      isBindProperty: false,
-      isTriggerProperty: false,
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return (
-          hideByColumnType(
-            props,
-            propertyPath,
-            [ColumnTypes.MENU_BUTTON],
-            false,
-          ) ||
-          hideByMenuItemsSource(props, propertyPath, MenuItemsSource.DYNAMIC)
-        );
-      },
-      dependencies: ["primaryColumns", "columnOrder"],
-      panelConfig: {
-        editableTitle: true,
-        titlePropertyName: "label",
-        panelIdPropertyName: "id",
-        dependencies: ["primaryColumns", "columnOrder"],
-        contentChildren: [
-          {
-            sectionName: "Basic",
-            children: [
-              {
-                propertyName: "label",
-                helpText: "Sets the label of a menu item",
-                label: "Text",
-                controlType: "INPUT_TEXT",
-                placeholderText: "Enter label",
-                isBindProperty: true,
-                isTriggerProperty: false,
-                validation: { type: ValidationTypes.TEXT },
-                dependencies: ["primaryColumns", "columnOrder"],
-              },
-              {
-                helpText: "when the menu item is clicked",
-                propertyName: "onClick",
-                label: "onClick",
-                controlType: "ACTION_SELECTOR",
-                isJSConvertible: true,
-                isBindProperty: true,
-                isTriggerProperty: true,
-                dependencies: ["primaryColumns", "columnOrder"],
-              },
-            ],
-          },
-          {
-            sectionName: "General",
-            children: [
-              {
-                propertyName: "isVisible",
-                helpText: "Controls the visibility of the widget",
-                label: "Visible",
-                controlType: "SWITCH",
-                customJSControl: "TABLE_COMPUTE_VALUE",
-                isJSConvertible: true,
-                isBindProperty: true,
-                isTriggerProperty: false,
-                validation: {
-                  type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-                  params: {
-                    type: ValidationTypes.BOOLEAN,
-                  },
-                },
-                dependencies: ["primaryColumns", "columnOrder"],
-              },
-              {
-                propertyName: "isDisabled",
-                helpText: "Disables input to the widget",
-                label: "Disabled",
-                controlType: "SWITCH",
-                customJSControl: "TABLE_COMPUTE_VALUE",
-                isJSConvertible: true,
-                isBindProperty: true,
-                isTriggerProperty: false,
-                validation: {
-                  type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-                  params: {
-                    type: ValidationTypes.BOOLEAN,
-                  },
-                },
-                dependencies: ["primaryColumns", "columnOrder"],
-              },
-            ],
-          },
-        ],
-        styleChildren: [
-          {
-            sectionName: "Icon",
-            children: [
-              {
-                propertyName: "iconName",
-                label: "Icon",
-                helpText: "Sets the icon to be used for a menu item",
-                controlType: "ICON_SELECT",
-                isBindProperty: false,
-                isTriggerProperty: false,
-                validation: { type: ValidationTypes.TEXT },
-                dependencies: ["primaryColumns", "columnOrder"],
-              },
-              {
-                propertyName: "iconAlign",
-                label: "Position",
-                helpText: "Sets the icon alignment of a menu item",
-                controlType: "ICON_TABS",
-                defaultValue: "left",
-                fullWidth: false,
-                options: [
-                  {
-                    startIcon: "skip-left-line",
-                    value: "left",
-                  },
-                  {
-                    startIcon: "skip-right-line",
-                    value: "right",
-                  },
-                ],
-                isBindProperty: false,
-                isTriggerProperty: false,
-                validation: { type: ValidationTypes.TEXT },
-                dependencies: ["primaryColumns", "columnOrder"],
-              },
-            ],
-          },
-          {
-            sectionName: "Color",
-            children: [
-              {
-                propertyName: "textColor",
-                helpText: "Sets the text color of a menu item",
-                label: "Text color",
-                controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
-                customJSControl: "TABLE_COMPUTE_VALUE",
-                isJSConvertible: true,
-                isBindProperty: true,
-                isTriggerProperty: false,
-                dependencies: ["primaryColumns", "columnOrder"],
-                validation: {
-                  type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-                  params: {
-                    type: ValidationTypes.TEXT,
-                    params: {
-                      regex: /^(?![<|{{]).+/,
-                    },
-                  },
-                },
-              },
-              {
-                propertyName: "backgroundColor",
-                helpText: "Sets the background color of a menu item",
-                label: "Background color",
-                controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
-                customJSControl: "TABLE_COMPUTE_VALUE",
-                isJSConvertible: true,
-                isBindProperty: true,
-                isTriggerProperty: false,
-                dependencies: ["primaryColumns", "columnOrder"],
-                validation: {
-                  type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-                  params: {
-                    type: ValidationTypes.TEXT,
-                    params: {
-                      regex: /^(?![<|{{]).+/,
-                    },
-                  },
-                },
-              },
-              {
-                propertyName: "iconColor",
-                helpText: "Sets the icon color of a menu item",
-                label: "Icon color",
-                controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
-                isBindProperty: false,
-                isTriggerProperty: false,
-                dependencies: ["primaryColumns", "columnOrder"],
-              },
-            ],
-          },
-        ],
-      },
-    },
     {
       helpText: "when the button is clicked",
       propertyName: "onClick",
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/BorderAndShadow.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/BorderAndShadow.ts
deleted file mode 100644
index f0d3f15ff6c4..000000000000
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/BorderAndShadow.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ValidationTypes } from "constants/WidgetValidation";
-import type { TableWidgetProps } from "widgets/wds/WDSTableWidget/constants";
-import { ColumnTypes } from "widgets/wds/WDSTableWidget/constants";
-import {
-  hideByColumnType,
-  removeBoxShadowColorProp,
-} from "../../../widget/propertyUtils";
-
-export default {
-  sectionName: "Border and shadow",
-  children: [
-    {
-      propertyName: "borderRadius",
-      label: "Border radius",
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      isJSConvertible: true,
-      helpText: "Rounds the corners of the icon button's outer border edge",
-      controlType: "BORDER_RADIUS_OPTIONS",
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.ICON_BUTTON,
-          ColumnTypes.MENU_BUTTON,
-          ColumnTypes.BUTTON,
-        ]);
-      },
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      isTriggerProperty: false,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-        },
-      },
-    },
-    {
-      propertyName: "boxShadow",
-      label: "Box shadow",
-      helpText:
-        "Enables you to cast a drop shadow from the frame of the widget",
-      controlType: "BOX_SHADOW_OPTIONS",
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      isJSConvertible: true,
-      updateHook: removeBoxShadowColorProp,
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.ICON_BUTTON,
-          ColumnTypes.MENU_BUTTON,
-          ColumnTypes.BUTTON,
-        ]);
-      },
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      isTriggerProperty: false,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-        },
-      },
-    },
-  ],
-};
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts
index d3c5afcca793..015bb915b4da 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts
@@ -1,109 +1,36 @@
 import { ValidationTypes } from "constants/WidgetValidation";
-import type { TableWidgetProps } from "widgets/wds/WDSTableWidget/constants";
-import { ColumnTypes } from "widgets/wds/WDSTableWidget/constants";
-import { hideByColumnType } from "../../../widget/propertyUtils";
+import { COLORS } from "@design-system/widgets";
+import capitalize from "lodash/capitalize";
 
 export default {
   sectionName: "Color",
   children: [
     {
-      propertyName: "buttonColor",
-      label: "Button color",
-      controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
-      helpText: "Changes the color of the button",
-      isJSConvertible: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.BUTTON,
-          ColumnTypes.ICON_BUTTON,
-        ]);
-      },
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-          params: {
-            regex: /^(?![<|{{]).+/,
-          },
+      propertyName: "cellColor",
+      label: "Cell color",
+      controlType: "DROP_DOWN",
+      fullWidth: true,
+      helpText: "Sets the semantic color of the cell",
+      options: [
+        {
+          label: "Default",
+          value: "default",
         },
-      },
-      isTriggerProperty: false,
-    },
-    {
-      propertyName: "menuColor",
-      helpText: "Sets the custom color preset based on the menu button variant",
-      label: "Button color",
-      controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
-      customJSControl: "TABLE_COMPUTE_VALUE",
+        ...Object.values(COLORS).map((semantic) => ({
+          label: capitalize(semantic),
+          value: semantic,
+        })),
+      ],
       isJSConvertible: true,
       isBindProperty: true,
       isTriggerProperty: false,
-      placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
       validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
+        type: ValidationTypes.TEXT,
         params: {
-          type: ValidationTypes.TEXT,
-          params: {
-            regex: /^(?![<|{{]).+/,
-          },
+          allowedValues: ["default", ...Object.values(COLORS)],
+          default: "default",
         },
       },
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [ColumnTypes.MENU_BUTTON]);
-      },
-      dependencies: ["primaryColumns", "columnOrder", "childStylesheet"],
-    },
-    {
-      propertyName: "cellBackground",
-      label: "Cell Background",
-      helpText: "Changes the background color of the cell",
-      controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
-      isJSConvertible: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-          params: {
-            regex: /^(?![<|{{]).+/,
-          },
-        },
-      },
-      isTriggerProperty: false,
-    },
-    {
-      propertyName: "textColor",
-      label: "Text color",
-      helpText: "Controls the color of text in the column",
-      controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
-      isJSConvertible: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-          params: {
-            regex: /^(?![<|{{]).+/,
-          },
-        },
-      },
-      isTriggerProperty: false,
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.TEXT,
-          ColumnTypes.DATE,
-          ColumnTypes.NUMBER,
-          ColumnTypes.CURRENCY,
-          ColumnTypes.URL,
-        ]);
-      },
     },
   ],
 };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Data.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Data.ts
index 2ccb5be0b5cd..964d85a51b59 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Data.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Data.ts
@@ -32,30 +32,6 @@ export default {
           label: "Button",
           value: ColumnTypes.BUTTON,
         },
-        {
-          label: "Checkbox",
-          value: ColumnTypes.CHECKBOX,
-        },
-        {
-          label: "Currency",
-          value: ColumnTypes.CURRENCY,
-        },
-        {
-          label: "Date",
-          value: ColumnTypes.DATE,
-        },
-        {
-          label: "Icon button",
-          value: ColumnTypes.ICON_BUTTON,
-        },
-        {
-          label: "Image",
-          value: ColumnTypes.IMAGE,
-        },
-        {
-          label: "Menu button",
-          value: ColumnTypes.MENU_BUTTON,
-        },
         {
           label: "Number",
           value: ColumnTypes.NUMBER,
@@ -64,21 +40,13 @@ export default {
           label: "Plain text",
           value: ColumnTypes.TEXT,
         },
-        {
-          label: "Select",
-          value: ColumnTypes.SELECT,
-        },
-        {
-          label: "Switch",
-          value: ColumnTypes.SWITCH,
-        },
         {
           label: "URL",
           value: ColumnTypes.URL,
         },
         {
-          label: "Video",
-          value: ColumnTypes.VIDEO,
+          label: "Date",
+          value: ColumnTypes.DATE,
         },
       ],
       updateHook: composePropertyUpdateHook([
@@ -142,7 +110,7 @@ export default {
       propertyName: "displayText",
       label: "Display text",
       helpText: "The text to be displayed in the column",
-      controlType: "TABLE_COMPUTE_VALUE",
+      controlType: "INPUT_TEXT",
       hidden: (props: TableWidgetProps, propertyPath: string) => {
         const baseProperty = getBasePropertyPath(propertyPath);
         const columnType = get(props, `${baseProperty}.columnType`, "");
@@ -152,33 +120,6 @@ export default {
       isBindProperty: false,
       isTriggerProperty: false,
     },
-    {
-      helpText:
-        "The value computed & shown in each cell. Use {{currentRow}} to reference each row in the table. This property is not accessible outside the column settings.",
-      propertyName: "computedValue",
-      label: "Computed value",
-      controlType: "TABLE_COMPUTE_VALUE",
-      additionalControlData: {
-        isArrayValue: true,
-      },
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.DATE,
-          ColumnTypes.IMAGE,
-          ColumnTypes.NUMBER,
-          ColumnTypes.TEXT,
-          ColumnTypes.VIDEO,
-          ColumnTypes.URL,
-          ColumnTypes.CHECKBOX,
-          ColumnTypes.SWITCH,
-          ColumnTypes.SELECT,
-          ColumnTypes.CURRENCY,
-        ]);
-      },
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      isTriggerProperty: false,
-    },
     {
       propertyName: "inputFormat",
       label: "Date format",
@@ -267,7 +208,6 @@ export default {
         },
       ],
       defaultValue: "YYYY-MM-DD HH:mm",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       isJSConvertible: true,
       hidden: (props: TableWidgetProps, propertyPath: string) => {
         const baseProperty = getBasePropertyPath(propertyPath);
@@ -314,7 +254,6 @@ export default {
       label: "Display format",
       helpText: "Date format to be shown to users",
       controlType: "DROP_DOWN",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       isJSConvertible: true,
       options: [
         {
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/DiscardButtonproperties.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/DiscardButtonproperties.ts
index 9c427c309fb9..8b0a503f1385 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/DiscardButtonproperties.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/DiscardButtonproperties.ts
@@ -28,7 +28,7 @@ export default {
           propertyName: "discardActionLabel",
           label: "Text",
           helpText: "Sets the label text of the button",
-          controlType: "TABLE_COMPUTE_VALUE",
+
           dependencies: ["primaryColumns"],
           isBindProperty: true,
           isTriggerProperty: false,
@@ -61,7 +61,7 @@ export default {
           helpText: "Controls the visibility of the discard button",
           defaultValue: true,
           controlType: "SWITCH",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           isBindProperty: true,
           isTriggerProperty: false,
@@ -78,7 +78,7 @@ export default {
           helpText: "Disables clicks to the discard button",
           defaultValue: false,
           controlType: "SWITCH",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           isBindProperty: true,
           isTriggerProperty: false,
@@ -116,7 +116,7 @@ export const discardButtonStyleConfig = {
           controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
           helpText: "Changes the color of the button",
           isJSConvertible: true,
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           dependencies: ["primaryColumns"],
           isBindProperty: true,
           validation: {
@@ -135,7 +135,7 @@ export const discardButtonStyleConfig = {
           label: "Button variant",
           controlType: "ICON_TABS",
           fullWidth: true,
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           helpText: "Sets the variant of the discard button",
           dependencies: ["primaryColumns"],
@@ -174,7 +174,7 @@ export const discardButtonStyleConfig = {
         {
           propertyName: "discardBorderRadius",
           label: "Border radius",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           helpText:
             "Rounds the corners of the discard button's outer border edge",
@@ -201,7 +201,7 @@ export const discardButtonStyleConfig = {
           helpText: "Sets the icon to be used for the discard action button",
           dependencies: ["primaryColumns", "columnOrder"],
           controlType: "ICON_SELECT",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           isBindProperty: true,
           isTriggerProperty: false,
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/General.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/General.ts
index 056872dcbc20..48c35117c990 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/General.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/General.ts
@@ -1,18 +1,9 @@
 import { ValidationTypes } from "constants/WidgetValidation";
 import type { TableWidgetProps } from "widgets/wds/WDSTableWidget/constants";
 import { ColumnTypes } from "widgets/wds/WDSTableWidget/constants";
-import { get } from "lodash";
-import {
-  getBasePropertyPath,
-  hideByColumnType,
-  updateColumnLevelEditability,
-  updateColumnOrderWhenFrozen,
-  updateInlineEditingOptionDropdownVisibilityHook,
-} from "../../../widget/propertyUtils";
-import { isColumnTypeEditable } from "../../../widget/utilities";
-import { composePropertyUpdateHook } from "widgets/WidgetUtils";
-import { ButtonVariantTypes } from "components/constants";
-import { StickyType } from "widgets/wds/WDSTableWidget/component/Constants";
+import { hideByColumnType } from "../../../widget/propertyUtils";
+import { BUTTON_VARIANTS } from "@design-system/widgets";
+import capitalize from "lodash/capitalize";
 
 export default {
   sectionName: "General",
@@ -24,7 +15,6 @@ export default {
       helpText: "Controls the visibility of the cell in the column",
       defaultValue: true,
       controlType: "SWITCH",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       isJSConvertible: true,
       isBindProperty: true,
       isTriggerProperty: false,
@@ -41,7 +31,6 @@ export default {
       helpText: "Controls the disabled state of the button",
       defaultValue: false,
       controlType: "SWITCH",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       isJSConvertible: true,
       isBindProperty: true,
       isTriggerProperty: false,
@@ -65,7 +54,6 @@ export default {
       helpText: "Decides if menu items will consume lesser space",
       label: "Compact",
       controlType: "SWITCH",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       isJSConvertible: true,
       isBindProperty: true,
       validation: {
@@ -87,7 +75,6 @@ export default {
       helpText: "Allows content of the cell to be wrapped",
       defaultValue: false,
       controlType: "SWITCH",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       isJSConvertible: true,
       isBindProperty: true,
       isTriggerProperty: false,
@@ -105,67 +92,6 @@ export default {
         ]);
       },
     },
-    {
-      propertyName: "isCellEditable",
-      dependencies: [
-        "primaryColumns",
-        "columnOrder",
-        "columnType",
-        "childStylesheet",
-        "inlineEditingSaveOption",
-      ],
-      label: "Editable",
-      helpText: "Controls the cell's editablity",
-      defaultValue: false,
-      controlType: "SWITCH",
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      isJSConvertible: true,
-      isBindProperty: true,
-      isTriggerProperty: false,
-      updateHook: composePropertyUpdateHook([
-        updateColumnLevelEditability,
-        updateInlineEditingOptionDropdownVisibilityHook,
-      ]),
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.BOOLEAN,
-        },
-      },
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        const baseProperty = getBasePropertyPath(propertyPath);
-        const columnType = get(props, `${baseProperty}.columnType`, "");
-        const isDerived = get(props, `${baseProperty}.isDerived`, false);
-        return !isColumnTypeEditable(columnType) || isDerived;
-      },
-    },
-    {
-      propertyName: "sticky",
-      helpText:
-        "Choose column that needs to be frozen left or right of the table",
-      controlType: "ICON_TABS",
-      defaultValue: StickyType.NONE,
-      label: "Column freeze",
-      fullWidth: true,
-      isBindProperty: true,
-      isTriggerProperty: false,
-      dependencies: ["primaryColumns", "columnOrder"],
-      options: [
-        {
-          startIcon: "contract-left-line",
-          value: StickyType.LEFT,
-        },
-        {
-          startIcon: "column-freeze",
-          value: StickyType.NONE,
-        },
-        {
-          startIcon: "contract-right-line",
-          value: StickyType.RIGHT,
-        },
-      ],
-      updateHook: updateColumnOrderWhenFrozen,
-    },
   ],
 };
 
@@ -175,33 +101,15 @@ export const GeneralStyle = {
     {
       propertyName: "buttonVariant",
       label: "Button variant",
-      controlType: "ICON_TABS",
+      controlType: "DROP_DOWN",
       fullWidth: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
+      helpText: "Sets the variant of the button",
+      options: Object.values(BUTTON_VARIANTS).map((variant) => ({
+        label: capitalize(variant),
+        value: variant,
+      })),
+      defaultValue: BUTTON_VARIANTS.filled,
       isJSConvertible: true,
-      helpText: "Sets the variant",
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.ICON_BUTTON,
-          ColumnTypes.BUTTON,
-        ]);
-      },
-      dependencies: ["primaryColumns", "columnOrder"],
-      options: [
-        {
-          label: "Primary",
-          value: ButtonVariantTypes.PRIMARY,
-        },
-        {
-          label: "Secondary",
-          value: ButtonVariantTypes.SECONDARY,
-        },
-        {
-          label: "Tertiary",
-          value: ButtonVariantTypes.TERTIARY,
-        },
-      ],
-      defaultValue: ButtonVariantTypes.PRIMARY,
       isBindProperty: true,
       isTriggerProperty: false,
       validation: {
@@ -209,87 +117,18 @@ export const GeneralStyle = {
         params: {
           type: ValidationTypes.TEXT,
           params: {
-            default: ButtonVariantTypes.PRIMARY,
-            allowedValues: [
-              ButtonVariantTypes.PRIMARY,
-              ButtonVariantTypes.SECONDARY,
-              ButtonVariantTypes.TERTIARY,
-            ],
+            allowedValues: Object.values(BUTTON_VARIANTS),
+            default: BUTTON_VARIANTS.filled,
           },
         },
       },
-    },
-    {
-      propertyName: "menuVariant",
-      label: "Button variant",
-      controlType: "ICON_TABS",
-      fullWidth: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      helpText: "Sets the variant of the menu button",
-      options: [
-        {
-          label: "Primary",
-          value: ButtonVariantTypes.PRIMARY,
-        },
-        {
-          label: "Secondary",
-          value: ButtonVariantTypes.SECONDARY,
-        },
-        {
-          label: "Tertiary",
-          value: ButtonVariantTypes.TERTIARY,
-        },
-      ],
-      isJSConvertible: true,
-      dependencies: ["primaryColumns", "columnOrder"],
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [ColumnTypes.MENU_BUTTON]);
-      },
-      isBindProperty: true,
-      isTriggerProperty: false,
-      defaultValue: ButtonVariantTypes.PRIMARY,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-          params: {
-            default: ButtonVariantTypes.PRIMARY,
-            allowedValues: [
-              ButtonVariantTypes.PRIMARY,
-              ButtonVariantTypes.SECONDARY,
-              ButtonVariantTypes.TERTIARY,
-            ],
-          },
-        },
-      },
-    },
-    {
-      propertyName: "imageSize",
-      dependencies: ["primaryColumns", "columnType"],
-      label: "Image Size",
-      helpText: "Sets the size of the image",
-      defaultValue: "DEFAULT",
-      controlType: "ICON_TABS",
-      fullWidth: true,
-      options: [
-        {
-          label: "Default",
-          value: "DEFAULT",
-        },
-        {
-          label: "Medium",
-          value: "MEDIUM",
-        },
-        {
-          label: "Large",
-          value: "LARGE",
-        },
-      ],
-      isBindProperty: false,
-      isTriggerProperty: false,
       hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [ColumnTypes.IMAGE]);
+        return hideByColumnType(props, propertyPath, [
+          ColumnTypes.ICON_BUTTON,
+          ColumnTypes.BUTTON,
+        ]);
       },
+      dependencies: ["primaryColumns", "columnOrder"],
     },
   ],
 };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Icon.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Icon.ts
index f54da027ffe3..5e6b9cb14233 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Icon.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Icon.ts
@@ -20,7 +20,6 @@ export default {
       updateHook: updateIconAlignment,
       dependencies: ["primaryColumns", "columnOrder"],
       controlType: "ICON_SELECT",
-      customJSControl: "TABLE_COMPUTE_VALUE",
       isJSConvertible: true,
       isBindProperty: true,
       isTriggerProperty: false,
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/SaveButtonProperties.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/SaveButtonProperties.ts
index 5672adf8a1fa..c670e1a0d6bd 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/SaveButtonProperties.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/SaveButtonProperties.ts
@@ -28,7 +28,7 @@ export default {
           propertyName: "saveActionLabel",
           label: "Text",
           helpText: "Sets the label text of the button",
-          controlType: "TABLE_COMPUTE_VALUE",
+
           dependencies: ["primaryColumns"],
           isBindProperty: true,
           isTriggerProperty: false,
@@ -61,7 +61,7 @@ export default {
           helpText: "Controls the visibility of the save button",
           defaultValue: true,
           controlType: "SWITCH",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           isBindProperty: true,
           isTriggerProperty: false,
@@ -78,7 +78,7 @@ export default {
           helpText: "Disables clicks to the save button",
           defaultValue: false,
           controlType: "SWITCH",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           isBindProperty: true,
           isTriggerProperty: false,
@@ -116,7 +116,7 @@ export const saveButtonStyleConfig = {
           controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2",
           helpText: "Changes the color of the button",
           isJSConvertible: true,
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           dependencies: ["primaryColumns"],
           isBindProperty: true,
           validation: {
@@ -135,7 +135,7 @@ export const saveButtonStyleConfig = {
           label: "Button variant",
           controlType: "ICON_TABS",
           fullWidth: true,
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           helpText: "Sets the variant of the save button",
           dependencies: ["primaryColumns"],
@@ -174,7 +174,7 @@ export const saveButtonStyleConfig = {
         {
           propertyName: "saveBorderRadius",
           label: "Border radius",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           helpText: "Rounds the corners of the save button's outer border edge",
           controlType: "BORDER_RADIUS_OPTIONS",
@@ -200,7 +200,7 @@ export const saveButtonStyleConfig = {
           helpText: "Sets the icon to be used for the save action button",
           dependencies: ["primaryColumns", "columnOrder"],
           controlType: "ICON_SELECT",
-          customJSControl: "TABLE_COMPUTE_VALUE",
+
           isJSConvertible: true,
           isBindProperty: true,
           isTriggerProperty: false,
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Select.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Select.ts
index b57e96a54b3d..d1cb66a30fa9 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Select.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Select.ts
@@ -18,7 +18,7 @@ export default {
       propertyName: "selectOptions",
       helpText: "Options to be shown on the select dropdown",
       label: "Options",
-      controlType: "TABLE_COMPUTE_VALUE",
+
       isJSConvertible: false,
       isBindProperty: true,
       validation: {
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/TextFormatting.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/TextFormatting.ts
index 001645eeba3d..89bea8b8bc61 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/TextFormatting.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/TextFormatting.ts
@@ -17,54 +17,6 @@ export default {
     );
   },
   children: [
-    {
-      propertyName: "textSize",
-      label: "Text size",
-      helpText: "Controls the size of text in the column",
-      controlType: "DROP_DOWN",
-      isJSConvertible: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      options: [
-        {
-          label: "S",
-          value: "0.875rem",
-          subText: "0.875rem",
-        },
-        {
-          label: "M",
-          value: "1rem",
-          subText: "1rem",
-        },
-        {
-          label: "L",
-          value: "1.25rem",
-          subText: "1.25rem",
-        },
-        {
-          label: "XL",
-          value: "1.875rem",
-          subText: "1.875rem",
-        },
-      ],
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      isTriggerProperty: false,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-        },
-      },
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.TEXT,
-          ColumnTypes.DATE,
-          ColumnTypes.NUMBER,
-          ColumnTypes.CURRENCY,
-          ColumnTypes.URL,
-        ]);
-      },
-    },
     {
       propertyName: "fontStyle",
       label: "Emphasis",
@@ -79,114 +31,18 @@ export default {
           icon: "text-italic",
           value: "ITALIC",
         },
-        {
-          icon: "text-underline",
-          value: "UNDERLINE",
-        },
-      ],
-      isJSConvertible: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
-      isTriggerProperty: false,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-        },
-      },
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.TEXT,
-          ColumnTypes.DATE,
-          ColumnTypes.NUMBER,
-          ColumnTypes.CURRENCY,
-          ColumnTypes.URL,
-        ]);
-      },
-    },
-    {
-      propertyName: "horizontalAlignment",
-      label: "Text align",
-      helpText: "Sets the horizontal alignment of the content in the column",
-      controlType: "ICON_TABS",
-      fullWidth: true,
-      options: [
-        {
-          startIcon: "align-left",
-          value: "LEFT",
-        },
-        {
-          startIcon: "align-center",
-          value: "CENTER",
-        },
-        {
-          startIcon: "align-right",
-          value: "RIGHT",
-        },
       ],
-      defaultValue: "LEFT",
       isJSConvertible: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
+
       dependencies: ["primaryColumns", "columnOrder"],
       isBindProperty: true,
-      validation: {
-        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
-        params: {
-          type: ValidationTypes.TEXT,
-          params: {
-            allowedValues: ["LEFT", "CENTER", "RIGHT"],
-          },
-        },
-      },
       isTriggerProperty: false,
-      hidden: (props: TableWidgetProps, propertyPath: string) => {
-        return hideByColumnType(props, propertyPath, [
-          ColumnTypes.TEXT,
-          ColumnTypes.DATE,
-          ColumnTypes.NUMBER,
-          ColumnTypes.CURRENCY,
-          ColumnTypes.URL,
-          ColumnTypes.CHECKBOX,
-          ColumnTypes.SWITCH,
-        ]);
-      },
-    },
-    {
-      propertyName: "verticalAlignment",
-      label: "Vertical alignment",
-      helpText: "Sets the vertical alignment of the content in the column",
-      controlType: "ICON_TABS",
-      fullWidth: true,
-      options: [
-        {
-          startIcon: "vertical-align-top",
-          value: "TOP",
-        },
-        {
-          startIcon: "vertical-align-middle",
-          value: "CENTER",
-        },
-        {
-          startIcon: "vertical-align-bottom",
-          value: "BOTTOM",
-        },
-      ],
-      defaultValue: "CENTER",
-      isJSConvertible: true,
-      customJSControl: "TABLE_COMPUTE_VALUE",
-      dependencies: ["primaryColumns", "columnOrder"],
-      isBindProperty: true,
       validation: {
         type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
         params: {
           type: ValidationTypes.TEXT,
-          params: {
-            allowedValues: ["TOP", "CENTER", "BOTTOM"],
-          },
         },
       },
-      isTriggerProperty: false,
       hidden: (props: TableWidgetProps, propertyPath: string) => {
         return hideByColumnType(props, propertyPath, [
           ColumnTypes.TEXT,
@@ -194,8 +50,6 @@ export default {
           ColumnTypes.NUMBER,
           ColumnTypes.CURRENCY,
           ColumnTypes.URL,
-          ColumnTypes.CHECKBOX,
-          ColumnTypes.SWITCH,
         ]);
       },
     },
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/index.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/index.ts
index a94f1067393d..6756975ea3d9 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/index.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/index.ts
@@ -1,19 +1,11 @@
 import { updateCustomColumnAliasOnLabelChange } from "../../../widget/propertyUtils";
-import Alignment from "./Alignment";
 import Basic from "./Basic";
-import BorderAndShadow from "./BorderAndShadow";
 import Color from "./Color";
 import Data from "./Data";
-import DiscardButtonproperties, {
-  discardButtonStyleConfig,
-} from "./DiscardButtonproperties";
+import DiscardButtonproperties from "./DiscardButtonproperties";
 import Events from "./Events";
 import General, { GeneralStyle } from "./General";
-import Icon from "./Icon";
-import SaveButtonProperties, {
-  saveButtonStyleConfig,
-} from "./SaveButtonProperties";
-import Select from "./Select";
+import SaveButtonProperties from "./SaveButtonProperties";
 import TextFormatting from "./TextFormatting";
 import Validations from "./Validation";
 import DateProperties from "./DateProperties";
@@ -30,19 +22,9 @@ export default {
     Validations,
     SaveButtonProperties,
     DiscardButtonproperties,
-    Select,
     Events,
     DateProperties,
   ],
-  styleChildren: [
-    GeneralStyle,
-    Icon,
-    Alignment,
-    TextFormatting,
-    Color,
-    saveButtonStyleConfig,
-    discardButtonStyleConfig,
-    BorderAndShadow,
-  ],
+  styleChildren: [GeneralStyle, TextFormatting, Color],
   updateHook: updateCustomColumnAliasOnLabelChange,
 };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts
index 062b2e7d2f4f..20074f79eab2 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts
@@ -1,18 +1,12 @@
-import {
-  createMessage,
-  TABLE_WIDGET_TOTAL_RECORD_TOOLTIP,
-} from "@appsmith/constants/messages";
 import type { PropertyPaneConfig } from "constants/PropertyControlConstants";
 import { ValidationTypes } from "constants/WidgetValidation";
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
 import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
 import type { TableWidgetProps } from "widgets/wds/WDSTableWidget/constants";
-import { ALLOW_TABLE_WIDGET_SERVER_SIDE_FILTERING } from "../../constants";
 import { InlineEditingSaveOptions } from "widgets/wds/WDSTableWidget/constants";
 import { composePropertyUpdateHook } from "widgets/WidgetUtils";
 import {
   tableDataValidation,
-  totalRecordsCountValidation,
   uniqueColumnNameValidation,
   updateColumnOrderHook,
   updateCustomColumnAliasOnLabelChange,
@@ -20,7 +14,6 @@ import {
   updateInlineEditingSaveOptionHook,
 } from "../../widget/propertyUtils";
 import panelConfig from "./PanelConfig";
-import { WDSTableWidget } from "../../widget/index";
 
 export const contentConfig = [
   {
@@ -78,6 +71,7 @@ export const contentConfig = [
           "cellBackground",
           "verticalAlignment",
           "horizontalAlignment",
+          "type",
         ],
         isBindProperty: false,
         isTriggerProperty: false,
@@ -166,59 +160,6 @@ export const contentConfig = [
         isTriggerProperty: false,
         validation: { type: ValidationTypes.BOOLEAN },
       },
-      {
-        helpText:
-          "Bind the Table.pageNo property in your API and call it onPageChange",
-        propertyName: "serverSidePaginationEnabled",
-        label: "Server side pagination",
-        controlType: "SWITCH",
-        isBindProperty: false,
-        isTriggerProperty: false,
-      },
-      {
-        helpText: createMessage(TABLE_WIDGET_TOTAL_RECORD_TOOLTIP),
-        propertyName: "totalRecordsCount",
-        label: "Total Records",
-        controlType: "INPUT_TEXT",
-        placeholderText: "Enter total record count",
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: {
-          type: ValidationTypes.FUNCTION,
-          params: {
-            fn: totalRecordsCountValidation,
-            expected: {
-              type: "Number",
-              example: "10",
-              autocompleteDataType: AutocompleteDataType.STRING,
-            },
-          },
-        },
-        hidden: (props: TableWidgetProps) => !props.serverSidePaginationEnabled,
-        dependencies: ["serverSidePaginationEnabled"],
-      },
-      {
-        helpText: "when a table page is changed",
-        propertyName: "onPageChange",
-        label: "onPageChange",
-        controlType: "ACTION_SELECTOR",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: true,
-        hidden: (props: TableWidgetProps) => !props.serverSidePaginationEnabled,
-        dependencies: ["serverSidePaginationEnabled"],
-      },
-      {
-        helpText: "when a table page size is changed",
-        propertyName: "onPageSizeChange",
-        label: "onPageSizeChange",
-        controlType: "ACTION_SELECTOR",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: true,
-        hidden: (props: TableWidgetProps) => !props.serverSidePaginationEnabled,
-        dependencies: ["serverSidePaginationEnabled"],
-      },
     ],
   },
   {
@@ -234,40 +175,6 @@ export const contentConfig = [
         isTriggerProperty: false,
         validation: { type: ValidationTypes.BOOLEAN },
       },
-      {
-        propertyName: "enableClientSideSearch",
-        label: "Client side search",
-        helpText: "Searches all results only on the data which is loaded",
-        controlType: "SWITCH",
-        isBindProperty: false,
-        isTriggerProperty: false,
-        hidden: (props: TableWidgetProps) => !props.isVisibleSearch,
-        dependencies: ["isVisibleSearch"],
-      },
-      {
-        propertyName: "enableServerSideFiltering",
-        label: "Server side filtering",
-        helpText: "Filters all the results on the server side",
-        controlType: "SWITCH",
-        isBindProperty: false,
-        isTriggerProperty: false,
-        defaultValue: false,
-        hidden: () =>
-          !WDSTableWidget.getFeatureFlag(
-            ALLOW_TABLE_WIDGET_SERVER_SIDE_FILTERING,
-          ),
-      },
-      {
-        propertyName: "onTableFilterUpdate",
-        label: "onTableFilterUpdate",
-        helpText: "when table filter is modified by the user",
-        controlType: "ACTION_SELECTOR",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: true,
-        hidden: (props: TableWidgetProps) => !props.enableServerSideFiltering,
-        dependencies: ["enableServerSideFiltering"],
-      },
       {
         propertyName: "defaultSearchText",
         label: "Default search text",
@@ -280,27 +187,6 @@ export const contentConfig = [
         hidden: (props: TableWidgetProps) => !props.isVisibleSearch,
         dependencies: ["isVisibleSearch"],
       },
-      {
-        propertyName: "onSearchTextChanged",
-        label: "onSearchTextChanged",
-        helpText: "when search text is modified by the user",
-        controlType: "ACTION_SELECTOR",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: true,
-        hidden: (props: TableWidgetProps) => !props.isVisibleSearch,
-        dependencies: ["isVisibleSearch"],
-      },
-      {
-        propertyName: "isVisibleFilters",
-        helpText: "Toggle visibility of the filters",
-        label: "Allow filtering",
-        controlType: "SWITCH",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.BOOLEAN },
-      },
     ],
   },
   {
@@ -401,82 +287,6 @@ export const contentConfig = [
       },
     ],
   },
-  {
-    sectionName: "Adding a row",
-    children: [
-      {
-        propertyName: "allowAddNewRow",
-        helpText: "Enables adding a new row",
-        isJSConvertible: true,
-        label: "Allow adding a row",
-        controlType: "SWITCH",
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: {
-          type: ValidationTypes.BOOLEAN,
-        },
-      },
-      {
-        propertyName: "onAddNewRowSave",
-        helpText: "when a add new row save button is clicked",
-        label: "onSave",
-        controlType: "ACTION_SELECTOR",
-        hidden: (props: TableWidgetProps) => {
-          return !props.allowAddNewRow;
-        },
-        dependencies: ["allowAddNewRow", "primaryColumns"],
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: true,
-        additionalAutoComplete: (props: TableWidgetProps) => {
-          const newRow: Record<string, unknown> = {};
-
-          if (props.primaryColumns) {
-            Object.values(props.primaryColumns)
-              .filter((column) => !column.isDerived)
-              .forEach((column) => {
-                newRow[column.alias] = "";
-              });
-          }
-
-          return {
-            newRow,
-          };
-        },
-      },
-      {
-        propertyName: "onAddNewRowDiscard",
-        helpText: "when a add new row discard button is clicked",
-        label: "onDiscard",
-        controlType: "ACTION_SELECTOR",
-        hidden: (props: TableWidgetProps) => {
-          return !props.allowAddNewRow;
-        },
-        dependencies: ["allowAddNewRow"],
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: true,
-      },
-      {
-        propertyName: "defaultNewRow",
-        helpText: "Default new row values",
-        label: "Default values",
-        controlType: "INPUT_TEXT",
-        dependencies: ["allowAddNewRow"],
-        hidden: (props: TableWidgetProps) => {
-          return !props.allowAddNewRow;
-        },
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: {
-          type: ValidationTypes.OBJECT,
-          params: {
-            default: {},
-          },
-        },
-      },
-    ],
-  },
   {
     sectionName: "General",
     children: [
@@ -503,42 +313,6 @@ export const contentConfig = [
         isTriggerProperty: false,
         validation: { type: ValidationTypes.BOOLEAN },
       },
-      {
-        propertyName: "isVisibleDownload",
-        helpText: "Toggle visibility of the data download",
-        label: "Allow download",
-        controlType: "SWITCH",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.BOOLEAN },
-      },
-      {
-        propertyName: "canFreezeColumn",
-        helpText: "Controls whether the user can freeze columns",
-        label: "Allow column freeze",
-        controlType: "SWITCH",
-        defaultValue: true,
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.BOOLEAN },
-      },
-      {
-        propertyName: "delimiter",
-        label: "CSV separator",
-        controlType: "INPUT_TEXT",
-        placeholderText: "Enter CSV separator",
-        helpText: "The character used for separating the CSV download file.",
-        isBindProperty: true,
-        isTriggerProperty: false,
-        defaultValue: ",",
-        validation: {
-          type: ValidationTypes.TEXT,
-        },
-        hidden: (props: TableWidgetProps) => !props.isVisibleDownload,
-        dependencies: ["isVisibleDownload"],
-      },
     ],
   },
 ] as PropertyPaneConfig[];
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts
index 84ac34ccbb29..5bff8394e0eb 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/styleConfig.ts
@@ -1,173 +1,4 @@
-import { ValidationTypes } from "constants/WidgetValidation";
-import { updateColumnStyles } from "../../widget/propertyUtils";
-
 export const styleConfig = [
-  {
-    sectionName: "Text formatting",
-    children: [
-      {
-        propertyName: "textSize",
-        label: "Text size",
-        helpText: "Controls the size of text in the column",
-        controlType: "DROP_DOWN",
-        updateHook: updateColumnStyles,
-        dependencies: ["primaryColumns"],
-        options: [
-          {
-            label: "S",
-            value: "0.875rem",
-            subText: "0.875rem",
-          },
-          {
-            label: "M",
-            value: "1rem",
-            subText: "1rem",
-          },
-          {
-            label: "L",
-            value: "1.25rem",
-            subText: "1.25rem",
-          },
-          {
-            label: "XL",
-            value: "1.875rem",
-            subText: "1.875rem",
-          },
-        ],
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.TEXT },
-      },
-      {
-        propertyName: "fontStyle",
-        label: "Emphasis",
-        helpText: "Controls the style of the text in the column",
-        controlType: "BUTTON_GROUP",
-        updateHook: updateColumnStyles,
-        dependencies: ["primaryColumns"],
-        options: [
-          {
-            icon: "text-bold",
-            value: "BOLD",
-          },
-          {
-            icon: "text-italic",
-            value: "ITALIC",
-          },
-        ],
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.TEXT },
-      },
-      {
-        propertyName: "horizontalAlignment",
-        label: "Text align",
-        helpText: "Sets the horizontal alignment of the content in the column",
-        controlType: "ICON_TABS",
-        fullWidth: true,
-        updateHook: updateColumnStyles,
-        dependencies: ["primaryColumns"],
-        options: [
-          {
-            startIcon: "align-left",
-            value: "LEFT",
-          },
-          {
-            startIcon: "align-center",
-            value: "CENTER",
-          },
-          {
-            startIcon: "align-right",
-            value: "RIGHT",
-          },
-        ],
-        defaultValue: "LEFT",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: {
-          type: ValidationTypes.TEXT,
-          params: {
-            allowedValues: ["LEFT", "CENTER", "RIGHT"],
-          },
-        },
-      },
-      {
-        propertyName: "verticalAlignment",
-        label: "Vertical alignment",
-        helpText: "Sets the vertical alignment of the content in the column",
-        controlType: "ICON_TABS",
-        fullWidth: true,
-        updateHook: updateColumnStyles,
-        dependencies: ["primaryColumns"],
-        options: [
-          {
-            startIcon: "vertical-align-top",
-            value: "TOP",
-          },
-          {
-            startIcon: "vertical-align-middle",
-            value: "CENTER",
-          },
-          {
-            startIcon: "vertical-align-bottom",
-            value: "BOTTOM",
-          },
-        ],
-        defaultValue: "CENTER",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: {
-          type: ValidationTypes.TEXT,
-          params: {
-            allowedValues: ["TOP", "CENTER", "BOTTOM"],
-          },
-        },
-      },
-    ],
-  },
-  {
-    sectionName: "Color",
-    children: [
-      {
-        propertyName: "cellBackground",
-        label: "Cell background color",
-        helpText: "Changes the background color of the cell",
-        controlType: "COLOR_PICKER",
-        updateHook: updateColumnStyles,
-        dependencies: ["primaryColumns"],
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.TEXT },
-      },
-      {
-        propertyName: "accentColor",
-        label: "Accent color",
-        controlType: "COLOR_PICKER",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.TEXT },
-        invisible: true,
-      },
-      {
-        propertyName: "textColor",
-        label: "Text color",
-        helpText: "Controls the color of text in the column",
-        controlType: "COLOR_PICKER",
-        updateHook: updateColumnStyles,
-        dependencies: ["primaryColumns"],
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: { type: ValidationTypes.TEXT },
-      },
-    ],
-  },
   {
     sectionName: "Border and shadow",
     children: [
diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx
index eac642cd0bc5..0c4cb402e4dc 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx
+++ b/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx
@@ -1,16 +1,13 @@
-import React, { lazy, Suspense } from "react";
 import log from "loglevel";
+import React, { lazy, Suspense } from "react";
 import memoizeOne from "memoize-one";
 
 import _, {
   filter,
-  isArray,
   isEmpty,
   isNil,
   isNumber,
-  isObject,
   isString,
-  orderBy,
   pickBy,
   union,
   without,
@@ -20,9 +17,8 @@ import _, {
 
 import type { WidgetState } from "widgets/BaseWidget";
 import BaseWidget from "widgets/BaseWidget";
-import { RenderModes } from "constants/WidgetConstants";
+import { FontStyleTypes, RenderModes } from "constants/WidgetConstants";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
-import Skeleton from "components/utils/Skeleton";
 import { noop, retryPromise } from "utils/AppsmithUtils";
 import type {
   ColumnProperties,
@@ -30,30 +26,19 @@ import type {
   ReactTableFilter,
 } from "../component/Constants";
 import {
-  AddNewRowActions,
-  CompactModeTypes,
   DEFAULT_FILTER,
   SORT_ORDER,
   SortOrderTypes,
   StickyType,
 } from "../component/Constants";
 import type {
-  EditableCell,
   OnColumnEventArgs,
   TableWidgetProps,
   TransientDataPayload,
 } from "../constants";
 import {
-  ActionColumnTypes,
   ALLOW_TABLE_WIDGET_SERVER_SIDE_FILTERING,
-  ColumnTypes,
-  DEFAULT_BUTTON_LABEL,
-  DEFAULT_COLUMN_WIDTH,
-  DEFAULT_MENU_BUTTON_LABEL,
-  DEFAULT_MENU_VARIANT,
   defaultEditableCell,
-  EditableCellActions,
-  InlineEditingSaveOptions,
   ORIGINAL_INDEX_KEY,
   PaginationDirection,
   TABLE_COLUMN_ORDER_KEY,
@@ -65,7 +50,6 @@ import {
   generateNewColumnOrderFromStickyValue,
   getAllStickyColumnsCount,
   getAllTableColumnKeys,
-  getBooleanPropertyValue,
   getCellProperties,
   getColumnOrderByWidgetIdFromLS,
   getColumnType,
@@ -73,34 +57,20 @@ import {
   getDerivedColumns,
   getSelectRowIndex,
   getSelectRowIndices,
-  getTableStyles,
-  isColumnTypeEditable,
   updateAndSyncTableLocalColumnOrders,
 } from "./utilities";
 import type { BatchPropertyUpdatePayload } from "actions/controlActions";
-import type { IconName } from "@blueprintjs/icons";
-import { IconNames } from "@blueprintjs/icons";
-import { Colors } from "constants/Colors";
 import equal from "fast-deep-equal/es6";
 import { sanitizeKey } from "widgets/WidgetUtils";
-import PlainTextCell from "../component/cellComponents/PlainTextCell";
-import { ButtonCell } from "../component/cellComponents/ButtonCell";
-import { MenuButtonCell } from "../component/cellComponents/MenuButtonCell";
-import { ImageCell } from "../component/cellComponents/ImageCell";
-import { VideoCell } from "../component/cellComponents/VideoCell";
-import { IconButtonCell } from "../component/cellComponents/IconButtonCell";
-import { EditActionCell } from "../component/cellComponents/EditActionsCell";
+import {
+  PlainTextCell,
+  URLCell,
+  ButtonCell,
+} from "../component/cellComponents";
+
 import { klona as clone } from "klona";
-import { CheckboxCell } from "../component/cellComponents/CheckboxCell";
-import { SwitchCell } from "../component/cellComponents/SwitchCell";
-import { SelectCell } from "../component/cellComponents/SelectCell";
-import { CellWrapper } from "../component/TableStyledWrappers";
 import localStorage from "utils/localStorage";
 import type { Stylesheet } from "entities/AppTheming";
-import { DateCell } from "../component/cellComponents/DateCell";
-import type { MenuItem } from "widgets/MenuButtonWidget/constants";
-import { MenuItemsSource } from "widgets/MenuButtonWidget/constants";
-import { TimePrecision } from "widgets/DatePickerWidget2/constants";
 import type { getColumns } from "./reactTableUtils/getColumnsPureFn";
 import { getMemoiseGetColumnsWithLocalStorageFn } from "./reactTableUtils/getColumnsPureFn";
 import type {
@@ -346,16 +316,15 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       return;
     }
 
-    const existingColumnIds = Object.keys(primaryColumns);
+    const existingColumnsKeys = Object.keys(primaryColumns);
     const newTableColumns: Record<string, ColumnProperties> = {};
-    const tableStyles = getTableStyles(this.props);
-    const columnKeys: string[] = getAllTableColumnKeys(tableData);
+    const allPosibleColumnsKeys: string[] = getAllTableColumnKeys(tableData);
 
     /*
      * Generate default column properties for all columns
      * But do not replace existing columns with the same id
      */
-    columnKeys.forEach((columnKey, index) => {
+    allPosibleColumnsKeys.forEach((columnKey, index) => {
       const existingColumn = this.getColumnByOriginalId(columnKey);
 
       if (!!existingColumn) {
@@ -363,7 +332,10 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         newTableColumns[existingColumn.id] = existingColumn;
       } else {
         const hashedColumnKey = sanitizeKey(columnKey, {
-          existingKeys: union(existingColumnIds, Object.keys(newTableColumns)),
+          existingKeys: union(
+            existingColumnsKeys,
+            Object.keys(newTableColumns),
+          ),
         });
         // Create column properties for the new column
         const columnType = getColumnType(tableData, columnKey);
@@ -378,7 +350,6 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
 
         newTableColumns[columnProperties.id] = {
           ...columnProperties,
-          ...tableStyles,
         };
       }
     });
@@ -399,7 +370,7 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     const newColumnIds = Object.keys(newTableColumns);
 
     // check if the columns ids differ
-    if (_.xor(existingColumnIds, newColumnIds).length > 0) {
+    if (_.xor(existingColumnsKeys, newColumnIds).length > 0) {
       return newTableColumns;
     } else {
       return;
@@ -610,11 +581,6 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         this.updateColumnProperties(newPrimaryColumns);
       }
     }
-
-    if (canFreezeColumn && renderMode === RenderModes.PAGE) {
-      //dont neet to batch this since single action
-      this.hydrateStickyColumns();
-    }
   }
 
   componentDidUpdate(prevProps: TableWidgetProps) {
@@ -697,7 +663,6 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       // reset updatedRowIndex whenever transientTableData is flushed.
       pushBatchMetaUpdates("updatedRowIndex", -1);
 
-      this.pushClearEditableCellsUpdates();
       pushBatchMetaUpdates("selectColumnFilterText", {});
     }
 
@@ -944,7 +909,7 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     );
 
     return (
-      <Suspense fallback={<Skeleton />}>
+      <Suspense fallback={<>Loading...</>}>
         <ReactTableComponent
           accentColor={this.props.accentColor}
           allowAddNewRow={this.props.allowAddNewRow}
@@ -958,14 +923,8 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           canFreezeColumn={this.props.canFreezeColumn}
           columnWidthMap={this.props.columnWidthMap}
           columns={tableColumns}
-          compactMode={this.props.compactMode || CompactModeTypes.DEFAULT}
           delimiter={delimiter}
           disableDrag={this.toggleDrag}
-          disabledAddNewRowSave={this.hasInvalidColumnCell()}
-          editMode={this.props.renderMode === RenderModes.CANVAS}
-          editableCell={this.props.editableCell}
-          filters={this.props.filters}
-          handleColumnFreeze={this.handleColumnFreeze}
           handleReorderColumn={this.handleReorderColumn}
           handleResizeColumn={this.handleResizeColumn}
           height={componentHeight}
@@ -981,10 +940,6 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
             this.props.multiRowSelection && !this.props.isAddRowInProgress
           }
           nextPageClick={this.handleNextPageClick}
-          onAddNewRow={this.handleAddNewRowClick}
-          onAddNewRowAction={this.handleAddNewRowAction}
-          onBulkEditDiscard={this.onBulkEditDiscard}
-          onBulkEditSave={this.onBulkEditSave}
           onConnectData={this.onConnectData}
           onRowClick={this.handleRowClick}
           onSearch={this.handleSearchTable}
@@ -1003,11 +958,7 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           }
           selectedRowIndices={this.getSelectedRowIndices()}
           serverSidePaginationEnabled={!!this.props.serverSidePaginationEnabled}
-          showConnectDataOverlay={
-            primaryColumns &&
-            !Object.keys(primaryColumns).length &&
-            this.props.renderMode === RenderModes.CANVAS
-          }
+          showConnectDataOverlay={false}
           sortTableColumn={this.handleColumnSorting}
           tableData={finalTableData}
           totalRecordsCount={totalRecordsCount}
@@ -1568,34 +1519,6 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return -1;
   };
 
-  onBulkEditSave = () => {
-    this.props.updateWidgetMetaProperty(
-      "transientTableData",
-      this.props.transientTableData,
-      {
-        triggerPropertyName: "onBulkSave",
-        dynamicString: this.props.onBulkSave,
-        event: {
-          type: EventType.ON_BULK_SAVE,
-        },
-      },
-    );
-  };
-
-  onBulkEditDiscard = () => {
-    this.props.updateWidgetMetaProperty(
-      "transientTableData",
-      {},
-      {
-        triggerPropertyName: "onBulkDiscard",
-        dynamicString: this.props.onBulkDiscard,
-        event: {
-          type: EventType.ON_BULK_DISCARD,
-        },
-      },
-    );
-  };
-
   renderCell = (props: any) => {
     const column =
       this.getColumnByOriginalId(
@@ -1603,1020 +1526,70 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       ) || props.cell.column.columnProperties;
     const rowIndex = props.cell.row.index;
 
-    /*
-     * We don't need to render cells that don't display data (button, iconButton, etc)
-     */
-    if (
-      this.props.isAddRowInProgress &&
-      rowIndex === 0 &&
-      ActionColumnTypes.includes(column.columnType)
-    ) {
-      return <CellWrapper />;
-    }
-
     const isHidden = !column.isVisible;
-    const {
-      compactMode = CompactModeTypes.DEFAULT,
-      filteredTableData = [],
-      multiRowSelection,
-      selectedRowIndex,
-      selectedRowIndices,
-    } = this.props;
-    let row;
-    let originalIndex: number;
-
-    /*
-     * In add new row flow, a temporary row is injected at the top of the tableData, which doesn't
-     * have original row index value. so we are using -1 as the value
-     */
-    if (this.props.isAddRowInProgress) {
-      row = filteredTableData[rowIndex - 1];
-      originalIndex = rowIndex === 0 ? -1 : row[ORIGINAL_INDEX_KEY] ?? rowIndex;
-    } else {
-      row = filteredTableData[rowIndex];
-      originalIndex = row[ORIGINAL_INDEX_KEY] ?? rowIndex;
-    }
-
-    const isNewRow = this.props.isAddRowInProgress && rowIndex === 0;
+    const { filteredTableData = [] } = this.props;
+    const row = filteredTableData[rowIndex];
+    const originalIndex = row[ORIGINAL_INDEX_KEY] ?? rowIndex;
 
     /*
      * cellProperties order or size does not change when filter/sorting/grouping is applied
      * on the data thus original index is needed to identify the column's cell property.
      */
-    const cellProperties = getCellProperties(column, originalIndex, isNewRow);
-    let isSelected = false;
-
-    if (this.props.transientTableData) {
-      cellProperties.hasUnsavedChanges =
-        this.props.transientTableData.hasOwnProperty(originalIndex) &&
-        this.props.transientTableData[originalIndex].hasOwnProperty(
-          props.cell.column.columnProperties.alias,
-        );
-    }
-
-    if (multiRowSelection) {
-      isSelected =
-        _.isArray(selectedRowIndices) && selectedRowIndices.includes(rowIndex);
-    } else {
-      isSelected = selectedRowIndex === rowIndex;
-    }
-
-    const isColumnEditable =
-      column.isEditable && isColumnTypeEditable(column.columnType);
-    const alias = props.cell.column.columnProperties.alias;
-
-    const isCellEditable = isColumnEditable && cellProperties.isCellEditable;
-
-    const isCellEditMode =
-      (props.cell.column.alias === this.props.editableCell?.column &&
-        rowIndex === this.props.editableCell?.index) ||
-      (isNewRow && isColumnEditable);
-
-    const shouldDisableEdit =
-      (this.props.inlineEditingSaveOption ===
-        InlineEditingSaveOptions.ROW_LEVEL &&
-        this.props.updatedRowIndices.length &&
-        this.props.updatedRowIndices.indexOf(originalIndex) === -1) ||
-      (this.hasInvalidColumnCell() && !isNewRow);
-
-    const disabledEditMessage = `Save or discard the ${
-      this.props.isAddRowInProgress ? "newly added" : "unsaved"
-    } row to start editing here`;
-
-    if (this.props.isAddRowInProgress) {
-      cellProperties.isCellDisabled = rowIndex !== 0;
-
-      if (rowIndex === 0) {
-        cellProperties.cellBackground = "";
-      }
-    }
+    const cellProperties = getCellProperties(column, originalIndex);
 
     switch (column.columnType) {
-      case ColumnTypes.BUTTON:
+      case "url":
         return (
-          <ButtonCell
+          <URLCell
             allowCellWrapping={cellProperties.allowCellWrapping}
-            cellBackground={cellProperties.cellBackground}
-            columnActions={[
-              {
-                backgroundColor:
-                  cellProperties.buttonColor || this.props.accentColor,
-                eventType: EventType.ON_CLICK,
-                id: column.id,
-                isVisible: true,
-                label: cellProperties.buttonLabel || DEFAULT_BUTTON_LABEL,
-                dynamicTrigger: column.onClick || "",
-                variant: cellProperties.buttonVariant,
-                borderRadius:
-                  cellProperties.borderRadius || this.props.borderRadius,
-                boxShadow: cellProperties.boxShadow,
-              },
-            ]}
-            compactMode={compactMode}
-            fontStyle={cellProperties.fontStyle}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            isCellDisabled={cellProperties.isCellDisabled}
+            cellColor={cellProperties.cellColor}
+            href={props.cell.value}
+            isBold={cellProperties.fontStyle?.includes(FontStyleTypes.BOLD)}
             isCellVisible={cellProperties.isCellVisible ?? true}
-            isDisabled={!!cellProperties.isDisabled}
-            isHidden={isHidden}
-            isSelected={isSelected}
-            onCommandClick={(action: string, onComplete: () => void) =>
-              this.onColumnEvent({
-                rowIndex,
-                action,
-                onComplete,
-                triggerPropertyName: "onClick",
-                eventType: EventType.ON_CLICK,
-              })
-            }
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            verticalAlignment={cellProperties.verticalAlignment}
-          />
-        );
-
-      case ColumnTypes.EDIT_ACTIONS:
-        return (
-          <EditActionCell
-            allowCellWrapping={cellProperties.allowCellWrapping}
-            cellBackground={cellProperties.cellBackground}
-            columnActions={[
-              {
-                id: EditableCellActions.SAVE,
-                label: cellProperties.saveActionLabel,
-                dynamicTrigger: column.onSave || "",
-                eventType: EventType.ON_ROW_SAVE,
-                iconName: cellProperties.saveActionIconName,
-                variant: cellProperties.saveButtonVariant,
-                backgroundColor:
-                  cellProperties.saveButtonColor || this.props.accentColor,
-                iconAlign: cellProperties.saveIconAlign,
-                borderRadius:
-                  cellProperties.saveBorderRadius || this.props.borderRadius,
-                isVisible: cellProperties.isSaveVisible,
-                isDisabled:
-                  cellProperties.isSaveDisabled || this.hasInvalidColumnCell(),
-                boxShadow: cellProperties.boxShadow,
-              },
-              {
-                id: EditableCellActions.DISCARD,
-                label: cellProperties.discardActionLabel,
-                dynamicTrigger: column.onDiscard || "",
-                eventType: EventType.ON_ROW_DISCARD,
-                iconName: cellProperties.discardActionIconName,
-                variant: cellProperties.discardButtonVariant,
-                backgroundColor:
-                  cellProperties.discardButtonColor || this.props.accentColor,
-                iconAlign: cellProperties.discardIconAlign,
-                borderRadius:
-                  cellProperties.discardBorderRadius || this.props.borderRadius,
-                isVisible: cellProperties.isDiscardVisible,
-                isDisabled:
-                  cellProperties.isDiscardDisabled ||
-                  this.hasInvalidColumnCell(),
-                boxShadow: cellProperties.boxShadow,
-              },
-            ]}
-            compactMode={compactMode}
-            fontStyle={cellProperties.fontStyle}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellVisible={cellProperties.isCellVisible}
             isHidden={isHidden}
-            isSelected={isSelected}
-            onCommandClick={(
-              action: string,
-              onComplete: () => void,
-              eventType: EventType,
-            ) =>
-              this.onColumnEvent({
-                rowIndex,
-                action,
-                onComplete,
-                triggerPropertyName: "onClick",
-                eventType: eventType,
-              })
-            }
-            onDiscard={() =>
-              this.removeRowFromTransientTableData(originalIndex)
-            }
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            verticalAlignment={cellProperties.verticalAlignment}
+            isItalic={cellProperties.fontStyle?.includes(FontStyleTypes.ITALIC)}
+            text={cellProperties.displayText}
           />
         );
-
-      case ColumnTypes.SELECT:
+      case "button":
         return (
-          <SelectCell
-            accentColor={this.props.accentColor}
-            alias={props.cell.column.columnProperties.alias}
-            allowCellWrapping={cellProperties.allowCellWrapping}
-            autoOpen={!this.props.isAddRowInProgress}
-            borderRadius={cellProperties.borderRadius}
-            cellBackground={cellProperties.cellBackground}
-            columnType={column.columnType}
-            compactMode={compactMode}
-            disabledEditIcon={
-              shouldDisableEdit || this.props.isAddRowInProgress
-            }
-            disabledEditIconMessage={disabledEditMessage}
-            filterText={
-              this.props.selectColumnFilterText?.[
-                this.props.editableCell?.column || column.alias
-              ]
-            }
-            fontStyle={cellProperties.fontStyle}
-            hasUnsavedChanges={cellProperties.hasUnsavedChanges}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellEditMode={isCellEditMode}
-            isCellEditable={isCellEditable}
+          <ButtonCell
+            buttonLabel={cellProperties.buttonLabel || "Action"}
+            buttonVariant={cellProperties.buttonVariant}
+            cellColor={cellProperties.cellColor}
             isCellVisible={cellProperties.isCellVisible ?? true}
-            isEditable={isColumnEditable}
-            isFilterable={cellProperties.isFilterable}
+            isDisabled={cellProperties.isDisabled}
             isHidden={isHidden}
-            isNewRow={isNewRow}
-            key={props.key}
-            onFilterChange={this.onSelectFilterChange}
-            onFilterChangeActionString={column.onFilterUpdate}
-            onItemSelect={this.onOptionSelect}
-            onOptionSelectActionString={column.onOptionChange}
-            options={cellProperties.selectOptions}
-            placeholderText={cellProperties.placeholderText}
-            resetFilterTextOnClose={cellProperties.resetFilterTextOnClose}
-            rowIndex={rowIndex}
-            serverSideFiltering={cellProperties.serverSideFiltering}
-            tableWidth={this.props.componentWidth}
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            toggleCellEditMode={this.toggleCellEditMode}
-            value={props.cell.value}
-            verticalAlignment={cellProperties.verticalAlignment}
-            width={
-              this.props.columnWidthMap?.[column.id] || DEFAULT_COLUMN_WIDTH
-            }
-          />
-        );
-
-      case ColumnTypes.IMAGE:
-        const onClick = column.onClick
-          ? () =>
+            onClick={(onComplete: () => void) =>
               this.onColumnEvent({
                 rowIndex,
                 action: column.onClick,
-                triggerPropertyName: "onClick",
-                eventType: EventType.ON_CLICK,
-              })
-          : noop;
-
-        return (
-          <ImageCell
-            allowCellWrapping={cellProperties.allowCellWrapping}
-            cellBackground={cellProperties.cellBackground}
-            compactMode={compactMode}
-            fontStyle={cellProperties.fontStyle}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            imageSize={cellProperties.imageSize}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellVisible={cellProperties.isCellVisible ?? true}
-            isHidden={isHidden}
-            isSelected={isSelected}
-            onClick={onClick}
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            value={props.cell.value}
-            verticalAlignment={cellProperties.verticalAlignment}
-          />
-        );
-
-      case ColumnTypes.MENU_BUTTON:
-        const getVisibleItems = (rowIndex: number) => {
-          const { configureMenuItems, menuItems, menuItemsSource, sourceData } =
-            cellProperties;
-
-          if (menuItemsSource === MenuItemsSource.STATIC && menuItems) {
-            const visibleItems = Object.values(menuItems)?.filter((item) =>
-              getBooleanPropertyValue(item.isVisible, rowIndex),
-            );
-
-            return visibleItems?.length
-              ? orderBy(visibleItems, ["index"], ["asc"])
-              : [];
-          } else if (
-            menuItemsSource === MenuItemsSource.DYNAMIC &&
-            isArray(sourceData) &&
-            sourceData?.length &&
-            configureMenuItems?.config
-          ) {
-            const { config } = configureMenuItems;
-
-            const getValue = (
-              propertyName: keyof MenuItem,
-              index: number,
-              rowIndex: number,
-            ) => {
-              const value = config[propertyName];
-
-              if (isArray(value) && isArray(value[rowIndex])) {
-                return value[rowIndex][index];
-              } else if (isArray(value)) {
-                return value[index];
-              }
-
-              return value ?? null;
-            };
-
-            const visibleItems = sourceData
-              .map((item, index) => ({
-                ...item,
-                id: index.toString(),
-                isVisible: getValue("isVisible", index, rowIndex),
-                isDisabled: getValue("isDisabled", index, rowIndex),
-                index: index,
-                widgetId: "",
-                label: getValue("label", index, rowIndex),
-                onClick: config?.onClick,
-                textColor: getValue("textColor", index, rowIndex),
-                backgroundColor: getValue("backgroundColor", index, rowIndex),
-                iconAlign: getValue("iconAlign", index, rowIndex),
-                iconColor: getValue("iconColor", index, rowIndex),
-                iconName: getValue("iconName", index, rowIndex),
-              }))
-              .filter((item) => item.isVisible === true);
-
-            return visibleItems;
-          }
-
-          return [];
-        };
-
-        return (
-          <MenuButtonCell
-            allowCellWrapping={cellProperties.allowCellWrapping}
-            borderRadius={
-              cellProperties.borderRadius || this.props.borderRadius
-            }
-            boxShadow={cellProperties.boxShadow}
-            cellBackground={cellProperties.cellBackground}
-            compactMode={compactMode}
-            configureMenuItems={cellProperties.configureMenuItems}
-            fontStyle={cellProperties.fontStyle}
-            getVisibleItems={getVisibleItems}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            iconAlign={cellProperties.iconAlign}
-            iconName={cellProperties.menuButtoniconName || undefined}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellVisible={cellProperties.isCellVisible ?? true}
-            isCompact={!!cellProperties.isCompact}
-            isDisabled={!!cellProperties.isDisabled}
-            isHidden={isHidden}
-            isSelected={isSelected}
-            label={cellProperties.menuButtonLabel ?? DEFAULT_MENU_BUTTON_LABEL}
-            menuColor={
-              cellProperties.menuColor || this.props.accentColor || Colors.GREEN
-            }
-            menuItems={cellProperties.menuItems}
-            menuItemsSource={cellProperties.menuItemsSource}
-            menuVariant={cellProperties.menuVariant ?? DEFAULT_MENU_VARIANT}
-            onCommandClick={(
-              action: string,
-              index?: number,
-              onComplete?: () => void,
-            ) => {
-              const additionalData: Record<
-                string,
-                string | number | Record<string, unknown>
-              > = {};
-
-              if (cellProperties?.sourceData && _.isNumber(index)) {
-                additionalData.currentItem = cellProperties.sourceData[index];
-                additionalData.currentIndex = index;
-              }
-
-              return this.onColumnEvent({
-                rowIndex,
-                action,
-                onComplete,
-                triggerPropertyName: "onClick",
-                eventType: EventType.ON_CLICK,
-                additionalData,
-              });
-            }}
-            rowIndex={originalIndex}
-            sourceData={cellProperties.sourceData}
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            verticalAlignment={cellProperties.verticalAlignment}
-          />
-        );
-
-      case ColumnTypes.ICON_BUTTON:
-        return (
-          <IconButtonCell
-            allowCellWrapping={cellProperties.allowCellWrapping}
-            borderRadius={
-              cellProperties.borderRadius || this.props.borderRadius
-            }
-            boxShadow={cellProperties.boxShadow || "NONE"}
-            buttonColor={
-              cellProperties.buttonColor ||
-              this.props.accentColor ||
-              Colors.GREEN
-            }
-            buttonVariant={cellProperties.buttonVariant || "PRIMARY"}
-            cellBackground={cellProperties.cellBackground}
-            columnActions={[
-              {
-                id: column.id,
-                dynamicTrigger: column.onClick || "",
-              },
-            ]}
-            compactMode={compactMode}
-            disabled={!!cellProperties.isDisabled}
-            fontStyle={cellProperties.fontStyle}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            iconName={(cellProperties.iconName || IconNames.ADD) as IconName}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellVisible={cellProperties.isCellVisible ?? true}
-            isHidden={isHidden}
-            isSelected={isSelected}
-            onCommandClick={(action: string, onComplete: () => void) =>
-              this.onColumnEvent({
-                rowIndex,
-                action,
                 onComplete,
                 triggerPropertyName: "onClick",
                 eventType: EventType.ON_CLICK,
               })
             }
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            verticalAlignment={cellProperties.verticalAlignment}
-          />
-        );
-
-      case ColumnTypes.VIDEO:
-        return (
-          <VideoCell
-            allowCellWrapping={cellProperties.allowCellWrapping}
-            cellBackground={cellProperties.cellBackground}
-            compactMode={compactMode}
-            fontStyle={cellProperties.fontStyle}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellVisible={cellProperties.isCellVisible ?? true}
-            isHidden={isHidden}
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            value={props.cell.value}
-            verticalAlignment={cellProperties.verticalAlignment}
-          />
-        );
-
-      case ColumnTypes.CHECKBOX:
-        return (
-          <CheckboxCell
-            accentColor={this.props.accentColor}
-            borderRadius={
-              cellProperties.borderRadius || this.props.borderRadius
-            }
-            cellBackground={cellProperties.cellBackground}
-            compactMode={compactMode}
-            disabledCheckbox={
-              shouldDisableEdit || (this.props.isAddRowInProgress && !isNewRow)
-            }
-            disabledCheckboxMessage={disabledEditMessage}
-            hasUnSavedChanges={cellProperties.hasUnsavedChanges}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellEditable={isCellEditable}
-            isCellVisible={cellProperties.isCellVisible ?? true}
-            isHidden={isHidden}
-            onChange={() =>
-              this.onCheckChange(
-                column,
-                props.cell.row.values,
-                !props.cell.value,
-                alias,
-                originalIndex,
-                rowIndex,
-              )
-            }
-            value={props.cell.value}
-            verticalAlignment={cellProperties.verticalAlignment}
-          />
-        );
-
-      case ColumnTypes.SWITCH:
-        return (
-          <SwitchCell
-            accentColor={this.props.accentColor}
-            cellBackground={cellProperties.cellBackground}
-            compactMode={compactMode}
-            disabledSwitch={
-              shouldDisableEdit || (this.props.isAddRowInProgress && !isNewRow)
-            }
-            disabledSwitchMessage={disabledEditMessage}
-            hasUnSavedChanges={cellProperties.hasUnsavedChanges}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellEditable={isCellEditable}
-            isCellVisible={cellProperties.isCellVisible ?? true}
-            isHidden={isHidden}
-            onChange={() =>
-              this.onCheckChange(
-                column,
-                props.cell.row.values,
-                !props.cell.value,
-                alias,
-                originalIndex,
-                rowIndex,
-              )
-            }
-            value={props.cell.value}
-            verticalAlignment={cellProperties.verticalAlignment}
-          />
-        );
-
-      case ColumnTypes.DATE:
-        return (
-          <DateCell
-            accentColor={this.props.accentColor}
-            alias={props.cell.column.columnProperties.alias}
-            borderRadius={this.props.borderRadius}
-            cellBackground={cellProperties.cellBackground}
-            closeOnSelection
-            columnType={column.columnType}
-            compactMode={compactMode}
-            disabledEditIcon={
-              shouldDisableEdit || this.props.isAddRowInProgress
-            }
-            disabledEditIconMessage={disabledEditMessage}
-            firstDayOfWeek={props.cell.column.columnProperties.firstDayOfWeek}
-            fontStyle={cellProperties.fontStyle}
-            hasUnsavedChanges={cellProperties.hasUnsavedChanges}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            inputFormat={cellProperties.inputFormat}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellEditMode={isCellEditMode}
-            isCellEditable={isCellEditable}
-            isCellVisible={cellProperties.isCellVisible ?? true}
-            isEditableCellValid={this.isColumnCellValid(alias)}
-            isHidden={isHidden}
-            isNewRow={isNewRow}
-            isRequired={
-              props.cell.column.columnProperties.validation
-                .isColumnEditableCellRequired
-            }
-            maxDate={props.cell.column.columnProperties.validation.maxDate}
-            minDate={props.cell.column.columnProperties.validation.minDate}
-            onCellTextChange={this.onCellTextChange}
-            onDateSave={this.onDateSave}
-            onDateSelectedString={
-              props.cell.column.columnProperties.onDateSelected
-            }
-            outputFormat={cellProperties.outputFormat}
-            rowIndex={rowIndex}
-            shortcuts={cellProperties.shortcuts}
-            tableWidth={this.props.componentWidth}
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            timePrecision={cellProperties.timePrecision || TimePrecision.NONE}
-            toggleCellEditMode={this.toggleCellEditMode}
-            updateNewRowValues={this.updateNewRowValues}
-            validationErrorMessage="This field is required"
-            value={props.cell.value}
-            verticalAlignment={cellProperties.verticalAlignment}
-            widgetId={this.props.widgetId}
           />
         );
-
       default:
-        let validationErrorMessage;
-
-        if (isCellEditMode) {
-          validationErrorMessage =
-            column.validation.isColumnEditableCellRequired &&
-            (isNil(props.cell.value) || props.cell.value === "")
-              ? "This field is required"
-              : column.validation?.errorMessage;
-        }
-
         return (
           <PlainTextCell
-            accentColor={this.props.accentColor}
-            alias={props.cell.column.columnProperties.alias}
             allowCellWrapping={cellProperties.allowCellWrapping}
-            cellBackground={cellProperties.cellBackground}
-            columnType={column.columnType}
-            compactMode={compactMode}
-            currencyCode={cellProperties.currencyCode}
-            decimals={cellProperties.decimals}
-            disabledEditIcon={
-              shouldDisableEdit || this.props.isAddRowInProgress
-            }
-            disabledEditIconMessage={disabledEditMessage}
-            displayText={cellProperties.displayText}
+            cellColor={cellProperties.cellColor}
             fontStyle={cellProperties.fontStyle}
-            hasUnsavedChanges={cellProperties.hasUnsavedChanges}
-            horizontalAlignment={cellProperties.horizontalAlignment}
-            isCellDisabled={cellProperties.isCellDisabled}
-            isCellEditMode={isCellEditMode}
-            isCellEditable={isCellEditable}
+            isBold={cellProperties.fontStyle?.includes(FontStyleTypes.BOLD)}
             isCellVisible={cellProperties.isCellVisible ?? true}
-            isEditableCellValid={this.isColumnCellValid(alias)}
             isHidden={isHidden}
-            isNewRow={isNewRow}
-            notation={cellProperties.notation}
-            onCellTextChange={this.onCellTextChange}
-            onSubmitString={props.cell.column.columnProperties.onSubmit}
-            rowIndex={rowIndex}
-            tableWidth={this.props.componentWidth}
-            textColor={cellProperties.textColor}
-            textSize={cellProperties.textSize}
-            thousandSeparator={cellProperties.thousandSeparator}
-            toggleCellEditMode={this.toggleCellEditMode}
-            validationErrorMessage={validationErrorMessage}
+            isItalic={cellProperties.fontStyle?.includes(FontStyleTypes.ITALIC)}
+            isUnderline={cellProperties.fontStyle?.includes(
+              FontStyleTypes.UNDERLINE,
+            )}
             value={props.cell.value}
-            verticalAlignment={cellProperties.verticalAlignment}
-            widgetId={this.props.widgetId}
           />
         );
     }
   };
 
-  onCellTextChange = (
-    value: EditableCell["value"],
-    inputValue: string,
-    alias: string,
-  ) => {
-    const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
-
-    if (this.props.isAddRowInProgress) {
-      this.updateNewRowValues(alias, inputValue, value);
-    } else {
-      pushBatchMetaUpdates("editableCell", {
-        ...this.props.editableCell,
-        value: value,
-        inputValue,
-      });
-
-      if (this.props.editableCell?.column) {
-        pushBatchMetaUpdates("columnEditableCellValue", {
-          ...this.props.columnEditableCellValue,
-          [this.props.editableCell?.column]: value,
-        });
-      }
-      commitBatchMetaUpdates();
-    }
-  };
-
-  toggleCellEditMode = (
-    enable: boolean,
-    rowIndex: number,
-    alias: string,
-    value: string | number,
-    onSubmit?: string,
-    action?: EditableCellActions,
-  ) => {
-    if (this.props.isAddRowInProgress) {
-      return;
-    }
-
-    if (enable) {
-      if (this.inlineEditTimer) {
-        clearTimeout(this.inlineEditTimer);
-      }
-      const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
-
-      pushBatchMetaUpdates("editableCell", {
-        column: alias,
-        index: rowIndex,
-        value: value,
-        // To revert back to previous on discard
-        initialValue: value,
-        inputValue: value,
-      });
-      pushBatchMetaUpdates("columnEditableCellValue", {
-        ...this.props.columnEditableCellValue,
-        [alias]: value,
-      });
-
-      /*
-       * We need to clear the selectedRowIndex and selectedRowIndices
-       * if the rows are sorted, to avoid selectedRow jumping to
-       * different page.
-       */
-      if (this.props.sortOrder.column) {
-        if (this.props.multiRowSelection) {
-          pushBatchMetaUpdates("selectedRowIndices", []);
-        } else {
-          pushBatchMetaUpdates("selectedRowIndex", -1);
-        }
-      }
-      commitBatchMetaUpdates();
-    } else {
-      if (
-        this.isColumnCellValid(alias) &&
-        action === EditableCellActions.SAVE &&
-        value !== this.props.editableCell?.initialValue
-      ) {
-        const { commitBatchMetaUpdates } = this.props;
-
-        this.pushTransientTableDataActionsUpdates({
-          [ORIGINAL_INDEX_KEY]: this.getRowOriginalIndex(rowIndex),
-          [alias]: this.props.editableCell?.value,
-        });
-
-        if (onSubmit && this.props.editableCell?.column) {
-          //since onSubmit is truthy that makes action truthy as well, so we can push this event
-          this.pushOnColumnEvent({
-            rowIndex: rowIndex,
-            action: onSubmit,
-            triggerPropertyName: "onSubmit",
-            eventType: EventType.ON_SUBMIT,
-            row: {
-              ...this.props.filteredTableData[rowIndex],
-              [this.props.editableCell.column]: this.props.editableCell.value,
-            },
-          });
-        }
-        commitBatchMetaUpdates();
-
-        this.clearEditableCell();
-      } else if (
-        action === EditableCellActions.DISCARD ||
-        value === this.props.editableCell?.initialValue
-      ) {
-        this.clearEditableCell();
-      }
-    }
-  };
-
-  onDateSave = (
-    rowIndex: number,
-    alias: string,
-    value: string,
-    onSubmit?: string,
-  ) => {
-    if (this.isColumnCellValid(alias)) {
-      const { commitBatchMetaUpdates } = this.props;
-
-      this.pushTransientTableDataActionsUpdates({
-        [ORIGINAL_INDEX_KEY]: this.getRowOriginalIndex(rowIndex),
-        [alias]: value,
-      });
-
-      if (onSubmit && this.props.editableCell?.column) {
-        //since onSubmit is truthy this makes action truthy as well, so we can push this event
-        this.pushOnColumnEvent({
-          rowIndex: rowIndex,
-          action: onSubmit,
-          triggerPropertyName: "onSubmit",
-          eventType: EventType.ON_SUBMIT,
-          row: {
-            ...this.props.filteredTableData[rowIndex],
-            [this.props.editableCell.column]: value,
-          },
-        });
-      }
-
-      commitBatchMetaUpdates();
-      this.clearEditableCell();
-    }
-  };
-  pushClearEditableCellsUpdates = () => {
-    const { pushBatchMetaUpdates } = this.props;
-
-    pushBatchMetaUpdates("editableCell", defaultEditableCell);
-    pushBatchMetaUpdates("columnEditableCellValue", {});
-  };
-
-  clearEditableCell = (skipTimeout?: boolean) => {
-    const clear = () => {
-      const { commitBatchMetaUpdates } = this.props;
-
-      this.pushClearEditableCellsUpdates();
-      commitBatchMetaUpdates();
-    };
-
-    if (skipTimeout) {
-      clear();
-    } else {
-      /*
-       * We need to let the evaulations compute derived property (filteredTableData)
-       * before we clear the editableCell to avoid the text flickering
-       */
-      this.inlineEditTimer = setTimeout(clear, 100);
-    }
-  };
-
-  isColumnCellEditable = (column: ColumnProperties, rowIndex: number) => {
-    return (
-      column.alias === this.props.editableCell?.column &&
-      rowIndex === this.props.editableCell?.index
-    );
-  };
-
-  onOptionSelect = (
-    value: string | number,
-    rowIndex: number,
-    column: string,
-    action?: string,
-  ) => {
-    if (this.props.isAddRowInProgress) {
-      this.updateNewRowValues(column, value, value);
-    } else {
-      const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
-
-      this.pushTransientTableDataActionsUpdates({
-        [ORIGINAL_INDEX_KEY]: this.getRowOriginalIndex(rowIndex),
-        [column]: value,
-      });
-      pushBatchMetaUpdates("editableCell", defaultEditableCell);
-
-      if (action && this.props.editableCell?.column) {
-        //since action is truthy we can push this event
-        this.pushOnColumnEvent({
-          rowIndex,
-          action,
-          triggerPropertyName: "onOptionChange",
-          eventType: EventType.ON_OPTION_CHANGE,
-          row: {
-            ...this.props.filteredTableData[rowIndex],
-            [this.props.editableCell.column]: value,
-          },
-        });
-      }
-      commitBatchMetaUpdates();
-    }
-  };
-
-  onSelectFilterChange = (
-    text: string,
-    rowIndex: number,
-    serverSideFiltering: boolean,
-    alias: string,
-    action?: string,
-  ) => {
-    const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
-
-    pushBatchMetaUpdates("selectColumnFilterText", {
-      ...this.props.selectColumnFilterText,
-      [alias]: text,
-    });
-
-    if (action && serverSideFiltering) {
-      //since action is truthy we can push this event
-      this.pushOnColumnEvent({
-        rowIndex,
-        action,
-        triggerPropertyName: "onFilterUpdate",
-        eventType: EventType.ON_FILTER_UPDATE,
-        row: {
-          ...this.props.filteredTableData[rowIndex],
-        },
-        additionalData: {
-          filterText: text,
-        },
-      });
-    }
-    commitBatchMetaUpdates();
-  };
-
-  onCheckChange = (
-    column: any,
-    row: Record<string, unknown>,
-    value: boolean,
-    alias: string,
-    originalIndex: number,
-    rowIndex: number,
-  ) => {
-    if (this.props.isAddRowInProgress) {
-      this.updateNewRowValues(alias, value, value);
-    } else {
-      const { commitBatchMetaUpdates } = this.props;
-
-      this.pushTransientTableDataActionsUpdates({
-        [ORIGINAL_INDEX_KEY]: originalIndex,
-        [alias]: value,
-      });
-      commitBatchMetaUpdates();
-      //cannot batch this update because we are not sure if it action is truthy or not
-      this.onColumnEvent({
-        rowIndex,
-        action: column.onCheckChange,
-        triggerPropertyName: "onCheckChange",
-        eventType: EventType.ON_CHECK_CHANGE,
-        row: {
-          ...row,
-          [alias]: value,
-        },
-      });
-    }
-  };
-
-  handleAddNewRowClick = () => {
-    const defaultNewRow = this.props.defaultNewRow || {};
-    const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
-
-    pushBatchMetaUpdates("isAddRowInProgress", true);
-    pushBatchMetaUpdates("newRowContent", defaultNewRow);
-    pushBatchMetaUpdates("newRow", defaultNewRow);
-
-    // New row gets added at the top of page 1 when client side pagination enabled
-    if (!this.props.serverSidePaginationEnabled) {
-      this.updatePaginationDirectionFlags(PaginationDirection.INITIAL);
-    }
-
-    //Since we're adding a newRowContent thats not part of tableData, the index changes
-    // so we're resetting the row selection
-    pushBatchMetaUpdates("selectedRowIndex", -1);
-    pushBatchMetaUpdates("selectedRowIndices", []);
-    commitBatchMetaUpdates();
-  };
-
-  handleAddNewRowAction = (
-    type: AddNewRowActions,
-    onActionComplete: () => void,
-  ) => {
-    let triggerPropertyName, action, eventType;
-
-    const onComplete = () => {
-      const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
-
-      pushBatchMetaUpdates("isAddRowInProgress", false);
-      pushBatchMetaUpdates("newRowContent", undefined);
-      pushBatchMetaUpdates("newRow", undefined);
-      commitBatchMetaUpdates();
-
-      onActionComplete();
-    };
-
-    if (type === AddNewRowActions.SAVE) {
-      triggerPropertyName = "onAddNewRowSave";
-      action = this.props.onAddNewRowSave;
-      eventType = EventType.ON_ADD_NEW_ROW_SAVE;
-    } else {
-      triggerPropertyName = "onAddNewRowDiscard";
-      action = this.props.onAddNewRowDiscard;
-      eventType = EventType.ON_ADD_NEW_ROW_DISCARD;
-    }
-
-    if (action) {
-      super.executeAction({
-        triggerPropertyName: triggerPropertyName,
-        dynamicString: action,
-        event: {
-          type: eventType,
-          callback: onComplete,
-        },
-      });
-    } else {
-      onComplete();
-    }
-  };
-
-  isColumnCellValid = (columnsAlias: string) => {
-    if (this.props.isEditableCellsValid?.hasOwnProperty(columnsAlias)) {
-      return this.props.isEditableCellsValid[columnsAlias];
-    }
-
-    return true;
-  };
-
-  hasInvalidColumnCell = () => {
-    if (isObject(this.props.isEditableCellsValid)) {
-      return Object.values(this.props.isEditableCellsValid).some((d) => !d);
-    } else {
-      return false;
-    }
-  };
-
-  updateNewRowValues = (
-    alias: string,
-    value: unknown,
-    parsedValue: unknown,
-  ) => {
-    const { commitBatchMetaUpdates, pushBatchMetaUpdates } = this.props;
-
-    /*
-     * newRowContent holds whatever the user types while newRow holds the parsed value
-     * newRowContent is being used to populate the cell while newRow is being used
-     * for validations.
-     */
-    pushBatchMetaUpdates("newRowContent", {
-      ...this.props.newRowContent,
-      [alias]: value,
-    });
-    pushBatchMetaUpdates("newRow", {
-      ...this.props.newRow,
-      [alias]: parsedValue,
-    });
-    commitBatchMetaUpdates();
-  };
-
   onConnectData = () => {
     if (this.props.renderMode === RenderModes.CANVAS) {
       super.updateOneClickBindingOptionsVisibility(true);
diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/propertyUtils.ts b/app/client/src/widgets/wds/WDSTableWidget/widget/propertyUtils.ts
index a56da2c94599..8df5f36495aa 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/widget/propertyUtils.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/widget/propertyUtils.ts
@@ -1,7 +1,6 @@
 import { Alignment } from "@blueprintjs/core";
 import type { ColumnProperties } from "../component/Constants";
 import { StickyType } from "../component/Constants";
-import { CellAlignmentTypes } from "../component/Constants";
 import type { TableWidgetProps } from "../constants";
 import { ColumnTypes, InlineEditingSaveOptions } from "../constants";
 import _, { findIndex, get, isBoolean } from "lodash";
@@ -540,14 +539,14 @@ export const updateNumberColumnTypeTextAlignment = (
     return [
       {
         propertyPath: `${baseProperty}.horizontalAlignment`,
-        propertyValue: CellAlignmentTypes.RIGHT,
+        propertyValue: "end",
       },
     ];
   } else {
     return [
       {
         propertyPath: `${baseProperty}.horizontalAlignment`,
-        propertyValue: CellAlignmentTypes.LEFT,
+        propertyValue: "start",
       },
     ];
   }
diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.test.ts b/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.test.ts
index 996bc5cf7278..ef1687a77f43 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.test.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.test.ts
@@ -10,7 +10,6 @@ import {
   getColumnType,
   getDerivedColumns,
   getOriginalRowIndex,
-  getSelectOptions,
   getSelectRowIndex,
   getSelectRowIndices,
   getSourceDataAndCaluclateKeysForEventAutoComplete,
@@ -966,16 +965,16 @@ describe("getTableStyles - ", () => {
         textSize: "HEADING1",
         fontStyle: "12",
         cellBackground: "#f00",
-        verticalAlignment: "TOP",
-        horizontalAlignment: "CENTER",
+        verticalAlignment: "start",
+        horizontalAlignment: "center",
       }) as any as TableStyles,
     ).toEqual({
       textColor: "#fff",
       textSize: "HEADING1",
       fontStyle: "12",
       cellBackground: "#f00",
-      verticalAlignment: "TOP",
-      horizontalAlignment: "CENTER",
+      verticalAlignment: "start",
+      horizontalAlignment: "center",
     });
   });
 });
@@ -2541,123 +2540,6 @@ describe("generateNewColumnOrderFromStickyValue", () => {
   });
 });
 
-describe("getSelectOptions", () => {
-  it("Should return select options when user is not adding a new row", () => {
-    const columnProperties = {
-      allowSameOptionsInNewRow: true,
-      selectOptions: [
-        {
-          label: "male",
-          value: "male",
-        },
-        {
-          label: "female",
-          value: "female",
-        },
-      ],
-    };
-    expect(
-      getSelectOptions(false, 0, columnProperties as ColumnProperties),
-    ).toEqual([
-      {
-        label: "male",
-        value: "male",
-      },
-      {
-        label: "female",
-        value: "female",
-      },
-    ]);
-
-    // Check when select options are inside dynamic binding
-    const columnPropertiesDynamicSelectOptions = {
-      allowSameOptionsInNewRow: true,
-      selectOptions: [
-        [
-          {
-            label: "abc",
-            value: "abc",
-          },
-        ],
-        [
-          {
-            label: "efg",
-            value: "efg",
-          },
-        ],
-        [
-          {
-            label: "xyz",
-            value: "xyz",
-          },
-        ],
-      ],
-    };
-    expect(
-      getSelectOptions(
-        false,
-        0,
-        columnPropertiesDynamicSelectOptions as ColumnProperties,
-      ),
-    ).toEqual([
-      {
-        label: "abc",
-        value: "abc",
-      },
-    ]);
-  });
-
-  it("Should return select options while adding a new row and when 'Same options in new row' option is turned on", () => {
-    const columnProperties = {
-      allowSameOptionsInNewRow: true,
-      selectOptions: [
-        {
-          label: "male",
-          value: "male",
-        },
-        {
-          label: "female",
-          value: "female",
-        },
-      ],
-    };
-
-    expect(
-      getSelectOptions(true, -1, columnProperties as ColumnProperties),
-    ).toEqual([
-      {
-        label: "male",
-        value: "male",
-      },
-      {
-        label: "female",
-        value: "female",
-      },
-    ]);
-  });
-
-  it("Should return new row options", () => {
-    const columnProperties = {
-      allowSameOptionsInNewRow: false,
-      newRowSelectOptions: [
-        {
-          label: "abc",
-          value: "abc",
-        },
-      ],
-    };
-
-    expect(
-      getSelectOptions(true, -1, columnProperties as ColumnProperties),
-    ).toEqual([
-      {
-        label: "abc",
-        value: "abc",
-      },
-    ]);
-  });
-});
-
 describe("convertNumToCompactString", () => {
   it("formats a number in thousands (K)", () => {
     expect(convertNumToCompactString(5000)).toBe("5.0K");
diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts b/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts
index d7eefbab3d8f..1c4a7b709507 100644
--- a/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts
+++ b/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts
@@ -1,7 +1,6 @@
 import { Colors } from "constants/Colors";
 import { FontStyleTypes } from "constants/WidgetConstants";
 import _, { filter, isBoolean, isObject, uniq, without } from "lodash";
-import tinycolor from "tinycolor2";
 import type {
   CellLayoutProperties,
   ColumnProperties,
@@ -9,11 +8,7 @@ import type {
   TableColumnProps,
   TableStyles,
 } from "../component/Constants";
-import {
-  CellAlignmentTypes,
-  StickyType,
-  VerticalAlignmentTypes,
-} from "../component/Constants";
+import { StickyType } from "../component/Constants";
 import {
   ColumnTypes,
   DEFAULT_BUTTON_COLOR,
@@ -23,11 +18,9 @@ import {
 } from "../constants";
 import { SelectColumnOptionsValidations } from "./propertyUtils";
 import type { TableWidgetProps } from "../constants";
-import { get } from "lodash";
 import { getNextEntityName } from "utils/AppsmithUtils";
 import { dateFormatOptions } from "WidgetProvider/constants";
 import moment from "moment";
-import type { Stylesheet } from "entities/AppTheming";
 import { getKeysFromSourceDataForEventAutocomplete } from "widgets/MenuButtonWidget/widget/helper";
 import log from "loglevel";
 import type React from "react";
@@ -183,7 +176,7 @@ export function getDefaultColumnProperties(
   widgetName: string,
   isDerived?: boolean,
   columnType?: string,
-): ColumnProperties {
+) {
   const columnProps = {
     allowCellWrapping: false,
     allowSameOptionsInNewRow: true,
@@ -192,8 +185,8 @@ export function getDefaultColumnProperties(
     originalId: id,
     id: sanitizedId,
     alias: id,
-    horizontalAlignment: CellAlignmentTypes.LEFT,
-    verticalAlignment: VerticalAlignmentTypes.CENTER,
+    horizontalAlignment: "start",
+    verticalAlignment: "center",
     columnType: columnType || ColumnTypes.TEXT,
     textColor: Colors.THUNDER,
     textSize: "0.875rem",
@@ -209,18 +202,13 @@ export function getDefaultColumnProperties(
     label: id,
     isSaveVisible: true,
     isDiscardVisible: true,
-    computedValue: isDerived
-      ? ""
-      : `{{${widgetName}.processedTableData.map((currentRow, currentIndex) => ( currentRow["${escapeString(
-          id,
-        )}"]))}}`,
     sticky: StickyType.NONE,
     validation: {},
     currencyCode: "USD",
     decimals: 0,
     thousandSeparator: true,
     notation: "standard" as Intl.NumberFormatOptions["notation"],
-  };
+  } as ColumnProperties;
 
   return columnProps;
 }
@@ -269,6 +257,7 @@ export const getPropertyValue = (
     return value;
   }
 };
+
 export const getBooleanPropertyValue = (value: unknown, index: number) => {
   if (isBoolean(value)) {
     return value;
@@ -296,10 +285,10 @@ export const getArrayPropertyValue = (value: unknown, index: number) => {
 export const getCellProperties = (
   columnProperties: ColumnProperties,
   rowIndex: number,
-  isAddRowInProgress = false,
 ) => {
   if (columnProperties) {
     return {
+      cellColor: getPropertyValue(columnProperties.cellColor, rowIndex, true),
       horizontalAlignment: getPropertyValue(
         columnProperties.horizontalAlignment,
         rowIndex,
@@ -318,22 +307,7 @@ export const getCellProperties = (
         rowIndex,
         true,
       ),
-      menuButtonLabel: getPropertyValue(
-        columnProperties.menuButtonLabel,
-        rowIndex,
-        true,
-      ),
       iconName: getPropertyValue(columnProperties.iconName, rowIndex, true),
-      menuButtoniconName: getPropertyValue(
-        columnProperties.menuButtoniconName,
-        rowIndex,
-        true,
-      ),
-      menuItemsSource: getPropertyValue(
-        columnProperties.menuItemsSource,
-        rowIndex,
-        true,
-      ),
       sourceData: getPropertyValue(
         columnProperties.sourceData,
         rowIndex,
@@ -346,19 +320,11 @@ export const getCellProperties = (
         rowIndex,
         true,
       ),
-      borderRadius: getPropertyValue(
-        columnProperties.borderRadius,
-        rowIndex,
-        true,
-      ),
-      boxShadow: getPropertyValue(columnProperties.boxShadow, rowIndex, true),
       iconButtonStyle: getPropertyValue(
         columnProperties.iconButtonStyle,
         rowIndex,
         true,
       ),
-      textSize: getPropertyValue(columnProperties.textSize, rowIndex),
-      textColor: getPropertyValue(columnProperties.textColor, rowIndex),
       fontStyle: getPropertyValue(columnProperties.fontStyle, rowIndex), //Fix this
       isVisible: getBooleanPropertyValue(columnProperties.isVisible, rowIndex),
       isDisabled: getBooleanPropertyValue(
@@ -375,146 +341,10 @@ export const getCellProperties = (
         true,
       ),
       iconAlign: getPropertyValue(columnProperties.iconAlign, rowIndex, true),
-      isCompact: getPropertyValue(columnProperties.isCompact, rowIndex),
-      menuColor: getPropertyValue(columnProperties.menuColor, rowIndex, true),
-      menuItems: getPropertyValue(columnProperties.menuItems, rowIndex),
-      menuVariant: getPropertyValue(
-        columnProperties.menuVariant,
-        rowIndex,
-        true,
-      ),
-      isCellEditable: getBooleanPropertyValue(
-        columnProperties.isCellEditable,
-        rowIndex,
-      ),
       allowCellWrapping: getBooleanPropertyValue(
         columnProperties.allowCellWrapping,
         rowIndex,
       ),
-      // EditActions related properties
-      saveButtonVariant: getPropertyValue(
-        columnProperties.saveButtonVariant,
-        rowIndex,
-        true,
-      ),
-      saveButtonColor: getPropertyValue(
-        columnProperties.saveButtonColor,
-        rowIndex,
-        true,
-      ),
-      saveIconAlign: getPropertyValue(
-        columnProperties.saveIconAlign,
-        rowIndex,
-        true,
-      ),
-      saveBorderRadius: getPropertyValue(
-        columnProperties.saveBorderRadius,
-        rowIndex,
-        true,
-      ),
-      saveActionLabel: getPropertyValue(
-        columnProperties.saveActionLabel,
-        rowIndex,
-        true,
-      ),
-      saveActionIconName: getPropertyValue(
-        columnProperties.saveActionIconName,
-        rowIndex,
-        true,
-      ),
-      isSaveVisible: getBooleanPropertyValue(
-        columnProperties.isSaveVisible,
-        rowIndex,
-      ),
-      isSaveDisabled: getBooleanPropertyValue(
-        columnProperties.isSaveDisabled,
-        rowIndex,
-      ),
-      discardButtonVariant: getPropertyValue(
-        columnProperties.discardButtonVariant,
-        rowIndex,
-        true,
-      ),
-      discardButtonColor: getPropertyValue(
-        columnProperties.discardButtonColor,
-        rowIndex,
-        true,
-      ),
-      discardIconAlign: getPropertyValue(
-        columnProperties.discardIconAlign,
-        rowIndex,
-        true,
-      ),
-      discardBorderRadius: getPropertyValue(
-        columnProperties.discardBorderRadius,
-        rowIndex,
-        true,
-      ),
-      discardActionLabel: getPropertyValue(
-        columnProperties.discardActionLabel,
-        rowIndex,
-        true,
-      ),
-      discardActionIconName: getPropertyValue(
-        columnProperties.discardActionIconName,
-        rowIndex,
-        true,
-      ),
-      isDiscardVisible: getBooleanPropertyValue(
-        columnProperties.isDiscardVisible,
-        rowIndex,
-      ),
-      isDiscardDisabled: getBooleanPropertyValue(
-        columnProperties.isDiscardDisabled,
-        rowIndex,
-      ),
-      imageSize: getPropertyValue(columnProperties.imageSize, rowIndex, true),
-      isFilterable: getBooleanPropertyValue(
-        columnProperties.isFilterable,
-        rowIndex,
-      ),
-      serverSideFiltering: getBooleanPropertyValue(
-        columnProperties.serverSideFiltering,
-        rowIndex,
-      ),
-      placeholderText: getPropertyValue(
-        columnProperties.placeholderText,
-        rowIndex,
-        true,
-      ),
-      resetFilterTextOnClose: getPropertyValue(
-        columnProperties.resetFilterTextOnClose,
-        rowIndex,
-      ),
-      inputFormat: getPropertyValue(
-        columnProperties.inputFormat,
-        rowIndex,
-        true,
-      ),
-      outputFormat: getPropertyValue(
-        columnProperties.outputFormat,
-        rowIndex,
-        true,
-      ),
-      shortcuts: getBooleanPropertyValue(columnProperties.shortcuts, rowIndex),
-      selectOptions: getSelectOptions(
-        isAddRowInProgress,
-        rowIndex,
-        columnProperties,
-      ),
-      timePrecision: getPropertyValue(
-        columnProperties.timePrecision,
-        rowIndex,
-        true,
-      ),
-      currencyCode: getPropertyValue(
-        columnProperties.currencyCode,
-        rowIndex,
-        true,
-      ),
-      decimals: columnProperties.decimals,
-      thousandSeparator: !!columnProperties.thousandSeparator,
-      notation: columnProperties.notation,
     } as CellLayoutProperties;
   }
   return {} as CellLayoutProperties;
@@ -543,62 +373,6 @@ export function getSelectColumnTypeOptions(value: unknown) {
   return result.parsed;
 }
 
-/**
- * returns selected row bg color
- *
- * if the color is dark, use 80% lighter color for selected row
- * if color is light, use 10% darker color for selected row
- *
- * @param accentColor
- */
-export const getSelectedRowBgColor = (accentColor: string) => {
-  const tinyAccentColor = tinycolor(accentColor);
-  const brightness = tinycolor(accentColor).greyscale().getBrightness();
-
-  const percentageBrightness = (brightness / 255) * 100;
-  let nextBrightness = 0;
-
-  switch (true) {
-    case percentageBrightness > 70:
-      nextBrightness = 10;
-      break;
-    case percentageBrightness > 50:
-      nextBrightness = 35;
-      break;
-    case percentageBrightness > 50:
-      nextBrightness = 55;
-      break;
-    default:
-      nextBrightness = 60;
-  }
-
-  if (brightness > 180) {
-    return tinyAccentColor.darken(10).toString();
-  } else {
-    return tinyAccentColor.lighten(nextBrightness).toString();
-  }
-};
-
-/**
- * this is a getter function to get stylesheet value of the property from the config
- *
- * @param props
- * @param propertyPath
- * @param widgetStylesheet
- * @returns
- */
-export const getStylesheetValue = (
-  props: TableWidgetProps,
-  propertyPath: string,
-  widgetStylesheet?: Stylesheet,
-) => {
-  const propertyName = propertyPath.split(".").slice(-1)[0];
-  const columnName = propertyPath.split(".").slice(-2)[0];
-  const columnType = get(props, `primaryColumns.${columnName}.columnType`);
-
-  return get(widgetStylesheet, `childStylesheet.${columnType}.${propertyName}`);
-};
-
 export const reorderColumns = (
   columns: Record<string, ColumnProperties>,
   columnOrder: string[],
@@ -1068,26 +842,6 @@ export const getDragHandlers = (
   };
 };
 
-export const getSelectOptions = (
-  isNewRow: boolean,
-  rowIndex: number,
-  columnProperties: ColumnProperties,
-) => {
-  if (isNewRow) {
-    if (
-      columnProperties.allowSameOptionsInNewRow &&
-      columnProperties?.selectOptions
-    ) {
-      // Use select options from the first row
-      return getArrayPropertyValue(columnProperties.selectOptions, 0);
-    } else {
-      return columnProperties.newRowSelectOptions;
-    }
-  } else {
-    return getArrayPropertyValue(columnProperties.selectOptions, rowIndex);
-  }
-};
-
 export function convertNumToCompactString(num: number) {
   if (num >= 1e6) {
     return (num / 1e6).toFixed(1) + "M";