diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
deleted file mode 100644
index 2dd1eec0a8..0000000000
--- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script>
-  import { datasources, tables, integrations, appStore } from "stores/builder"
-  import { themeStore, admin } from "stores/portal"
-  import EditRolesButton from "./buttons/EditRolesButton.svelte"
-  import { TableNames } from "constants"
-  import { Grid } from "@budibase/frontend-core"
-  import { API } from "api"
-  import GridCreateAutomationButton from "./buttons/grid/GridCreateAutomationButton.svelte"
-  import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
-  import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
-  import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
-  import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
-  import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
-  import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
-  import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
-  import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
-  import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
-  import GridUsersTableButton from "components/backend/DataTable/modals/grid/GridUsersTableButton.svelte"
-  import { DB_TYPE_EXTERNAL } from "constants/backend"
-
-  const userSchemaOverrides = {
-    firstName: { displayName: "First name", disabled: true },
-    lastName: { displayName: "Last name", disabled: true },
-    email: { displayName: "Email", disabled: true },
-    roleId: { displayName: "Role", disabled: true },
-    status: { displayName: "Status", disabled: true },
-  }
-
-  $: id = $tables.selected?._id
-  $: isUsersTable = id === TableNames.USERS
-  $: isInternal = $tables.selected?.sourceType !== DB_TYPE_EXTERNAL
-  $: gridDatasource = {
-    type: "table",
-    tableId: id,
-  }
-  $: tableDatasource = $datasources.list.find(datasource => {
-    return datasource._id === $tables.selected?.sourceId
-  })
-  $: relationshipsEnabled = relationshipSupport(tableDatasource)
-
-  $: currentTheme = $themeStore?.theme
-  $: darkMode = !currentTheme.includes("light")
-
-  const relationshipSupport = datasource => {
-    const integration = $integrations[datasource?.source]
-    return !isInternal && integration?.relationships !== false
-  }
-
-  const handleGridTableUpdate = async e => {
-    tables.replaceTable(id, e.detail)
-
-    // We need to refresh datasources when an external table changes.
-    if (e.detail?.sourceType === DB_TYPE_EXTERNAL) {
-      await datasources.fetch()
-    }
-  }
-</script>
-
-<Grid
-  {API}
-  {darkMode}
-  datasource={gridDatasource}
-  canAddRows={!isUsersTable}
-  canDeleteRows={!isUsersTable}
-  canEditRows={!isUsersTable || !$appStore.features.disableUserMetadata}
-  canEditColumns={!isUsersTable || !$appStore.features.disableUserMetadata}
-  schemaOverrides={isUsersTable ? userSchemaOverrides : null}
-  showAvatars={false}
-  on:updatedatasource={handleGridTableUpdate}
-  isCloud={$admin.cloud}
->
-  <svelte:fragment slot="filter">
-    {#if isUsersTable && $appStore.features.disableUserMetadata}
-      <GridUsersTableButton />
-    {/if}
-    <GridFilterButton />
-  </svelte:fragment>
-  <svelte:fragment slot="controls">
-    <GridManageAccessButton />
-    {#if !isUsersTable}
-      <GridCreateAutomationButton />
-    {/if}
-    {#if relationshipsEnabled}
-      <GridRelationshipButton />
-    {/if}
-    {#if isUsersTable}
-      <EditRolesButton />
-    {:else}
-      <GridImportButton />
-    {/if}
-    <GridExportButton />
-    {#if isUsersTable}
-      <GridEditUserModal />
-    {:else}
-      <GridCreateEditRowModal />
-    {/if}
-  </svelte:fragment>
-  <svelte:fragment slot="edit-column">
-    <GridEditColumnModal />
-  </svelte:fragment>
-  <svelte:fragment slot="add-column">
-    <GridAddColumnModal />
-  </svelte:fragment>
-</Grid>
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingButton.svelte
similarity index 100%
rename from packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
rename to packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingButton.svelte
diff --git a/packages/frontend-core/src/components/grid/controls/SizeButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/SizeButton.svelte
similarity index 99%
rename from packages/frontend-core/src/components/grid/controls/SizeButton.svelte
rename to packages/builder/src/components/backend/DataTable/buttons/grid/SizeButton.svelte
index 320aa47345..a4db68f1aa 100644
--- a/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/SizeButton.svelte
@@ -66,6 +66,7 @@
   }
 </script>
 
+#
 <div bind:this={anchor}>
   <ActionButton
     icon="MoveUpDown"
diff --git a/packages/frontend-core/src/components/grid/controls/SortButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/SortButton.svelte
similarity index 100%
rename from packages/frontend-core/src/components/grid/controls/SortButton.svelte
rename to packages/builder/src/components/backend/DataTable/buttons/grid/SortButton.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
index d79a0bc0ad..b862ab52ae 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
@@ -1,7 +1,68 @@
 <script>
-  import TableDataTable from "components/backend/DataTable/TableDataTable.svelte"
-  import { tables } from "stores/builder"
   import { Banner } from "@budibase/bbui"
+  import { datasources, tables, integrations, appStore } from "stores/builder"
+  import { themeStore, admin } from "stores/portal"
+  import EditRolesButton from "components/backend/DataTable/buttons/EditRolesButton.svelte"
+  import { TableNames } from "constants"
+  import { Grid } from "@budibase/frontend-core"
+  import { API } from "api"
+  import GridCreateAutomationButton from "components/backend/DataTable/buttons/grid/GridCreateAutomationButton.svelte"
+  import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
+  import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
+  import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
+  import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
+  import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
+  import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
+  import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
+  import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
+  import GridUsersTableButton from "components/backend/DataTable/modals/grid/GridUsersTableButton.svelte"
+  import { DB_TYPE_EXTERNAL } from "constants/backend"
+
+  const userSchemaOverrides = {
+    firstName: { displayName: "First name", disabled: true },
+    lastName: { displayName: "Last name", disabled: true },
+    email: { displayName: "Email", disabled: true },
+    roleId: { displayName: "Role", disabled: true },
+    status: { displayName: "Status", disabled: true },
+  }
+
+  $: autoColumnStatus = verifyAutocolumns($tables?.selected)
+  $: duplicates = Object.values(autoColumnStatus).reduce((acc, status) => {
+    if (status.length > 1) {
+      acc = [...acc, ...status]
+    }
+    return acc
+  }, [])
+  $: invalidColumnText = duplicates.map(entry => {
+    return `${entry.name} (${entry.subtype})`
+  })
+  $: id = $tables.selected?._id
+  $: isUsersTable = id === TableNames.USERS
+  $: isInternal = $tables.selected?.sourceType !== DB_TYPE_EXTERNAL
+  $: gridDatasource = {
+    type: "table",
+    tableId: id,
+  }
+  $: tableDatasource = $datasources.list.find(datasource => {
+    return datasource._id === $tables.selected?.sourceId
+  })
+  $: relationshipsEnabled = relationshipSupport(tableDatasource)
+  $: currentTheme = $themeStore?.theme
+  $: darkMode = !currentTheme.includes("light")
+
+  const relationshipSupport = datasource => {
+    const integration = $integrations[datasource?.source]
+    return !isInternal && integration?.relationships !== false
+  }
+
+  const handleGridTableUpdate = async e => {
+    tables.replaceTable(id, e.detail)
+
+    // We need to refresh datasources when an external table changes.
+    if (e.detail?.sourceType === DB_TYPE_EXTERNAL) {
+      await datasources.fetch()
+    }
+  }
 
   const verifyAutocolumns = table => {
     // Check for duplicates
@@ -17,17 +78,6 @@
       return acc
     }, {})
   }
-
-  $: autoColumnStatus = verifyAutocolumns($tables?.selected)
-  $: duplicates = Object.values(autoColumnStatus).reduce((acc, status) => {
-    if (status.length > 1) {
-      acc = [...acc, ...status]
-    }
-    return acc
-  }, [])
-  $: invalidColumnText = duplicates.map(entry => {
-    return `${entry.name} (${entry.subtype})`
-  })
 </script>
 
 {#if $tables?.selected?.name}
@@ -40,7 +90,54 @@
       </Banner>
     </div>
   {/if}
-  <TableDataTable />
+  <Grid
+    {API}
+    {darkMode}
+    datasource={gridDatasource}
+    canAddRows={!isUsersTable}
+    canDeleteRows={!isUsersTable}
+    canEditRows={!isUsersTable || !$appStore.features.disableUserMetadata}
+    canEditColumns={!isUsersTable || !$appStore.features.disableUserMetadata}
+    schemaOverrides={isUsersTable ? userSchemaOverrides : null}
+    showAvatars={false}
+    isCloud={$admin.cloud}
+    on:updatedatasource={handleGridTableUpdate}
+  >
+    <!-- Controls -->
+    <svelte:fragment slot="controls">
+      {#if isUsersTable && $appStore.features.disableUserMetadata}
+        <GridUsersTableButton />
+      {/if}
+      <GridManageAccessButton />
+      {#if !isUsersTable}
+        <GridCreateAutomationButton />
+      {/if}
+      {#if relationshipsEnabled}
+        <GridRelationshipButton />
+      {/if}
+      {#if isUsersTable}
+        <EditRolesButton />
+      {:else}
+        <GridImportButton />
+      {/if}
+      <GridExportButton />
+    </svelte:fragment>
+
+    <!-- Content for editing columns -->
+    <svelte:fragment slot="edit-column">
+      <GridEditColumnModal />
+    </svelte:fragment>
+    <svelte:fragment slot="add-column">
+      <GridAddColumnModal />
+    </svelte:fragment>
+
+    <!-- Listening to events for editing rows in modals -->
+    {#if isUsersTable}
+      <GridEditUserModal />
+    {:else}
+      <GridCreateEditRowModal />
+    {/if}
+  </Grid>
 {:else}
   <i>Create your first table to start building</i>
 {/if}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 04a11da812..86c154be95 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -19,9 +19,6 @@
   import StickyColumn from "./StickyColumn.svelte"
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
-  import SortButton from "../controls/SortButton.svelte"
-  import ColumnsSettingButton from "../controls/ColumnsSettingButton.svelte"
-  import SizeButton from "../controls/SizeButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
   import {
@@ -47,7 +44,6 @@
   export let quiet = false
   export let collaboration = true
   export let showAvatars = true
-  export let showControls = true
   export let initialFilter = null
   export let initialSortColumn = null
   export let initialSortOrder = null
@@ -57,7 +53,6 @@
   export let buttons = null
   export let darkMode
   export let isCloud = null
-  export let allowViewReadonlyColumns = false
   export let rowConditions = null
 
   // Unique identifier for DOM nodes inside this instance
@@ -103,7 +98,6 @@
     quiet,
     collaboration,
     showAvatars,
-    showControls,
     initialFilter,
     initialSortColumn,
     initialSortOrder,
@@ -113,13 +107,12 @@
     buttons,
     darkMode,
     isCloud,
-    allowViewReadonlyColumns,
     rowConditions,
   })
 
   // Derive min height and make available in context
   const minHeight = derived(rowHeight, $height => {
-    const heightForControls = showControls ? ControlsHeight : 0
+    const heightForControls = $$slots.controls ? ControlsHeight : 0
     return VPadding + SmallRowHeight + $height + heightForControls
   })
   context = { ...context, minHeight }
@@ -150,13 +143,9 @@
   on:mouseleave={() => gridFocused.set(false)}
   style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px; --scroll-bar-size:{ScrollBarSize}px;"
 >
-  {#if showControls}
+  {#if $$slots.controls}
     <div class="controls">
       <div class="controls-left">
-        <slot name="filter" />
-        <SortButton />
-        <ColumnsSettingButton {allowViewReadonlyColumns} />
-        <SizeButton />
         <slot name="controls" />
       </div>
       <div class="controls-right">
@@ -216,6 +205,7 @@
   <BulkDeleteHandler />
   <ClipboardHandler />
   <KeyboardManager />
+  <slot />
 </div>
 
 <style>