diff --git a/packages/blade/src/components/Table/TableBody.native.tsx b/packages/blade/src/components/Table/TableBody.native.tsx
index 1051760ff59..4d32e751928 100644
--- a/packages/blade/src/components/Table/TableBody.native.tsx
+++ b/packages/blade/src/components/Table/TableBody.native.tsx
@@ -1,12 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react';
-import type {
-  TableBodyProps,
-  TableCellProps,
-  TableEditableCellProps,
-  TableRowProps,
-} from './types';
+import type { TableBodyProps, TableCellProps, TableRowProps } from './types';
 import { Text } from '~components/Typography';
 
 const TableBody = (props: TableBodyProps): React.ReactElement => {
@@ -21,8 +16,12 @@ const TableCell = (props: TableCellProps): React.ReactElement => {
   return <Text>Table Component is not available for Native mobile apps.</Text>;
 };
 
-const TableEditableCell = (props: TableEditableCellProps): React.ReactElement => {
+const StyledCell = (props: TableCellProps): React.ReactElement => {
   return <Text>Table Component is not available for Native mobile apps.</Text>;
 };
 
-export { TableBody, TableRow, TableCell, TableEditableCell };
+const CellWrapper = (props: TableCellProps): React.ReactElement => {
+  return <Text>Table Component is not available for Native mobile apps.</Text>;
+};
+
+export { TableBody, TableRow, TableCell, StyledCell, CellWrapper };
diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
index 01944500c9a..c9db98519e8 100644
--- a/packages/blade/src/components/Table/TableBody.web.tsx
+++ b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Body, Row, Cell } from '@table-library/react-table-library/table';
 import styled from 'styled-components';
 import { useTableContext } from './TableContext';
-import { checkboxCellWidth, tableEditableCellRowDensityToInputSizeMap, tableRow } from './tokens';
+import { checkboxCellWidth, tableRow } from './tokens';
 import { ComponentIds } from './componentIds';
 import type {
   TableProps,
@@ -10,22 +10,17 @@ import type {
   TableRowProps,
   TableCellProps,
   TableBackgroundColors,
-  TableEditableCellProps,
 } from './types';
 import getIn from '~utils/lodashButBetter/get';
 import { Text } from '~components/Typography';
 import type { CheckboxProps } from '~components/Checkbox';
 import { Checkbox } from '~components/Checkbox';
-import { castWebType, makeMotionTime, makeSize, makeSpace } from '~utils';
+import { makeMotionTime, makeSize, makeSpace } from '~utils';
 import BaseBox from '~components/Box/BaseBox';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 import { size } from '~tokens/global';
-import { BaseInput } from '~components/Input/BaseInput';
-import { Box } from '~components/Box';
-import { AlertCircleIcon, CheckIcon } from '~components/Icons';
-import type { MarginProps } from '~components/Box/BaseBox/types/spacingTypes';
 
 const StyledBody = styled(Body)<{
   $isSelectable: boolean;
@@ -152,7 +147,7 @@ const TableBody = assignWithoutSideEffects(_TableBody, {
   componentId: ComponentIds.TableBody,
 });
 
-const StyledCell = styled(Cell)<{
+export const StyledCell = styled(Cell)<{
   $backgroundColor: TableBackgroundColors;
 }>(({ theme, $backgroundColor }) => ({
   '&&&': {
@@ -165,7 +160,7 @@ const StyledCell = styled(Cell)<{
   },
 }));
 
-const CellWrapper = styled(BaseBox)<{
+export const CellWrapper = styled(BaseBox)<{
   rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
   showStripedRows?: boolean;
   hasPadding?: boolean;
@@ -226,132 +221,6 @@ const TableCell = assignWithoutSideEffects(_TableCell, {
   componentId: ComponentIds.TableCell,
 });
 
-const StyledEditableCell = styled(StyledCell)<{
-  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
-}>(({ theme, rowDensity }) => ({
-  '&&&': {
-    '&:focus-visible': { outline: '1px solid' },
-    '&:focus-within': {
-      ...(rowDensity !== 'comfortable' ? getFocusRingStyles({ theme, negativeOffset: true }) : {}),
-    },
-  },
-}));
-
-const validationStateToInputTrailingIconMap = {
-  none: undefined,
-  success: CheckIcon,
-  error: AlertCircleIcon,
-};
-
-const rowDensityToIsTableInputCellMapping = {
-  comfortable: false,
-  normal: true,
-  compact: true,
-};
-
-const getEditableInputMargin = ({
-  rowDensity,
-}: {
-  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
-}): MarginProps['margin'] => {
-  if (rowDensity === 'comfortable') {
-    return ['spacing.4', 'spacing.4'];
-  }
-
-  return 'spacing.2';
-};
-
-const _TableEditableCell = ({
-  validationState = 'none',
-  accessibilityLabel,
-  autoCapitalize,
-  autoCompleteSuggestionType,
-  autoFocus,
-  defaultValue,
-  isDisabled,
-  isRequired,
-  keyboardReturnKeyType,
-  leadingIcon,
-  maxCharacters,
-  name,
-  onBlur,
-  onChange,
-  onClick,
-  onFocus,
-  onSubmit,
-  placeholder,
-  prefix,
-  suffix,
-  value,
-  testID,
-  trailingButton,
-  errorText,
-  successText,
-}: TableEditableCellProps): React.ReactElement => {
-  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();
-
-  return (
-    <StyledEditableCell
-      role="cell"
-      $backgroundColor={backgroundColor}
-      rowDensity={rowDensity}
-      {...metaAttribute({ name: MetaConstants.TableCell })}
-    >
-      <BaseBox className="cell-wrapper-base" display="flex" alignItems="center" height="100%">
-        <CellWrapper
-          className="cell-wrapper"
-          rowDensity={rowDensity}
-          showStripedRows={showStripedRows}
-          display="flex"
-          alignItems="center"
-          flex={1}
-          hasPadding={false}
-        >
-          <Box margin={getEditableInputMargin({ rowDensity })} width="100%">
-            <BaseInput
-              isTableInputCell={rowDensityToIsTableInputCellMapping[rowDensity]}
-              validationState={validationState}
-              id="table-editable-cell-input"
-              size={tableEditableCellRowDensityToInputSizeMap[rowDensity]}
-              type="text"
-              trailingIcon={validationStateToInputTrailingIconMap[validationState]}
-              accessibilityLabel={accessibilityLabel}
-              autoCapitalize={autoCapitalize}
-              autoCompleteSuggestionType={autoCompleteSuggestionType}
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus={autoFocus}
-              defaultValue={defaultValue}
-              isDisabled={isDisabled}
-              isRequired={isRequired}
-              keyboardReturnKeyType={keyboardReturnKeyType}
-              leadingIcon={leadingIcon}
-              maxCharacters={maxCharacters}
-              name={name}
-              onBlur={onBlur}
-              onChange={onChange}
-              onClick={onClick}
-              onFocus={onFocus}
-              onSubmit={castWebType(onSubmit)}
-              placeholder={placeholder}
-              prefix={prefix}
-              suffix={suffix}
-              value={value}
-              testID={testID}
-              trailingButton={trailingButton}
-              errorText={errorText}
-              successText={successText}
-            />
-          </Box>
-        </CellWrapper>
-      </BaseBox>
-    </StyledEditableCell>
-  );
-};
-
-const TableEditableCell = assignWithoutSideEffects(_TableEditableCell, {
-  componentId: ComponentIds.TableEditableCell,
-});
-
 const TableCheckboxCell = ({
   isChecked,
   onChange,
@@ -474,4 +343,4 @@ const TableRow = assignWithoutSideEffects(_TableRow, {
   componentId: ComponentIds.TableRow,
 });
 
-export { TableBody, TableRow, TableCell, TableEditableCell };
+export { TableBody, TableRow, TableCell };
diff --git a/packages/blade/src/components/Table/TableEditableCell.native.tsx b/packages/blade/src/components/Table/TableEditableCell.native.tsx
new file mode 100644
index 00000000000..467a81be9ad
--- /dev/null
+++ b/packages/blade/src/components/Table/TableEditableCell.native.tsx
@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { TableEditableCellProps } from './types';
+import { Text } from '~components/Typography';
+
+const TableEditableCell = (props: TableEditableCellProps): React.ReactElement => {
+  return <Text>Table Component is not available for Native mobile apps.</Text>;
+};
+
+export { TableEditableCell };
diff --git a/packages/blade/src/components/Table/TableEditableCell.web.tsx b/packages/blade/src/components/Table/TableEditableCell.web.tsx
new file mode 100644
index 00000000000..828a5adbb06
--- /dev/null
+++ b/packages/blade/src/components/Table/TableEditableCell.web.tsx
@@ -0,0 +1,143 @@
+import styled from 'styled-components';
+import { CellWrapper, StyledCell } from './TableBody';
+import { useTableContext } from './TableContext';
+import type { TableEditableCellProps, TableProps } from './types';
+import { tableEditableCellRowDensityToInputSizeMap } from './tokens';
+import { ComponentIds } from './componentIds';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
+import { AlertCircleIcon, CheckIcon } from '~components/Icons';
+import type { MarginProps } from '~components/Box/BaseBox/types/spacingTypes';
+import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
+import BaseBox from '~components/Box/BaseBox';
+import { Box } from '~components/Box';
+import { BaseInput } from '~components/Input/BaseInput';
+import { castWebType } from '~utils';
+import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+
+export const StyledEditableCell = styled(StyledCell)<{
+  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
+}>(({ theme, rowDensity }) => ({
+  '&&&': {
+    '&:focus-visible': { outline: '1px solid' },
+    '&:focus-within': {
+      ...(rowDensity !== 'comfortable' ? getFocusRingStyles({ theme, negativeOffset: true }) : {}),
+    },
+  },
+}));
+
+export const validationStateToInputTrailingIconMap = {
+  none: undefined,
+  success: CheckIcon,
+  error: AlertCircleIcon,
+};
+
+export const rowDensityToIsTableInputCellMapping = {
+  comfortable: false,
+  normal: true,
+  compact: true,
+};
+
+export const getEditableInputMargin = ({
+  rowDensity,
+}: {
+  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
+}): MarginProps['margin'] => {
+  if (rowDensity === 'comfortable') {
+    return ['spacing.4', 'spacing.4'];
+  }
+
+  return 'spacing.2';
+};
+
+const _TableEditableCell = ({
+  validationState = 'none',
+  accessibilityLabel,
+  autoCapitalize,
+  autoCompleteSuggestionType,
+  autoFocus,
+  defaultValue,
+  isDisabled,
+  isRequired,
+  keyboardReturnKeyType,
+  leadingIcon,
+  maxCharacters,
+  name,
+  onBlur,
+  onChange,
+  onClick,
+  onFocus,
+  onSubmit,
+  placeholder,
+  prefix,
+  suffix,
+  value,
+  testID,
+  trailingButton,
+  errorText,
+  successText,
+}: TableEditableCellProps): React.ReactElement => {
+  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();
+
+  return (
+    <StyledEditableCell
+      role="cell"
+      $backgroundColor={backgroundColor}
+      rowDensity={rowDensity}
+      {...metaAttribute({ name: MetaConstants.TableCell })}
+    >
+      <BaseBox className="cell-wrapper-base" display="flex" alignItems="center" height="100%">
+        <CellWrapper
+          className="cell-wrapper"
+          rowDensity={rowDensity}
+          showStripedRows={showStripedRows}
+          display="flex"
+          alignItems="center"
+          flex={1}
+          hasPadding={false}
+        >
+          <Box margin={getEditableInputMargin({ rowDensity })} width="100%">
+            <BaseInput
+              isTableInputCell={rowDensityToIsTableInputCellMapping[rowDensity]}
+              validationState={validationState}
+              id="table-editable-cell-input"
+              type="text"
+              size={tableEditableCellRowDensityToInputSizeMap[rowDensity]}
+              trailingIcon={validationStateToInputTrailingIconMap[validationState]}
+              accessibilityLabel={accessibilityLabel}
+              autoCapitalize={autoCapitalize}
+              autoCompleteSuggestionType={autoCompleteSuggestionType}
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={autoFocus}
+              defaultValue={defaultValue}
+              isDisabled={isDisabled}
+              isRequired={isRequired}
+              keyboardReturnKeyType={keyboardReturnKeyType}
+              leadingIcon={leadingIcon}
+              maxCharacters={maxCharacters}
+              name={name}
+              onBlur={onBlur}
+              onChange={onChange}
+              onClick={onClick}
+              onFocus={onFocus}
+              onSubmit={castWebType(onSubmit)}
+              placeholder={placeholder}
+              prefix={prefix}
+              suffix={suffix}
+              value={value}
+              testID={testID}
+              trailingButton={trailingButton}
+              errorText={errorText}
+              successText={successText}
+            />
+          </Box>
+        </CellWrapper>
+      </BaseBox>
+    </StyledEditableCell>
+  );
+};
+
+const TableEditableCell = assignWithoutSideEffects(_TableEditableCell, {
+  componentId: ComponentIds.TableEditableCell,
+});
+
+export { TableEditableCell };
diff --git a/packages/blade/src/components/Table/index.ts b/packages/blade/src/components/Table/index.ts
index 219e7302c67..af6f02cd008 100644
--- a/packages/blade/src/components/Table/index.ts
+++ b/packages/blade/src/components/Table/index.ts
@@ -5,3 +5,5 @@ export * from './TableFooter';
 export * from './TablePagination';
 export * from './TableToolbar';
 export * from './types';
+export { TableBody, TableCell, TableRow } from './TableBody';
+export { TableEditableCell } from './TableEditableCell';