From 85fc2cf73b53594d4639abc3322bef55dfcc4485 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 10 Jun 2025 16:53:36 +0800
Subject: [PATCH] Remove unused files

---
 .../components/custom/accordion.tsx           |  57 --
 .../custom/copy-to-clipboard-container.tsx    | 103 ----
 .../components/custom/input-with-addons.tsx   |  40 --
 .../DataTableDemo/components/custom/kbd.tsx   |  51 --
 .../components/custom/kv-table.tsx            |  49 --
 .../components/custom/kv-tabs.tsx             |  46 --
 .../DataTableDemo/components/custom/link.tsx  |  40 --
 .../DataTableDemo/components/custom/sheet.tsx | 128 -----
 .../components/custom/slider.tsx              |  35 --
 .../components/custom/sortable.tsx            | 333 -----------
 .../DataTableDemo/components/custom/table.tsx | 102 ----
 .../components/custom/text-with-tooltip.tsx   |  54 --
 .../data-table/data-table-column-header.tsx   |  56 --
 .../data-table/data-table-column/README.md    |  32 --
 .../data-table-column-latency.tsx             |  10 -
 .../data-table-column-level-indicator.tsx     |  17 -
 .../data-table-column-region.tsx              |  30 -
 .../data-table-column-status-code.tsx         |  36 --
 .../data-table-column-timestamp.tsx           |  75 ---
 .../data-table/data-table-filter-checkbox.tsx | 122 ----
 .../data-table-filter-command/index.tsx       | 400 -------------
 .../data-table-filter-command/utils.ts        | 262 ---------
 .../data-table-filter-controls-drawer.tsx     |  76 ---
 .../data-table/data-table-filter-controls.tsx |  75 ---
 .../data-table/data-table-filter-input.tsx    |  53 --
 .../data-table-filter-reset-button.tsx        |  42 --
 .../data-table/data-table-filter-slider.tsx   | 100 ----
 .../data-table-filter-timerange.tsx           |  40 --
 .../data-table/data-table-pagination.tsx      |  93 ---
 .../data-table/data-table-provider.tsx        |  92 ---
 .../data-table/data-table-reset-button.tsx    |  39 --
 .../data-table-sheet-content.tsx              |  85 ---
 .../data-table-sheet-details.tsx              | 174 ------
 .../data-table-sheet-row-action.tsx           | 178 ------
 .../data-table-sheet-skeleton.tsx             |  27 -
 .../data-table/data-table-skeleton.tsx        |  62 --
 .../data-table/data-table-toolbar.tsx         |  91 ---
 .../data-table/data-table-view-options.tsx    | 109 ----
 .../components/data-table/types.ts            |  91 ---
 .../components/data-table/utils.ts            |  66 ---
 .../components/icons/bluesky.tsx              |  16 -
 .../DataTableDemo/components/icons/github.tsx |  16 -
 .../DataTableDemo/components/icons/x.tsx      |  16 -
 .../components/layout/socials-footer.tsx      |  35 --
 .../components/layout/top-banner.tsx          |  24 -
 .../components/theme/theme-provider.tsx       |   9 -
 .../components/theme/toggle-mode.tsx          |  39 --
 .../DataTableDemo/components/ui/accordion.tsx |  54 --
 .../DataTableDemo/components/ui/badge.tsx     |  33 --
 .../DataTableDemo/components/ui/button.tsx    |  49 --
 .../DataTableDemo/components/ui/calendar.tsx  |  59 --
 .../DataTableDemo/components/ui/card.tsx      |  79 ---
 .../DataTableDemo/components/ui/chart.tsx     | 365 ------------
 .../DataTableDemo/components/ui/checkbox.tsx  |  30 -
 .../DataTableDemo/components/ui/command.tsx   | 155 -----
 .../DataTableDemo/components/ui/dialog.tsx    | 122 ----
 .../DataTableDemo/components/ui/drawer.tsx    | 118 ----
 .../components/ui/dropdown-menu.tsx           | 185 ------
 .../components/ui/hover-card.tsx              |  29 -
 .../DataTableDemo/components/ui/input.tsx     |  25 -
 .../DataTableDemo/components/ui/label.tsx     |  26 -
 .../DataTableDemo/components/ui/popover.tsx   |  31 -
 .../DataTableDemo/components/ui/select.tsx    | 160 ------
 .../DataTableDemo/components/ui/separator.tsx |  31 -
 .../DataTableDemo/components/ui/sheet.tsx     | 124 ----
 .../DataTableDemo/components/ui/skeleton.tsx  |  15 -
 .../DataTableDemo/components/ui/slider.tsx    |  28 -
 .../DataTableDemo/components/ui/sonner.tsx    |  31 -
 .../DataTableDemo/components/ui/table.tsx     |  91 ---
 .../DataTableDemo/components/ui/tabs.tsx      |  55 --
 .../DataTableDemo/components/ui/tooltip.tsx   |  30 -
 .../components/ui/visually-hidden.tsx         |   6 -
 .../DataTableDemo/constants/date-preset.ts    |  41 --
 .../DataTableDemo/constants/levels.ts         |   4 -
 .../DataTableDemo/constants/method.ts         |   1 -
 .../DataTableDemo/constants/region.ts         |  49 --
 .../interfaces/DataTableDemo/constants/tag.ts |  24 -
 .../DataTableDemo/default/columns.tsx         | 158 ------
 .../DataTableDemo/default/constants.tsx       |  69 ---
 .../DataTableDemo/default/data-table.tsx      | 184 ------
 .../interfaces/DataTableDemo/default/data.ts  | 215 -------
 .../DataTableDemo/default/layout.tsx          |  13 -
 .../interfaces/DataTableDemo/default/page.tsx |  27 -
 .../DataTableDemo/default/search-params.ts    |  41 --
 .../DataTableDemo/default/skeleton.tsx        |  42 --
 .../interfaces/DataTableDemo/default/types.ts |  13 -
 .../hooks/use-copy-to-clipboard.ts            |  45 --
 .../DataTableDemo/hooks/use-debounce.ts       |  16 -
 .../DataTableDemo/hooks/use-hot-key.ts        |  17 -
 .../DataTableDemo/hooks/use-local-storage.ts  |  46 --
 .../DataTableDemo/hooks/use-media-query.ts    |  19 -
 .../infinite/_components/README.md            |   9 -
 .../_components/hover-card-timestamp.tsx      |  26 -
 .../infinite/_components/key-value-table.tsx  |  56 --
 .../infinite/_components/live-button.tsx      |  75 ---
 .../infinite/_components/live-row.tsx         |  19 -
 .../_components/popover-percentile.tsx        |  88 ---
 .../infinite/_components/refresh-button.tsx   |  27 -
 .../_components/sheet-timing-phases.tsx       |  44 --
 .../infinite/_components/socials-footer.tsx   | 111 ----
 .../DataTableDemo/infinite/client.tsx         | 192 -------
 .../DataTableDemo/infinite/columns.tsx        | 365 ------------
 .../DataTableDemo/infinite/constants.tsx      | 257 ---------
 .../infinite/data-table-infinite.tsx          | 529 ------------------
 .../DataTableDemo/infinite/query-options.ts   | 152 -----
 .../DataTableDemo/infinite/schema.ts          | 139 -----
 .../DataTableDemo/infinite/search-params.ts   |  74 ---
 .../DataTableDemo/infinite/timeline-chart.tsx | 193 -------
 .../infinite/use-infinite-query.tsx           |  10 -
 .../DataTableDemo/lib/compose-refs.ts         |  36 --
 .../DataTableDemo/lib/config/README.md        |  19 -
 .../DataTableDemo/lib/delimiters.ts           |   5 -
 .../interfaces/DataTableDemo/lib/format.ts    |  39 --
 .../interfaces/DataTableDemo/lib/is-array.ts  |  19 -
 .../interfaces/DataTableDemo/lib/is-json.ts   |   8 -
 .../DataTableDemo/lib/request/level.ts        |  71 ---
 .../DataTableDemo/lib/request/percentile.ts   |  70 ---
 .../DataTableDemo/lib/request/status-code.ts  |  39 --
 .../DataTableDemo/lib/request/timing.ts       |  60 --
 .../DataTableDemo/lib/table/filterfns.ts      |  29 -
 .../interfaces/DataTableDemo/lib/utils.ts     |   6 -
 .../DataTableDemo/light/api/route.ts          | 223 --------
 .../interfaces/DataTableDemo/light/client.tsx | 102 ----
 .../DataTableDemo/light/columns.tsx           |  98 ----
 .../DataTableDemo/light/constants.tsx         | 168 ------
 .../interfaces/DataTableDemo/light/layout.tsx | 147 -----
 .../interfaces/DataTableDemo/light/page.tsx   |  18 -
 .../DataTableDemo/light/query-options.ts      | 104 ----
 .../DataTableDemo/light/search-params.ts      |  60 --
 .../DataTableDemo/providers/controls.tsx      |  36 --
 .../providers/get-query-client.ts             |  37 --
 .../DataTableDemo/providers/react-query.tsx   |  21 -
 .../components}/Trace/data/trace-data.ts      |   2 +-
 .../Trace/details/marker-detail.tsx           |   4 +-
 .../components}/Trace/details/span-detail.tsx |   2 +-
 .../components}/Trace/span-detail.tsx         |   0
 .../components}/Trace/timeline/minimap.tsx    |   2 +-
 .../Trace/timeline/timeline-cursor.tsx        |   0
 .../Trace/timeline/timeline-header.tsx        |   6 +-
 .../Trace/timeline/timeline-marker.tsx        |   4 +-
 .../Trace/timeline/timeline-ruler.tsx         |   0
 .../Trace/timeline/timeline-span.tsx          |  28 +-
 .../components}/Trace/trace-viewer-client.tsx |   0
 .../components}/Trace/trace-viewer.tsx        |  25 +-
 .../components}/Trace/types/trace.ts          |   0
 .../Trace/utils/layout-algorithm.ts           |   0
 .../UnifiedLogs/components/TraceDetailTab.tsx |   2 +-
 .../data-table-chart-tooltip-label.tsx        |  10 -
 .../data-table/data-table-header-layout.tsx   |  35 --
 .../data-table/data-table-infinite.tsx        | 244 --------
 .../data-table/data-table-side-bar-layout.tsx |  65 ---
 .../interfaces/data-table/filter-side-bar.tsx |  34 --
 .../interfaces/data-table/table.tsx           | 120 ----
 .../interfaces/data-table/timeline-chart.tsx  | 196 -------
 .../infinite-logs-example/client.tsx          | 387 -------------
 .../infinite-logs-example/columns.tsx         | 365 ------------
 .../data-table-sheet-content.tsx              |  88 ---
 .../infinite-logs-example/schema.ts           | 139 -----
 .../DataTableFilterTimerange.tsx              |   3 +-
 .../DataTable/DatePickerWithRange.tsx}        |  51 +-
 .../ui/DataTable/hooks/useComposedRefs.ts     |  32 ++
 .../ui/DataTable/primitives/Sortable.tsx      |   2 +-
 .../pages/project/[ref]/logs/trace/[id].tsx   |  20 -
 163 files changed, 93 insertions(+), 12235 deletions(-)
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/accordion.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/input-with-addons.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/kbd.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/kv-table.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/kv-tabs.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/link.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/sheet.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/slider.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/sortable.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/table.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/custom/text-with-tooltip.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column-header.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/README.md
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-timestamp.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-checkbox.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/index.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/utils.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls-drawer.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-input.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-reset-button.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-slider.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-timerange.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-pagination.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-provider.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-reset-button.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-content.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-details.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-row-action.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-skeleton.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-skeleton.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-toolbar.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-view-options.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/types.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/data-table/utils.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/icons/bluesky.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/icons/github.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/icons/x.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/layout/socials-footer.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/layout/top-banner.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/theme/theme-provider.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/theme/toggle-mode.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/accordion.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/badge.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/button.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/calendar.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/card.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/chart.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/checkbox.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/command.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/dialog.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/drawer.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/dropdown-menu.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/hover-card.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/input.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/label.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/popover.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/select.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/separator.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/sheet.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/skeleton.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/slider.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/sonner.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/table.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/tabs.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/tooltip.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/components/ui/visually-hidden.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/constants/date-preset.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/constants/levels.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/constants/method.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/constants/region.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/constants/tag.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/columns.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/constants.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/data-table.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/data.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/layout.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/page.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/search-params.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/skeleton.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/default/types.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/hooks/use-debounce.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/hooks/use-hot-key.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/hooks/use-local-storage.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/hooks/use-media-query.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/README.md
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/hover-card-timestamp.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/key-value-table.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-button.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-row.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/popover-percentile.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/refresh-button.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/sheet-timing-phases.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/_components/socials-footer.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/client.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/columns.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/constants.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/data-table-infinite.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/query-options.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/schema.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/search-params.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/timeline-chart.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/infinite/use-infinite-query.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/compose-refs.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/config/README.md
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/delimiters.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/format.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/is-array.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/is-json.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/request/level.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/request/percentile.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/request/status-code.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/request/timing.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/table/filterfns.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/lib/utils.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/api/route.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/client.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/columns.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/constants.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/layout.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/page.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/query-options.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/light/search-params.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/providers/controls.tsx
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/providers/get-query-client.ts
 delete mode 100644 apps/studio/components/interfaces/DataTableDemo/providers/react-query.tsx
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/data/trace-data.ts (99%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/details/marker-detail.tsx (95%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/details/span-detail.tsx (97%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/span-detail.tsx (100%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/timeline/minimap.tsx (96%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/timeline/timeline-cursor.tsx (100%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/timeline/timeline-header.tsx (95%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/timeline/timeline-marker.tsx (93%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/timeline/timeline-ruler.tsx (100%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/timeline/timeline-span.tsx (98%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/trace-viewer-client.tsx (100%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/trace-viewer.tsx (98%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/types/trace.ts (100%)
 rename apps/studio/components/interfaces/{ => UnifiedLogs/components}/Trace/utils/layout-algorithm.ts (100%)
 delete mode 100644 apps/studio/components/interfaces/data-table/data-table-chart-tooltip-label.tsx
 delete mode 100644 apps/studio/components/interfaces/data-table/data-table-header-layout.tsx
 delete mode 100644 apps/studio/components/interfaces/data-table/data-table-infinite.tsx
 delete mode 100644 apps/studio/components/interfaces/data-table/data-table-side-bar-layout.tsx
 delete mode 100644 apps/studio/components/interfaces/data-table/filter-side-bar.tsx
 delete mode 100644 apps/studio/components/interfaces/data-table/table.tsx
 delete mode 100644 apps/studio/components/interfaces/data-table/timeline-chart.tsx
 delete mode 100644 apps/studio/components/interfaces/infinite-logs-example/client.tsx
 delete mode 100644 apps/studio/components/interfaces/infinite-logs-example/columns.tsx
 delete mode 100644 apps/studio/components/interfaces/infinite-logs-example/data-table-sheet-content.tsx
 delete mode 100644 apps/studio/components/interfaces/infinite-logs-example/schema.ts
 rename apps/studio/components/{interfaces/DataTableDemo/components/custom/date-picker-with-range.tsx => ui/DataTable/DatePickerWithRange.tsx} (86%)
 create mode 100644 apps/studio/components/ui/DataTable/hooks/useComposedRefs.ts
 delete mode 100644 apps/studio/pages/project/[ref]/logs/trace/[id].tsx

diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/accordion.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/accordion.tsx
deleted file mode 100644
index 1a84c7bdd40..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/accordion.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDown } from 'lucide-react'
-
-import { cn } from 'ui'
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-))
-AccordionItem.displayName = 'AccordionItem'
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 font-medium transition-transform hover:underline [&[data-state=open]>svg]:rotate-180',
-        'rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-      className
-    )}
-    {...props}
-  >
-    <div className="pb-4 pt-0">{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container.tsx
deleted file mode 100644
index 686d4d7c833..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { useCopyToClipboard } from 'components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard'
-import { composeRefs } from 'components/interfaces/DataTableDemo/lib/compose-refs'
-import { cn } from 'ui'
-import { cva, VariantProps } from 'class-variance-authority'
-import { Check, Copy, Plus } from 'lucide-react'
-import * as React from 'react'
-
-const containerVariants = cva(
-  'peer whitespace-pre-wrap break-all rounded-md border p-2 font-mono text-sm',
-  {
-    variants: {
-      variant: {
-        default: 'border-border/50 bg-border/30',
-        destructive: 'border-destructive/50 bg-destructive/30',
-      },
-      defaultVariants: {
-        variant: 'default',
-      },
-    },
-  }
-)
-
-export interface CopyToClipboardContainerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof containerVariants> {
-  /**
-   * If set and the content exceeds the maximum height,
-   * a "Show content" button will collapse the full content
-   */
-  maxHeight?: number
-}
-
-export const CopyToClipboardContainer = React.forwardRef<
-  HTMLDivElement,
-  CopyToClipboardContainerProps
->(({ children, variant, maxHeight, className, ...props }, ref) => {
-  const [open, setOpen] = React.useState(false)
-  const [collapsible, setCollapsible] = React.useState(!!maxHeight)
-  const innerRef = React.useRef<HTMLDivElement>(null)
-  const { copy, isCopied } = useCopyToClipboard()
-
-  React.useLayoutEffect(() => {
-    if (innerRef.current && maxHeight) {
-      // REMINDER: scrollHeight will keep the max possible height of the content
-      // if maxHeight is set, we show the button by default and remove it if height is too narrow.
-      // That way, we avoid having a layout shift of first showing the full height and then collapsible.
-      if (innerRef.current.scrollHeight <= maxHeight) {
-        setCollapsible(false)
-      }
-    }
-  }, [innerRef.current, maxHeight])
-
-  return (
-    <div
-      className="group relative text-left"
-      style={
-        {
-          '--max-height': `${maxHeight}px`,
-        } as React.CSSProperties
-      }
-    >
-      <div
-        ref={composeRefs(ref, innerRef)}
-        className={cn(
-          containerVariants({ variant }),
-          collapsible && !open ? 'max-h-[var(--max-height)] overflow-hidden' : undefined,
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-      <Button
-        variant="outline"
-        size="icon"
-        className="absolute right-2 top-2 h-6 w-6 opacity-0 focus:opacity-100 group-hover:opacity-100 peer-focus:opacity-100"
-        onClick={() => {
-          const content = innerRef.current?.textContent
-          if (content) copy(content)
-        }}
-      >
-        {!isCopied ? <Copy className="h-3 w-3" /> : <Check className="h-3 w-3" />}
-      </Button>
-      {collapsible && !open ? (
-        <div className="absolute inset-x-px bottom-px flex items-center justify-center rounded-b-md bg-gradient-to-b from-background/0 to-background/100">
-          <Button
-            variant="outline"
-            size="sm"
-            className="my-1 rounded-full"
-            onClick={() => setOpen(true)}
-          >
-            <Plus className="mr-2 h-4 w-4" /> Show content
-          </Button>
-        </div>
-      ) : null}
-    </div>
-  )
-})
-
-CopyToClipboardContainer.displayName = 'CopyToClipboardContainer'
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/input-with-addons.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/input-with-addons.tsx
deleted file mode 100644
index 0f0b8f1fb83..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/input-with-addons.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react'
-
-import { cn } from 'ui'
-
-export interface InputWithAddonsProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  leading?: React.ReactNode
-  trailing?: React.ReactNode
-  containerClassName?: string
-}
-
-const InputWithAddons = React.forwardRef<HTMLInputElement, InputWithAddonsProps>(
-  ({ leading, trailing, containerClassName, className, ...props }, ref) => {
-    return (
-      <div
-        className={cn(
-          'border-input ring-offset-background focus-within:ring-ring group flex h-10 w-full rounded-md border bg-transparent text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 overflow-hidden',
-          containerClassName
-        )}
-      >
-        {leading ? (
-          <div className="border-input bg-muted/50 border-r px-3 py-2">{leading}</div>
-        ) : null}
-        <input
-          className={cn(
-            'placeholder:text-muted-foreground bg-background w-full rounded-md px-3 py-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-        {trailing ? (
-          <div className="border-input bg-muted/50 border-l px-3 py-2">{trailing}</div>
-        ) : null}
-      </div>
-    )
-  }
-)
-InputWithAddons.displayName = 'InputWithAddons'
-
-export { InputWithAddons }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/kbd.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/kbd.tsx
deleted file mode 100644
index 7d54ea17c3c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/kbd.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copy Pasta from: https://github.com/sadmann7/shadcn-table/blob/main/src/components/kbd.tsx#L54
-import { type VariantProps, cva } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from 'ui'
-
-export const kbdVariants = cva(
-  'select-none rounded border px-1.5 py-px font-mono text-[0.7rem] font-normal font-mono shadow-sm disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-accent text-accent-foreground',
-        outline: 'bg-background text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-export interface KbdProps
-  extends React.ComponentPropsWithoutRef<'kbd'>,
-    VariantProps<typeof kbdVariants> {
-  /**
-   * The title of the `abbr` element inside the `kbd` element.
-   * @default undefined
-   * @type string | undefined
-   * @example title="Command"
-   */
-  abbrTitle?: string
-}
-
-const Kbd = React.forwardRef<HTMLUnknownElement, KbdProps>(
-  ({ abbrTitle, children, className, variant, ...props }, ref) => {
-    return (
-      <kbd className={cn(kbdVariants({ variant, className }))} ref={ref} {...props}>
-        {abbrTitle ? (
-          <abbr title={abbrTitle} className="no-underline">
-            {children}
-          </abbr>
-        ) : (
-          children
-        )}
-      </kbd>
-    )
-  }
-)
-Kbd.displayName = 'Kbd'
-
-export { Kbd }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-table.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-table.tsx
deleted file mode 100644
index 55762b040f4..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-table.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-} from 'components/interfaces/DataTableDemo/components/custom/table'
-import { useCopyToClipboard } from 'components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard'
-import { Check, Copy } from 'lucide-react'
-
-interface KVTableProps {
-  data: Record<string, string | number | boolean>
-}
-export function KVTable({ data }: KVTableProps) {
-  return (
-    <div className="mx-auto max-w-lg">
-      <div className="overflow-hidden rounded-lg border border-border bg-background">
-        <Table>
-          <TableBody>
-            {Object.entries(data).map(([key, value]) => {
-              return <RowAction key={key} label={key} value={value} />
-            })}
-          </TableBody>
-        </Table>
-      </div>
-    </div>
-  )
-}
-
-function RowAction({ label, value }: { label: string; value: string | number | boolean }) {
-  const { copy, isCopied } = useCopyToClipboard()
-
-  return (
-    <TableRow
-      className="group text-left *:border-border hover:bg-transparent [&>:not(:last-child)]:border-r"
-      onClick={(e) => {
-        e.stopPropagation()
-        copy(value.toString())
-      }}
-    >
-      <TableCell className="bg-muted/50 py-1 font-mono font-medium">{label}</TableCell>
-      <TableCell className="relative py-1 font-mono">
-        {value}
-        <div className="invisible absolute right-1.5 top-1.5 rounded-sm border border-border bg-background p-0.5 backdrop-blur-sm group-hover:visible">
-          {!isCopied ? <Copy className="h-3 w-3" /> : <Check className="h-3 w-3" />}
-        </div>
-      </TableCell>
-    </TableRow>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-tabs.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-tabs.tsx
deleted file mode 100644
index bfa88ac79bc..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-tabs.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
-} from 'ui'
-import { Braces, TableProperties } from 'lucide-react'
-import { CopyToClipboardContainer } from './copy-to-clipboard-container'
-import { KVTable } from './kv-table'
-
-interface KVTabsProps {
-  data: Record<string, string>
-  className?: string
-}
-
-export function KVTabs({ data, className }: KVTabsProps) {
-  return (
-    <Tabs defaultValue="table" className={className}>
-      <div className="flex items-center justify-end">
-        <TabsList className="h-auto gap-1 bg-background px-0 py-0">
-          <TabsTrigger
-            value="table"
-            className="px-0 py-0 text-muted-foreground/70 data-[state=active]:text-foreground data-[state=active]:shadow-none"
-          >
-            <TableProperties className="h-4 w-4" />
-          </TabsTrigger>
-          <TabsTrigger
-            value="raw"
-            className="px-0 py-0 text-muted-foreground/70 data-[state=active]:text-foreground data-[state=active]:shadow-none"
-          >
-            <Braces className="h-4 w-4" />
-          </TabsTrigger>
-        </TabsList>
-      </div>
-      <TabsContent value="table" className="rounded-md">
-        <KVTable data={data} />
-      </TabsContent>
-      <TabsContent value="raw" asChild>
-        {/* REMINDER: either `overflow-auto whitespace-pre` or `whitespace-pre-wrap` - depends if we want to wrap the text or not */}
-        <CopyToClipboardContainer variant="default" className="overflow-auto whitespace-pre">
-          {JSON.stringify(data, null, 2)}
-        </CopyToClipboardContainer>
-      </TabsContent>
-    </Tabs>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/link.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/link.tsx
deleted file mode 100644
index 2f2b317f56d..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/link.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import NextLink, { type LinkProps as NextLinkProps } from 'next/link'
-import React from 'react'
-import { cn } from 'ui'
-import { ArrowUpRight } from 'lucide-react'
-
-export interface LinkProps extends NextLinkProps {
-  className?: string
-  children?: React.ReactNode
-  hideArrow?: boolean
-}
-
-const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ className, href, children, hideArrow, ...props }, ref) => {
-    const isInternal = href?.toString().startsWith('/') || href?.toString().startsWith('#')
-    const externalLinkProps = !isInternal ? { target: '_blank', rel: 'noreferrer' } : undefined
-
-    return (
-      <NextLink
-        className={cn(
-          'group text-foreground underline underline-offset-4 decoration-border hover:decoration-foreground',
-          'ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md',
-          className
-        )}
-        ref={ref}
-        href={href}
-        {...externalLinkProps}
-        {...props}
-      >
-        {children}
-        {!isInternal && !hideArrow ? (
-          <ArrowUpRight className="text-muted-foreground w-4 h-4 inline-block ml-0.5 group-hover:text-foreground group-hover:-translate-y-px group-hover:translate-x-px" />
-        ) : null}
-      </NextLink>
-    )
-  }
-)
-
-Link.displayName = 'Link'
-
-export { Link }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/sheet.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/sheet.tsx
deleted file mode 100644
index ea1a4c5d29e..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/sheet.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { X } from 'lucide-react'
-
-import { cn } from 'ui'
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-background/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-        right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {
-  hideClose?: boolean
-}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = 'right', className, children, hideClose, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-      {children}
-      {!hideClose ? (
-        <SheetPrimitive.Close
-          autoFocus={true}
-          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
-        >
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      ) : null}
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
-)
-SheetHeader.displayName = 'SheetHeader'
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-    {...props}
-  />
-)
-SheetFooter.displayName = 'SheetFooter'
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/slider.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/slider.tsx
deleted file mode 100644
index cf7a9c7c166..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/slider.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Props to https://github.com/shadcn-ui/ui/issues/885#issuecomment-2059600641
-
-'use client'
-
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
-
-import { cn } from 'ui'
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max]
-
-  return (
-    <SliderPrimitive.Root
-      ref={ref}
-      className={cn('relative flex w-full touch-none select-none items-center', className)}
-      {...props}
-    >
-      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-        <SliderPrimitive.Range className="absolute h-full bg-primary" />
-      </SliderPrimitive.Track>
-      {initialValue.map((_, index) => (
-        <React.Fragment key={index}>
-          <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-        </React.Fragment>
-      ))}
-    </SliderPrimitive.Root>
-  )
-})
-Slider.displayName = SliderPrimitive.Root.displayName
-
-export { Slider }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/sortable.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/sortable.tsx
deleted file mode 100644
index 36ea2d461a1..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/sortable.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import type {
-  DndContextProps,
-  DraggableSyntheticListeners,
-  DropAnimation,
-  UniqueIdentifier,
-} from '@dnd-kit/core'
-import {
-  closestCenter,
-  defaultDropAnimationSideEffects,
-  DndContext,
-  DragOverlay,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core'
-import {
-  restrictToHorizontalAxis,
-  restrictToParentElement,
-  restrictToVerticalAxis,
-} from '@dnd-kit/modifiers'
-import {
-  arrayMove,
-  horizontalListSortingStrategy,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-  type SortableContextProps,
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { Slot, type SlotProps } from '@radix-ui/react-slot'
-
-import { composeRefs } from 'components/interfaces/DataTableDemo/lib/compose-refs'
-import { cn } from 'ui'
-import { Button, type ButtonProps } from 'ui'
-import { createPortal } from 'react-dom'
-
-const orientationConfig = {
-  vertical: {
-    modifiers: [restrictToVerticalAxis, restrictToParentElement],
-    strategy: verticalListSortingStrategy,
-  },
-  horizontal: {
-    modifiers: [restrictToHorizontalAxis, restrictToParentElement],
-    strategy: horizontalListSortingStrategy,
-  },
-  mixed: {
-    modifiers: [restrictToParentElement],
-    strategy: undefined,
-  },
-}
-
-interface SortableProps<TData extends { id: UniqueIdentifier }> extends DndContextProps {
-  /**
-   * An array of data items that the sortable component will render.
-   * @example
-   * value={[
-   *   { id: 1, name: 'Item 1' },
-   *   { id: 2, name: 'Item 2' },
-   * ]}
-   */
-  value: TData[]
-
-  /**
-   * An optional callback function that is called when the order of the data items changes.
-   * It receives the new array of items as its argument.
-   * @example
-   * onValueChange={(items) => console.log(items)}
-   */
-  onValueChange?: (items: TData[]) => void
-
-  /**
-   * An optional callback function that is called when an item is moved.
-   * It receives an event object with `activeIndex` and `overIndex` properties, representing the original and new positions of the moved item.
-   * This will override the default behavior of updating the order of the data items.
-   * @type (event: { activeIndex: number; overIndex: number }) => void
-   * @example
-   * onMove={(event) => console.log(`Item moved from index ${event.activeIndex} to index ${event.overIndex}`)}
-   */
-  onMove?: (event: { activeIndex: number; overIndex: number }) => void
-
-  /**
-   * A collision detection strategy that will be used to determine the closest sortable item.
-   * @default closestCenter
-   * @type DndContextProps["collisionDetection"]
-   */
-  collisionDetection?: DndContextProps['collisionDetection']
-
-  /**
-   * An array of modifiers that will be used to modify the behavior of the sortable component.
-   * @default
-   * [restrictToVerticalAxis, restrictToParentElement]
-   * @type Modifier[]
-   */
-  modifiers?: DndContextProps['modifiers']
-
-  /**
-   * A sorting strategy that will be used to determine the new order of the data items.
-   * @default verticalListSortingStrategy
-   * @type SortableContextProps["strategy"]
-   */
-  strategy?: SortableContextProps['strategy']
-
-  /**
-   * Specifies the axis for the drag-and-drop operation. It can be "vertical", "horizontal", or "both".
-   * @default "vertical"
-   * @type "vertical" | "horizontal" | "mixed"
-   */
-  orientation?: 'vertical' | 'horizontal' | 'mixed'
-
-  /**
-   * An optional React node that is rendered on top of the sortable component.
-   * It can be used to display additional information or controls.
-   * @default null
-   * @type React.ReactNode | null
-   * @example
-   * overlay={<Skeleton className="w-full h-8" />}
-   */
-  overlay?: React.ReactNode | null
-}
-
-function Sortable<TData extends { id: UniqueIdentifier }>({
-  value,
-  onValueChange,
-  onDragStart,
-  onDragEnd,
-  onDragCancel,
-  collisionDetection = closestCenter,
-  modifiers,
-  strategy,
-  onMove,
-  orientation = 'vertical',
-  overlay,
-  children,
-  ...props
-}: SortableProps<TData>) {
-  const [activeId, setActiveId] = React.useState<UniqueIdentifier | null>(null)
-  const sensors = useSensors(
-    useSensor(MouseSensor),
-    useSensor(TouchSensor),
-    useSensor(KeyboardSensor)
-  )
-
-  const config = orientationConfig[orientation]
-
-  return (
-    <DndContext
-      modifiers={modifiers ?? config.modifiers}
-      sensors={sensors}
-      onDragStart={(event) => {
-        setActiveId(event.active.id)
-        onDragStart?.(event)
-      }}
-      onDragEnd={(event) => {
-        const { active, over } = event
-        if (over && active.id !== over?.id) {
-          const activeIndex = value.findIndex((item) => item.id === active.id)
-          const overIndex = value.findIndex((item) => item.id === over.id)
-
-          if (onMove) {
-            onMove({ activeIndex, overIndex })
-          } else {
-            onValueChange?.(arrayMove(value, activeIndex, overIndex))
-          }
-        }
-        setActiveId(null)
-        onDragEnd?.(event)
-      }}
-      onDragCancel={(event) => {
-        setActiveId?.(null)
-        onDragCancel?.(event)
-      }}
-      collisionDetection={collisionDetection}
-      {...props}
-    >
-      <SortableContext items={value} strategy={strategy ?? config.strategy}>
-        {children}
-      </SortableContext>
-      {overlay
-        ? // https://docs.dndkit.com/api-documentation/draggable/drag-overlay#portals
-          createPortal(
-            <SortableOverlay activeId={activeId}>{overlay}</SortableOverlay>,
-            document.body
-          )
-        : null}
-    </DndContext>
-  )
-}
-
-const dropAnimationOpts: DropAnimation = {
-  sideEffects: defaultDropAnimationSideEffects({
-    styles: {
-      active: {
-        opacity: '0.4',
-      },
-    },
-  }),
-}
-
-interface SortableOverlayProps extends React.ComponentPropsWithRef<typeof DragOverlay> {
-  activeId?: UniqueIdentifier | null
-}
-
-const SortableOverlay = React.forwardRef<HTMLDivElement, SortableOverlayProps>(
-  ({ activeId, dropAnimation = dropAnimationOpts, children, ...props }, ref) => {
-    return (
-      <DragOverlay dropAnimation={dropAnimation} {...props}>
-        {activeId ? (
-          <SortableItem ref={ref} value={activeId} className="cursor-grabbing" asChild>
-            {children}
-          </SortableItem>
-        ) : null}
-      </DragOverlay>
-    )
-  }
-)
-SortableOverlay.displayName = 'SortableOverlay'
-
-interface SortableItemContextProps {
-  attributes: React.HTMLAttributes<HTMLElement>
-  listeners: DraggableSyntheticListeners | undefined
-  isDragging?: boolean
-}
-
-const SortableItemContext = React.createContext<SortableItemContextProps>({
-  attributes: {},
-  listeners: undefined,
-  isDragging: false,
-})
-
-function useSortableItem() {
-  const context = React.useContext(SortableItemContext)
-
-  if (!context) {
-    throw new Error('useSortableItem must be used within a SortableItem')
-  }
-
-  return context
-}
-
-interface SortableItemProps extends SlotProps {
-  /**
-   * The unique identifier of the item.
-   * @example "item-1"
-   * @type UniqueIdentifier
-   */
-  value: UniqueIdentifier
-
-  /**
-   * Specifies whether the item should act as a trigger for the drag-and-drop action.
-   * @default false
-   * @type boolean | undefined
-   */
-  asTrigger?: boolean
-
-  /**
-   * Merges the item's props into its immediate child.
-   * @default false
-   * @type boolean | undefined
-   */
-  asChild?: boolean
-}
-
-const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
-  ({ value, asTrigger, asChild, className, ...props }, ref) => {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-      id: value,
-    })
-
-    const context = React.useMemo<SortableItemContextProps>(
-      () => ({
-        attributes,
-        listeners,
-        isDragging,
-      }),
-      [attributes, listeners, isDragging]
-    )
-    const style: React.CSSProperties = {
-      opacity: isDragging ? 0.5 : 1,
-      transform: CSS.Translate.toString(transform),
-      transition,
-    }
-
-    const Comp = asChild ? Slot : 'div'
-
-    return (
-      <SortableItemContext.Provider value={context}>
-        <Comp
-          data-state={isDragging ? 'dragging' : undefined}
-          className={cn(
-            'data-[state=dragging]:cursor-grabbing',
-            { 'cursor-grab': !isDragging && asTrigger },
-            className
-          )}
-          ref={composeRefs(ref, setNodeRef as React.Ref<HTMLDivElement>)}
-          style={style}
-          {...(asTrigger ? attributes : {})}
-          {...(asTrigger ? listeners : {})}
-          {...props}
-        />
-      </SortableItemContext.Provider>
-    )
-  }
-)
-SortableItem.displayName = 'SortableItem'
-
-interface SortableDragHandleProps extends ButtonProps {
-  withHandle?: boolean
-}
-
-const SortableDragHandle = React.forwardRef<HTMLButtonElement, SortableDragHandleProps>(
-  ({ className, ...props }, ref) => {
-    const { attributes, listeners, isDragging } = useSortableItem()
-
-    return (
-      <Button
-        ref={composeRefs(ref)}
-        data-state={isDragging ? 'dragging' : undefined}
-        className={cn('cursor-grab data-[state=dragging]:cursor-grabbing', className)}
-        {...attributes}
-        {...listeners}
-        {...props}
-      />
-    )
-  }
-)
-SortableDragHandle.displayName = 'SortableDragHandle'
-
-export { Sortable, SortableDragHandle, SortableItem, SortableOverlay }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/table.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/table.tsx
deleted file mode 100644
index e980889b938..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/table.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react'
-
-import { cn } from 'ui'
-
-interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
-  containerClassName?: string
-}
-
-const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  ({ className, containerClassName, onScroll, ...props }, ref) => (
-    <div
-      className={cn('w-full overflow-auto', containerClassName)}
-      // REMINDER: we are not scrolling the table, but the container
-      {...{ onScroll }}
-    >
-      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  )
-)
-Table.displayName = 'Table'
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-))
-TableHeader.displayName = 'TableHeader'
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-))
-TableBody.displayName = 'TableBody'
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn('bg-primary text-primary-foreground font-medium', className)}
-    {...props}
-  />
-))
-TableFooter.displayName = 'TableFooter'
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-TableRow.displayName = 'TableRow'
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = 'TableHead'
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      className
-    )}
-    {...props}
-  />
-))
-TableCell.displayName = 'TableCell'
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
-))
-TableCaption.displayName = 'TableCaption'
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/text-with-tooltip.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/text-with-tooltip.tsx
deleted file mode 100644
index 5b6cf8cc6ce..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/text-with-tooltip.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TooltipPortal } from 'ui'
-import { cn } from 'ui'
-
-interface TextWithTooltipProps {
-  text: string | number
-  className?: string
-}
-
-export function TextWithTooltip({ text, className }: TextWithTooltipProps) {
-  const [isTruncated, setIsTruncated] = useState<boolean>(false)
-  const textRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const checkTruncation = () => {
-      if (textRef.current) {
-        const { scrollWidth, clientWidth } = textRef.current
-        setIsTruncated(scrollWidth > clientWidth)
-      }
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      checkTruncation()
-    })
-
-    if (textRef.current) {
-      resizeObserver.observe(textRef.current)
-    }
-
-    checkTruncation()
-
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [])
-
-  return (
-    <TooltipProvider delayDuration={100} disableHoverableContent>
-      <Tooltip>
-        <TooltipTrigger disabled={!isTruncated} asChild>
-          <div
-            ref={textRef}
-            className={cn('truncate', !isTruncated && 'pointer-events-none', className)}
-          >
-            {text}
-          </div>
-        </TooltipTrigger>
-        <TooltipPortal>
-          <TooltipContent>{text}</TooltipContent>
-        </TooltipPortal>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column-header.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column-header.tsx
deleted file mode 100644
index 384c5984778..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column-header.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Column } from '@tanstack/react-table'
-import { ChevronDown, ChevronUp } from 'lucide-react'
-
-import { Button, type ButtonProps } from 'ui'
-
-import { cn } from 'ui'
-
-interface DataTableColumnHeaderProps<TData, TValue> extends ButtonProps {
-  column: Column<TData, TValue>
-  title: string
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-  ...props
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  if (!column.getCanSort()) {
-    return <div className={cn(className)}>{title}</div>
-  }
-
-  return (
-    <Button
-      type="text"
-      size="small"
-      onClick={() => {
-        column.toggleSorting(undefined)
-      }}
-      className={cn(
-        'text-xs',
-        'py-0 px-0 h-7 hover:bg-transparent flex gap-2 items-center justify-between w-full',
-        className
-      )}
-      iconRight={
-        <span className="flex flex-col">
-          <ChevronUp
-            className={cn(
-              '-mb-1 hover:text-foreground-lighter',
-              column.getIsSorted() === 'asc' ? 'text-foreground' : 'text-foreground-muted'
-            )}
-          />
-          <ChevronDown
-            className={cn(
-              '-mt-1 hover:text-foreground-lighter',
-              column.getIsSorted() === 'desc' ? 'text-foreground' : 'text-foreground-muted'
-            )}
-          />
-        </span>
-      }
-      {...props}
-    >
-      <span>{title}</span>
-    </Button>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/README.md b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/README.md
deleted file mode 100644
index 171e5707f69..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-Reusable Column Components
-
-This folder is dedicated for components that can be used as within the `columns.tsx` structure.
-
-Components:
-
-- `DataTableColumnTimestamp`: A hover card with the _Unix timestamp_, _UTC_, _timezone_ and _relative_ (x days ago) values
-- `DataTableLevelIndicator`: A simple colored square to indicate `"error" | "warning" | "success" | "info"` data
-
-Usage Example:
-
-```tsx
-"use client";
-
-import { DataTableColumnLevelIndicator } from "@/components/data-table/data-table-column/data-table-column-level-indicator";
-import type { ColumnDef } from "@tanstack/react-table";
-
-export type ColumnSchema = {
-  // ...
-};
-
-export const columns: ColumnDef<ColumnSchema>[] = [
-  {
-    accessorKey: "level",
-    header: "",
-    cell: ({ row }) => {
-      const level = row.getValue("level") as (typeof LEVELS)[number];
-      return <DataTableColumnLevelIndicator level={level} />;
-    },
-  },
-];
-```
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency.tsx
deleted file mode 100644
index 759cc06cb4f..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export function DataTableColumnLatency({ value }: { value: number }) {
-  return (
-    <div className="font-mono">
-      {new Intl.NumberFormat("en-US", { maximumFractionDigits: 3 }).format(
-        value,
-      )}
-      <span className="text-muted-foreground">ms</span>
-    </div>
-  );
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator.tsx
deleted file mode 100644
index e522e5582b6..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { _LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-import { getLevelColor } from 'components/interfaces/DataTableDemo/lib/request/level'
-import { cn } from 'ui'
-
-export function DataTableColumnLevelIndicator({
-  value,
-  className,
-}: {
-  value: (typeof _LEVELS)[number]
-  className?: string
-}) {
-  return (
-    <div className={cn('flex items-center justify-center', className)}>
-      <div className={cn('h-2.5 w-2.5 rounded-[2px]', getLevelColor(value).bg)} />
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region.tsx
deleted file mode 100644
index d8a625fa81b..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { regions } from 'components/interfaces/DataTableDemo/constants/region'
-
-interface DataTableColumnRegionProps {
-  value: string
-  showFlag?: boolean
-  reverse?: boolean
-}
-
-export function DataTableColumnRegion({
-  value,
-  showFlag = false,
-  reverse = false,
-}: DataTableColumnRegionProps) {
-  const region = regions[value] ?? { label: value, flag: '' }
-  return reverse ? (
-    <>
-      <span className="text-xs text-muted-foreground">
-        {showFlag && region.flag} {region.label}
-      </span>{' '}
-      <span>{value}</span>
-    </>
-  ) : (
-    <>
-      <span>{value}</span>{' '}
-      <span className="text-xs text-muted-foreground">
-        {showFlag && region.flag} {region.label}
-      </span>
-    </>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code.tsx
deleted file mode 100644
index d463b5a0f0c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { getStatusColor } from 'components/interfaces/DataTableDemo/lib/request/status-code'
-import { cn } from 'ui'
-import { Minus } from 'lucide-react'
-import { color } from 'framer-motion'
-
-export function DataTableColumnStatusCode({
-  value,
-  level,
-  className,
-}: {
-  value?: number | string
-  level?: string
-  className?: string
-}) {
-  // console.log('level', level, level === 'warning' ? value : 'no warning')
-  const colors = getStatusColor(level)
-  if (!value) {
-    return <Minus className="h-4 w-4 text-muted-foreground/50" />
-  }
-
-  return (
-    <div className={cn('flex items-center relative', className)}>
-      <div
-        className={cn(
-          'px-1 py-[0.03rem] rounded-md',
-          'flex items-center justify-center relative font-mono',
-          colors.text,
-          colors.bg,
-          colors.border
-        )}
-      >
-        {value}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-timestamp.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-timestamp.tsx
deleted file mode 100644
index fb005633ce3..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-timestamp.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { HoverCard, HoverCardContent, HoverCardTrigger } from 'ui'
-import { useCopyToClipboard } from 'components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard'
-import { cn } from 'ui'
-import { UTCDate } from '@date-fns/utc'
-import { HoverCardPortal } from '@radix-ui/react-hover-card'
-import { format, formatDistanceToNowStrict } from 'date-fns'
-import { Check, Copy } from 'lucide-react'
-import type { ComponentPropsWithoutRef } from 'react'
-
-type HoverCardContentProps = ComponentPropsWithoutRef<typeof HoverCardContent>
-
-interface DataTableColumnTimestampProps {
-  date: Date
-  side?: HoverCardContentProps['side']
-  sideOffset?: HoverCardContentProps['sideOffset']
-  align?: HoverCardContentProps['align']
-  alignOffset?: HoverCardContentProps['alignOffset']
-  className?: string
-}
-
-export function DataTableColumnTimestamp({
-  date,
-  side = 'right',
-  align = 'start',
-  alignOffset = -4,
-  sideOffset,
-  className,
-}: DataTableColumnTimestampProps) {
-  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-
-  return (
-    <HoverCard openDelay={0} closeDelay={0}>
-      <HoverCardTrigger asChild>
-        <div className={cn('whitespace-nowrap font-mono', className)}>
-          {format(date, 'LLL dd, y HH:mm:ss')}
-        </div>
-      </HoverCardTrigger>
-      {/* REMINDER: allows us to port the content to the document.body, which is helpful when using opacity-50 on the row element */}
-      <HoverCardPortal>
-        <HoverCardContent className="z-10 w-auto p-2" {...{ side, align, alignOffset, sideOffset }}>
-          <dl className="flex flex-col gap-1">
-            <Row value={String(date.getTime())} label="Timestamp" />
-            <Row value={format(new UTCDate(date), 'LLL dd, y HH:mm:ss')} label="UTC" />
-            <Row value={format(date, 'LLL dd, y HH:mm:ss')} label={timezone} />
-            <Row value={formatDistanceToNowStrict(date, { addSuffix: true })} label="Relative" />
-          </dl>
-        </HoverCardContent>
-      </HoverCardPortal>
-    </HoverCard>
-  )
-}
-
-function Row({ value, label }: { value: string; label: string }) {
-  const { copy, isCopied } = useCopyToClipboard()
-
-  return (
-    <div
-      className="group flex items-center justify-between gap-4 text-sm"
-      onClick={(e) => {
-        e.stopPropagation()
-        copy(value)
-      }}
-    >
-      <dt className="text-muted-foreground">{label}</dt>
-      <dd className="flex items-center gap-1 truncate font-mono">
-        <span className="invisible group-hover:visible">
-          {!isCopied ? <Copy className="h-3 w-3" /> : <Check className="h-3 w-3" />}
-        </span>
-        {value}
-      </dd>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-checkbox.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-checkbox.tsx
deleted file mode 100644
index cc7861ae678..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-checkbox.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client'
-
-import { InputWithAddons } from 'components/interfaces/DataTableDemo/components/custom/input-with-addons'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { Checkbox_Shadcn_ as Checkbox } from 'ui'
-import { Label_Shadcn_ as Label } from 'ui'
-import { Skeleton } from 'ui'
-import { formatCompactNumber } from 'components/interfaces/DataTableDemo/lib/format'
-import { cn } from 'ui'
-import { Search } from 'lucide-react'
-import { useState } from 'react'
-import type { DataTableCheckboxFilterField } from './types'
-
-export function DataTableFilterCheckbox<TData>({
-  value: _value,
-  options,
-  component,
-}: DataTableCheckboxFilterField<TData>) {
-  const value = _value as string
-  const [inputValue, setInputValue] = useState('')
-  const { table, columnFilters, isLoading, getFacetedUniqueValues } = useDataTable()
-  const column = table.getColumn(value)
-  // REMINDER: avoid using column?.getFilterValue()
-  const filterValue = columnFilters.find((i) => i.id === value)?.value
-  const facetedValue = getFacetedUniqueValues?.(table, value) || column?.getFacetedUniqueValues()
-
-  const Component = component
-
-  // filter out the options based on the input value
-  const filterOptions = options?.filter(
-    (option) => inputValue === '' || option.label.toLowerCase().includes(inputValue.toLowerCase())
-  )
-
-  // CHECK: it could be filterValue or searchValue
-  const filters = filterValue ? (Array.isArray(filterValue) ? filterValue : [filterValue]) : []
-
-  // REMINDER: if no options are defined, while fetching data, we should show a skeleton
-  if (isLoading && !filterOptions?.length)
-    return (
-      <div className="grid divide-y rounded-lg border border-border">
-        {Array.from({ length: 3 }).map((_, index) => (
-          <div key={index} className="flex items-center justify-between gap-2 px-2 py-2.5">
-            <Skeleton className="h-4 w-4 rounded-sm" />
-            <Skeleton className="h-4 w-full rounded-sm" />
-          </div>
-        ))}
-      </div>
-    )
-
-  if (!filterOptions?.length) return null
-
-  return (
-    <div className="grid gap-2">
-      {options && options.length > 4 ? (
-        <InputWithAddons
-          placeholder="Search"
-          leading={<Search className="mt-0.5 h-4 w-4" />}
-          containerClassName="h-9 rounded-lg"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-        />
-      ) : null}
-      {/* FIXME: due to the added max-h and overflow-y-auto, the hover state and border is laying on top of the scroll bar */}
-      <div className="max-h-[200px] overflow-y-auto rounded-lg border border-border empty:border-none">
-        {filterOptions
-          // TODO: we shoudn't sort the options here, instead filterOptions should be sorted by default
-          // .sort((a, b) => a.label.localeCompare(b.label))
-          .map((option, index) => {
-            const checked = filters.includes(option.value)
-
-            return (
-              <div
-                key={String(option.value)}
-                className={cn(
-                  'group relative flex items-center space-x-2 px-2 py-2.5 hover:bg-accent/50',
-                  index !== filterOptions.length - 1 ? 'border-b' : undefined
-                )}
-              >
-                <Checkbox
-                  id={`${value}-${option.value}`}
-                  checked={checked}
-                  onCheckedChange={(checked) => {
-                    const newValue = checked
-                      ? [...(filters || []), option.value]
-                      : filters?.filter((value) => option.value !== value)
-                    column?.setFilterValue(newValue?.length ? newValue : undefined)
-                  }}
-                />
-                <Label
-                  htmlFor={`${value}-${option.value}`}
-                  className="flex w-full items-center justify-center gap-1 truncate text-foreground/70 group-hover:text-accent-foreground"
-                >
-                  {Component ? (
-                    <Component {...option} />
-                  ) : (
-                    <span className="truncate font-normal">{option.label}</span>
-                  )}
-                  <span className="ml-auto flex items-center justify-center font-mono text-xs">
-                    {isLoading ? (
-                      <Skeleton className="h-4 w-4" />
-                    ) : facetedValue?.has(option.value) ? (
-                      formatCompactNumber(facetedValue.get(option.value) || 0)
-                    ) : null}
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() => column?.setFilterValue([option.value])}
-                    className={cn(
-                      'absolute inset-y-0 right-0 hidden font-normal text-muted-foreground backdrop-blur-sm hover:text-foreground group-hover:block',
-                      'rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-                    )}
-                  >
-                    <span className="px-2">only</span>
-                  </button>
-                </Label>
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/index.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/index.tsx
deleted file mode 100644
index 294be29357c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/index.tsx
+++ /dev/null
@@ -1,400 +0,0 @@
-'use client'
-
-import { Kbd } from 'components/interfaces/DataTableDemo/components/custom/kbd'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import {
-  Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
-  CommandGroup_Shadcn_ as CommandGroup,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
-  CommandSeparator_Shadcn_ as CommandSeparator,
-} from 'ui'
-import { Separator } from 'ui'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { useLocalStorage } from 'components/interfaces/DataTableDemo/hooks/use-local-storage'
-import { formatCompactNumber } from 'components/interfaces/DataTableDemo/lib/format'
-import { cn } from 'ui'
-import { formatDistanceToNow } from 'date-fns'
-import { LoaderCircle, Search, X } from 'lucide-react'
-import { ParserBuilder } from 'nuqs'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import type { DataTableFilterField } from '../types'
-import {
-  columnFiltersParser,
-  getFieldOptions,
-  getFilterValue,
-  getWordByCaretPosition,
-  replaceInputByFieldType,
-} from './utils'
-
-// FIXME: there is an issue on cmdk if I wanna only set a single slider value...
-
-interface DataTableFilterCommandProps {
-  // TODO: maybe use generics for the parser
-  searchParamsParser: Record<string, ParserBuilder<any>>
-}
-
-export function DataTableFilterCommand({ searchParamsParser }: DataTableFilterCommandProps) {
-  const { table, isLoading, filterFields: _filterFields, getFacetedUniqueValues } = useDataTable()
-  const columnFilters = table.getState().columnFilters
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [open, setOpen] = useState<boolean>(false)
-  const [currentWord, setCurrentWord] = useState<string>('')
-  const filterFields = useMemo(
-    () => _filterFields?.filter((i) => !i.commandDisabled),
-    [_filterFields]
-  )
-  const columnParser = useMemo(
-    () => columnFiltersParser({ searchParamsParser, filterFields }),
-    [searchParamsParser, filterFields]
-  )
-  const [inputValue, setInputValue] = useState<string>(columnParser.serialize(columnFilters))
-  const [lastSearches, setLastSearches] = useLocalStorage<
-    {
-      search: string
-      timestamp: number
-    }[]
-  >('data-table-command', [])
-
-  useEffect(() => {
-    // TODO: we could check for ARRAY_DELIMITER or SLIDER_DELIMITER to auto-set filter when typing
-    if (currentWord !== '' && open) return
-    // reset
-    if (currentWord !== '' && !open) setCurrentWord('')
-    // avoid recursion
-    if (inputValue.trim() === '' && !open) return
-
-    const searchParams = columnParser.parse(inputValue)
-
-    const currentFilters = table.getState().columnFilters
-    const currentEnabledFilters = currentFilters.filter((filter) => {
-      const field = _filterFields?.find((field) => field.value === filter.id)
-      return !field?.commandDisabled
-    })
-    const currentDisabledFilters = currentFilters.filter((filter) => {
-      const field = _filterFields?.find((field) => field.value === filter.id)
-      return field?.commandDisabled
-    })
-
-    const commandDisabledFilterKeys = currentDisabledFilters.reduce(
-      (prev, curr) => {
-        prev[curr.id] = curr.value
-        return prev
-      },
-      {} as Record<string, unknown>
-    )
-
-    for (const key of Object.keys(searchParams)) {
-      const value = searchParams[key as keyof typeof searchParams]
-      table.getColumn(key)?.setFilterValue(value)
-    }
-    const currentFiltersToReset = currentEnabledFilters.filter((filter) => {
-      return !(filter.id in searchParams)
-    })
-    for (const filter of currentFiltersToReset) {
-      table.getColumn(filter.id)?.setFilterValue(undefined)
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue, open, currentWord])
-
-  useEffect(() => {
-    // REMINDER: only update the input value if the command is closed (avoids jumps while open)
-    if (!open) {
-      setInputValue(columnParser.serialize(columnFilters))
-    }
-  }, [columnFilters, filterFields, open])
-
-  useHotKey(() => setOpen((open) => !open), 'k')
-
-  useEffect(() => {
-    if (open) {
-      inputRef?.current?.focus()
-    }
-  }, [open])
-
-  return (
-    <div>
-      <button
-        type="button"
-        className={cn(
-          'group flex w-full items-center rounded-lg border border-input bg-background px-3 text-muted-foreground ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 hover:bg-accent/50 hover:text-accent-foreground',
-          open ? 'hidden' : 'visible'
-        )}
-        onClick={() => setOpen(true)}
-      >
-        {isLoading ? (
-          <LoaderCircle className="mr-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground opacity-50 group-hover:text-popover-foreground" />
-        ) : (
-          <Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground opacity-50 group-hover:text-popover-foreground" />
-        )}
-        <span className="h-11 w-full max-w-sm truncate py-3 text-left text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50 md:max-w-xl lg:max-w-4xl xl:max-w-5xl">
-          {inputValue.trim() ? (
-            <span className="text-foreground">{inputValue}</span>
-          ) : (
-            <span>Search data table...</span>
-          )}
-        </span>
-        <Kbd className="ml-auto text-muted-foreground group-hover:text-accent-foreground">
-          <span className="mr-1">⌘</span>
-          <span>K</span>
-        </Kbd>
-      </button>
-      <Command
-        className={cn(
-          'overflow-visible rounded-lg border border-border shadow-md [&>div]:border-none bg',
-          open ? 'visible' : 'hidden'
-        )}
-        filter={(value, search, keywords) =>
-          getFilterValue({ value, search, keywords, currentWord })
-        }
-        // loop
-      >
-        <CommandInput
-          ref={inputRef}
-          value={inputValue}
-          onValueChange={setInputValue}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') inputRef?.current?.blur()
-          }}
-          onBlur={() => {
-            setOpen(false)
-            // FIXME: doesnt reflect the jumps
-            // FIXME: will save non-existing searches
-            // TODO: extract into function
-            const search = inputValue.trim()
-            if (!search) return
-            const timestamp = Date.now()
-            const searchIndex = lastSearches.findIndex((item) => item.search === search)
-            if (searchIndex !== -1) {
-              lastSearches[searchIndex].timestamp = timestamp
-              setLastSearches(lastSearches)
-              return
-            }
-            setLastSearches([...lastSearches, { search, timestamp }])
-            return
-          }}
-          onInput={(e) => {
-            const caretPosition = e.currentTarget?.selectionStart || -1
-            const value = e.currentTarget?.value || ''
-            const word = getWordByCaretPosition({ value, caretPosition })
-            setCurrentWord(word)
-          }}
-          placeholder="Search data table..."
-          className="text-foreground"
-        />
-        <div className="relative">
-          <div className="absolute top-2 z-50 w-full overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none animate-in">
-            {/* default height is 300px but in case of more, we'd like to tease the user */}
-            <CommandList className="max-h-[310px] bg-surface-100">
-              <CommandGroup heading="Filter">
-                {filterFields.map((field) => {
-                  if (typeof field.value !== 'string') return null
-                  if (inputValue.includes(`${field.value}:`)) return null
-                  // TBD: should we handle this in the component?
-                  return (
-                    <CommandItem
-                      key={field.value}
-                      value={field.value}
-                      onMouseDown={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                      }}
-                      onSelect={(value) => {
-                        setInputValue((prev) => {
-                          if (currentWord.trim() === '') {
-                            const input = `${prev}${value}`
-                            return `${input}:`
-                          }
-                          // lots of cheat
-                          const isStarting = currentWord === prev
-                          const prefix = isStarting ? '' : ' '
-                          const input = prev.replace(`${prefix}${currentWord}`, `${prefix}${value}`)
-                          return `${input}:`
-                        })
-                        setCurrentWord(`${value}:`)
-                      }}
-                      className="group"
-                    >
-                      {field.value}
-                      <CommandItemSuggestions field={field} />
-                    </CommandItem>
-                  )
-                })}
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup heading="Query">
-                {filterFields?.map((field) => {
-                  if (typeof field.value !== 'string') return null
-                  if (!currentWord.includes(`${field.value}:`)) return null
-
-                  const column = table.getColumn(field.value)
-                  const facetedValue =
-                    getFacetedUniqueValues?.(table, field.value) || column?.getFacetedUniqueValues()
-
-                  const options = getFieldOptions({ field })
-
-                  return options.map((optionValue) => {
-                    return (
-                      <CommandItem
-                        key={`${String(field.value)}:${optionValue}`}
-                        value={`${String(field.value)}:${optionValue}`}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                        }}
-                        onSelect={(value) => {
-                          setInputValue((prev) =>
-                            replaceInputByFieldType({
-                              prev,
-                              currentWord,
-                              optionValue,
-                              value,
-                              field,
-                            })
-                          )
-                          setCurrentWord('')
-                        }}
-                      >
-                        {`${optionValue}`}
-                        {facetedValue?.has(optionValue) ? (
-                          <span className="ml-auto font-mono text-muted-foreground">
-                            {formatCompactNumber(facetedValue.get(optionValue) || 0)}
-                          </span>
-                        ) : null}
-                      </CommandItem>
-                    )
-                  })
-                })}
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup heading="Suggestions">
-                {lastSearches
-                  ?.sort((a, b) => b.timestamp - a.timestamp)
-                  .slice(0, 5)
-                  .map((item) => {
-                    return (
-                      <CommandItem
-                        key={`suggestion:${item.search}`}
-                        value={`suggestion:${item.search}`}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                        }}
-                        onSelect={(value) => {
-                          const search = value.replace('suggestion:', '')
-                          setInputValue(`${search} `)
-                          setCurrentWord('')
-                        }}
-                        className="group"
-                      >
-                        {item.search}
-                        <span className="ml-auto truncate text-muted-foreground/80 group-aria-[selected=true]:block">
-                          {formatDistanceToNow(item.timestamp, {
-                            addSuffix: true,
-                          })}
-                        </span>
-                        <button
-                          type="button"
-                          onMouseDown={(e) => {
-                            e.preventDefault()
-                            e.stopPropagation()
-                          }}
-                          onClick={(e) => {
-                            e.preventDefault()
-                            e.stopPropagation()
-                            // TODO: extract into function
-                            setLastSearches(lastSearches.filter((i) => i.search !== item.search))
-                          }}
-                          className="ml-1 hidden rounded-md p-0.5 hover:bg-background group-aria-[selected=true]:block"
-                        >
-                          <X className="h-4 w-4" />
-                        </button>
-                      </CommandItem>
-                    )
-                  })}
-              </CommandGroup>
-              <CommandEmpty>No results found.</CommandEmpty>
-            </CommandList>
-            <div
-              className="bg-surface-100 flex flex-wrap justify-between gap-3 border-t bg-accent/50 px-2 py-1.5 text-sm text-accent-foreground"
-              cmdk-footer=""
-            >
-              <div className="flex flex-wrap gap-3">
-                <span>
-                  Use <Kbd variant="outline">↑</Kbd> <Kbd variant="outline">↓</Kbd> to navigate
-                </span>
-                <span>
-                  <Kbd variant="outline">Enter</Kbd> to query
-                </span>
-                <span>
-                  <Kbd variant="outline">Esc</Kbd> to close
-                </span>
-                <Separator orientation="vertical" className="my-auto h-3" />
-                <span>
-                  Union: <Kbd variant="outline">regions:a,b</Kbd>
-                </span>
-                <span>
-                  Range: <Kbd variant="outline">p95:59-340</Kbd>
-                </span>
-              </div>
-              {lastSearches.length ? (
-                <button
-                  type="button"
-                  className="text-muted-foreground hover:text-accent-foreground"
-                  onMouseDown={(e) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                  }}
-                  onClick={() => setLastSearches([])}
-                >
-                  Clear suggestions
-                </button>
-              ) : null}
-            </div>
-          </div>
-        </div>
-      </Command>
-    </div>
-  )
-}
-
-// function CommandItemType<TData>
-
-function CommandItemSuggestions<TData>({ field }: { field: DataTableFilterField<TData> }) {
-  const { table, getFacetedMinMaxValues, getFacetedUniqueValues } = useDataTable()
-  const value = field.value as string
-  switch (field.type) {
-    case 'checkbox': {
-      return (
-        <span className="ml-1 hidden truncate text-muted-foreground/80 group-aria-[selected=true]:block">
-          {getFacetedUniqueValues
-            ? Array.from(getFacetedUniqueValues(table, value)?.keys() || [])
-                .map((value) => `[${value}]`)
-                .join(' ')
-            : field.options?.map(({ value }) => `[${value}]`).join(' ')}
-        </span>
-      )
-    }
-    case 'slider': {
-      const [min, max] = getFacetedMinMaxValues?.(table, value) || [field.min, field.max]
-      return (
-        <span className="ml-1 hidden truncate text-muted-foreground/80 group-aria-[selected=true]:block">
-          [{min} - {max}]
-        </span>
-      )
-    }
-    case 'input': {
-      return (
-        <span className="ml-1 hidden truncate text-muted-foreground/80 group-aria-[selected=true]:block">
-          [{`${String(field.value)}`} input]
-        </span>
-      )
-    }
-    default: {
-      return null
-    }
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/utils.ts b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/utils.ts
deleted file mode 100644
index 28c5e6fd1a9..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-command/utils.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-} from 'components/interfaces/DataTableDemo/lib/delimiters'
-import { isArrayOfDates } from 'components/interfaces/DataTableDemo/lib/is-array'
-import { ColumnFiltersState } from '@tanstack/react-table'
-import { ParserBuilder } from 'nuqs'
-import type { DataTableFilterField } from '../types'
-
-/**
- * Extracts the word from the given string at the specified caret position.
- */
-export function getWordByCaretPosition({
-  value,
-  caretPosition,
-}: {
-  value: string
-  caretPosition: number
-}) {
-  let start = caretPosition
-  let end = caretPosition
-
-  while (start > 0 && value[start - 1] !== ' ') start--
-  while (end < value.length && value[end] !== ' ') end++
-
-  const word = value.substring(start, end)
-  return word
-}
-
-export function replaceInputByFieldType<TData>({
-  prev,
-  currentWord,
-  optionValue,
-  value,
-  field,
-}: {
-  prev: string
-  currentWord: string
-  optionValue?: string | number | boolean | undefined // FIXME: use DataTableFilterField<TData>["options"][number];
-  value: string
-  field: DataTableFilterField<TData>
-}) {
-  switch (field.type) {
-    case 'checkbox': {
-      if (currentWord.includes(ARRAY_DELIMITER)) {
-        const words = currentWord.split(ARRAY_DELIMITER)
-        words[words.length - 1] = `${optionValue}`
-        const input = prev.replace(currentWord, words.join(ARRAY_DELIMITER))
-        return `${input.trim()} `
-      }
-    }
-    case 'slider': {
-      if (currentWord.includes(SLIDER_DELIMITER)) {
-        const words = currentWord.split(SLIDER_DELIMITER)
-        words[words.length - 1] = `${optionValue}`
-        const input = prev.replace(currentWord, words.join(SLIDER_DELIMITER))
-        return `${input.trim()} `
-      }
-    }
-    case 'timerange': {
-      if (currentWord.includes(RANGE_DELIMITER)) {
-        const words = currentWord.split(RANGE_DELIMITER)
-        words[words.length - 1] = `${optionValue}`
-        const input = prev.replace(currentWord, words.join(RANGE_DELIMITER))
-        return `${input.trim()} `
-      }
-    }
-    default: {
-      const input = prev.replace(currentWord, value)
-      return `${input.trim()} `
-    }
-  }
-}
-
-export function getFieldOptions<TData>({ field }: { field: DataTableFilterField<TData> }) {
-  switch (field.type) {
-    case 'slider': {
-      return field.options?.length
-        ? field.options
-            .map(({ value }) => value)
-            .sort((a, b) => Number(a) - Number(b))
-            .filter(notEmpty)
-        : Array.from({ length: field.max - field.min + 1 }, (_, i) => field.min + i) || []
-    }
-    default: {
-      return field.options?.map(({ value }) => value).filter(notEmpty) || []
-    }
-  }
-}
-
-export function getFilterValue({
-  value,
-  search,
-  currentWord,
-}: {
-  value: string
-  search: string
-  keywords?: string[] | undefined
-  currentWord: string
-}): number {
-  /**
-   * @example value "suggestion:public:true regions,ams,gru,fra"
-   */
-  if (value.startsWith('suggestion:')) {
-    const rawValue = value.toLowerCase().replace('suggestion:', '')
-    if (rawValue.includes(search)) return 1
-    return 0
-  }
-
-  /** */
-  if (value.toLowerCase().includes(currentWord.toLowerCase())) return 1
-
-  /**
-   * @example checkbox [filter, query] = ["regions", "ams,gru,fra"]
-   * @example slider [filter, query] = ["p95", "0-3000"]
-   * @example input [filter, query] = ["name", "api"]
-   */
-  const [filter, query] = currentWord.toLowerCase().split(':')
-  if (query && value.startsWith(`${filter}:`)) {
-    if (query.includes(ARRAY_DELIMITER)) {
-      /**
-       * array of n elements
-       * @example queries = ["ams", "gru", "fra"]
-       */
-      const queries = query.split(ARRAY_DELIMITER)
-      const rawValue = value.toLowerCase().replace(`${filter}:`, '')
-      if (queries.some((item, i) => item === rawValue && i !== queries.length - 1)) return 0
-      if (queries.some((item) => rawValue.includes(item))) return 1
-    }
-    if (query.includes(SLIDER_DELIMITER)) {
-      /**
-       * range between 2 elements
-       * @example queries = ["0", "3000"]
-       */
-      const queries = query.split(SLIDER_DELIMITER)
-      const rawValue = value.toLowerCase().replace(`${filter}:`, '')
-
-      const rawValueAsNumber = Number.parseInt(rawValue)
-      const queryAsNumber = Number.parseInt(queries[0])
-
-      if (queryAsNumber < rawValueAsNumber) {
-        if (rawValue.includes(queries[1])) return 1
-        return 0
-      }
-      return 0
-    }
-    const rawValue = value.toLowerCase().replace(`${filter}:`, '')
-    if (rawValue.includes(query)) return 1
-  }
-  return 0
-}
-
-export function getFieldValueByType<TData>({
-  field,
-  value,
-}: {
-  field?: DataTableFilterField<TData>
-  value: unknown
-}) {
-  if (!field) return null
-
-  switch (field.type) {
-    case 'slider': {
-      if (Array.isArray(value)) {
-        return value.join(SLIDER_DELIMITER)
-      }
-      return value
-    }
-    case 'checkbox': {
-      if (Array.isArray(value)) {
-        return value.join(ARRAY_DELIMITER)
-      }
-      // REMINER: inversed logic
-      if (typeof value === 'string') {
-        return value.split(ARRAY_DELIMITER)
-      }
-      return value
-    }
-    case 'timerange': {
-      if (Array.isArray(value)) {
-        if (isArrayOfDates(value)) {
-          return value.map((date) => date.getTime()).join(RANGE_DELIMITER)
-        }
-        return value.join(RANGE_DELIMITER)
-      }
-      if (value instanceof Date) {
-        return value.getTime()
-      }
-      return value
-    }
-    default: {
-      return value
-    }
-  }
-}
-
-export function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
-  return value !== null && value !== undefined
-}
-
-export function columnFiltersParser<TData>({
-  searchParamsParser,
-  filterFields,
-}: {
-  searchParamsParser: Record<string, ParserBuilder<any>>
-  filterFields: DataTableFilterField<TData>[]
-}) {
-  return {
-    parse: (inputValue: string) => {
-      // Use regex to properly extract field:value pairs
-      // This properly handles spaces within values
-      const filterPairs: Record<string, string> = {}
-
-      // This regex properly extracts field:value pairs where:
-      // 1. Values can contain spaces (both normal spaces and URL-encoded + characters)
-      // 2. It finds word characters followed by a colon as the field name
-      // 3. It then captures everything (including spaces and + characters) until
-      //    it finds another field:value pattern or the end of string
-      // This solves the issue with values like "edge function" or "edge+function" in URLs
-      const regex = /(\w+):([^]*?)(?=\s+\w+:|$)/g
-      let match
-
-      console.log('DataTableFilterCommand parsing input:', inputValue)
-
-      while ((match = regex.exec(inputValue)) !== null) {
-        const [_, fieldName, fieldValue] = match
-        if (fieldName && fieldValue) {
-          filterPairs[fieldName] = fieldValue.trim()
-          console.log(`Parsed filter pair: ${fieldName} = ${fieldValue.trim()}`)
-        }
-      }
-
-      const searchParams = Object.entries(filterPairs).reduce(
-        (prev, [key, value]) => {
-          const parser = searchParamsParser[key]
-          if (!parser) return prev
-
-          prev[key] = parser.parse(value)
-          return prev
-        },
-        {} as Record<string, unknown>
-      )
-
-      return searchParams
-    },
-    serialize: (columnFilters: ColumnFiltersState) => {
-      const values = columnFilters.reduce((prev, curr) => {
-        const { commandDisabled } = filterFields?.find((field) => curr.id === field.value) || {
-          commandDisabled: true,
-        } // if column filter is not found, disable the command by default
-        const parser = searchParamsParser[curr.id]
-
-        if (commandDisabled || !parser) return prev
-
-        return `${prev}${curr.id}:${parser.serialize(curr.value)} `
-      }, '')
-
-      return values
-    },
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls-drawer.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls-drawer.tsx
deleted file mode 100644
index e4f39ff1b78..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls-drawer.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerClose,
-  DrawerTrigger,
-} from 'ui'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { Button } from 'ui'
-import { FilterIcon } from 'lucide-react'
-import { DataTableFilterControls } from './data-table-filter-controls'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import React from 'react'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'ui'
-import { Kbd } from 'components/interfaces/DataTableDemo/components/custom/kbd'
-import { useMediaQuery } from 'components/interfaces/DataTableDemo/hooks/use-media-query'
-
-export function DataTableFilterControlsDrawer() {
-  const triggerButtonRef = React.useRef<HTMLButtonElement>(null)
-  const isMobile = useMediaQuery('(max-width: 640px)')
-
-  useHotKey(() => {
-    triggerButtonRef.current?.click()
-  }, 'b')
-
-  return (
-    <Drawer>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DrawerTrigger asChild>
-              <Button
-                ref={isMobile ? triggerButtonRef : null}
-                variant="ghost"
-                size="icon"
-                className="h-9 w-9"
-              >
-                <FilterIcon className="w-4 h-4" />
-              </Button>
-            </DrawerTrigger>
-          </TooltipTrigger>
-          <TooltipContent side="right">
-            <p>
-              Toggle controls with{' '}
-              <Kbd className="ml-1 text-muted-foreground group-hover:text-accent-foreground">
-                <span className="mr-1">⌘</span>
-                <span>B</span>
-              </Kbd>
-            </p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <DrawerContent className="max-h-[calc(100dvh-4rem)]">
-        <VisuallyHidden>
-          <DrawerHeader>
-            <DrawerTitle>Filters</DrawerTitle>
-            <DrawerDescription>Adjust your table filters</DrawerDescription>
-          </DrawerHeader>
-        </VisuallyHidden>
-        <div className="px-4 flex-1 overflow-y-auto">
-          <DataTableFilterControls />
-        </div>
-        <DrawerFooter>
-          <DrawerClose asChild>
-            <Button variant="outline" className="w-full">
-              Close
-            </Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls.tsx
deleted file mode 100644
index c8b4e2424fb..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import {
-  Accordion_Shadcn_ as Accordion,
-  AccordionContent_Shadcn_ as AccordionContent,
-  AccordionItem_Shadcn_ as AccordionItem,
-  AccordionTrigger_Shadcn_ as AccordionTrigger,
-} from 'ui'
-import type React from 'react'
-import { DataTableFilterResetButton } from './data-table-filter-reset-button'
-import { DataTableFilterCheckbox } from './data-table-filter-checkbox'
-import { DataTableFilterSlider } from './data-table-filter-slider'
-import { DataTableFilterInput } from './data-table-filter-input'
-import { DataTableFilterTimerange } from './data-table-filter-timerange'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-
-// FIXME: use @container (especially for the slider element) to restructure elements
-
-// TODO: only pass the columns to generate the filters!
-// https://tanstack.com/table/v8/docs/framework/react/examples/filters
-
-export function DataTableFilterControls() {
-  const { filterFields } = useDataTable()
-  return (
-    <Accordion
-      type="multiple"
-      defaultValue={filterFields
-        ?.filter(({ defaultOpen }) => defaultOpen)
-        ?.map(({ value }) => value as string)}
-    >
-      {filterFields?.map((field) => {
-        const value = field.value as string
-        return (
-          <AccordionItem key={value} value={value} className="border-none">
-            <AccordionTrigger className="w-full px-2 py-0 hover:no-underline data-[state=closed]:text-muted-foreground data-[state=open]:text-foreground focus-within:data-[state=closed]:text-foreground hover:data-[state=closed]:text-foreground">
-              <div className="flex w-full items-center justify-between gap-2 truncate py-2 pr-2">
-                <div className="flex items-center gap-2 truncate">
-                  <p className="text-sm font-medium">{field.label}</p>
-                  {value !== field.label.toLowerCase() && !field.commandDisabled ? (
-                    <p className="mt-px truncate font-mono text-[10px] text-muted-foreground">
-                      {value}
-                    </p>
-                  ) : null}
-                </div>
-                <DataTableFilterResetButton {...field} />
-              </div>
-            </AccordionTrigger>
-            <AccordionContent>
-              {/* REMINDER: avoid the focus state to be cut due to overflow-hidden */}
-              {/* REMINDER: need to move within here because of accordion height animation */}
-              <div className="p-1">
-                {(() => {
-                  switch (field.type) {
-                    case 'checkbox': {
-                      return <DataTableFilterCheckbox {...field} />
-                    }
-                    case 'slider': {
-                      return <DataTableFilterSlider {...field} />
-                    }
-                    case 'input': {
-                      return <DataTableFilterInput {...field} />
-                    }
-                    case 'timerange': {
-                      return <DataTableFilterTimerange {...field} />
-                    }
-                  }
-                })()}
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        )
-      })}
-    </Accordion>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-input.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-input.tsx
deleted file mode 100644
index 59cd9e70175..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-input.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-
-import type { DataTableInputFilterField } from './types'
-import { InputWithAddons } from 'components/interfaces/DataTableDemo/components/custom/input-with-addons'
-import { Label_Shadcn_ as Label } from 'ui'
-import { Search } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { useDebounce } from 'components/interfaces/DataTableDemo/hooks/use-debounce'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-
-function getFilter(filterValue: unknown) {
-  return typeof filterValue === 'string' ? filterValue : null
-}
-
-export function DataTableFilterInput<TData>({ value: _value }: DataTableInputFilterField<TData>) {
-  const value = _value as string
-  const { table, columnFilters } = useDataTable()
-  const column = table.getColumn(value)
-  const filterValue = columnFilters.find((i) => i.id === value)?.value
-  const filters = getFilter(filterValue)
-  const [input, setInput] = useState<string | null>(filters)
-
-  const debouncedInput = useDebounce(input, 500)
-
-  useEffect(() => {
-    const newValue = debouncedInput?.trim() === '' ? null : debouncedInput
-    if (debouncedInput === null) return
-    column?.setFilterValue(newValue)
-  }, [debouncedInput])
-
-  useEffect(() => {
-    if (debouncedInput?.trim() !== filters) {
-      setInput(filters)
-    }
-  }, [filters])
-
-  return (
-    <div className="grid w-full gap-1.5">
-      <Label htmlFor={value} className="sr-only px-2 text-muted-foreground">
-        {value}
-      </Label>
-      <InputWithAddons
-        placeholder="Search"
-        leading={<Search className="mt-0.5 h-4 w-4" />}
-        containerClassName="h-9 rounded-lg"
-        name={value}
-        id={value}
-        value={input || ''}
-        onChange={(e) => setInput(e.target.value)}
-      />
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-reset-button.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-reset-button.tsx
deleted file mode 100644
index 5579415eb03..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-reset-button.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import type { DataTableFilterField } from './types'
-import { Button } from 'ui'
-import { X } from 'lucide-react'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-
-export function DataTableFilterResetButton<TData>({ value: _value }: DataTableFilterField<TData>) {
-  const { columnFilters, table } = useDataTable()
-  const value = _value as string
-  const column = table.getColumn(value)
-  const filterValue = columnFilters.find((f) => f.id === value)?.value
-
-  // TODO: check if we could useMemo
-  const filters = filterValue ? (Array.isArray(filterValue) ? filterValue : [filterValue]) : []
-
-  if (filters.length === 0) return null
-
-  return (
-    <Button
-      type="outline"
-      className="h-5 rounded-full px-1.5 py-1 font-mono text-[10px]"
-      onClick={(e) => {
-        e.stopPropagation()
-        column?.setFilterValue(undefined)
-      }}
-      onKeyDown={(e) => {
-        e.stopPropagation()
-        if (e.code === 'Enter') {
-          column?.setFilterValue(undefined)
-        }
-      }}
-      icon={<X className="h-2.5 w-2.5 text-muted-foreground" />}
-      asChild
-    >
-      {/* REMINDER: `AccordionTrigger` is also a button(!) and we get Hydration error when rendering button within button */}
-      <div role="button" tabIndex={0}>
-        <span>{filters.length}</span>
-      </div>
-    </Button>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-slider.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-slider.tsx
deleted file mode 100644
index f09d4a5d4ec..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-slider.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import type { DataTableSliderFilterField } from './types'
-import { InputWithAddons } from 'components/interfaces/DataTableDemo/components/custom/input-with-addons'
-import { Label_Shadcn_ as Label } from 'ui'
-import { Slider } from 'components/interfaces/DataTableDemo/components/custom/slider'
-import { isArrayOfNumbers } from 'components/interfaces/DataTableDemo/lib/is-array'
-import { useEffect, useState } from 'react'
-import { useDebounce } from 'components/interfaces/DataTableDemo/hooks/use-debounce'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-
-function getFilter(filterValue: unknown) {
-  return typeof filterValue === 'number'
-    ? [filterValue, filterValue]
-    : Array.isArray(filterValue) && isArrayOfNumbers(filterValue)
-      ? filterValue.length === 1
-        ? [filterValue[0], filterValue[0]]
-        : filterValue
-      : null
-}
-
-// TODO: discuss if we even need the `defaultMin` and `defaultMax`
-export function DataTableFilterSlider<TData>({
-  value: _value,
-  min: defaultMin,
-  max: defaultMax,
-}: DataTableSliderFilterField<TData>) {
-  const value = _value as string
-  const { table, columnFilters, getFacetedMinMaxValues } = useDataTable()
-  const column = table.getColumn(value)
-  const filterValue = columnFilters.find((i) => i.id === value)?.value
-  const filters = getFilter(filterValue)
-  const [input, setInput] = useState<number[] | null>(filters)
-  const [min, max] = getFacetedMinMaxValues?.(table, value) ||
-    column?.getFacetedMinMaxValues() || [defaultMin, defaultMax]
-
-  const debouncedInput = useDebounce(input, 500)
-
-  useEffect(() => {
-    if (debouncedInput?.length === 2) {
-      column?.setFilterValue(debouncedInput)
-    }
-  }, [debouncedInput])
-
-  useEffect(() => {
-    if (debouncedInput?.length !== 2) {
-    } else if (!filters) {
-      setInput(null)
-    } else if (debouncedInput[0] !== filters[0] || debouncedInput[1] !== filters[1]) {
-      setInput(filters)
-    }
-  }, [filters])
-
-  return (
-    <div className="grid gap-2">
-      <div className="flex items-center gap-4">
-        <div className="grid w-full gap-1.5">
-          <Label htmlFor={`min-${value}`} className="px-2 text-muted-foreground">
-            Min.
-          </Label>
-          <InputWithAddons
-            placeholder="from"
-            trailing="ms"
-            containerClassName="mb-2 h-9 rounded-lg"
-            type="number"
-            name={`min-${value}`}
-            id={`min-${value}`}
-            value={`${input?.[0] ?? min}`}
-            min={min}
-            max={max}
-            onChange={(e) => setInput((prev) => [Number(e.target.value), prev?.[1] || max])}
-          />
-        </div>
-        <div className="grid w-full gap-1.5">
-          <Label htmlFor={`max-${value}`} className="px-2 text-muted-foreground">
-            Max.
-          </Label>
-          <InputWithAddons
-            placeholder="to"
-            trailing="ms"
-            containerClassName="mb-2 h-9 rounded-lg"
-            type="number"
-            name={`max-${value}`}
-            id={`max-${value}`}
-            value={`${input?.[1] ?? max}`}
-            min={min}
-            max={max}
-            onChange={(e) => setInput((prev) => [prev?.[0] || min, Number(e.target.value)])}
-          />
-        </div>
-      </div>
-      <Slider
-        min={min}
-        max={max}
-        value={input?.length === 2 ? input : [min, max]}
-        onValueChange={(values) => setInput(values)}
-      />
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-timerange.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-timerange.tsx
deleted file mode 100644
index 1f56fe3f8be..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-filter-timerange.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-import type { DataTableTimerangeFilterField } from './types'
-import { isArrayOfDates } from 'components/interfaces/DataTableDemo/lib/is-array'
-import { DatePickerWithRange } from 'components/interfaces/DataTableDemo/components/custom/date-picker-with-range'
-import type { DateRange } from 'react-day-picker'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-
-export function DataTableFilterTimerange<TData>({
-  value: _value,
-  presets,
-}: DataTableTimerangeFilterField<TData>) {
-  const value = _value as string
-  const { table, columnFilters } = useDataTable()
-  const column = table.getColumn(value)
-  const filterValue = columnFilters.find((i) => i.id === value)?.value
-
-  const date: DateRange | undefined = useMemo(
-    () =>
-      filterValue instanceof Date
-        ? { from: filterValue, to: undefined }
-        : Array.isArray(filterValue) && isArrayOfDates(filterValue)
-          ? { from: filterValue?.[0], to: filterValue?.[1] }
-          : undefined,
-    [filterValue]
-  )
-
-  const setDate = (date: DateRange | undefined) => {
-    if (!date) return // TODO: remove from search params if columnFilter is removed
-    if (date.from && !date.to) {
-      column?.setFilterValue([date.from])
-    }
-    if (date.to && date.from) {
-      column?.setFilterValue([date.from, date.to])
-    }
-  }
-
-  return <DatePickerWithRange {...{ date, setDate, presets }} />
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-pagination.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-pagination.tsx
deleted file mode 100644
index 9e58857f486..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-pagination.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client'
-
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
-
-import {
-  Select_Shadcn_ as Select,
-  SelectContent_Shadcn_ as SelectContent,
-  SelectItem_Shadcn_ as SelectItem,
-  SelectTrigger_Shadcn_ as SelectTrigger,
-  SelectValue_Shadcn_ as SelectValue,
-} from 'ui'
-import { Button } from 'ui'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { useMemo } from 'react'
-
-export function DataTablePagination() {
-  const { table, pagination, columnFilters } = useDataTable()
-  const pageCount = useMemo(() => table.getPageCount(), [columnFilters])
-
-  return (
-    <div className="flex items-center justify-end space-x-4 md:space-x-6 lg:space-x-8">
-      <div className="flex items-center space-x-2">
-        <p className="text-sm font-medium">Rows per page</p>
-        <Select
-          value={`${pagination.pageSize}`}
-          onValueChange={(value) => {
-            table.setPageSize(Number(value))
-          }}
-        >
-          <SelectTrigger className="h-8 w-[70px]">
-            <SelectValue placeholder={pagination.pageSize} />
-          </SelectTrigger>
-          <SelectContent side="top">
-            {[10, 20, 30, 40, 50].map((pageSize) => (
-              <SelectItem key={pageSize} value={`${pageSize}`}>
-                {pageSize}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="flex items-center justify-center text-sm font-medium">
-        Page {pagination.pageIndex + 1} of {pageCount}
-      </div>
-      <div className="flex items-center space-x-2">
-        <Button
-          type="outline"
-          className="hidden h-8 w-8 p-0 lg:flex"
-          onClick={() => {
-            table.setPageIndex(0)
-          }}
-          disabled={!table.getCanPreviousPage()}
-        >
-          <span className="sr-only">Go to first page</span>
-          <ChevronsLeft className="h-4 w-4" />
-        </Button>
-        <Button
-          type="outline"
-          className="h-8 w-8 p-0"
-          onClick={() => {
-            table.previousPage()
-          }}
-          disabled={!table.getCanPreviousPage()}
-        >
-          <span className="sr-only">Go to previous page</span>
-          <ChevronLeft className="h-4 w-4" />
-        </Button>
-        <Button
-          type="outline"
-          className="h-8 w-8 p-0"
-          onClick={() => {
-            table.nextPage()
-          }}
-          disabled={!table.getCanNextPage()}
-        >
-          <span className="sr-only">Go to next page</span>
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-        <Button
-          type="outline"
-          className="hidden h-8 w-8 p-0 lg:flex"
-          onClick={() => {
-            table.setPageIndex(table.getPageCount() - 1)
-          }}
-          disabled={!table.getCanNextPage()}
-        >
-          <span className="sr-only">Go to last page</span>
-          <ChevronsRight className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-provider.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-provider.tsx
deleted file mode 100644
index d63e9daa688..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-provider.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { DataTableFilterField } from 'components/interfaces/DataTableDemo/components/data-table/types'
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  PaginationState,
-  RowSelectionState,
-  SortingState,
-  Table,
-  VisibilityState,
-} from '@tanstack/react-table'
-import { createContext, useContext, useMemo } from 'react'
-import { ControlsProvider } from 'components/interfaces/DataTableDemo/providers/controls'
-
-// REMINDER: read about how to move controlled state out of the useReactTable hook
-// https://github.com/TanStack/table/discussions/4005#discussioncomment-7303569
-
-interface DataTableStateContextType {
-  columnFilters: ColumnFiltersState
-  sorting: SortingState
-  rowSelection: RowSelectionState
-  columnOrder: string[]
-  columnVisibility: VisibilityState
-  pagination: PaginationState
-  enableColumnOrdering: boolean
-}
-
-interface DataTableBaseContextType<TData = unknown, TValue = unknown> {
-  table: Table<TData>
-  filterFields: DataTableFilterField<TData>[]
-  columns: ColumnDef<TData, TValue>[]
-  isLoading?: boolean
-  getFacetedUniqueValues?: (table: Table<TData>, columnId: string) => Map<string, number>
-  getFacetedMinMaxValues?: (table: Table<TData>, columnId: string) => undefined | [number, number]
-}
-
-interface DataTableContextType<TData = unknown, TValue = unknown>
-  extends DataTableStateContextType,
-    DataTableBaseContextType<TData, TValue> {}
-
-export const DataTableContext = createContext<DataTableContextType<any, any> | null>(null)
-
-export function DataTableProvider<TData, TValue>({
-  children,
-  ...props
-}: Partial<DataTableStateContextType> &
-  DataTableBaseContextType<TData, TValue> & {
-    children: React.ReactNode
-  }) {
-  const value = useMemo(
-    () => ({
-      ...props,
-      columnFilters: props.columnFilters ?? [],
-      sorting: props.sorting ?? [],
-      rowSelection: props.rowSelection ?? {},
-      columnOrder: props.columnOrder ?? [],
-      columnVisibility: props.columnVisibility ?? {},
-      pagination: props.pagination ?? { pageIndex: 0, pageSize: 10 },
-      enableColumnOrdering: props.enableColumnOrdering ?? false,
-    }),
-    [
-      props.columnFilters,
-      props.sorting,
-      props.rowSelection,
-      props.columnOrder,
-      props.columnVisibility,
-      props.pagination,
-      props.table,
-      props.filterFields,
-      props.columns,
-      props.enableColumnOrdering,
-      props.isLoading,
-      props.getFacetedUniqueValues,
-      props.getFacetedMinMaxValues,
-    ]
-  )
-
-  return (
-    <DataTableContext.Provider value={value}>
-      <ControlsProvider>{children}</ControlsProvider>
-    </DataTableContext.Provider>
-  )
-}
-
-export function useDataTable<TData, TValue>() {
-  const context = useContext(DataTableContext)
-
-  if (!context) {
-    throw new Error('useDataTable must be used within a DataTableProvider')
-  }
-
-  return context as DataTableContextType<TData, TValue>
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-reset-button.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-reset-button.tsx
deleted file mode 100644
index 6559d16493f..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-reset-button.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client'
-
-import { X } from 'lucide-react'
-import { Button } from 'ui'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'ui'
-import { Kbd } from 'components/interfaces/DataTableDemo/components/custom/kbd'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-
-export function DataTableResetButton() {
-  const { table } = useDataTable()
-  useHotKey(table.resetColumnFilters, 'Escape')
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            type="text"
-            size="small"
-            onClick={() => table.resetColumnFilters()}
-            icon={<X className="h-4 w-4" />}
-          >
-            Reset
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="left">
-          <p>
-            Reset filters with{' '}
-            <Kbd className="ml-1 text-muted-foreground group-hover:text-accent-foreground">
-              <span className="mr-1">⌘</span>
-              <span>Esc</span>
-            </Kbd>
-          </p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-content.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-content.tsx
deleted file mode 100644
index b5728b82209..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-content.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { cn } from 'ui'
-import { Table } from '@tanstack/react-table'
-import { DataTableSheetRowAction } from './data-table-sheet-row-action'
-import { DataTableFilterField, SheetField } from '../types'
-import { SheetDetailsContentSkeleton } from './data-table-sheet-skeleton'
-
-interface DataTableSheetContentProps<TData, TMeta> extends React.HTMLAttributes<HTMLDListElement> {
-  data?: TData
-  table: Table<TData>
-  fields: SheetField<TData, TMeta>[]
-  filterFields: DataTableFilterField<TData>[]
-  // totalRows: number;
-  // filterRows: number;
-  // totalRowsFetched: number;
-  metadata?: TMeta & {
-    totalRows: number
-    filterRows: number
-    totalRowsFetched: number
-  }
-}
-
-export function DataTableSheetContent<TData, TMeta>({
-  data,
-  table,
-  className,
-  fields,
-  filterFields,
-  metadata,
-  ...props
-}: DataTableSheetContentProps<TData, TMeta>) {
-  if (!data) return <SheetDetailsContentSkeleton fields={fields} />
-
-  return (
-    <dl className={cn('divide-y', className)} {...props}>
-      {fields.map((field) => {
-        if (field.condition && !field.condition(data)) return null
-
-        const Component = field.component
-        const value = String(data[field.id])
-
-        return (
-          <div key={field.id.toString()}>
-            {field.type === 'readonly' ? (
-              <div
-                className={cn(
-                  'flex gap-4 my-1 py-1 text-sm justify-between items-center w-full',
-                  field.className
-                )}
-              >
-                <dt className="shrink-0 text-muted-foreground">{field.label}</dt>
-                <dd className="font-mono w-full text-right">
-                  {Component ? <Component {...data} metadata={metadata} /> : value}
-                </dd>
-              </div>
-            ) : (
-              <DataTableSheetRowAction
-                fieldValue={field.id}
-                filterFields={filterFields}
-                value={value}
-                table={table}
-                className={cn(
-                  'flex gap-4 my-1 py-1 text-sm justify-between items-center w-full',
-                  field.className
-                )}
-              >
-                <dt className="shrink-0 text-muted-foreground">{field.label}</dt>
-                <dd className="font-mono w-full text-right">
-                  {Component ? <Component {...data} metadata={metadata} /> : value}
-                </dd>
-              </DataTableSheetRowAction>
-            )}
-          </div>
-        )
-      })}
-    </dl>
-  )
-}
-
-export const MemoizedDataTableSheetContent = React.memo(DataTableSheetContent, (prev, next) => {
-  // REMINDER: only check if data is the same, rest is useless
-  return prev.data === next.data
-}) as typeof DataTableSheetContent
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-details.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-details.tsx
deleted file mode 100644
index 8c52a177515..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-details.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-'use client'
-
-import { Kbd } from 'components/interfaces/DataTableDemo/components/custom/kbd'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { ChevronDown, ChevronUp, X } from 'lucide-react'
-import * as React from 'react'
-import {
-  Button,
-  cn,
-  Separator,
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  Skeleton,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from 'ui'
-
-export interface DataTableSheetDetailsProps {
-  title?: React.ReactNode
-  titleClassName?: string
-  children?: React.ReactNode
-}
-
-export function DataTableSheetDetails({
-  title,
-  titleClassName,
-  children,
-}: DataTableSheetDetailsProps) {
-  const { table, rowSelection, isLoading } = useDataTable()
-
-  const selectedRowKey = Object.keys(rowSelection)?.[0]
-
-  const selectedRow = React.useMemo(() => {
-    if (isLoading && !selectedRowKey) return
-    return table.getCoreRowModel().flatRows.find((row) => row.id === selectedRowKey)
-  }, [selectedRowKey, isLoading])
-
-  const index = table.getCoreRowModel().flatRows.findIndex((row) => row.id === selectedRow?.id)
-
-  const nextId = React.useMemo(
-    () => table.getCoreRowModel().flatRows[index + 1]?.id,
-    [index, isLoading]
-  )
-
-  const prevId = React.useMemo(
-    () => table.getCoreRowModel().flatRows[index - 1]?.id,
-    [index, isLoading]
-  )
-
-  const onPrev = React.useCallback(() => {
-    if (prevId) table.setRowSelection({ [prevId]: true })
-  }, [prevId, isLoading])
-
-  const onNext = React.useCallback(() => {
-    if (nextId) table.setRowSelection({ [nextId]: true })
-  }, [nextId, isLoading])
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (!selectedRowKey) return
-
-      // REMINDER: prevent dropdown navigation inside of sheet to change row selection
-      const activeElement = document.activeElement
-      const isMenuActive = activeElement?.closest('[role="menu"]')
-
-      if (isMenuActive) return
-
-      if (e.key === 'ArrowUp') {
-        e.preventDefault()
-        onPrev()
-      }
-      if (e.key === 'ArrowDown') {
-        e.preventDefault()
-        onNext()
-      }
-    }
-
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [selectedRowKey, onNext, onPrev])
-
-  return (
-    // <Sheet
-    //   open={!!selectedRowKey}
-    //   onOpenChange={() => {
-    //     // REMINDER: focus back to the row that was selected
-    //     // We need to manually focus back due to missing Trigger component
-    //     const el = selectedRowKey ? document.getElementById(selectedRowKey) : null
-    //     table.resetRowSelection()
-
-    //     // REMINDER: when navigating between tabs in the sheet and exit the sheet, the tab gets lost
-    //     // We need a minimal delay to allow the sheet to close before focusing back to the row
-    //     setTimeout(() => el?.focus(), 0)
-    //   }}
-    // >
-    // <SheetContent
-    //   // onCloseAutoFocus={(e) => e.preventDefault()}
-    //   className="overflow-y-auto p-0 sm:max-w-md"
-    //   hideClose
-    // >
-    // <SheetHeader className="sticky top-0 z-10 border-b bg-background p-4">
-    <div className="relative bg-sidebar">
-      <div className="flex items-center justify-between gap-2 px-5 py-1">
-        <h5 className={cn(titleClassName, 'truncate text-left')}>
-          {isLoading && !selectedRowKey ? <Skeleton className="h-7 w-36" /> : title}
-        </h5>
-        <div className="flex h-7 items-center gap-1">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size="tiny"
-                  type="text"
-                  disabled={!prevId}
-                  onClick={onPrev}
-                  className="px-0"
-                  icon={<ChevronUp />}
-                >
-                  <span className="sr-only">Previous</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  Navigate <Kbd variant="outline">↑</Kbd>
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  size="tiny"
-                  type="text"
-                  disabled={!nextId}
-                  onClick={onNext}
-                  className="px-0"
-                  icon={<ChevronDown />}
-                >
-                  <span className="sr-only">Next</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  Navigate <Kbd variant="outline">↓</Kbd>
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <Separator orientation="vertical" className="mx-1" />
-          {/* <SheetClose autoFocus={true} asChild> */}
-          <Button
-            size="tiny"
-            type="text"
-            onClick={() => table.resetRowSelection()}
-            className="px-0"
-            icon={<X />}
-          >
-            <span className="sr-only">Close</span>
-          </Button>
-          {/* </SheetClose> */}
-        </div>
-      </div>
-      <Separator />
-      {children}
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-row-action.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-row-action.tsx
deleted file mode 100644
index 63e04f7446e..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-row-action.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import { DropdownMenu } from 'ui'
-import { Copy } from 'lucide-react'
-import { DropdownMenuContent, DropdownMenuSeparator } from 'ui'
-import { DropdownMenuGroup, DropdownMenuItem } from 'ui'
-import { DropdownMenuTrigger } from 'ui'
-import { CalendarSearch, ChevronLeft, ChevronRight, Equal, Search } from 'lucide-react'
-import { CalendarDays } from 'lucide-react'
-import { startOfDay } from 'date-fns'
-import { startOfHour } from 'date-fns'
-import { useCopyToClipboard } from 'components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard'
-import { endOfDay } from 'date-fns'
-import { Table } from '@tanstack/react-table'
-import { CalendarClock } from 'lucide-react'
-import { endOfHour } from 'date-fns'
-import { cn } from 'ui'
-import { DataTableFilterField } from '../types'
-
-interface DataTableSheetRowActionProps<TData, TFields extends DataTableFilterField<TData>>
-  extends React.ComponentPropsWithRef<typeof DropdownMenuTrigger> {
-  fieldValue: TFields['value']
-  filterFields: TFields[]
-  value: string | number
-  table: Table<TData>
-}
-
-export function DataTableSheetRowAction<TData, TFields extends DataTableFilterField<TData>>({
-  fieldValue,
-  filterFields,
-  value,
-  children,
-  className,
-  table,
-  onKeyDown,
-  ...props
-}: DataTableSheetRowActionProps<TData, TFields>) {
-  const { copy, isCopied } = useCopyToClipboard()
-  const field = filterFields.find((field) => field.value === fieldValue)
-  const column = table.getColumn(fieldValue.toString())
-
-  if (!field || !column) return null
-
-  function renderOptions() {
-    if (!field) return null
-    switch (field.type) {
-      case 'checkbox':
-        return (
-          <DropdownMenuItem
-            onClick={() => {
-              // FIXME:
-              const filterValue = column?.getFilterValue() as undefined | Array<unknown>
-              const newValue = filterValue?.includes(value)
-                ? filterValue
-                : [...(filterValue || []), value]
-
-              column?.setFilterValue(newValue)
-            }}
-            className="flex items-center gap-2"
-          >
-            <Search size={16} />
-            Include
-          </DropdownMenuItem>
-        )
-      case 'input':
-        return (
-          <DropdownMenuItem
-            onClick={() => column?.setFilterValue(value)}
-            className="flex items-center gap-2"
-          >
-            <Search size={16} />
-            Include
-          </DropdownMenuItem>
-        )
-      case 'slider':
-        return (
-          <DropdownMenuGroup>
-            <DropdownMenuItem
-              onClick={() => column?.setFilterValue([0, value])}
-              className="flex items-center gap-2"
-            >
-              {/* FIXME: change icon as it is not clear */}
-              <ChevronLeft size={16} />
-              Less or equal than
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => column?.setFilterValue([value, 5000])}
-              className="flex items-center gap-2"
-            >
-              {/* FIXME: change icon as it is not clear */}
-              <ChevronRight size={16} />
-              Greater or equal than
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => column?.setFilterValue([value])}
-              className="flex items-center gap-2"
-            >
-              <Equal size={16} />
-              Equal to
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        )
-      case 'timerange':
-        const date = new Date(value)
-        return (
-          <DropdownMenuGroup>
-            <DropdownMenuItem
-              onClick={() => column?.setFilterValue([date])}
-              className="flex items-center gap-2"
-            >
-              <CalendarSearch size={16} />
-              Exact timestamp
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => {
-                const start = startOfHour(date)
-                const end = endOfHour(date)
-                column?.setFilterValue([start, end])
-              }}
-              className="flex items-center gap-2"
-            >
-              <CalendarClock size={16} />
-              Same hour
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => {
-                const start = startOfDay(date)
-                const end = endOfDay(date)
-                column?.setFilterValue([start, end])
-              }}
-              className="flex items-center gap-2"
-            >
-              <CalendarDays size={16} />
-              Same day
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        )
-      default:
-        return null
-    }
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        className={cn(
-          'rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-          'relative',
-          className
-        )}
-        onKeyDown={(e) => {
-          if (e.key === 'ArrowDown') {
-            // REMINDER: default behavior is to open the dropdown menu
-            // But because we use it to navigate between rows, we need to prevent it
-            // and only use "Enter" to select the option
-            e.preventDefault()
-          }
-          onKeyDown?.(e)
-        }}
-        {...props}
-      >
-        {children}
-        {isCopied ? (
-          <div className="absolute inset-0 bg-background/70 place-content-center">Value copied</div>
-        ) : null}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" side="left">
-        {renderOptions()}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => copy(String(value), { timeout: 1000 })}
-          className="flex items-center gap-2"
-        >
-          <Copy size={16} />
-          Copy value
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-skeleton.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-skeleton.tsx
deleted file mode 100644
index 6b30f7a85e2..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-skeleton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Skeleton } from 'ui'
-import { cn } from 'ui'
-import { SheetField } from '../types'
-
-interface SheetDetailsContentSkeletonProps<TData, TMeta> {
-  fields: SheetField<TData, TMeta>[]
-}
-
-export function SheetDetailsContentSkeleton<TData, TMeta>({
-  fields,
-}: SheetDetailsContentSkeletonProps<TData, TMeta>) {
-  return (
-    <dl className="divide-y">
-      {fields.map((field) => (
-        <div
-          key={field.id.toString()}
-          className="flex gap-4 py-2 text-sm justify-between items-center"
-        >
-          <dt className="shrink-0 text-muted-foreground">{field.label}</dt>
-          <div>
-            <Skeleton className={cn('h-5 w-52', field.skeletonClassName)} />
-          </div>
-        </div>
-      ))}
-    </dl>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-skeleton.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-skeleton.tsx
deleted file mode 100644
index 597cd9de7a6..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-skeleton.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Skeleton } from 'ui'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from 'components/interfaces/DataTableDemo/components/custom/table'
-
-interface DataTableSkeletonProps {
-  /**
-   * Number of rows to render
-   * @default 10
-   */
-  rows?: number
-}
-
-export function DataTableSkeleton({ rows = 10 }: DataTableSkeletonProps) {
-  return (
-    <Table>
-      <TableHeader className="bg-muted/50">
-        <TableRow className="hover:bg-transparent">
-          <TableHead>
-            <Skeleton className="my-1.5 h-4 w-24" />
-          </TableHead>
-          <TableHead className="hidden sm:table-cell">
-            <Skeleton className="my-1.5 h-4 w-32" />
-          </TableHead>
-          <TableHead className="hidden md:table-cell">
-            <Skeleton className="my-1.5 h-4 w-16" />
-          </TableHead>
-          <TableHead>
-            <Skeleton className="my-1.5 h-4 w-20" />
-          </TableHead>
-          <TableHead className="flex items-center justify-end" />
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {new Array(rows).fill(0).map((_, i) => (
-          <TableRow key={i} className="hover:bg-transparent">
-            <TableCell>
-              <Skeleton className="my-1.5 h-4 w-full max-w-[10rem]" />
-            </TableCell>
-            <TableCell className="hidden sm:table-cell">
-              <Skeleton className="my-1.5 h-4 w-full max-w-[13rem]" />
-            </TableCell>
-            <TableCell className="hidden md:table-cell">
-              <Skeleton className="my-1.5 h-4 w-24" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="my-1.5 h-4 w-full max-w-[10rem]" />
-            </TableCell>
-            <TableCell className="flex justify-end">
-              <Skeleton className="my-1.5 h-5 w-5" />
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-toolbar.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-toolbar.tsx
deleted file mode 100644
index 1751d5f9c8d..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-toolbar.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-
-import { Kbd } from 'components/interfaces/DataTableDemo/components/custom/kbd'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { Button } from 'ui'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'ui'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { formatCompactNumber } from 'components/interfaces/DataTableDemo/lib/format'
-import { useControls } from 'components/interfaces/DataTableDemo/providers/controls'
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
-import { useMemo } from 'react'
-import { DataTableFilterControlsDrawer } from './data-table-filter-controls-drawer'
-import { DataTableResetButton } from './data-table-reset-button'
-import { DataTableViewOptions } from './data-table-view-options'
-
-interface DataTableToolbarProps {
-  renderActions?: () => React.ReactNode
-}
-
-export function DataTableToolbar({ renderActions }: DataTableToolbarProps) {
-  const { table, isLoading, columnFilters } = useDataTable()
-  const { open, setOpen } = useControls()
-  useHotKey(() => setOpen((prev) => !prev), 'b')
-  const filters = table.getState().columnFilters
-
-  const rows = useMemo(
-    () => ({
-      total: table.getCoreRowModel().rows.length,
-      filtered: table.getFilteredRowModel().rows.length,
-    }),
-    [isLoading, columnFilters]
-  )
-
-  return (
-    <div className="flex flex-wrap items-center justify-between gap-4">
-      <div className="flex flex-wrap items-center gap-2">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                size="tiny"
-                type="outline"
-                icon={<PanelLeftClose className="h-4 w-4" />}
-                onClick={() => setOpen((prev) => !prev)}
-                className="hidden gap-2 sm:flex"
-              >
-                {open ? (
-                  <>
-                    <span className="hidden md:block">Hide Controls</span>
-                  </>
-                ) : (
-                  <>
-                    <span className="hidden md:block">Show Controls</span>
-                  </>
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              <p>
-                Toggle controls with{' '}
-                <Kbd className="ml-1 text-muted-foreground group-hover:text-accent-foreground">
-                  <span className="mr-1">⌘</span>
-                  <span>B</span>
-                </Kbd>
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <div className="block sm:hidden">
-          <DataTableFilterControlsDrawer />
-        </div>
-        <div>
-          <p className="hidden text-sm text-muted-foreground sm:block">
-            <span className="font-mono font-medium">{formatCompactNumber(rows.filtered)}</span> of{' '}
-            <span className="font-mono font-medium">{formatCompactNumber(rows.total)}</span> row(s){' '}
-            <span className="sr-only sm:not-sr-only">filtered</span>
-          </p>
-          <p className="block text-sm text-muted-foreground sm:hidden">
-            <span className="font-mono font-medium">{formatCompactNumber(rows.filtered)}</span>{' '}
-            row(s)
-          </p>
-        </div>
-      </div>
-      <div className="ml-auto flex items-center gap-2">
-        {filters.length ? <DataTableResetButton /> : null}
-        {renderActions?.()}
-        <DataTableViewOptions />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-view-options.tsx b/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-view-options.tsx
deleted file mode 100644
index 2c134675cb3..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/data-table-view-options.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client'
-
-import { Check, GripVertical, Settings2 } from 'lucide-react'
-
-import { Button } from 'ui'
-import {
-  Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
-  CommandGroup_Shadcn_ as CommandGroup,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
-} from 'ui'
-import {
-  Popover_Shadcn_ as Popover,
-  PopoverContent_Shadcn_ as PopoverContent,
-  PopoverTrigger_Shadcn_ as PopoverTrigger,
-} from 'ui'
-import { useMemo, useState } from 'react'
-import { cn } from 'ui'
-import {
-  Sortable,
-  SortableDragHandle,
-  SortableItem,
-} from 'components/interfaces/DataTableDemo/components/custom/sortable'
-
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-
-export function DataTableViewOptions() {
-  const { table, enableColumnOrdering } = useDataTable()
-  const [open, setOpen] = useState(false)
-  const [drag, setDrag] = useState(false)
-  const [search, setSearch] = useState('')
-
-  const columnOrder = table.getState().columnOrder
-
-  const sortedColumns = useMemo(
-    () =>
-      table.getAllColumns().sort((a, b) => {
-        return columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id)
-      }),
-    [columnOrder]
-  )
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button type="outline" size="tiny" role="combobox" aria-expanded={open} className="h-9 w-9">
-          <Settings2 className="h-4 w-4" />
-          <span className="sr-only">View</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent side="bottom" align="end" className="w-[200px] p-0">
-        <Command>
-          <CommandInput value={search} onValueChange={setSearch} placeholder="Search options..." />
-          <CommandList>
-            <CommandEmpty>No option found.</CommandEmpty>
-            <CommandGroup>
-              <Sortable
-                value={sortedColumns.map((c) => ({ id: c.id }))}
-                onValueChange={(items) => table.setColumnOrder(items.map((c) => c.id))}
-                overlay={<div className="h-8 w-full rounded-md bg-muted/60" />}
-                onDragStart={() => setDrag(true)}
-                onDragEnd={() => setDrag(false)}
-                onDragCancel={() => setDrag(false)}
-              >
-                {sortedColumns
-                  .filter(
-                    (column) => typeof column.accessorFn !== 'undefined' && column.getCanHide()
-                  )
-                  .map((column) => (
-                    <SortableItem key={column.id} value={column.id} asChild>
-                      <CommandItem
-                        value={column.id}
-                        onSelect={() => column.toggleVisibility(!column.getIsVisible())}
-                        className={'capitalize'}
-                        disabled={drag}
-                      >
-                        <div
-                          className={cn(
-                            'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                            column.getIsVisible()
-                              ? 'bg-primary text-primary-foreground'
-                              : 'opacity-50 [&_svg]:invisible'
-                          )}
-                        >
-                          <Check className={cn('h-4 w-4')} />
-                        </div>
-                        <span>{column.columnDef.meta?.label || column.id}</span>
-                        {enableColumnOrdering && !search ? (
-                          <SortableDragHandle
-                            type="text"
-                            size="tiny"
-                            className="ml-auto size-5 text-muted-foreground hover:text-foreground focus:bg-muted focus:text-foreground"
-                          >
-                            <GripVertical className="size-4" aria-hidden="true" />
-                          </SortableDragHandle>
-                        ) : null}
-                      </CommandItem>
-                    </SortableItem>
-                  ))}
-              </Sortable>
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/types.ts b/apps/studio/components/interfaces/DataTableDemo/components/data-table/types.ts
deleted file mode 100644
index f303bf84e8e..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/types.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { JSX } from "react";
-
-export type SearchParams = {
-  [key: string]: string | string[] | undefined;
-};
-
-export type DatePreset = {
-  label: string;
-  from: Date;
-  to: Date;
-  shortcut: string;
-};
-
-// TODO: we could type the value(!) especially when using enums
-export type Option = {
-  label: string;
-  value: string | boolean | number | undefined;
-};
-
-export type Input = {
-  type: "input";
-  options?: Option[];
-};
-
-export type Checkbox = {
-  type: "checkbox";
-  component?: (props: Option) => JSX.Element | null;
-  options?: Option[];
-};
-
-export type Slider = {
-  type: "slider";
-  min: number;
-  max: number;
-  // if options is undefined, we will provide all the steps between min and max
-  options?: Option[];
-};
-
-export type Timerange = {
-  type: "timerange";
-  options?: Option[]; // required for TS
-  presets?: DatePreset[];
-};
-
-export type Base<TData> = {
-  label: string;
-  value: keyof TData;
-  /**
-   * Defines if the accordion in the filter bar is open by default
-   */
-  defaultOpen?: boolean;
-  /**
-   * Defines if the command input is disabled for this field
-   */
-  commandDisabled?: boolean;
-};
-
-export type DataTableCheckboxFilterField<TData> = Base<TData> & Checkbox;
-export type DataTableSliderFilterField<TData> = Base<TData> & Slider;
-export type DataTableInputFilterField<TData> = Base<TData> & Input;
-export type DataTableTimerangeFilterField<TData> = Base<TData> & Timerange;
-
-export type DataTableFilterField<TData> =
-  | DataTableCheckboxFilterField<TData>
-  | DataTableSliderFilterField<TData>
-  | DataTableInputFilterField<TData>
-  | DataTableTimerangeFilterField<TData>;
-
-/** ----------------------------------------- */
-
-export type SheetField<TData, TMeta = Record<string, unknown>> = {
-  id: keyof TData;
-  label: string;
-  // FIXME: rethink that! I dont think we need this as there is no input type
-  // REMINDER: readonly if we only want to copy the value (e.g. uuid)
-  // TODO: we might have some values that are not in the data but can be computed
-  type: "readonly" | "input" | "checkbox" | "slider" | "timerange";
-  component?: (
-    // REMINDER: this is used to pass additional data like the `InfiniteQueryMeta`
-    props: TData & {
-      metadata?: {
-        totalRows: number;
-        filterRows: number;
-        totalRowsFetched: number;
-      } & TMeta;
-    }
-  ) => JSX.Element | null | string;
-  condition?: (props: TData) => boolean;
-  className?: string;
-  skeletonClassName?: string;
-};
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/data-table/utils.ts b/apps/studio/components/interfaces/DataTableDemo/components/data-table/utils.ts
deleted file mode 100644
index 0733562569b..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/data-table/utils.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-// TODO: check if we can move to /data-table-filter-command/utils.ts
-import type { ColumnFiltersState } from "@tanstack/react-table";
-import { z } from "zod";
-import type { DataTableFilterField } from "./types";
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-} from "@/lib/delimiters";
-
-export function deserialize<T extends z.AnyZodObject>(schema: T) {
-  const castToSchema = z.preprocess((val) => {
-    if (typeof val !== "string") return val;
-    return val
-      .trim()
-      .split(" ")
-      .reduce((prev, curr) => {
-        const [name, value] = curr.split(":");
-        if (!value || !name) return prev;
-        prev[name] = value;
-        return prev;
-      }, {} as Record<string, unknown>);
-  }, schema);
-  return (value: string) => castToSchema.safeParse(value);
-}
-
-// export function serialize<T extends z.AnyZodObject>(schema: T) {
-//   return (value: z.infer<T>) =>
-//     schema
-//       .transform((val) => {
-//         Object.keys(val).reduce((prev, curr) => {
-//           if (Array.isArray(val[curr])) {
-//             return `${prev}${curr}:${val[curr].join(",")} `;
-//           }
-//           return `${prev}${curr}:${val[curr]} `;
-//         }, "");
-//       })
-//       .safeParse(value);
-// }
-
-export function serializeColumFilters<TData>(
-  columnFilters: ColumnFiltersState,
-  filterFields?: DataTableFilterField<TData>[]
-) {
-  return columnFilters.reduce((prev, curr) => {
-    const { type, commandDisabled } = filterFields?.find(
-      (field) => curr.id === field.value
-    ) || { commandDisabled: true }; // if column filter is not found, disable the command by default
-
-    if (commandDisabled) return prev;
-
-    if (Array.isArray(curr.value)) {
-      if (type === "slider") {
-        return `${prev}${curr.id}:${curr.value.join(SLIDER_DELIMITER)} `;
-      }
-      if (type === "checkbox") {
-        return `${prev}${curr.id}:${curr.value.join(ARRAY_DELIMITER)} `;
-      }
-      if (type === "timerange") {
-        return `${prev}${curr.id}:${curr.value.join(RANGE_DELIMITER)} `;
-      }
-    }
-
-    return `${prev}${curr.id}:${curr.value} `;
-  }, "");
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/icons/bluesky.tsx b/apps/studio/components/interfaces/DataTableDemo/components/icons/bluesky.tsx
deleted file mode 100644
index 8b781a9c4d6..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/icons/bluesky.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function Bluesky(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <title>Bluesky</title>
-      <path
-        fill="currentColor"
-        d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
-      />
-    </svg>
-  );
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/icons/github.tsx b/apps/studio/components/interfaces/DataTableDemo/components/icons/github.tsx
deleted file mode 100644
index fd1b5b75e80..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/icons/github.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function Github(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <title>GitHub</title>
-      <path
-        fill="currentColor"
-        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-      />
-    </svg>
-  );
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/icons/x.tsx b/apps/studio/components/interfaces/DataTableDemo/components/icons/x.tsx
deleted file mode 100644
index 5c20dcfc555..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/icons/x.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function X(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <title>X</title>
-      <path
-        fill="currentColor"
-        d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
-      />
-    </svg>
-  );
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/layout/socials-footer.tsx b/apps/studio/components/interfaces/DataTableDemo/components/layout/socials-footer.tsx
deleted file mode 100644
index 338d8dce075..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/layout/socials-footer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ModeToggle } from '@/components/theme/toggle-mode'
-import { Button } from 'ui'
-import NextLink from 'next/link'
-import { Link } from '@/components/custom/link'
-import { Github } from '@/components/icons/github'
-import { X } from '@/components/icons/x'
-import { Bluesky } from '@/components/icons/bluesky'
-
-export function SocialsFooter() {
-  return (
-    <div className="flex flex-col gap-1">
-      <div className="flex justify-center items-center gap-2 p-1">
-        <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-          <NextLink href="https://github.com/openstatusHQ/data-table-filters">
-            <Github className="h-4 w-4" />
-          </NextLink>
-        </Button>
-        <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-          <NextLink href="https://twitter.com/openstatusHQ">
-            <X className="h-4 w-4" />
-          </NextLink>
-        </Button>
-        <Button variant="ghost" size="sm" className="w-9 px-0" asChild>
-          <NextLink href="https://bsky.app/profile/openstatus.dev">
-            <Bluesky className="h-4 w-4" />
-          </NextLink>
-        </Button>
-        <ModeToggle className="[&>svg]:h-4 [&>svg]:w-4" />
-      </div>
-      <p className="text-muted-foreground text-center text-sm">
-        Powered by <Link href="https://openstatus.dev">OpenStatus</Link>
-      </p>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/layout/top-banner.tsx b/apps/studio/components/interfaces/DataTableDemo/components/layout/top-banner.tsx
deleted file mode 100644
index e08c1b75905..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/layout/top-banner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ArrowRight, ChevronRight } from "lucide-react";
-import { Link } from "@/components/custom/link";
-
-export function TopBanner() {
-  return (
-    <div className="group bg-muted/50 text-foreground border-b">
-      <div className="container mx-auto px-4 py-2 sm:px-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-8">
-          <p className="flex items-center justify-center gap-2">
-            <Link href="/infinite" className="no-underline">
-              <span className="font-semibold">New Example: </span>
-              <span className="underline underline-offset-4 decoration-muted-foreground group-hover:decoration-foreground">
-                Infinite Scroll
-              </span>{" "}
-              <span className="mr-1">Now Available, Inspired by Vercel</span>
-              <ArrowRight className="relative mb-[1px] inline h-4 w-0 transition-all group-hover:w-4" />
-              <ChevronRight className="relative mb-[1px] inline h-4 w-4 transition-all group-hover:w-0" />
-            </Link>
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/theme/theme-provider.tsx b/apps/studio/components/interfaces/DataTableDemo/components/theme/theme-provider.tsx
deleted file mode 100644
index 0b818eab0f4..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/theme/theme-provider.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import type { ThemeProviderProps } from "next-themes";
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/theme/toggle-mode.tsx b/apps/studio/components/interfaces/DataTableDemo/components/theme/toggle-mode.tsx
deleted file mode 100644
index b01a425634a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/theme/toggle-mode.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useTheme } from 'next-themes'
-
-import { Button, ButtonProps } from 'ui'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
-import { Laptop, Moon, Sun } from 'lucide-react'
-import { cn } from 'ui'
-
-export function ModeToggle({ className, ...props }: ButtonProps) {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button type="text" size="small" className={cn('w-9 px-0', className)} {...props}>
-          <Sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          <Sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          <Moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          <Laptop className="mr-2 h-4 w-4" />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/accordion.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/accordion.tsx
deleted file mode 100644
index 6a8e6091eec..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/accordion.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDown } from 'lucide-react'
-
-import { cn } from 'ui'
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-))
-AccordionItem.displayName = 'AccordionItem'
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/badge.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/badge.tsx
deleted file mode 100644
index e053e26c42a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/badge.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from 'ui'
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
-}
-
-export { Badge, badgeVariants }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/button.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/button.tsx
deleted file mode 100644
index a4a00c0c4a5..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/button.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from 'ui'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    )
-  }
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/calendar.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/calendar.tsx
deleted file mode 100644
index 54e04f0ac86..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/calendar.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { DayPicker } from 'react-day-picker'
-
-import { cn } from 'ui'
-import { buttonVariants } from 'ui'
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
-
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn('p-3', className)}
-      classNames={{
-        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-        month: 'space-y-4',
-        caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-sm font-medium',
-        nav: 'space-x-1 flex items-center',
-        nav_button: cn(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
-        ),
-        nav_button_previous: 'absolute left-1',
-        nav_button_next: 'absolute right-1',
-        table: 'w-full border-collapse space-y-1',
-        head_row: 'flex',
-        head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
-        row: 'flex w-full mt-2',
-        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
-        day: cn(
-          buttonVariants({ variant: 'ghost' }),
-          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
-        ),
-        day_range_end: 'day-range-end',
-        day_selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        day_today: 'bg-accent text-accent-foreground',
-        day_outside:
-          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-        day_disabled: 'text-muted-foreground opacity-50',
-        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        day_hidden: 'invisible',
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  )
-}
-Calendar.displayName = 'Calendar'
-
-export { Calendar }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/card.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/card.tsx
deleted file mode 100644
index afa13ecfa3b..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/card.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/chart.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/chart.tsx
deleted file mode 100644
index 8620baa3b32..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/chart.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null
-      }
-
-      const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
-
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
-      }
-
-      if (!value) {
-        return null
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ])
-
-    if (!active || !payload?.length) {
-      return null
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot"
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
-
-const ChartLegend = RechartsPrimitive.Legend
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    if (!payload?.length) {
-      return null
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-)
-ChartLegendContent.displayName = "ChartLegend"
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/checkbox.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/checkbox.tsx
deleted file mode 100644
index df61a138815..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/command.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/command.tsx
deleted file mode 100644
index 1a37e67d651..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/command.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/dialog.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/dialog.tsx
deleted file mode 100644
index 01ff19c7e45..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/dialog.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/drawer.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/drawer.tsx
deleted file mode 100644
index 2fb5c8a8e6b..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/drawer.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-  "use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
-
-const DrawerTrigger = DrawerPrimitive.Trigger
-
-const DrawerPortal = DrawerPrimitive.Portal
-
-const DrawerClose = DrawerPrimitive.Close
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/dropdown-menu.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/dropdown-menu.tsx
deleted file mode 100644
index 5239c0a2ad3..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
-
-import { cn } from 'ui'
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/hover-card.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/hover-card.tsx
deleted file mode 100644
index e54d91cf81f..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/input.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/input.tsx
deleted file mode 100644
index 677d05fd6c1..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/input.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/label.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/label.tsx
deleted file mode 100644
index 534182176bf..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/label.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/popover.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/popover.tsx
deleted file mode 100644
index a0ec48beee4..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/popover.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/select.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/select.tsx
deleted file mode 100644
index cbe5a36b695..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/select.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/separator.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/separator.tsx
deleted file mode 100644
index 12d81c4a853..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/separator.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/sheet.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/sheet.tsx
deleted file mode 100644
index ed9f70dbd55..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/sheet.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { X } from 'lucide-react'
-
-import { cn } from 'ui'
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-        right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-      {children}
-      <SheetPrimitive.Close
-        autoFocus={true} // REMINDER: added
-        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
-      >
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
-)
-SheetHeader.displayName = 'SheetHeader'
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-    {...props}
-  />
-)
-SheetFooter.displayName = 'SheetFooter'
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/skeleton.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/skeleton.tsx
deleted file mode 100644
index 01b8b6d4f71..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/slider.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/slider.tsx
deleted file mode 100644
index c31c2b3bc1a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/slider.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
-
-import { cn } from "@/lib/utils"
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
-
-export { Slider }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/sonner.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/sonner.tsx
deleted file mode 100644
index 549cf8413d9..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/sonner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster };
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/table.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/table.tsx
deleted file mode 100644
index 46c80c3448d..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/table.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react'
-
-import { cn } from 'ui'
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  )
-)
-Table.displayName = 'Table'
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-))
-TableHeader.displayName = 'TableHeader'
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-))
-TableBody.displayName = 'TableBody'
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
-    {...props}
-  />
-))
-TableFooter.displayName = 'TableFooter'
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn(
-        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-TableRow.displayName = 'TableRow'
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = 'TableHead'
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
-    {...props}
-  />
-))
-TableCell.displayName = 'TableCell'
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
-))
-TableCaption.displayName = 'TableCaption'
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/tabs.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/tabs.tsx
deleted file mode 100644
index 8c34f34e351..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/tabs.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-
-import { cn } from 'ui'
-
-const Tabs = TabsPrimitive.Root
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      className
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/tooltip.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/tooltip.tsx
deleted file mode 100644
index 30fc44d90f3..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/ui/visually-hidden.tsx b/apps/studio/components/interfaces/DataTableDemo/components/ui/visually-hidden.tsx
deleted file mode 100644
index c28ca8451d0..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/components/ui/visually-hidden.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from "react"
-import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden"
-
-const VisuallyHidden = VisuallyHiddenPrimitive.Root
-
-export { VisuallyHidden }
\ No newline at end of file
diff --git a/apps/studio/components/interfaces/DataTableDemo/constants/date-preset.ts b/apps/studio/components/interfaces/DataTableDemo/constants/date-preset.ts
deleted file mode 100644
index 305aa489893..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/constants/date-preset.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { DatePreset } from "@/components/data-table/types";
-import { addDays, addHours, endOfDay, startOfDay } from "date-fns";
-
-export const presets = [
-  {
-    label: "Today",
-    from: startOfDay(new Date()),
-    to: endOfDay(new Date()),
-    shortcut: "d", // day
-  },
-  {
-    label: "Yesterday",
-    from: startOfDay(addDays(new Date(), -1)),
-    to: endOfDay(addDays(new Date(), -1)),
-    shortcut: "y",
-  },
-  {
-    label: "Last hour",
-    from: addHours(new Date(), -1),
-    to: new Date(),
-    shortcut: "h",
-  },
-  {
-    label: "Last 7 days",
-    from: startOfDay(addDays(new Date(), -7)),
-    to: endOfDay(new Date()),
-    shortcut: "w",
-  },
-  {
-    label: "Last 14 days",
-    from: startOfDay(addDays(new Date(), -14)),
-    to: endOfDay(new Date()),
-    shortcut: "b", // bi-weekly
-  },
-  {
-    label: "Last 30 days",
-    from: startOfDay(addDays(new Date(), -30)),
-    to: endOfDay(new Date()),
-    shortcut: "m",
-  },
-] satisfies DatePreset[];
diff --git a/apps/studio/components/interfaces/DataTableDemo/constants/levels.ts b/apps/studio/components/interfaces/DataTableDemo/constants/levels.ts
deleted file mode 100644
index 4626401262c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/constants/levels.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const LEVELS = ["success", "warning", "error"] as const;
-
-// FIXME: improve
-export const _LEVELS = [...LEVELS, "info"] as const;
diff --git a/apps/studio/components/interfaces/DataTableDemo/constants/method.ts b/apps/studio/components/interfaces/DataTableDemo/constants/method.ts
deleted file mode 100644
index 3989dd9ce44..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/constants/method.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const METHODS = ["GET", "POST", "PUT", "DELETE"] as const;
diff --git a/apps/studio/components/interfaces/DataTableDemo/constants/region.ts b/apps/studio/components/interfaces/DataTableDemo/constants/region.ts
deleted file mode 100644
index 358ebd59c04..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/constants/region.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export const REGIONS = ["ams", "fra", "gru", "hkg", "iad", "syd"] as const;
-
-export const VERCEL_EDGE_REGIONS = [
-  "hnd1",
-  "sin1",
-  "cpt1",
-  "fra1",
-  "hkg1",
-  "syd1",
-  "gru1",
-  "dub1",
-  "sfo1",
-  "cdg1",
-  "icn1",
-  "kix1",
-  "iad1",
-  "arn1",
-  "bom1",
-  "lhr1",
-  "cle1",
-] as const;
-
-export const regions: Record<string, { label: string; flag: string }> = {
-  // REGIONS
-  ams: { label: "Amsterdam", flag: "🇳🇱" },
-  fra: { label: "Frankfurt", flag: "🇩🇪" },
-  gru: { label: "Sao Paulo", flag: "🇧🇷" },
-  hkg: { label: "Hong Kong", flag: "🇭🇰" },
-  iad: { label: "Washington D.C.", flag: "🇺🇸" },
-  syd: { label: "Sydney", flag: "🇦🇺" },
-  // VERCEL EDGE REGIONS
-  hnd1: { label: "Tokyo", flag: "🇯🇵" },
-  sin1: { label: "Singapore", flag: "🇸🇬" },
-  cpt1: { label: "Cape Town", flag: "🇿🇦" },
-  fra1: { label: "Paris", flag: "🇫🇷" },
-  hkg1: { label: "Hong Kong", flag: "🇭🇰" },
-  syd1: { label: "Sydney", flag: "🇦🇺" },
-  gru1: { label: "Sao Paulo", flag: "🇧🇷" },
-  dub1: { label: "Dublin", flag: "🇮🇪" },
-  sfo1: { label: "San Francisco", flag: "🇺🇸" },
-  cdg1: { label: "Paris", flag: "🇫🇷" },
-  icn1: { label: "Seoul", flag: "🇰🇷" },
-  kix1: { label: "Osaka", flag: "🇯🇵" },
-  iad1: { label: "Washington D.C.", flag: "🇺🇸" },
-  arn1: { label: "Stockholm", flag: "🇸🇪" },
-  bom1: { label: "Mumbai", flag: "🇮🇳" },
-  lhr1: { label: "London", flag: "🇬🇧" },
-  cle1: { label: "Cleveland", flag: "🇺🇸" },
-};
diff --git a/apps/studio/components/interfaces/DataTableDemo/constants/tag.ts b/apps/studio/components/interfaces/DataTableDemo/constants/tag.ts
deleted file mode 100644
index 020ac349c3f..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/constants/tag.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const TAGS = ["web", "api", "enterprise", "app"] as const;
-
-export const tagColor: Record<string, Record<"badge" | "dot", string>> = {
-  api: {
-    badge:
-      "text-[#10b981] bg-[#10b981]/10 border-[#10b981]/20 hover:bg-[#10b981]/10",
-    dot: "bg-[#10b981]",
-  },
-  web: {
-    badge:
-      "text-[#0ea5e9] bg-[#0ea5e9]/10 border-[#0ea5e9]/20 hover:bg-[#0ea5e9]/10",
-    dot: "bg-[#0ea5e9]",
-  },
-  enterprise: {
-    badge:
-      "text-[#ec4899] bg-[#ec4899]/10 border-[#ec4899]/20 hover:bg-[#ec4899]/10",
-    dot: "bg-[#ec4899]",
-  },
-  app: {
-    badge:
-      "text-[#f97316] bg-[#f97316]/10 border-[#f97316]/20 hover:bg-[#f97316]/10",
-    dot: "bg-[#f97316]",
-  },
-};
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/columns.tsx b/apps/studio/components/interfaces/DataTableDemo/default/columns.tsx
deleted file mode 100644
index 69b78251ea9..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/columns.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-'use client'
-
-import { DataTableColumnHeader } from '../components/data-table/data-table-column-header'
-import { Badge } from '../components/ui/badge'
-import { tagColor } from '../constants/tag'
-import { isArrayOfDates, isArrayOfNumbers } from '../lib/is-array'
-import type { ColumnDef } from '@tanstack/react-table'
-import { format, isSameDay } from 'date-fns'
-import { Check, Minus } from 'lucide-react'
-import type { ColumnSchema } from 'components/interfaces/DataTableDemo/default/types'
-
-export const columns: ColumnDef<ColumnSchema>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'url',
-    header: 'URL',
-    cell: ({ row }) => {
-      const value = row.getValue('url')
-      return <div className="max-w-[200px] truncate">{`${value}`}</div>
-    },
-  },
-  {
-    accessorKey: 'regions',
-    header: 'Regions',
-    cell: ({ row }) => {
-      const value = row.getValue('regions')
-      if (Array.isArray(value)) {
-        return <div className="text-muted-foreground">{value.join(', ')}</div>
-      }
-      return <div className="text-muted-foreground">{`${value}`}</div>
-    },
-    filterFn: (row, id, value) => {
-      const array = row.getValue(id) as string[]
-      if (typeof value === 'string') return array.includes(value)
-      // up to the user to define either `.some` or `.every`
-      if (Array.isArray(value)) return value.some((i) => array.includes(i))
-      return false
-    },
-  },
-  {
-    accessorKey: 'tags',
-    header: 'Tags',
-    cell: ({ row }) => {
-      const value = row.getValue('tags') as string | string[]
-      if (Array.isArray(value)) {
-        return (
-          <div className="flex flex-wrap gap-1">
-            {value.map((v) => (
-              <Badge key={v} className={tagColor[v].badge}>
-                {v}
-              </Badge>
-            ))}
-          </div>
-        )
-      }
-      return <Badge className={tagColor[value].badge}>{value}</Badge>
-    },
-    filterFn: (row, id, value) => {
-      const array = row.getValue(id) as string[]
-      if (typeof value === 'string') return array.includes(value)
-      // up to the user to define either `.some` or `.every`
-      if (Array.isArray(value)) return value.some((i) => array.includes(i))
-      return false
-    },
-  },
-  {
-    accessorKey: 'p95',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="P95" />,
-    cell: ({ row }) => {
-      const value = row.getValue('p95')
-      if (typeof value === 'undefined') {
-        return <Minus className="h-4 w-4 text-muted-foreground/50" />
-      }
-      return (
-        <div>
-          <span className="font-mono">{`${value}`}</span> ms
-        </div>
-      )
-    },
-    filterFn: (row, id, value) => {
-      const rowValue = row.getValue(id) as number
-      if (typeof value === 'number') return value === Number(rowValue)
-      if (Array.isArray(value) && isArrayOfNumbers(value)) {
-        if (value.length === 1) {
-          return value[0] === rowValue
-        } else {
-          const sorted = value.sort((a, b) => a - b)
-          return sorted[0] <= rowValue && rowValue <= sorted[1]
-        }
-      }
-      return false
-    },
-  },
-  {
-    accessorKey: 'active',
-    header: 'Active',
-    cell: ({ row }) => {
-      const value = row.getValue('active')
-      if (value) return <Check className="h-4 w-4" />
-      return <Minus className="h-4 w-4 text-muted-foreground/50" />
-    },
-    filterFn: (row, id, value) => {
-      const rowValue = row.getValue(id)
-      if (typeof value === 'string') return value === String(rowValue)
-      if (typeof value === 'boolean') return value === rowValue
-      if (Array.isArray(value)) return value.includes(rowValue)
-      return false
-    },
-  },
-  {
-    accessorKey: 'public',
-    header: 'Public',
-    cell: ({ row }) => {
-      const value = row.getValue('public')
-      if (value) return <Check className="h-4 w-4" />
-      return <Minus className="h-4 w-4 text-muted-foreground/50" />
-    },
-    filterFn: (row, id, value) => {
-      const rowValue = row.getValue(id)
-      if (typeof value === 'string') return value === String(rowValue)
-      if (typeof value === 'boolean') return value === rowValue
-      if (Array.isArray(value)) return value.includes(rowValue)
-      return false
-    },
-  },
-  {
-    accessorKey: 'date',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
-    cell: ({ row }) => {
-      const value = row.getValue('date')
-      return (
-        <div className="text-xs text-muted-foreground" suppressHydrationWarning>
-          {format(new Date(`${value}`), 'LLL dd, y HH:mm')}
-        </div>
-      )
-    },
-    filterFn: (row, id, value) => {
-      const rowValue = row.getValue(id)
-      if (value instanceof Date && rowValue instanceof Date) {
-        return isSameDay(value, rowValue)
-      }
-      if (Array.isArray(value)) {
-        if (isArrayOfDates(value) && rowValue instanceof Date) {
-          const sorted = value.sort((a, b) => a.getTime() - b.getTime())
-          // TODO: check length
-          return (
-            sorted[0]?.getTime() <= rowValue.getTime() && rowValue.getTime() <= sorted[1]?.getTime()
-          )
-        }
-      }
-      return false
-    },
-  },
-]
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/constants.tsx b/apps/studio/components/interfaces/DataTableDemo/default/constants.tsx
deleted file mode 100644
index 2cc5b3b2a97..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/constants.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import type { DataTableFilterField, Option } from '../components/data-table/types'
-import { REGIONS } from '../constants/region'
-import { tagColor, TAGS } from '../constants/tag'
-import { cn } from '../lib/utils'
-import { data } from './data'
-import type { ColumnSchema } from './types'
-
-export const filterFields = [
-  {
-    label: 'Time Range',
-    value: 'date',
-    type: 'timerange',
-    defaultOpen: true,
-    commandDisabled: true,
-  },
-  {
-    label: 'URL',
-    value: 'url',
-    type: 'input',
-    options: data.map(({ url }) => ({ label: url, value: url })),
-  },
-  {
-    label: 'Public',
-    value: 'public',
-    type: 'checkbox',
-    options: [true, false].map((bool) => ({ label: `${bool}`, value: bool })),
-  },
-  {
-    label: 'Active',
-    value: 'active',
-    type: 'checkbox',
-    options: [true, false].map((bool) => ({ label: `${bool}`, value: bool })),
-  },
-  {
-    label: 'P95',
-    value: 'p95',
-    type: 'slider',
-    min: 0,
-    max: 3000,
-    options: data.map(({ p95 }) => ({ label: `${p95}`, value: p95 })),
-    defaultOpen: true,
-  },
-  {
-    label: 'Regions',
-    value: 'regions',
-    type: 'checkbox',
-    options: REGIONS.map((region) => ({ label: region, value: region })),
-  },
-  {
-    label: 'Tags',
-    value: 'tags',
-    type: 'checkbox',
-    defaultOpen: true,
-    // REMINDER: "use client" needs to be declared in the file - otherwise getting serialization error from Server Component
-    component: (props: Option) => {
-      if (typeof props.value === 'boolean') return null
-      if (typeof props.value === 'undefined') return null
-      return (
-        <div className="flex w-full items-center justify-between gap-2">
-          <span className="truncate font-normal">{props.value}</span>
-          <span className={cn('h-2 w-2 rounded-full', tagColor[props.value].dot)} />
-        </div>
-      )
-    },
-    options: TAGS.map((tag) => ({ label: tag, value: tag })),
-  },
-] satisfies DataTableFilterField<ColumnSchema>[]
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/data-table.tsx b/apps/studio/components/interfaces/DataTableDemo/default/data-table.tsx
deleted file mode 100644
index c86d3de9862..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/data-table.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-'use client'
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '../components/custom/table'
-import { DataTableFilterCommand } from '../components/data-table/data-table-filter-command'
-import { DataTableFilterControls } from '../components/data-table/data-table-filter-controls'
-import { DataTablePagination } from '../components/data-table/data-table-pagination'
-import { DataTableProvider } from '../components/data-table/data-table-provider'
-import { DataTableToolbar } from '../components/data-table/data-table-toolbar'
-import type { DataTableFilterField } from '../components/data-table/types'
-import { useLocalStorage } from '../hooks/use-local-storage'
-import { cn } from '../lib/utils'
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  Table as TTable,
-  VisibilityState,
-} from '@tanstack/react-table'
-import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table'
-import { useQueryStates } from 'nuqs'
-import * as React from 'react'
-import { searchParamsParser } from 'components/interfaces/DataTableDemo/default/search-params'
-
-export interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-  defaultColumnFilters?: ColumnFiltersState
-  // TODO: add sortingColumnFilters
-  filterFields?: DataTableFilterField<TData>[]
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  defaultColumnFilters = [],
-  filterFields = [],
-}: DataTableProps<TData, TValue>) {
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters)
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-  const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(
-    'data-table-visibility',
-    {}
-  )
-  const [_, setSearch] = useQueryStates(searchParamsParser)
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: { columnFilters, sorting, columnVisibility, pagination },
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnFiltersChange: setColumnFilters,
-    onSortingChange: setSorting,
-    onPaginationChange: setPagination,
-    getSortedRowModel: getSortedRowModel(),
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getFacetedMinMaxValues: getFacetedMinMaxValues(),
-    // REMINDER: it doesn't support array of strings (WARNING: might not work for other types)
-    getFacetedUniqueValues: (table: TTable<TData>, columnId: string) => () => {
-      const facets = getFacetedUniqueValues<TData>()(table, columnId)()
-      const customFacets = new Map()
-      for (const [key, value] of facets as any) {
-        if (Array.isArray(key)) {
-          for (const k of key) {
-            const prevValue = customFacets.get(k) || 0
-            customFacets.set(k, prevValue + value)
-          }
-        } else {
-          const prevValue = customFacets.get(key) || 0
-          customFacets.set(key, prevValue + value)
-        }
-      }
-      return customFacets
-    },
-  })
-
-  React.useEffect(() => {
-    const columnFiltersWithNullable = filterFields.map((field) => {
-      const filterValue = columnFilters.find((filter) => filter.id === field.value)
-      if (!filterValue) return { id: field.value, value: null }
-      return { id: field.value, value: filterValue.value }
-    })
-
-    const search = columnFiltersWithNullable.reduce(
-      (prev, curr) => {
-        prev[curr.id as string] = curr.value
-        return prev
-      },
-      {} as Record<string, unknown>
-    )
-
-    setSearch(search)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnFilters])
-
-  return (
-    <DataTableProvider
-      table={table}
-      columns={columns}
-      filterFields={filterFields}
-      columnFilters={columnFilters}
-      sorting={sorting}
-      pagination={pagination}
-    >
-      <div className="flex h-full w-full flex-col gap-3 sm:flex-row">
-        <div
-          className={cn(
-            'hidden w-full p-1 sm:block sm:min-w-52 sm:max-w-52 sm:self-start md:min-w-64 md:max-w-64',
-            'group-data-[expanded=false]/controls:hidden'
-          )}
-        >
-          <DataTableFilterControls />
-        </div>
-        <div className="flex max-w-full flex-1 flex-col gap-4 overflow-hidden p-1">
-          <DataTableFilterCommand searchParamsParser={searchParamsParser} />
-          <DataTableToolbar />
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader className="bg-muted/50">
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id} className="hover:bg-transparent">
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead key={header.id}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.header, header.getContext())}
-                        </TableHead>
-                      )
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {table.getRowModel().rows?.length ? (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell colSpan={columns.length} className="h-24 text-center">
-                      No results.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </div>
-          <DataTablePagination />
-        </div>
-      </div>
-    </DataTableProvider>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/data.ts b/apps/studio/components/interfaces/DataTableDemo/default/data.ts
deleted file mode 100644
index 15dcc6fbb33..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/data.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-import { subDays, subHours, subMinutes } from "date-fns";
-import type { ColumnSchema } from "./types";
-
-export const data = [
-  {
-    name: "Edge Api",
-    url: "edge-api.acme.com/health",
-    p95: 140,
-    public: true,
-    active: true,
-    regions: ["ams", "gru", "syd"],
-    tags: ["api", "enterprise"],
-    date: subHours(new Date(), 1),
-  },
-  {
-    name: "Lambda Api",
-    url: "lambda-api.acme.com/health",
-    p95: 203,
-    public: true,
-    active: true,
-    regions: ["ams", "gru", "syd"],
-    tags: ["api"],
-    date: subHours(new Date(), 10),
-  },
-  {
-    name: "Storybook",
-    url: "storybook.acme.com",
-    p95: 1252,
-    public: false,
-    active: true,
-    regions: ["iad"],
-    tags: ["web"],
-    date: subMinutes(new Date(), 10),
-  },
-  {
-    name: "Marketing",
-    url: "acme.com",
-    p95: 659,
-    public: true,
-    active: true,
-    regions: ["hkg", "fra", "iad"],
-    tags: ["web"],
-    date: subDays(new Date(), 1),
-  },
-  {
-    name: "App",
-    url: "app.acme.com",
-    p95: 1301,
-    public: false,
-    active: true,
-    regions: ["iad", "fra"],
-    tags: ["app"],
-    date: subHours(new Date(), 13),
-  },
-  {
-    name: "Demo",
-    url: "demo.acme.com",
-    p95: 2420,
-    public: true,
-    active: true,
-    regions: ["iad"],
-    tags: ["web", "enterprise"],
-    date: subDays(new Date(), 4),
-  },
-  {
-    name: "Documentation",
-    url: "docs.acme.com",
-    p95: 943,
-    public: true,
-    active: true,
-    regions: ["ams"],
-    tags: ["api", "web"],
-    date: subDays(new Date(), 6),
-  },
-  {
-    name: "Boilerplate",
-    url: "boilerplate.acme.com",
-    p95: undefined,
-    public: true,
-    active: false,
-    regions: ["gru", "fra"],
-    tags: ["web"],
-    date: subDays(new Date(), 10),
-  },
-  {
-    name: "Dashboard",
-    url: "app.acme.com/dashboard",
-    p95: 967,
-    public: false,
-    active: true,
-    regions: ["iad", "fra"],
-    tags: ["web"],
-    date: subHours(new Date(), 28),
-  },
-  {
-    name: "E2E Testing",
-    url: "staging-cypress-e2e.acme.com",
-    p95: 1954,
-    public: false,
-    active: true,
-    regions: ["iad"],
-    tags: ["web"],
-    date: subDays(new Date(), 12),
-  },
-  {
-    name: "Web App",
-    url: "web-app.acme.com",
-    p95: 1043,
-    public: true,
-    active: true,
-    regions: ["iad"],
-    tags: ["web"],
-    date: subDays(new Date(), 15),
-  },
-  {
-    name: "Admin Panel",
-    url: "admin.acme.com",
-    p95: 1342,
-    public: false,
-    active: true,
-    regions: ["gru", "syd"],
-    tags: ["web"],
-    date: subHours(new Date(), 5),
-  },
-  {
-    name: "API Gateway",
-    url: "api-gateway.acme.com/health",
-    p95: 190,
-    public: true,
-    active: true,
-    regions: ["ams", "hkg"],
-    tags: ["api", "enterprise"],
-    date: subHours(new Date(), 3),
-  },
-  {
-    name: "Analytics Service",
-    url: "analytics.acme.com",
-    p95: 810,
-    public: true,
-    active: true,
-    regions: ["iad", "fra", "hkg"],
-    tags: ["app", "enterprise"],
-    date: subDays(new Date(), 2),
-  },
-  {
-    name: "Support Portal",
-    url: "support.acme.com",
-    p95: 752,
-    public: true,
-    active: true,
-    regions: ["gru", "iad"],
-    tags: ["web"],
-    date: subMinutes(new Date(), 30),
-  },
-  {
-    name: "User Management",
-    url: "user-mgmt.acme.com",
-    p95: 980,
-    public: false,
-    active: true,
-    regions: ["gru", "syd", "fra"],
-    tags: ["app"],
-    date: subDays(new Date(), 7),
-  },
-  {
-    name: "Payment Gateway",
-    url: "payments.acme.com",
-    p95: 156,
-    public: true,
-    active: true,
-    regions: ["ams", "hkg", "syd"],
-    tags: ["api", "enterprise"],
-    date: subHours(new Date(), 8),
-  },
-  {
-    name: "Notification Service",
-    url: "notify.acme.com",
-    p95: 345,
-    public: false,
-    active: true,
-    regions: ["iad"],
-    tags: ["api"],
-    date: subDays(new Date(), 11),
-  },
-  {
-    name: "File Storage",
-    url: "storage.acme.com",
-    p95: 1220,
-    public: true,
-    active: true,
-    regions: ["gru", "hkg"],
-    tags: ["web", "enterprise"],
-    date: subDays(new Date(), 3),
-  },
-  {
-    name: "CDN",
-    url: "cdn.acme.com",
-    p95: 89,
-    public: true,
-    active: true,
-    regions: ["ams", "iad", "hkg"],
-    tags: ["web"],
-    date: subDays(new Date(), 2),
-  },
-  {
-    name: "Auth Service",
-    url: "auth.acme.com",
-    p95: 542,
-    public: false,
-    active: true,
-    regions: ["gru", "syd"],
-    tags: ["api"],
-    date: subHours(new Date(), 16),
-  },
-] satisfies ColumnSchema[];
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/layout.tsx b/apps/studio/components/interfaces/DataTableDemo/default/layout.tsx
deleted file mode 100644
index 82f66282800..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react'
-import { SocialsFooter } from '../components/layout/socials-footer'
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <main className="container mx-auto flex min-h-screen flex-col gap-4 p-4 sm:p-8">
-      <div className="flex flex-col gap-4 sm:gap-8 w-full max-w-7xl mx-auto relative min-h-full h-full rounded-lg border border-border/50 bg-background/50 p-4 backdrop-blur-[2px] sm:p-8">
-        {children}
-      </div>
-      <SocialsFooter />
-    </main>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/page.tsx b/apps/studio/components/interfaces/DataTableDemo/default/page.tsx
deleted file mode 100644
index c50aee219db..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-import { columns } from './columns'
-import { filterFields } from './constants'
-import { data } from './data'
-import { DataTable } from './data-table'
-import { useSearchParams } from './search-params'
-import { Skeleton } from './skeleton'
-
-export default function TableDemo() {
-  const [search] = useSearchParams()
-
-  return (
-    <React.Suspense fallback={<Skeleton />}>
-      <DataTable
-        columns={columns}
-        data={data}
-        filterFields={filterFields}
-        defaultColumnFilters={Object.entries(search)
-          .map(([key, value]) => ({
-            id: key,
-            value,
-          }))
-          .filter(({ value }) => value ?? undefined)}
-      />
-    </React.Suspense>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/search-params.ts b/apps/studio/components/interfaces/DataTableDemo/default/search-params.ts
deleted file mode 100644
index 33550875b52..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/search-params.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { REGIONS } from '../constants/region'
-import { TAGS } from '../constants/tag'
-import { ARRAY_DELIMITER, RANGE_DELIMITER, SLIDER_DELIMITER } from '../lib/delimiters'
-import {
-  createParser,
-  parseAsArrayOf,
-  parseAsBoolean,
-  parseAsInteger,
-  parseAsString,
-  parseAsStringLiteral,
-  parseAsTimestamp,
-  useQueryState,
-  useQueryStates,
-} from 'nuqs'
-
-export const parseAsSort = createParser({
-  parse(queryValue) {
-    const [id, desc] = queryValue.split('.')
-    if (!id && !desc) return null
-    return { id, desc: desc === 'desc' }
-  },
-  serialize(value) {
-    return `${value.id}.${value.desc ? 'desc' : 'asc'}`
-  },
-})
-
-export const searchParamsParser = {
-  // FILTERS
-  url: parseAsString,
-  // TODO: limit to two array entries
-  p95: parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  public: parseAsArrayOf(parseAsBoolean, ARRAY_DELIMITER),
-  active: parseAsArrayOf(parseAsBoolean, ARRAY_DELIMITER),
-  regions: parseAsArrayOf(parseAsStringLiteral(REGIONS), ARRAY_DELIMITER),
-  tags: parseAsArrayOf(parseAsStringLiteral(TAGS), ARRAY_DELIMITER),
-  date: parseAsArrayOf(parseAsTimestamp, RANGE_DELIMITER),
-} as const
-
-export function useSearchParams() {
-  return useQueryStates(searchParamsParser)
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/skeleton.tsx b/apps/studio/components/interfaces/DataTableDemo/default/skeleton.tsx
deleted file mode 100644
index 18e78c2752a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/skeleton.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DataTableSkeleton } from '../components/data-table/data-table-skeleton'
-import { Skeleton as DefaultSkeleton } from 'ui'
-
-export function Skeleton() {
-  return (
-    <div className="flex w-full h-full flex-col gap-3 sm:flex-row">
-      <div className="w-full p-1 sm:min-w-52 sm:max-w-52 sm:self-start md:min-w-64 md:max-w-64">
-        <div className="-m-1 h-full p-1">
-          <div className="flex flex-col gap-4">
-            <div className="h-11 w-full flex items-center">
-              <DefaultSkeleton className="h-6 w-12" />
-            </div>
-            <div className="grid gap-2">
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-              <DefaultSkeleton className="h-7 w-full" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex max-w-full flex-1 flex-col gap-4 p-1">
-        <DefaultSkeleton className="h-11 w-full border border-border" />
-        <div className="flex justify-between items-center h-9">
-          <DefaultSkeleton className="h-full max-w-36 w-full" />
-          <DefaultSkeleton className="h-full max-w-20 w-full" />
-        </div>
-        <div className="rounded-md border">
-          <DataTableSkeleton />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/default/types.ts b/apps/studio/components/interfaces/DataTableDemo/default/types.ts
deleted file mode 100644
index cd0eee4b1d1..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/default/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { REGIONS } from '../constants/region'
-import { TAGS } from '../constants/tag'
-
-export type ColumnSchema = {
-  name: string
-  url: string
-  public: boolean
-  active: boolean
-  regions: (typeof REGIONS)[number][]
-  tags: (typeof TAGS)[number][]
-  date: Date
-  p95?: number | undefined
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard.ts b/apps/studio/components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard.ts
deleted file mode 100644
index 5bd09111c0a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
-
-export function useCopyToClipboard() {
-  const [text, setText] = useState<string | null>(null);
-
-  const copy = useCallback(
-    async (
-      text: string,
-      { timeout, withToast }: { timeout?: number; withToast?: boolean } = {
-        timeout: 3000,
-        withToast: false,
-      }
-    ) => {
-      if (!navigator?.clipboard) {
-        console.warn("Clipboard not supported");
-        return false;
-      }
-
-      try {
-        await navigator.clipboard.writeText(text);
-        setText(text);
-
-        if (timeout) {
-          setTimeout(() => {
-            setText(null);
-          }, timeout);
-        }
-
-        if (withToast) {
-          toast.success("Copied to clipboard");
-        }
-
-        return true;
-      } catch (error) {
-        console.warn("Copy failed", error);
-        setText(null);
-        return false;
-      }
-    },
-    []
-  );
-
-  return { text, copy, isCopied: text !== null };
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/hooks/use-debounce.ts b/apps/studio/components/interfaces/DataTableDemo/hooks/use-debounce.ts
deleted file mode 100644
index 3a34896de72..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/hooks/use-debounce.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-
-// consider using https://github.com/xnimorz/use-debounce
-export function useDebounce<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/hooks/use-hot-key.ts b/apps/studio/components/interfaces/DataTableDemo/hooks/use-hot-key.ts
deleted file mode 100644
index 3d3fa0fd02c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/hooks/use-hot-key.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useEffect } from "react";
-
-export function useHotKey(callback: () => void, key: string): void {
-  useEffect(() => {
-    function handler(e: KeyboardEvent) {
-      if (e.key === key && (e.metaKey || e.ctrlKey)) {
-        // e.preventDefault();
-        callback();
-      }
-    }
-
-    window.addEventListener("keydown", handler);
-    return () => {
-      window.removeEventListener("keydown", handler);
-    };
-  }, [key]);
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/hooks/use-local-storage.ts b/apps/studio/components/interfaces/DataTableDemo/hooks/use-local-storage.ts
deleted file mode 100644
index 08e1045fa26..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/hooks/use-local-storage.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import { useEffect, useState, useCallback } from "react";
-
-function getItemFromLocalStorage(key: string) {
-  const item = window?.localStorage.getItem(key);
-  if (item) return JSON.parse(item);
-
-  return null;
-}
-
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T
-): [T, React.Dispatch<React.SetStateAction<T>>] {
-  const [storedValue, setStoredValue] = useState(initialValue);
-
-  useEffect(() => {
-    // initialize
-    if (typeof window !== "undefined") {
-      const stored = getItemFromLocalStorage(key);
-      if (stored !== null) setStoredValue(stored);
-    }
-  }, [key]);
-
-  const setValue: React.Dispatch<React.SetStateAction<T>> = useCallback(
-    (value) => {
-      if (value instanceof Function) {
-        setStoredValue((prev: T) => {
-          const newValue = value(prev);
-          // Save to localStorage
-          window.localStorage.setItem(key, JSON.stringify(newValue));
-          return newValue;
-        });
-      } else {
-        setStoredValue(value);
-        // Save to localStorage
-        window.localStorage.setItem(key, JSON.stringify(value));
-      }
-      return setStoredValue;
-    },
-    [key, setStoredValue]
-  );
-
-  return [storedValue, setValue];
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/hooks/use-media-query.ts b/apps/studio/components/interfaces/DataTableDemo/hooks/use-media-query.ts
deleted file mode 100644
index 95e552cd560..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/hooks/use-media-query.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-export function useMediaQuery(query: string) {
-  const [value, setValue] = React.useState(false)
-
-  React.useEffect(() => {
-    function onChange(event: MediaQueryListEvent) {
-      setValue(event.matches)
-    }
-
-    const result = matchMedia(query)
-    result.addEventListener("change", onChange)
-    setValue(result.matches)
-
-    return () => result.removeEventListener("change", onChange)
-  }, [query])
-
-  return value
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/README.md b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/README.md
deleted file mode 100644
index 6e0aaa8e3bb..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-### Non-standard components
-
-All components within the `_components` folder are non-standard and are specific for the `/infinite` example.
-
-The goal is to create a collection of components that can be used in any project. The components will be mostly used for very specific use cases either in the `filterFields[number].component` (see `constants.tsx`), `columns[0].cell` (see `columns.tsx`) or in the `DataTableSheetDetails` (`popover-percentile.tsx`).
-
-The components are not part of the `@/components` folder because they are not generic enough to be used in other projects.
-
-For more generic components, we use the `@/components/custom` and `@/components/data-table/{data-table-column}` folders.
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/hover-card-timestamp.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/hover-card-timestamp.tsx
deleted file mode 100644
index 76532b0cb78..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/hover-card-timestamp.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { format } from 'date-fns'
-
-import { cn } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
-
-interface HoverCardTimestampProps {
-  date: Date
-  className?: string
-}
-
-export function HoverCardTimestamp({ date, className }: HoverCardTimestampProps) {
-  return (
-    <div className="relative w-fit">
-      <TimestampInfo utcTimestamp={date.getTime()}>
-        <div className={cn('font-mono flex gap-1.5', className)}>
-          <span className="text-foreground/50 uppercase">{format(date, 'MMM')}</span>
-          <span className="text-foreground/50 uppercase"> {format(date, 'dd')} </span>
-          <span>
-            {format(date, 'HH:mm:ss')}
-            <span className="text-foreground/50">.{format(date, 'SS')}</span>
-          </span>
-        </div>
-      </TimestampInfo>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/key-value-table.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/key-value-table.tsx
deleted file mode 100644
index 02acd544b13..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/key-value-table.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-} from "@/components/custom/table";
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
-import { Check } from "lucide-react";
-import { Copy } from "lucide-react";
-
-interface KeyValueTableProps {
-  data: Record<string, string>;
-}
-export function KeyValueTable({ data }: KeyValueTableProps) {
-  return (
-    <div className="mx-auto max-w-lg">
-      <div className="overflow-hidden rounded-lg border border-border bg-background">
-        <Table>
-          <TableBody>
-            {Object.entries(data).map(([key, value]) => {
-              return <RowAction key={key} label={key} value={value} />;
-            })}
-          </TableBody>
-        </Table>
-      </div>
-    </div>
-  );
-}
-
-function RowAction({ label, value }: { label: string; value: string }) {
-  const { copy, isCopied } = useCopyToClipboard();
-
-  return (
-    <TableRow
-      className="group *:border-border hover:bg-transparent [&>:not(:last-child)]:border-r text-left"
-      onClick={(e) => {
-        e.stopPropagation();
-        copy(value);
-      }}
-    >
-      <TableCell className="bg-muted/50 py-1 font-medium font-mono">
-        {label}
-      </TableCell>
-      <TableCell className="relative py-1 font-mono">
-        {value}
-        <div className="absolute top-1.5 right-1.5 invisible group-hover:visible backdrop-blur-sm bg-background p-0.5 rounded-sm border border-border">
-          {!isCopied ? (
-            <Copy className="h-3 w-3" />
-          ) : (
-            <Check className="h-3 w-3" />
-          )}
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-button.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-button.tsx
deleted file mode 100644
index b39fcce8147..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-button.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { Button } from 'ui'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { cn } from 'ui'
-import type { FetchPreviousPageOptions } from '@tanstack/react-query'
-import { CirclePause, CirclePlay } from 'lucide-react'
-import { useQueryStates } from 'nuqs'
-import * as React from 'react'
-import { searchParamsParser } from '../search-params'
-
-const REFRESH_INTERVAL = 10_000
-
-interface LiveButtonProps {
-  fetchPreviousPage?: (options?: FetchPreviousPageOptions | undefined) => Promise<unknown>
-}
-
-export function LiveButton({ fetchPreviousPage }: LiveButtonProps) {
-  const [{ live, date, sort }, setSearch] = useQueryStates(searchParamsParser)
-  const { table } = useDataTable()
-  useHotKey(handleClick, 'j')
-
-  React.useEffect(() => {
-    let timeoutId: NodeJS.Timeout
-
-    async function fetchData() {
-      if (live) {
-        await fetchPreviousPage?.()
-        timeoutId = setTimeout(fetchData, REFRESH_INTERVAL)
-      } else {
-        clearTimeout(timeoutId)
-      }
-    }
-
-    fetchData()
-
-    return () => {
-      clearTimeout(timeoutId)
-    }
-  }, [live, fetchPreviousPage])
-
-  // REMINDER: make sure to reset live when date is set
-  // TODO: test properly
-  React.useEffect(() => {
-    if ((date || sort) && live) {
-      setSearch((prev) => ({ ...prev, live: null }))
-    }
-  }, [date, sort])
-
-  function handleClick() {
-    setSearch((prev) => ({
-      ...prev,
-      live: !prev.live,
-      date: null,
-      sort: null,
-    }))
-    table.getColumn('date')?.setFilterValue(undefined)
-    table.resetSorting()
-  }
-
-  return (
-    <Button
-      className={cn(live && 'border-info text-info hover:text-info')}
-      onClick={handleClick}
-      type={live ? 'primary' : 'default'}
-      size="small"
-      icon={
-        live ? <CirclePause className="mr-2 h-4 w-4" /> : <CirclePlay className="mr-2 h-4 w-4" />
-      }
-    >
-      Live
-    </Button>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-row.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-row.tsx
deleted file mode 100644
index 8ccadc0c9fe..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/live-row.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { TableCell, TableRow } from 'ui'
-import { DataTableColumnLevelIndicator } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator'
-import { columns } from '../columns'
-
-export function LiveRow() {
-  return (
-    <TableRow>
-      <TableCell className="w-[--header-level-size] min-w-[--header-level-size] max-w-[--header-level-size] border-b border-l border-r border-t border-info border-r-info/50">
-        <DataTableColumnLevelIndicator value="info" />
-      </TableCell>
-      <TableCell
-        colSpan={columns.length - 1}
-        className="border-b border-r border-t border-info font-medium text-info"
-      >
-        Live Mode
-      </TableCell>
-    </TableRow>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/popover-percentile.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/popover-percentile.tsx
deleted file mode 100644
index f75b810da5c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/popover-percentile.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-import { ColumnSchema } from '../schema'
-import { FunctionSquare } from 'lucide-react'
-import * as React from 'react'
-import { cn } from 'ui'
-import {
-  formatCompactNumber,
-  formatMilliseconds,
-} from 'components/interfaces/DataTableDemo/lib/format'
-import {
-  Percentile,
-  getPercentileColor,
-} from 'components/interfaces/DataTableDemo/lib/request/percentile'
-import {
-  Popover_Shadcn_ as Popover,
-  PopoverContent_Shadcn_ as PopoverContent,
-  PopoverTrigger_Shadcn_ as PopoverTrigger,
-} from 'ui'
-
-interface PopoverPercentileProps {
-  data?: ColumnSchema
-  percentiles?: Record<Percentile, number>
-  filterRows: number
-  className?: string
-}
-
-export function PopoverPercentile({
-  data,
-  percentiles,
-  filterRows,
-  className,
-}: PopoverPercentileProps) {
-  let percentileArray = percentiles
-    ? Object.entries(percentiles).map(([percentile, latency]) => [parseInt(percentile), latency])
-    : []
-
-  data?.percentile ? percentileArray.push([data.percentile, data.latency]) : null
-  percentileArray.sort((a, b) => a[0] - b[0])
-
-  return (
-    <Popover>
-      <PopoverTrigger
-        className={cn(
-          'font-mono flex items-center gap-1 rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-          className
-        )}
-      >
-        <FunctionSquare
-          className={cn(
-            'h-4 w-4',
-            data?.percentile ? getPercentileColor(data.percentile).text : 'text-muted-foreground'
-          )}
-        />
-        {!data?.percentile ? 'N/A' : `P${Math.round(data.percentile)}`}
-      </PopoverTrigger>
-      <PopoverContent className="w-40 flex flex-col gap-2 p-2 text-xs" align="end">
-        <p>
-          Calculated from filtered result of{' '}
-          <span className="font-medium font-mono">{formatCompactNumber(filterRows)}</span> rows.
-        </p>
-        <div className="flex flex-col gap-0.5">
-          {percentileArray.map(([key, value]) => {
-            const active = data?.percentile && data.percentile === key && value === data.latency
-            return (
-              <div
-                key={`${key}-${value}`}
-                className={cn(
-                  'flex items-center justify-between px-1 py-0.5 rounded-md',
-                  active && data.percentile
-                    ? `border ${getPercentileColor(data.percentile).border}`
-                    : null
-                )}
-              >
-                <div
-                  className={cn('font-mono', !active && 'text-muted-foreground')}
-                >{`P${Math.round(key)}`}</div>
-                <div className="font-mono">
-                  {formatMilliseconds(Math.round(value))}
-                  <span className="text-muted-foreground">ms</span>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/refresh-button.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/refresh-button.tsx
deleted file mode 100644
index b8e823d6304..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/refresh-button.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Button } from 'ui'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { LoaderCircle, RefreshCcw } from 'lucide-react'
-
-interface RefreshButtonProps {
-  onClick: () => void
-}
-
-export function RefreshButton({ onClick }: RefreshButtonProps) {
-  const { isLoading } = useDataTable()
-
-  return (
-    <Button
-      type="outline"
-      size="small"
-      disabled={isLoading}
-      onClick={onClick}
-      className="h-9 w-9 px-0"
-    >
-      {isLoading ? (
-        <LoaderCircle className="h-4 w-4 animate-spin" />
-      ) : (
-        <RefreshCcw className="h-4 w-4" />
-      )}
-    </Button>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/sheet-timing-phases.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/sheet-timing-phases.tsx
deleted file mode 100644
index d94d4c8332f..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/sheet-timing-phases.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { TimingPhase, timingPhases } from 'components/interfaces/DataTableDemo/lib/request/timing'
-import {
-  getTimingColor,
-  getTimingLabel,
-  getTimingPercentage,
-} from 'components/interfaces/DataTableDemo/lib/request/timing'
-import { cn } from 'ui'
-import { formatMilliseconds } from 'components/interfaces/DataTableDemo/lib/format'
-
-export function SheetTimingPhases({
-  latency,
-  timing,
-  className,
-}: {
-  latency: number
-  timing: Record<TimingPhase, number>
-  className?: string
-}) {
-  const timingPercentage = getTimingPercentage(timing, latency)
-  return (
-    <div className={cn('space-y-1 w-full text-left', className)}>
-      {timingPhases.map((phase) => (
-        <div key={phase} className="grid grid-cols-3 gap-2 text-xs justify-between items-center">
-          <div className="text-foreground uppercase truncate font-mono">
-            {getTimingLabel(phase)}
-          </div>
-          <div className="flex gap-2 col-span-2">
-            <div className="font-mono text-muted-foreground mr-8">{timingPercentage[phase]}</div>
-            <div className="flex flex-1 gap-2 items-center justify-end">
-              <div className="font-mono">
-                {formatMilliseconds(timing[phase])}
-                <span className="text-muted-foreground">ms</span>
-              </div>
-            </div>
-            <div
-              className={cn(getTimingColor(phase), 'h-4')}
-              style={{ width: `${(timing[phase] / latency) * 100}%` }}
-            />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/socials-footer.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/_components/socials-footer.tsx
deleted file mode 100644
index 4f2d9da1872..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/_components/socials-footer.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Kbd } from 'components/interfaces/DataTableDemo/components/custom/kbd'
-import { Link } from 'components/interfaces/DataTableDemo/components/custom/link'
-import { Bluesky } from 'components/interfaces/DataTableDemo/components/icons/bluesky'
-import { Github } from 'components/interfaces/DataTableDemo/components/icons/github'
-import { X } from 'components/interfaces/DataTableDemo/components/icons/x'
-import { ModeToggle } from 'components/interfaces/DataTableDemo/components/theme/toggle-mode'
-import { Button } from 'ui'
-import {
-  Popover_Shadcn_ as Popover,
-  PopoverContent_Shadcn_ as PopoverContent,
-  PopoverTrigger_Shadcn_ as PopoverTrigger,
-} from 'ui'
-import { Book, Command } from 'lucide-react'
-import NextLink from 'next/link'
-
-export function SocialsFooter() {
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="grid w-full grid-cols-3 items-center justify-center gap-2 p-1 md:grid-cols-6">
-        <Button type="text" size="small" className="h-8 w-8 px-0" asChild>
-          <NextLink href="https://github.com/openstatusHQ/data-table-filters">
-            <Github className="h-4 w-4" />
-          </NextLink>
-        </Button>
-        <Button type="text" size="small" className="h-8 w-8 px-0" asChild>
-          <NextLink href="https://twitter.com/openstatusHQ">
-            <X className="h-4 w-4" />
-          </NextLink>
-        </Button>
-        <Button type="text" size="small" className="h-8 w-8 px-0" asChild>
-          <NextLink href="https://bsky.app/profile/openstatus.dev">
-            <Bluesky className="h-4 w-4" />
-          </NextLink>
-        </Button>
-        <ModeToggle className="h-8 w-8 [&>svg]:h-4 [&>svg]:w-4" />
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button type="text" size="small" className="h-8 w-8 px-0">
-              <Command className="h-4 w-4" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto px-2 py-1">
-            <HotkeyOverview />
-          </PopoverContent>
-        </Popover>
-        <Button type="text" size="small" className="h-8 w-8 px-0" asChild>
-          <NextLink href="/guide">
-            <Book className="h-4 w-4" />
-          </NextLink>
-        </Button>
-      </div>
-      <p className="text-center text-xs text-muted-foreground">
-        Powered by{' '}
-        <Link href="https://openstatus.dev" hideArrow>
-          OpenStatus
-        </Link>
-      </p>
-      <p className="text-center text-[10px] text-muted-foreground">
-        The project is in active development. For feedback, please{' '}
-        <Link
-          href="https://github.com/openstatusHQ/data-table-filters/issues/new"
-          className="text-muted-foreground"
-          hideArrow
-        >
-          open an issue
-        </Link>{' '}
-        on GitHub.
-      </p>
-    </div>
-  )
-}
-
-const hotkeys = [
-  { key: 'K', description: 'Toggle command input' },
-  { key: 'B', description: 'Toggle sidebar controls' },
-  {
-    key: 'U',
-    description: 'Undo column state (order, visibility)',
-  },
-  {
-    key: 'J',
-    description: 'Toggle live mode',
-  },
-  { key: 'Esc', description: 'Reset table filters' },
-  {
-    key: '.',
-    description: 'Reset element focus to start',
-  },
-]
-
-function HotkeyOverview() {
-  return (
-    <ul className="divide-y">
-      {hotkeys.map((props) => {
-        return (
-          <li key={props.key} className="grid grid-cols-4 gap-2 py-0.5">
-            <span className="col-span-1 text-left">
-              <Kbd className="ml-1">
-                <span className="mr-1">⌘</span>
-                <span>{props.key}</span>
-              </Kbd>
-            </span>
-            <span className="col-span-3 place-content-center text-xs text-muted-foreground">
-              {props.description}
-            </span>
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/client.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/client.tsx
deleted file mode 100644
index b8db7b429c1..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/client.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-'use client'
-
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { getLevelRowClassName } from 'components/interfaces/DataTableDemo/lib/request/level'
-import { cn } from 'ui'
-import { useInfiniteQuery } from '@tanstack/react-query'
-import type { Table as TTable } from '@tanstack/react-table'
-import { useQueryState, useQueryStates } from 'nuqs'
-import * as React from 'react'
-import { LiveRow } from './_components/live-row'
-import { columns } from './columns'
-import { filterFields as defaultFilterFields, sheetFields } from './constants'
-import { DataTableInfinite } from './data-table-infinite'
-import { dataOptions } from './query-options'
-import type { FacetMetadataSchema } from './schema'
-import { searchParamsParser } from './search-params'
-import { TimelineChart } from './timeline-chart'
-
-export function Client() {
-  const [search] = useQueryStates(searchParamsParser)
-  const { data, isFetching, isLoading, fetchNextPage, hasNextPage, fetchPreviousPage, refetch } =
-    useInfiniteQuery(dataOptions(search))
-  useResetFocus()
-
-  const flatData = React.useMemo(
-    () => data?.pages?.flatMap((page) => page.data ?? []) ?? [],
-    [data?.pages]
-  )
-
-  const liveMode = useLiveMode(flatData)
-
-  // REMINDER: meta data is always the same for all pages as filters do not change(!)
-  const lastPage = data?.pages?.[data?.pages.length - 1]
-  const totalDBRowCount = lastPage?.meta?.totalRowCount
-  const filterDBRowCount = lastPage?.meta?.filterRowCount
-  const metadata = lastPage?.meta?.metadata
-  const chartData = lastPage?.meta?.chartData
-  const facets = lastPage?.meta?.facets
-  const totalFetched = flatData?.length
-
-  const { sort, start, size, uuid, cursor, direction, live, ...filter } = search
-
-  // REMINDER: this is currently needed for the cmdk search
-  // TODO: auto search via API when the user changes the filter instead of hardcoded
-  const filterFields = React.useMemo(() => {
-    return defaultFilterFields.map((field) => {
-      const facetsField = facets?.[field.value]
-      if (!facetsField) return field
-      if (field.options && field.options.length > 0) return field
-
-      // REMINDER: if no options are set, we need to set them via the API
-      const options = facetsField.rows.map(({ value }) => {
-        return {
-          label: `${value}`,
-          value,
-        }
-      })
-
-      if (field.type === 'slider') {
-        return {
-          ...field,
-          min: facetsField.min ?? field.min,
-          max: facetsField.max ?? field.max,
-          options,
-        }
-      }
-
-      return { ...field, options }
-    })
-  }, [facets])
-
-  // --- DEBUG: Check props before passing to DataTableInfinite ---
-  console.log('>>> [Client] flatData length:', flatData?.length)
-  console.log('>>> [Client] filterDBRowCount:', filterDBRowCount)
-  console.log('>>> [Client] data object:', data) // Log the raw react-query data
-  // --- END DEBUG ---
-
-  return (
-    <>
-      {/* TODO: move up to client component */}
-      {/* <TimelineChart data={chartData ?? []} className="-mb-2" columnId={'date'} /> */}
-      <DataTableInfinite
-        columns={columns}
-        data={flatData}
-        totalRows={totalDBRowCount}
-        filterRows={filterDBRowCount}
-        totalRowsFetched={totalFetched}
-        defaultColumnFilters={Object.entries(filter)
-          .map(([key, value]) => ({
-            id: key,
-            value,
-          }))
-          .filter(({ value }) => value ?? undefined)}
-        defaultColumnSorting={sort ? [sort] : undefined}
-        defaultRowSelection={search.uuid ? { [search.uuid]: true } : undefined}
-        // FIXME: make it configurable - TODO: use `columnHidden: boolean` in `filterFields`
-        defaultColumnVisibility={{
-          uuid: false,
-          'timing.dns': false,
-          'timing.connection': false,
-          'timing.tls': false,
-          'timing.ttfb': false,
-          'timing.transfer': false,
-        }}
-        meta={metadata}
-        filterFields={filterFields}
-        sheetFields={sheetFields}
-        isFetching={isFetching}
-        isLoading={isLoading}
-        fetchNextPage={fetchNextPage}
-        hasNextPage={hasNextPage}
-        fetchPreviousPage={fetchPreviousPage}
-        refetch={refetch}
-        chartData={chartData}
-        chartDataColumnId="date"
-        getRowClassName={(row) => {
-          const rowTimestamp = row.original.date.getTime()
-          const isPast = rowTimestamp <= (liveMode.timestamp || -1)
-          const levelClassName = getLevelRowClassName(row.original.level)
-          return cn(levelClassName, isPast ? 'opacity-50' : 'opacity-100')
-        }}
-        getRowId={(row) => row.uuid}
-        getFacetedUniqueValues={getFacetedUniqueValues(facets)}
-        getFacetedMinMaxValues={getFacetedMinMaxValues(facets)}
-        renderLiveRow={(props) => {
-          if (!liveMode.timestamp) return null
-          if (props?.row.original.uuid !== liveMode?.row?.uuid) return null
-          return <LiveRow />
-        }}
-        renderSheetTitle={(props) => props.row?.original.pathname}
-        searchParamsParser={searchParamsParser}
-      />
-    </>
-  )
-}
-
-function useResetFocus() {
-  useHotKey(() => {
-    // FIXME: some dedicated div[tabindex="0"] do not auto-unblur (e.g. the DataTableFilterResetButton)
-    // REMINDER: we cannot just document.activeElement?.blur(); as the next tab will focus the next element in line,
-    // which is not what we want. We want to reset entirely.
-    document.body.setAttribute('tabindex', '0')
-    document.body.focus()
-    document.body.removeAttribute('tabindex')
-  }, '.')
-}
-
-// TODO: make a BaseObject (incl. date and uuid e.g. for every upcoming branch of infinite table)
-export function useLiveMode<TData extends { date: Date }>(data: TData[]) {
-  const [live] = useQueryState('live', searchParamsParser.live)
-  // REMINDER: used to capture the live mode on timestamp
-  const liveTimestamp = React.useRef<number | undefined>(live ? new Date().getTime() : undefined)
-
-  React.useEffect(() => {
-    if (live) liveTimestamp.current = new Date().getTime()
-    else liveTimestamp.current = undefined
-  }, [live])
-
-  const anchorRow = React.useMemo(() => {
-    if (!live) return undefined
-
-    const item = data.find((item) => {
-      // return first item that is there if not liveTimestamp
-      if (!liveTimestamp.current) return true
-      // return first item that is after the liveTimestamp
-      if (item.date.getTime() > liveTimestamp.current) return false
-      return true
-      // return first item if no liveTimestamp
-    })
-
-    return item
-  }, [live, data])
-
-  return { row: anchorRow, timestamp: liveTimestamp.current }
-}
-
-export function getFacetedUniqueValues<TData>(facets?: Record<string, FacetMetadataSchema>) {
-  return (_: TTable<TData>, columnId: string): Map<string, number> => {
-    return new Map(facets?.[columnId]?.rows?.map(({ value, total }) => [value, total]) || [])
-  }
-}
-
-export function getFacetedMinMaxValues<TData>(facets?: Record<string, FacetMetadataSchema>) {
-  return (_: TTable<TData>, columnId: string): [number, number] | undefined => {
-    const min = facets?.[columnId]?.min
-    const max = facets?.[columnId]?.max
-    if (typeof min === 'number' && typeof max === 'number') return [min, max]
-    if (typeof min === 'number') return [min, min]
-    if (typeof max === 'number') return [max, max]
-    return undefined
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/columns.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/columns.tsx
deleted file mode 100644
index a22bd9ee21c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/columns.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-'use client'
-
-import { TextWithTooltip } from 'components/interfaces/DataTableDemo/components/custom/text-with-tooltip'
-import { DataTableColumnHeader } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column-header'
-import { DataTableColumnLatency } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency'
-import { DataTableColumnLevelIndicator } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator'
-import { DataTableColumnRegion } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region'
-import { DataTableColumnStatusCode } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code'
-import { HoverCard, HoverCardContent, HoverCardTrigger } from 'ui'
-import {
-  getTimingColor,
-  getTimingLabel,
-  getTimingPercentage,
-  timingPhases,
-} from 'components/interfaces/DataTableDemo/lib/request/timing'
-import { cn } from 'ui'
-import { HoverCardPortal } from '@radix-ui/react-hover-card'
-import type { ColumnDef } from '@tanstack/react-table'
-import { Minus } from 'lucide-react'
-import { HoverCardTimestamp } from './_components/hover-card-timestamp'
-import type { ColumnSchema } from './schema'
-
-export const columns: ColumnDef<ColumnSchema>[] = [
-  {
-    accessorKey: 'level',
-    header: '',
-    cell: ({ row }) => {
-      const level = row.getValue<ColumnSchema['level']>('level')
-      return <DataTableColumnLevelIndicator value={level} />
-    },
-    enableHiding: false,
-    enableResizing: false,
-    filterFn: 'arrSome',
-    size: 27,
-    minSize: 27,
-    maxSize: 27,
-    meta: {
-      headerClassName:
-        'w-[--header-level-size] max-w-[--header-level-size] min-w-[--header-level-size]',
-      cellClassName: 'w-[--col-level-size] max-w-[--col-level-size] min-w-[--col-level-size]',
-    },
-  },
-  {
-    accessorKey: 'date',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
-    cell: ({ row }) => {
-      const date = new Date(row.getValue<ColumnSchema['date']>('date'))
-      return <HoverCardTimestamp date={date} />
-    },
-    filterFn: 'inDateRange',
-    enableResizing: false,
-    size: 200,
-    minSize: 200,
-    meta: {
-      headerClassName:
-        'w-[--header-date-size] max-w-[--header-date-size] min-w-[--header-date-size]',
-      cellClassName:
-        'font-mono w-[--col-date-size] max-w-[--col-date-size] min-w-[--col-date-size]',
-    },
-  },
-  {
-    id: 'uuid',
-    accessorKey: 'uuid',
-    header: 'Request Id',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['uuid']>('uuid')
-      return <TextWithTooltip text={value} />
-    },
-    size: 130,
-    minSize: 130,
-    meta: {
-      label: 'Request Id',
-      cellClassName:
-        'font-mono w-[--col-uuid-size] max-w-[--col-uuid-size] min-w-[--col-uuid-size]',
-      headerClassName:
-        'min-w-[--header-uuid-size] w-[--header-uuid-size] max-w-[--header-uuid-size]',
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['status']>('status')
-      return <DataTableColumnStatusCode value={value} />
-    },
-    filterFn: 'arrSome',
-    enableResizing: false,
-    size: 60,
-    minSize: 60,
-    meta: {
-      headerClassName:
-        'w-[--header-status-size] max-w-[--header-status-size] min-w-[--header-status-size]',
-      cellClassName:
-        'font-mono w-[--col-status-size] max-w-[--col-status-size] min-w-[--col-status-size]',
-    },
-  },
-  {
-    // TODO: make it a type of MethodSchema!
-    accessorKey: 'method',
-    header: 'Method',
-    filterFn: 'arrIncludesSome',
-    enableResizing: false,
-    size: 69,
-    minSize: 69,
-    meta: {
-      cellClassName:
-        'font-mono text-muted-foreground w-[--col-method-size] max-w-[--col-method-size] min-w-[--col-method-size]',
-      headerClassName:
-        'w-[--header-method-size] max-w-[--header-method-size] min-w-[--header-method-size]',
-    },
-  },
-  {
-    accessorKey: 'host',
-    header: 'Host',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['host']>('host')
-      return <TextWithTooltip text={value} />
-    },
-    size: 125,
-    minSize: 125,
-    meta: {
-      cellClassName: 'font-mono w-[--col-host-size] max-w-[--col-host-size]',
-      headerClassName: 'min-w-[--header-host-size] w-[--header-host-size]',
-    },
-  },
-  {
-    accessorKey: 'pathname',
-    header: 'Pathname',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['pathname']>('pathname')
-      return <TextWithTooltip text={value} />
-    },
-    size: 130,
-    minSize: 130,
-    meta: {
-      cellClassName: 'font-mono w-[--col-pathname-size] max-w-[--col-pathname-size]',
-      headerClassName: 'min-w-[--header-pathname-size] w-[--header-pathname-size]',
-    },
-  },
-  {
-    accessorKey: 'latency',
-    // TODO: check if we can right align the table header/cell (makes is easier to read)
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Latency" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['latency']>('latency')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      headerClassName:
-        'w-[--header-latency-size] max-w-[--header-latency-size] min-w-[--header-latency-size]',
-      cellClassName:
-        'font-mono w-[--col-latency-size] max-w-[--col-latency-size] min-w-[--col-latency-size]',
-    },
-  },
-  {
-    accessorKey: 'regions',
-    header: 'Region',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['regions']>('regions')
-      if (Array.isArray(value)) {
-        if (value.length > 1) {
-          return <div className="text-muted-foreground">{value.join(', ')}</div>
-        } else {
-          return (
-            <div className="whitespace-nowrap">
-              <DataTableColumnRegion value={value[0]} />
-            </div>
-          )
-        }
-      }
-      if (typeof value === 'string') {
-        return <DataTableColumnRegion value={value} />
-      }
-      return <Minus className="h-4 w-4 text-muted-foreground/50" />
-    },
-    filterFn: 'arrIncludesSome',
-    enableResizing: false,
-    size: 163,
-    minSize: 163,
-    meta: {
-      headerClassName:
-        'w-[--header-regions-size] max-w-[--header-regions-size] min-w-[--header-regions-size]',
-      cellClassName:
-        'font-mono w-[--col-regions-size] max-w-[--col-regions-size] min-w-[--col-regions-size]',
-    },
-  },
-  {
-    accessorKey: 'timing',
-    header: () => <div className="whitespace-nowrap">Timing Phases</div>,
-    cell: ({ row }) => {
-      const timing = {
-        'timing.dns': row.getValue<ColumnSchema['timing.dns']>('timing.dns'),
-        'timing.connection': row.getValue<ColumnSchema['timing.connection']>('timing.connection'),
-        'timing.tls': row.getValue<ColumnSchema['timing.tls']>('timing.tls'),
-        'timing.ttfb': row.getValue<ColumnSchema['timing.ttfb']>('timing.ttfb'),
-        'timing.transfer': row.getValue<ColumnSchema['timing.transfer']>('timing.transfer'),
-      }
-      const latency = row.getValue<ColumnSchema['latency']>('latency')
-      const percentage = getTimingPercentage(timing, latency)
-      // TODO: create a separate component for this in _components
-      return (
-        <HoverCard openDelay={50} closeDelay={50}>
-          <HoverCardTrigger
-            className="opacity-70 hover:opacity-100 data-[state=open]:opacity-100"
-            asChild
-          >
-            <div className="flex">
-              {Object.entries(timing).map(([key, value]) => (
-                <div
-                  key={key}
-                  className={cn(getTimingColor(key as keyof typeof timing), 'h-4')}
-                  style={{ width: `${(value / latency) * 100}%` }}
-                />
-              ))}
-            </div>
-          </HoverCardTrigger>
-          {/* REMINDER: allows us to port the content to the document.body, which is helpful when using opacity-50 on the row element */}
-          <HoverCardPortal>
-            <HoverCardContent side="bottom" align="end" className="z-10 w-auto p-2">
-              <div className="flex flex-col gap-1">
-                {timingPhases.map((phase) => {
-                  const color = getTimingColor(phase)
-                  const percentageValue = percentage[phase]
-                  return (
-                    <div key={phase} className="grid grid-cols-2 gap-4 text-xs">
-                      <div className="flex items-center gap-2">
-                        <div className={cn(color, 'h-2 w-2 rounded-full')} />
-                        <div className="font-mono uppercase text-accent-foreground">
-                          {getTimingLabel(phase)}
-                        </div>
-                      </div>
-                      <div className="flex items-center justify-between gap-4">
-                        <div className="font-mono text-muted-foreground">{percentageValue}</div>
-                        <div className="font-mono">
-                          {new Intl.NumberFormat('en-US', {
-                            maximumFractionDigits: 3,
-                          }).format(timing[phase])}
-                          <span className="text-muted-foreground">ms</span>
-                        </div>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </HoverCardContent>
-          </HoverCardPortal>
-        </HoverCard>
-      )
-    },
-    enableResizing: false,
-    size: 130,
-    minSize: 130,
-    meta: {
-      label: 'Timing Phases',
-      headerClassName:
-        'w-[--header-timing-size] max-w-[--header-timing-size] min-w-[--header-timing-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-size] max-w-[--col-timing-size] min-w-[--col-timing-size]',
-    },
-  },
-  {
-    id: 'timing.dns',
-    accessorFn: (row) => row['timing.dns'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="DNS" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.dns']>('timing.dns')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'DNS',
-      headerClassName:
-        'w-[--header-timing-dns-size] max-w-[--header-timing-dns-size] min-w-[--header-timing-dns-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-dns-size] max-w-[--col-timing-dns-size] min-w-[--col-timing-dns-size]',
-    },
-  },
-  {
-    id: 'timing.connection',
-    accessorFn: (row) => row['timing.connection'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Connection" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.connection']>('timing.connection')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'Connection',
-      headerClassName:
-        'w-[--header-timing-connection-size] max-w-[--header-timing-connection-size] min-w-[--header-timing-connection-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-connection-size] max-w-[--col-timing-connection-size] min-w-[--col-timing-connection-size]',
-    },
-  },
-  {
-    id: 'timing.tls',
-    accessorFn: (row) => row['timing.tls'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="TLS" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.tls']>('timing.tls')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'TLS',
-      headerClassName:
-        'w-[--header-timing-tls-size] max-w-[--header-timing-tls-size] min-w-[--header-timing-tls-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-tls-size] max-w-[--col-timing-tls-size] min-w-[--col-timing-tls-size]',
-    },
-  },
-  {
-    id: 'timing.ttfb',
-    accessorFn: (row) => row['timing.ttfb'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="TTFB" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.ttfb']>('timing.ttfb')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'TTFB',
-      headerClassName:
-        'w-[--header-timing-ttfb-size] max-w-[--header-timing-ttfb-size] min-w-[--header-timing-ttfb-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-ttfb-size] max-w-[--col-timing-ttfb-size] min-w-[--col-timing-ttfb-size]',
-    },
-  },
-  {
-    id: 'timing.transfer',
-    accessorFn: (row) => row['timing.transfer'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Transfer" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.transfer']>('timing.transfer')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'Transfer',
-      headerClassName:
-        'w-[--header-timing-transfer-size] max-w-[--header-timing-transfer-size] min-w-[--header-timing-transfer-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-transfer-size] max-w-[--col-timing-transfer-size] min-w-[--col-timing-transfer-size]',
-    },
-  },
-]
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/constants.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/constants.tsx
deleted file mode 100644
index ad2d3fb1ef6..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/constants.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-'use client'
-
-import { CopyToClipboardContainer } from 'components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container'
-import { KVTabs } from 'components/interfaces/DataTableDemo/components/custom/kv-tabs'
-import { DataTableColumnRegion } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region'
-import type {
-  DataTableFilterField,
-  Option,
-  SheetField,
-} from 'components/interfaces/DataTableDemo/components/data-table/types'
-import { LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-import { METHODS } from 'components/interfaces/DataTableDemo/constants/method'
-import { REGIONS } from 'components/interfaces/DataTableDemo/constants/region'
-import { formatMilliseconds } from 'components/interfaces/DataTableDemo/lib/format'
-import { getLevelColor, getLevelLabel } from 'components/interfaces/DataTableDemo/lib/request/level'
-import { getStatusColor } from 'components/interfaces/DataTableDemo/lib/request/status-code'
-import { cn } from 'ui'
-import { format } from 'date-fns'
-import { PopoverPercentile } from './_components/popover-percentile'
-import { SheetTimingPhases } from './_components/sheet-timing-phases'
-import type { LogsMeta } from './query-options'
-import { type ColumnSchema } from './schema'
-
-// instead of filterFields, maybe just 'fields' with a filterDisabled prop?
-// that way, we could have 'message' or 'headers' field with label and value as well as type!
-export const filterFields = [
-  {
-    label: 'Time Range',
-    value: 'date',
-    type: 'timerange',
-    defaultOpen: true,
-    commandDisabled: true,
-  },
-  {
-    label: 'Level',
-    value: 'level',
-    type: 'checkbox',
-    defaultOpen: true,
-    options: LEVELS.map((level) => ({ label: level, value: level })),
-    component: (props: Option) => {
-      // TODO: type `Option` with `options` values via Generics
-      const value = props.value as (typeof LEVELS)[number]
-      return (
-        <div className="flex w-full max-w-28 items-center justify-between gap-2 font-mono">
-          <span className="capitalize text-foreground/70 group-hover:text-accent-foreground">
-            {props.label}
-          </span>
-          <div className="flex items-center gap-2">
-            <div className={cn('h-2.5 w-2.5 rounded-[2px]', getLevelColor(value).bg)} />
-            <span className="text-xs text-muted-foreground/70">{getLevelLabel(value)}</span>
-          </div>
-        </div>
-      )
-    },
-  },
-  {
-    label: 'Host',
-    value: 'host',
-    type: 'input',
-  },
-  {
-    label: 'Pathname',
-    value: 'pathname',
-    type: 'input',
-  },
-  {
-    label: 'Status Code',
-    value: 'status',
-    type: 'checkbox',
-    options: [
-      { label: '200', value: 200 },
-      { label: '400', value: 400 },
-      { label: '404', value: 404 },
-      { label: '500', value: 500 },
-    ], // REMINDER: this is a placeholder to set the type in the client.tsx
-    component: (props: Option) => {
-      if (typeof props.value === 'boolean') return null
-      if (typeof props.value === 'undefined') return null
-      if (typeof props.value === 'string') return null
-      return (
-        <span className={cn('font-mono', getStatusColor(props.value).text)}>{props.value}</span>
-      )
-    },
-  },
-  {
-    label: 'Method',
-    value: 'method',
-    type: 'checkbox',
-    options: METHODS.map((region) => ({ label: region, value: region })),
-    component: (props: Option) => {
-      return <span className="font-mono">{props.value}</span>
-    },
-  },
-  {
-    label: 'Regions',
-    value: 'regions',
-    type: 'checkbox',
-    options: REGIONS.map((region) => ({ label: region, value: region })),
-    component: (props: Option) => {
-      return <span className="font-mono">{props.value}</span>
-    },
-  },
-  {
-    label: 'Latency',
-    value: 'latency',
-    type: 'slider',
-    min: 0,
-    max: 5000,
-  },
-  {
-    label: 'DNS',
-    value: 'timing.dns',
-    type: 'slider',
-    min: 0,
-    max: 5000,
-  },
-  {
-    label: 'Connection',
-    value: 'timing.connection',
-    type: 'slider',
-    min: 0,
-    max: 5000,
-  },
-  {
-    label: 'TLS',
-    value: 'timing.tls',
-    type: 'slider',
-    min: 0,
-    max: 5000,
-  },
-  {
-    label: 'TTFB',
-    value: 'timing.ttfb',
-    type: 'slider',
-    min: 0,
-    max: 5000,
-  },
-  {
-    label: 'Transfer',
-    value: 'timing.transfer',
-    type: 'slider',
-    min: 0,
-    max: 5000,
-  },
-] satisfies DataTableFilterField<ColumnSchema>[]
-
-export const sheetFields = [
-  {
-    id: 'uuid',
-    label: 'Request ID',
-    type: 'readonly',
-    skeletonClassName: 'w-64',
-  },
-  {
-    id: 'date',
-    label: 'Date',
-    type: 'timerange',
-    component: (props) => format(new Date(props.date), 'LLL dd, y HH:mm:ss'),
-    skeletonClassName: 'w-36',
-  },
-  {
-    id: 'status',
-    label: 'Status',
-    type: 'checkbox',
-    component: (props) => {
-      return (
-        <span className={cn('font-mono', getStatusColor(props.status).text)}>{props.status}</span>
-      )
-    },
-    skeletonClassName: 'w-12',
-  },
-  {
-    id: 'method',
-    label: 'Method',
-    type: 'checkbox',
-    component: (props) => {
-      return <span className="font-mono">{props.method}</span>
-    },
-    skeletonClassName: 'w-10',
-  },
-  {
-    id: 'host',
-    label: 'Host',
-    type: 'input',
-    skeletonClassName: 'w-24',
-  },
-  {
-    id: 'pathname',
-    label: 'Pathname',
-    type: 'input',
-    skeletonClassName: 'w-56',
-  },
-  {
-    id: 'regions',
-    label: 'Regions',
-    type: 'checkbox',
-    skeletonClassName: 'w-12',
-    component: (props) => <DataTableColumnRegion value={props.regions[0]} reverse showFlag />,
-  },
-  {
-    id: 'latency',
-    label: 'Latency',
-    type: 'slider',
-    component: (props) => (
-      <>
-        {formatMilliseconds(props.latency)}
-        <span className="text-muted-foreground">ms</span>
-      </>
-    ),
-    skeletonClassName: 'w-16',
-  },
-  {
-    id: 'percentile',
-    label: 'Percentile',
-    type: 'readonly',
-    component: (props) => {
-      return (
-        <PopoverPercentile
-          data={props}
-          percentiles={props.metadata?.currentPercentiles}
-          filterRows={props.metadata?.filterRows as number}
-          className="ml-auto"
-        />
-      )
-    },
-    skeletonClassName: 'w-12',
-  },
-  {
-    id: 'timing.dns', // REMINDER: cannot be 'timing' as it is a property of the object
-    label: 'Timing Phases',
-    type: 'readonly',
-    component: (props) => <SheetTimingPhases latency={props.latency} timing={props} />,
-    className: 'flex-col items-start w-full gap-1',
-  },
-  {
-    id: 'headers',
-    label: 'Headers',
-    type: 'readonly',
-    component: (props) => (
-      // REMINDER: negative margin to make it look like the header is on the same level of the tab triggers
-      <KVTabs data={props.headers} className="-mt-[22px]" />
-    ),
-    className: 'flex-col items-start w-full gap-1',
-  },
-  {
-    id: 'message',
-    label: 'Message',
-    type: 'readonly',
-    condition: (props) => props.message !== undefined,
-    component: (props) => (
-      <CopyToClipboardContainer variant="destructive">
-        {JSON.stringify(props.message, null, 2)}
-      </CopyToClipboardContainer>
-    ),
-    className: 'flex-col items-start w-full gap-1',
-  },
-] satisfies SheetField<ColumnSchema, LogsMeta>[]
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/data-table-infinite.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/data-table-infinite.tsx
deleted file mode 100644
index 406b055157a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/data-table-infinite.tsx
+++ /dev/null
@@ -1,529 +0,0 @@
-'use client'
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from 'components/interfaces/DataTableDemo/components/custom/table'
-import { DataTableFilterCommand } from 'components/interfaces/DataTableDemo/components/data-table/data-table-filter-command'
-import { DataTableFilterControls } from 'components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls'
-import { DataTableProvider } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { DataTableResetButton } from 'components/interfaces/DataTableDemo/components/data-table/data-table-reset-button'
-import { MemoizedDataTableSheetContent } from 'components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-content'
-import { DataTableSheetDetails } from 'components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-details'
-import { DataTableToolbar } from 'components/interfaces/DataTableDemo/components/data-table/data-table-toolbar' // TODO: check where to put this
-import type {
-  DataTableFilterField,
-  SheetField,
-} from 'components/interfaces/DataTableDemo/components/data-table/types'
-import { Button } from 'ui'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { useLocalStorage } from 'components/interfaces/DataTableDemo/hooks/use-local-storage'
-import { formatCompactNumber } from 'components/interfaces/DataTableDemo/lib/format'
-import { arrSome, inDateRange } from 'components/interfaces/DataTableDemo/lib/table/filterfns'
-import { cn } from 'ui'
-import {
-  FetchPreviousPageOptions,
-  RefetchOptions,
-  type FetchNextPageOptions,
-} from '@tanstack/react-query'
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  Row,
-  RowSelectionState,
-  SortingState,
-  TableOptions,
-  Table as TTable,
-  VisibilityState,
-} from '@tanstack/react-table'
-import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  getFacetedMinMaxValues as getTTableFacetedMinMaxValues,
-  getFacetedUniqueValues as getTTableFacetedUniqueValues,
-  useReactTable,
-} from '@tanstack/react-table'
-import { LoaderCircle } from 'lucide-react'
-import { useQueryState, useQueryStates, type ParserBuilder } from 'nuqs'
-import * as React from 'react'
-import { LiveButton } from './_components/live-button'
-import { RefreshButton } from './_components/refresh-button'
-import { SocialsFooter } from './_components/socials-footer'
-import { BaseChartSchema } from './schema'
-import { searchParamsParser } from './search-params'
-import { TimelineChart } from './timeline-chart'
-
-// TODO: add a possible chartGroupBy
-export interface DataTableInfiniteProps<TData, TValue, TMeta> {
-  columns: ColumnDef<TData, TValue>[]
-  getRowClassName?: (row: Row<TData>) => string
-  // REMINDER: make sure to pass the correct id to access the rows
-  getRowId?: TableOptions<TData>['getRowId']
-  data: TData[]
-  defaultColumnFilters?: ColumnFiltersState
-  defaultColumnSorting?: SortingState
-  defaultRowSelection?: RowSelectionState
-  defaultColumnVisibility?: VisibilityState
-  filterFields?: DataTableFilterField<TData>[]
-  sheetFields?: SheetField<TData, TMeta>[]
-  // REMINDER: close to the same signature as the `getFacetedUniqueValues` of the `useReactTable`
-  getFacetedUniqueValues?: (table: TTable<TData>, columnId: string) => Map<string, number>
-  getFacetedMinMaxValues?: (table: TTable<TData>, columnId: string) => undefined | [number, number]
-  totalRows?: number
-  filterRows?: number
-  totalRowsFetched?: number
-  meta: TMeta
-  chartData?: BaseChartSchema[]
-  chartDataColumnId: string
-  isFetching?: boolean
-  isLoading?: boolean
-  hasNextPage?: boolean
-  fetchNextPage: (options?: FetchNextPageOptions | undefined) => Promise<unknown>
-  fetchPreviousPage?: (options?: FetchPreviousPageOptions | undefined) => Promise<unknown>
-  refetch: (options?: RefetchOptions | undefined) => void
-  renderLiveRow?: (props?: { row: Row<TData> }) => React.ReactNode
-  renderSheetTitle: (props: { row?: Row<TData> }) => React.ReactNode
-  // TODO:
-  renderChart?: () => React.ReactNode
-  searchParamsParser: Record<string, ParserBuilder<any>>
-}
-
-export function DataTableInfinite<TData, TValue, TMeta>({
-  columns,
-  getRowClassName,
-  getRowId,
-  data,
-  defaultColumnFilters = [],
-  defaultColumnSorting = [],
-  defaultRowSelection = {},
-  defaultColumnVisibility = {},
-  filterFields = [],
-  sheetFields = [],
-  isFetching,
-  isLoading,
-  fetchNextPage,
-  hasNextPage,
-  fetchPreviousPage,
-  refetch,
-  totalRows = 0,
-  filterRows = 0,
-  totalRowsFetched = 0,
-  chartData = [],
-  chartDataColumnId,
-  getFacetedUniqueValues,
-  getFacetedMinMaxValues,
-  meta,
-  renderLiveRow,
-  renderSheetTitle,
-  searchParamsParser,
-}: DataTableInfiniteProps<TData, TValue, TMeta>) {
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters)
-  const [sorting, setSorting] = React.useState<SortingState>(defaultColumnSorting)
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(defaultRowSelection)
-  const [columnOrder, setColumnOrder] = useLocalStorage<string[]>('data-table-column-order', [])
-  const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(
-    'data-table-visibility',
-    defaultColumnVisibility
-  )
-  const topBarRef = React.useRef<HTMLDivElement>(null)
-  const tableRef = React.useRef<HTMLTableElement>(null)
-  const [topBarHeight, setTopBarHeight] = React.useState(0)
-  // FIXME: searchParamsParser needs to be passed as property
-  const [_, setSearch] = useQueryStates(searchParamsParser)
-
-  const onScroll = React.useCallback(
-    (e: React.UIEvent<HTMLElement>) => {
-      const onPageBottom =
-        Math.ceil(e.currentTarget.scrollTop + e.currentTarget.clientHeight) >=
-        e.currentTarget.scrollHeight
-
-      if (onPageBottom && !isFetching && totalRowsFetched < filterRows) {
-        fetchNextPage()
-      }
-    },
-    [fetchNextPage, isFetching, filterRows, totalRowsFetched]
-  )
-
-  React.useEffect(() => {
-    const observer = new ResizeObserver(() => {
-      const rect = topBarRef.current?.getBoundingClientRect()
-      if (rect) {
-        setTopBarHeight(rect.height)
-      }
-    })
-
-    const topBar = topBarRef.current
-    if (!topBar) return
-
-    observer.observe(topBar)
-    return () => observer.unobserve(topBar)
-  }, [topBarRef])
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      columnFilters,
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnOrder,
-    },
-    enableMultiRowSelection: false,
-    columnResizeMode: 'onChange',
-    getRowId,
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnFiltersChange: setColumnFilters,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnOrderChange: setColumnOrder,
-    getSortedRowModel: getSortedRowModel(),
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getTTableFacetedUniqueValues(),
-    getFacetedMinMaxValues: getTTableFacetedMinMaxValues(),
-    filterFns: { inDateRange, arrSome },
-    debugAll: process.env.NEXT_PUBLIC_TABLE_DEBUG === 'true',
-    meta: { getRowClassName },
-  })
-
-  React.useEffect(() => {
-    const columnFiltersWithNullable = filterFields.map((field) => {
-      const filterValue = columnFilters.find((filter) => filter.id === field.value)
-      if (!filterValue) return { id: field.value, value: null }
-      return { id: field.value, value: filterValue.value }
-    })
-
-    const search = columnFiltersWithNullable.reduce(
-      (prev, curr) => {
-        prev[curr.id as string] = curr.value
-        return prev
-      },
-      {} as Record<string, unknown>
-    )
-
-    setSearch(search)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnFilters])
-
-  React.useEffect(() => {
-    setSearch({ sort: sorting?.[0] || null })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sorting])
-
-  const selectedRow = React.useMemo(() => {
-    if ((isLoading || isFetching) && !data.length) return
-    const selectedRowKey = Object.keys(rowSelection)?.[0]
-    return table.getCoreRowModel().flatRows.find((row) => row.id === selectedRowKey)
-  }, [rowSelection, table, isLoading, isFetching, data])
-
-  // TODO: can only share uuid within the first batch
-  React.useEffect(() => {
-    if (isLoading || isFetching) return
-    if (Object.keys(rowSelection)?.length && !selectedRow) {
-      setSearch({ uuid: null })
-      setRowSelection({})
-    } else {
-      setSearch({ uuid: Object.keys(rowSelection)?.[0] || null })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowSelection, selectedRow, isLoading, isFetching])
-
-  /**
-   * https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance
-   * Instead of calling `column.getSize()` on every render for every header
-   * and especially every data cell (very expensive),
-   * we will calculate all column sizes at once at the root table level in a useMemo
-   * and pass the column sizes down as CSS variables to the <table> element.
-   */
-  const columnSizeVars = React.useMemo(() => {
-    const headers = table.getFlatHeaders()
-    const colSizes: { [key: string]: string } = {}
-    for (let i = 0; i < headers.length; i++) {
-      const header = headers[i]!
-      // REMINDER: replace "." with "-" to avoid invalid CSS variable name (e.g. "timing.dns" -> "timing-dns")
-      colSizes[`--header-${header.id.replace('.', '-')}-size`] = `${header.getSize()}px`
-      colSizes[`--col-${header.column.id.replace('.', '-')}-size`] = `${header.column.getSize()}px`
-    }
-    return colSizes
-  }, [
-    table.getState().columnSizingInfo,
-    table.getState().columnSizing,
-    table.getState().columnVisibility,
-  ])
-
-  useHotKey(() => {
-    setColumnOrder([])
-    setColumnVisibility(defaultColumnVisibility)
-  }, 'u')
-
-  return (
-    <DataTableProvider
-      table={table}
-      columns={columns}
-      filterFields={filterFields}
-      columnFilters={columnFilters}
-      sorting={sorting}
-      rowSelection={rowSelection}
-      columnOrder={columnOrder}
-      columnVisibility={columnVisibility}
-      enableColumnOrdering={true}
-      isLoading={isFetching || isLoading}
-      getFacetedUniqueValues={getFacetedUniqueValues}
-      getFacetedMinMaxValues={getFacetedMinMaxValues}
-    >
-      <div
-        className="flex h-full min-h-screen w-full flex-col sm:flex-row"
-        style={
-          {
-            '--top-bar-height': `${topBarHeight}px`,
-            ...columnSizeVars,
-          } as React.CSSProperties
-        }
-      >
-        <div
-          className={cn(
-            'h-full w-full flex-col sm:sticky sm:top-0 sm:max-h-screen sm:min-h-screen sm:min-w-52 sm:max-w-52 sm:self-start md:min-w-72 md:max-w-72',
-            'group-data-[expanded=false]/controls:hidden',
-            'hidden sm:flex'
-          )}
-        >
-          <div className="border-b border-border bg-background p-2 md:sticky md:top-0">
-            <div className="flex h-[46px] items-center justify-between gap-3">
-              <p className="px-2 font-medium text-foreground">Filters</p>
-              <div>{table.getState().columnFilters.length ? <DataTableResetButton /> : null}</div>
-            </div>
-          </div>
-          <div className="flex-1 p-2 sm:overflow-y-scroll">
-            <DataTableFilterControls />
-          </div>
-          <div className="border-t border-border bg-background p-4 md:sticky md:bottom-0">
-            <SocialsFooter />
-          </div>
-        </div>
-        <div
-          className={cn(
-            'flex max-w-full flex-1 flex-col border-border sm:border-l',
-            // Chrome issue
-            'group-data-[expanded=true]/controls:sm:max-w-[calc(100vw_-_208px)] group-data-[expanded=true]/controls:md:max-w-[calc(100vw_-_288px)]'
-          )}
-        >
-          <div
-            ref={topBarRef}
-            className={cn('flex flex-col gap-4 bg-background p-2', 'sticky top-0 z-10 pb-4')}
-          >
-            <DataTableFilterCommand searchParamsParser={searchParamsParser} />
-            {/* TBD: better flexibility with compound components? */}
-            <DataTableToolbar
-              renderActions={() => [
-                <RefreshButton key="refresh" onClick={refetch} />,
-                fetchPreviousPage ? (
-                  <LiveButton key="live" fetchPreviousPage={fetchPreviousPage} />
-                ) : null,
-              ]}
-            />
-            {/* TODO: move up to client component */}
-            <TimelineChart data={chartData} className="-mb-2" columnId={chartDataColumnId} />
-          </div>
-          <div className="z-0">
-            <Table
-              ref={tableRef}
-              onScroll={onScroll}
-              // REMINDER: https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
-              className="border-separate border-spacing-0"
-              containerClassName="max-h-[calc(100vh_-_var(--top-bar-height))]"
-            >
-              <TableHeader className={cn('sticky top-0 z-20 bg-background')}>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow
-                    key={headerGroup.id}
-                    className={cn(
-                      'bg-muted/50 hover:bg-muted/50',
-                      '[&>*]:border-t [&>:not(:last-child)]:border-r'
-                    )}
-                  >
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead
-                          key={header.id}
-                          className={cn(
-                            'relative select-none truncate border-b border-border [&>.cursor-col-resize]:last:opacity-0',
-                            header.column.columnDef.meta?.headerClassName
-                          )}
-                          aria-sort={
-                            header.column.getIsSorted() === 'asc'
-                              ? 'ascending'
-                              : header.column.getIsSorted() === 'desc'
-                                ? 'descending'
-                                : 'none'
-                          }
-                        >
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.header, header.getContext())}
-                          {header.column.getCanResize() && (
-                            <div
-                              onDoubleClick={() => header.column.resetSize()}
-                              onMouseDown={header.getResizeHandler()}
-                              onTouchStart={header.getResizeHandler()}
-                              className={cn(
-                                'user-select-none absolute -right-2 top-0 z-10 flex h-full w-4 cursor-col-resize touch-none justify-center',
-                                'before:absolute before:inset-y-0 before:w-px before:translate-x-px before:bg-border'
-                              )}
-                            />
-                          )}
-                        </TableHead>
-                      )
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody
-                id="content"
-                tabIndex={-1}
-                className="outline-1 -outline-offset-1 outline-primary transition-colors focus-visible:outline"
-                // REMINDER: avoids scroll (skipping the table header) when using skip to content
-                style={{
-                  scrollMarginTop: 'calc(var(--top-bar-height) + 40px)',
-                }}
-              >
-                {table.getRowModel().rows?.length ? (
-                  table.getRowModel().rows.map((row) => (
-                    // REMINDER: if we want to add arrow navigation https://github.com/TanStack/table/discussions/2752#discussioncomment-192558
-                    <React.Fragment key={row.id}>
-                      {renderLiveRow?.({ row })}
-                      <MemoizedRow row={row} table={table} selected={row.getIsSelected()} />
-                    </React.Fragment>
-                  ))
-                ) : (
-                  <React.Fragment>
-                    {renderLiveRow?.()}
-                    <TableRow>
-                      <TableCell colSpan={columns.length} className="h-24 text-center">
-                        No results.
-                      </TableCell>
-                    </TableRow>
-                  </React.Fragment>
-                )}
-                <TableRow className="hover:bg-transparent data-[state=selected]:bg-transparent">
-                  <TableCell colSpan={columns.length} className="text-center">
-                    {hasNextPage || isFetching || isLoading ? (
-                      <Button
-                        disabled={isFetching || isLoading}
-                        onClick={() => fetchNextPage()}
-                        size="small"
-                        type="outline"
-                        icon={
-                          isFetching ? <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> : null
-                        }
-                      >
-                        Load More
-                      </Button>
-                    ) : (
-                      <p className="text-sm text-foreground-lighter py-4">
-                        No more data to load (
-                        <span className="font-mono font-medium">
-                          {formatCompactNumber(filterRows)}
-                        </span>{' '}
-                        of{' '}
-                        <span className="font-mono font-medium">
-                          {formatCompactNumber(totalRows)}
-                        </span>{' '}
-                        rows)
-                      </p>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-        </div>
-      </div>
-      <DataTableSheetDetails
-        title={renderSheetTitle({ row: selectedRow })}
-        titleClassName="font-mono"
-      >
-        <MemoizedDataTableSheetContent
-          table={table}
-          data={selectedRow?.original}
-          filterFields={filterFields}
-          fields={sheetFields}
-          // TODO: check if we should memoize this
-          // REMINDER: this is used to pass additional data like the `InfiniteQueryMeta`
-          metadata={{
-            totalRows,
-            filterRows,
-            totalRowsFetched,
-            // REMINDER: includes `currentPercentiles`
-            ...meta,
-          }}
-        />
-      </DataTableSheetDetails>
-    </DataTableProvider>
-  )
-}
-
-/**
- * REMINDER: this is the heaviest component in the table if lots of rows
- * Some other components are rendered more often necessary, but are fixed size (not like rows that can grow in height)
- * e.g. DataTableFilterControls, DataTableFilterCommand, DataTableToolbar, DataTableHeader
- */
-
-function Row<TData>({
-  row,
-  table,
-  selected,
-}: {
-  row: Row<TData>
-  table: TTable<TData>
-  // REMINDER: row.getIsSelected(); - just for memoization
-  selected?: boolean
-}) {
-  // REMINDER: rerender the row when live mode is toggled - used to opacity the row
-  // via the `getRowClassName` prop - but for some reasons it wil render the row on data fetch
-  useQueryState('live', searchParamsParser.live)
-  return (
-    <TableRow
-      id={row.id}
-      tabIndex={0}
-      data-state={selected && 'selected'}
-      onClick={() => row.toggleSelected()}
-      onKeyDown={(event) => {
-        if (event.key === 'Enter') {
-          event.preventDefault()
-          row.toggleSelected()
-        }
-      }}
-      className={cn(
-        '[&>:not(:last-child)]:border-r',
-        'outline-1 -outline-offset-1 outline-primary transition-colors focus-visible:bg-muted/50 focus-visible:outline data-[state=selected]:outline',
-        table.options.meta?.getRowClassName?.(row)
-      )}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <TableCell
-          key={cell.id}
-          className={cn(
-            'truncate border-b border-border',
-            cell.column.columnDef.meta?.cellClassName
-          )}
-        >
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </TableCell>
-      ))}
-    </TableRow>
-  )
-}
-
-const MemoizedRow = React.memo(
-  Row,
-  (prev, next) => prev.row.id === next.row.id && prev.selected === next.selected
-) as typeof Row
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/query-options.ts b/apps/studio/components/interfaces/DataTableDemo/infinite/query-options.ts
deleted file mode 100644
index 1ad15cfaf0a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/query-options.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { Percentile } from 'components/interfaces/DataTableDemo/lib/request/percentile'
-// Removed keepPreviousData import as it causes persistent lint errors
-// import { keepPreviousData } from '@tanstack/react-query'
-import SuperJSON from 'superjson'
-import type { BaseChartSchema, ColumnSchema, FacetMetadataSchema } from './schema'
-import type { SearchParamsType } from './search-params'
-// Removed: import { searchParamsSerializer } from './search-params'
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-  SORT_DELIMITER,
-} from 'components/interfaces/DataTableDemo/lib/delimiters'
-
-// Restore the helper function to create query params string
-const createApiQueryString = (params: Record<string, any>): string => {
-  const queryParams = new URLSearchParams()
-
-  for (const [key, value] of Object.entries(params)) {
-    if (value === null || value === undefined) continue
-
-    // Using logic similar to the original light version
-    if (key === 'date' && Array.isArray(value) && value.length === 2) {
-      queryParams.set('dateStart', value[0].getTime().toString())
-      queryParams.set('dateEnd', value[1].getTime().toString())
-    } else if (
-      [
-        'latency',
-        'timing.dns',
-        'timing.connection',
-        'timing.tls',
-        'timing.ttfb',
-        'timing.transfer',
-        'status',
-      ].includes(key) &&
-      Array.isArray(value) &&
-      value.length > 0
-    ) {
-      // Assuming slider or range gives min/max
-      // Use the correct delimiters if necessary based on how backend expects ranges
-      if (value.length === 1) {
-        // Handle single value if needed, maybe just set the key?
-        // queryParams.set(key, value[0].toString());
-      } else if (value.length >= 2) {
-        queryParams.set(`${key}Start`, value[0].toString())
-        queryParams.set(`${key}End`, value[value.length - 1].toString())
-      }
-    } else if (Array.isArray(value)) {
-      if (value.length > 0) {
-        // Use comma (ARRAY_DELIMITER) separation for arrays
-        queryParams.set(key, value.join(ARRAY_DELIMITER))
-      }
-    } else if (key === 'sort' && typeof value === 'object' && value !== null) {
-      queryParams.set(
-        key,
-        `${(value as { id: string; desc: boolean }).id}${SORT_DELIMITER}${(value as { id: string; desc: boolean }).desc ? 'desc' : 'asc'}`
-      )
-    } else if (value instanceof Date) {
-      queryParams.set(key, value.getTime().toString())
-    } else {
-      queryParams.set(key, String(value))
-    }
-  }
-  const queryString = queryParams.toString()
-  return queryString ? `?${queryString}` : ''
-}
-
-export type LogsMeta = {
-  currentPercentiles: Record<Percentile, number>
-}
-
-export type InfiniteQueryMeta<TMeta = Record<string, unknown>> = {
-  totalRowCount: number
-  filterRowCount: number
-  chartData: BaseChartSchema[]
-  facets: Record<string, FacetMetadataSchema>
-  metadata?: TMeta
-}
-
-export type InfiniteQueryResponse<TData, TMeta = unknown> = {
-  data: TData
-  meta: InfiniteQueryMeta<TMeta>
-  prevCursor: number | null
-  nextCursor: number | null
-}
-
-// Define pageParam type
-type PageParam = { cursor: number; direction: 'next' | 'prev' }
-
-export const dataOptions = (search: SearchParamsType) => {
-  // Create a stable query key object by removing nulls/undefined, uuid, and live
-  const queryKeyParams = Object.entries(search).reduce(
-    (acc, [key, value]) => {
-      if (!['uuid', 'live'].includes(key) && value !== null && value !== undefined) {
-        acc[key] = value
-      }
-      return acc
-    },
-    {} as Record<string, any>
-  )
-
-  // Simply return the options object
-  return {
-    queryKey: [
-      'data-table',
-      // Use JSON.stringify for a stable key representation
-      JSON.stringify(queryKeyParams),
-    ],
-    queryFn: async ({ pageParam }: { pageParam: PageParam }) => {
-      // Added type for pageParam
-      const cursor = pageParam?.cursor ? new Date(pageParam.cursor) : undefined
-      const direction = pageParam?.direction
-
-      // Construct params for API call, removing uuid and live
-      const apiParams = {
-        ...search,
-        uuid: null, // Explicitly remove for API call
-        live: null, // Explicitly remove for API call
-        ...(cursor && { cursor }), // Add cursor if present
-        ...(direction && { direction }), // Add direction if present
-      }
-
-      // Assuming the API route is /api/data-table/infinite
-      const response = await fetch(`/api/data-table/infinite${createApiQueryString(apiParams)}`)
-
-      if (!response.ok) {
-        throw new Error('Network response was not ok')
-      }
-
-      const jsonString = await response.text()
-      return SuperJSON.parse<InfiniteQueryResponse<ColumnSchema[], LogsMeta>>(jsonString)
-    },
-    initialPageParam: { cursor: new Date().getTime(), direction: 'next' } as PageParam,
-    getPreviousPageParam: (
-      firstPage: InfiniteQueryResponse<ColumnSchema[], LogsMeta>,
-      _pages: InfiniteQueryResponse<ColumnSchema[], LogsMeta>[] // Added types
-    ) => {
-      if (!firstPage.prevCursor) return null
-      return { cursor: firstPage.prevCursor, direction: 'prev' } as PageParam
-    },
-    getNextPageParam: (
-      lastPage: InfiniteQueryResponse<ColumnSchema[], LogsMeta>,
-      _pages: InfiniteQueryResponse<ColumnSchema[], LogsMeta>[] // Added types
-    ) => {
-      if (!lastPage.nextCursor) return null
-      return { cursor: lastPage.nextCursor, direction: 'next' } as PageParam
-    },
-    refetchOnWindowFocus: false,
-    // Removed placeholderData due to persistent lint/resolution issues
-    // placeholderData: keepPreviousData,
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/schema.ts b/apps/studio/components/interfaces/DataTableDemo/infinite/schema.ts
deleted file mode 100644
index 733498b6d91..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/schema.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-} from 'components/interfaces/DataTableDemo/lib/delimiters'
-import { METHODS } from 'components/interfaces/DataTableDemo/constants/method'
-import { REGIONS } from 'components/interfaces/DataTableDemo/constants/region'
-import { z } from 'zod'
-import { LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-
-// https://github.com/colinhacks/zod/issues/2985#issue-2008642190
-const stringToBoolean = z
-  .string()
-  .toLowerCase()
-  .transform((val) => {
-    try {
-      return JSON.parse(val)
-    } catch (e) {
-      console.log(e)
-      return undefined
-    }
-  })
-  .pipe(z.boolean().optional())
-
-export const timingSchema = z.object({
-  'timing.dns': z.number(),
-  'timing.connection': z.number(),
-  'timing.tls': z.number(),
-  'timing.ttfb': z.number(),
-  'timing.transfer': z.number(),
-})
-
-export const columnSchema = z
-  .object({
-    uuid: z.string(),
-    method: z.enum(METHODS),
-    host: z.string(),
-    pathname: z.string(),
-    level: z.enum(LEVELS),
-    latency: z.number(),
-    status: z.number(),
-    regions: z.enum(REGIONS).array(),
-    date: z.date(),
-    headers: z.record(z.string()),
-    message: z.string().optional(),
-    percentile: z.number().optional(),
-  })
-  .merge(timingSchema)
-
-export type ColumnSchema = z.infer<typeof columnSchema>
-export type TimingSchema = z.infer<typeof timingSchema>
-
-// TODO: can we get rid of this in favor of nuqs search-params?
-export const columnFilterSchema = z.object({
-  level: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.enum(LEVELS).array())
-    .optional(),
-  method: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.enum(METHODS).array())
-    .optional(),
-  host: z.string().optional(),
-  pathname: z.string().optional(),
-  latency: z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.dns': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.connection': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.tls': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.ttfb': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.transfer': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  status: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.coerce.number().array())
-    .optional(),
-  regions: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.enum(REGIONS).array())
-    .optional(),
-  date: z
-    .string()
-    .transform((val) => val.split(RANGE_DELIMITER).map(Number))
-    .pipe(z.coerce.date().array())
-    .optional(),
-})
-
-export type ColumnFilterSchema = z.infer<typeof columnFilterSchema>
-
-export const facetMetadataSchema = z.object({
-  rows: z.array(z.object({ value: z.any(), total: z.number() })),
-  total: z.number(),
-  min: z.number().optional(),
-  max: z.number().optional(),
-})
-
-export type FacetMetadataSchema = z.infer<typeof facetMetadataSchema>
-
-export type BaseChartSchema = { timestamp: number; [key: string]: number }
-
-export const timelineChartSchema = z.object({
-  timestamp: z.number(), // UNIX
-  ...LEVELS.reduce(
-    (acc, level) => ({
-      ...acc,
-      [level]: z.number().default(0),
-    }),
-    {} as Record<(typeof LEVELS)[number], z.ZodNumber>
-  ),
-  // REMINDER: make sure to have the `timestamp` field in the object
-}) satisfies z.ZodType<BaseChartSchema>
-
-export type TimelineChartSchema = z.infer<typeof timelineChartSchema>
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/search-params.ts b/apps/studio/components/interfaces/DataTableDemo/infinite/search-params.ts
deleted file mode 100644
index 51f5dd7f967..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/search-params.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import {
-  createParser,
-  // createSearchParamsCache, // Removed for Pages Router compatibility
-  createSerializer, // Uncommented for Pages Router compatibility
-  parseAsArrayOf,
-  parseAsBoolean,
-  parseAsInteger,
-  parseAsString,
-  parseAsStringLiteral,
-  parseAsTimestamp,
-  type inferParserType,
-  useQueryStates, // Added for potential hook usage
-} from 'nuqs'
-// Note: import from 'nuqs/server' comment removed
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-  SORT_DELIMITER,
-} from 'components/interfaces/DataTableDemo/lib/delimiters'
-import { REGIONS } from 'components/interfaces/DataTableDemo/constants/region'
-import { METHODS } from 'components/interfaces/DataTableDemo/constants/method'
-import { LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-
-// https://logs.run/i?sort=latency.desc
-
-export const parseAsSort = createParser({
-  parse(queryValue) {
-    const [id, desc] = queryValue.split(SORT_DELIMITER)
-    if (!id && !desc) return null
-    return { id, desc: desc === 'desc' }
-  },
-  serialize(value) {
-    return `${value.id}.${value.desc ? 'desc' : 'asc'}`
-  },
-})
-
-export const searchParamsParser = {
-  // CUSTOM FILTERS
-  level: parseAsArrayOf(parseAsStringLiteral(LEVELS), ARRAY_DELIMITER),
-  latency: parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  'timing.dns': parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  'timing.connection': parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  'timing.tls': parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  'timing.ttfb': parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  'timing.transfer': parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  status: parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  regions: parseAsArrayOf(parseAsStringLiteral(REGIONS), ARRAY_DELIMITER),
-  method: parseAsArrayOf(parseAsStringLiteral(METHODS), ARRAY_DELIMITER),
-  host: parseAsString,
-  pathname: parseAsString,
-  date: parseAsArrayOf(parseAsTimestamp, RANGE_DELIMITER),
-  // REQUIRED FOR SORTING & PAGINATION
-  sort: parseAsSort,
-  size: parseAsInteger.withDefault(40),
-  start: parseAsInteger.withDefault(0),
-  // REQUIRED FOR INFINITE SCROLLING (Live Mode and Load More)
-  direction: parseAsStringLiteral(['prev', 'next']).withDefault('next'),
-  cursor: parseAsTimestamp.withDefault(new Date()),
-  live: parseAsBoolean.withDefault(false),
-  // REQUIRED FOR SELECTION
-  uuid: parseAsString,
-}
-
-// Removed for Pages Router compatibility
-// export const searchParamsCache = createSearchParamsCache(searchParamsParser)
-export const searchParamsSerializer = createSerializer(searchParamsParser) // Uncommented
-
-export type SearchParamsType = inferParserType<typeof searchParamsParser>
-
-// Optional: Add a hook similar to the default demo if needed elsewhere
-// export function useInfiniteSearchParams() {
-//   return useQueryStates(searchParamsParser)
-// }
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/timeline-chart.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/timeline-chart.tsx
deleted file mode 100644
index d6ff1aff791..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/timeline-chart.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, ReferenceArea, XAxis } from 'recharts'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
-import { useMemo, useState } from 'react'
-import { format } from 'date-fns'
-import { cn } from 'ui'
-import type { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalChart'
-import { getLevelLabel } from 'components/interfaces/DataTableDemo/lib/request/level'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { BaseChartSchema, TimelineChartSchema } from './schema'
-
-export const description = 'A stacked bar chart'
-
-const chartConfig = {
-  success: {
-    label: <TooltipLabel level="success" />,
-    color: 'hsl(var(--foreground-muted))',
-  },
-  warning: {
-    label: <TooltipLabel level="warning" />,
-    color: 'hsl(var(--warning-default))',
-  },
-  error: {
-    label: <TooltipLabel level="error" />,
-    color: 'hsl(var(--destructive-default))',
-  },
-} satisfies ChartConfig
-
-interface TimelineChartProps<TChart extends BaseChartSchema> {
-  className?: string
-  /**
-   * The table column id to filter by - needs to be a type of `timerange` (e.g. "date").
-   * TBD: if using keyof TData to be closer to the data table props
-   */
-  columnId: string
-  /**
-   * Same data as of the InfiniteQueryMeta.
-   */
-  data: TChart[]
-}
-
-export function TimelineChart<TChart extends BaseChartSchema>({
-  data,
-  className,
-  columnId,
-}: TimelineChartProps<TChart>) {
-  const { table } = useDataTable()
-  const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null)
-  const [refAreaRight, setRefAreaRight] = useState<string | null>(null)
-  const [isSelecting, setIsSelecting] = useState(false)
-
-  // REMINDER: date has to be a string for tooltip label to work - don't ask me why
-  const chart = useMemo(
-    () =>
-      data.map((item) => ({
-        ...item,
-        [columnId]: new Date(item.timestamp).toString(),
-      })),
-    [data]
-  )
-
-  const timerange = useMemo(() => {
-    if (data.length === 0) return { interval: 0, period: undefined }
-    const first = data[0].timestamp
-    const last = data[data.length - 1].timestamp
-    const interval = Math.abs(first - last) // in ms
-    return { interval, period: calculatePeriod(interval) }
-  }, [data])
-
-  const handleMouseDown: CategoricalChartFunc = (e) => {
-    if (e.activeLabel) {
-      setRefAreaLeft(e.activeLabel)
-      setIsSelecting(true)
-    }
-  }
-
-  const handleMouseMove: CategoricalChartFunc = (e) => {
-    if (isSelecting && e.activeLabel) {
-      setRefAreaRight(e.activeLabel)
-    }
-  }
-
-  const handleMouseUp: CategoricalChartFunc = (e) => {
-    if (refAreaLeft && refAreaRight) {
-      const [left, right] = [refAreaLeft, refAreaRight].sort(
-        (a, b) => new Date(a).getTime() - new Date(b).getTime()
-      )
-      table.getColumn(columnId)?.setFilterValue([new Date(left), new Date(right)])
-    }
-    setRefAreaLeft(null)
-    setRefAreaRight(null)
-    setIsSelecting(false)
-  }
-
-  return (
-    <ChartContainer
-      config={chartConfig}
-      className={cn(
-        'aspect-auto h-[60px] w-full',
-        '[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/50', // otherwise same color as 200
-        'select-none', // disable text selection
-        className
-      )}
-    >
-      <BarChart
-        accessibilityLayer
-        data={chart}
-        margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        style={{ cursor: 'crosshair' }}
-      >
-        <CartesianGrid vertical={false} />
-        <XAxis
-          dataKey={columnId}
-          tickLine={false}
-          minTickGap={32}
-          axisLine={false}
-          // interval="preserveStartEnd"
-          tickFormatter={(value) => {
-            const date = new Date(value)
-            if (isNaN(date.getTime())) return 'N/A'
-            if (timerange.period === '10m') {
-              return format(date, 'HH:mm:ss')
-            } else if (timerange.period === '1d') {
-              return format(date, 'HH:mm')
-            } else if (timerange.period === '1w') {
-              return format(date, 'LLL dd HH:mm')
-            }
-            return format(date, 'LLL dd, y')
-          }}
-        />
-        <ChartTooltip
-          // defaultIndex={10}
-          content={
-            <ChartTooltipContent
-              labelFormatter={(value) => {
-                const date = new Date(value)
-                if (isNaN(date.getTime())) return 'N/A'
-                if (timerange.period === '10m') {
-                  return format(date, 'LLL dd, HH:mm:ss')
-                }
-                return format(date, 'LLL dd, y HH:mm')
-              }}
-            />
-          }
-        />
-        {/* TODO: we could use the `{timestamp, ...rest} = data[0]` to dynamically create the bars but that would mean the order can be very much random */}
-        <Bar dataKey="error" stackId="a" fill="var(--color-error)" />
-        <Bar dataKey="warning" stackId="a" fill="var(--color-warning)" />
-        <Bar dataKey="success" stackId="a" fill="var(--color-success)" />
-        {refAreaLeft && refAreaRight && (
-          <ReferenceArea
-            x1={refAreaLeft}
-            x2={refAreaRight}
-            strokeOpacity={0.3}
-            fill="hsl(var(--foreground))"
-            fillOpacity={0.08}
-          />
-        )}
-      </BarChart>
-    </ChartContainer>
-  )
-}
-
-// TODO: check what's a good abbreviation for month vs. minutes
-function calculatePeriod(interval: number): '10m' | '1d' | '1w' | '1mo' {
-  if (interval <= 1000 * 60 * 10) {
-    // less than 10 minutes
-    return '10m'
-  } else if (interval <= 1000 * 60 * 60 * 24) {
-    // less than 1 day
-    return '1d'
-  } else if (interval <= 1000 * 60 * 60 * 24 * 7) {
-    // less than 1 week
-    return '1w'
-  }
-  return '1mo' // defaults to 1 month
-}
-
-// TODO: use a `formatTooltipLabel` function instead for composability
-function TooltipLabel({ level }: { level: keyof Omit<TimelineChartSchema, 'timestamp'> }) {
-  return (
-    <div className="mr-2 flex w-20 items-center justify-between gap-2 font-mono">
-      <div className="capitalize text-foreground/70">{level}</div>
-      <div className="text-xs text-muted-foreground/70">{getLevelLabel(level)}</div>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/infinite/use-infinite-query.tsx b/apps/studio/components/interfaces/DataTableDemo/infinite/use-infinite-query.tsx
deleted file mode 100644
index b3ea7f2676c..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/infinite/use-infinite-query.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useQueryStates } from "nuqs";
-import { useInfiniteQuery as useInfiniteTanstackQuery } from "@tanstack/react-query";
-import { dataOptions } from "./query-options";
-import { searchParamsParser } from "./search-params";
-
-export function useInfiniteQuery() {
-  const [search] = useQueryStates(searchParamsParser);
-  const query = useInfiniteTanstackQuery(dataOptions(search));
-  return query;
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/compose-refs.ts b/apps/studio/components/interfaces/DataTableDemo/lib/compose-refs.ts
deleted file mode 100644
index 5fd5caf6837..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/compose-refs.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx
-
-import * as React from "react";
-
-type PossibleRef<T> = React.Ref<T> | undefined;
-
-/**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */
-function setRef<T>(ref: PossibleRef<T>, value: T) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== undefined) {
-    (ref as React.MutableRefObject<T>).current = value;
-  }
-}
-
-/**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */
-function composeRefs<T>(...refs: PossibleRef<T>[]) {
-  return (node: T) => refs.forEach((ref) => setRef(ref, node));
-}
-
-/**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
- */
-function useComposedRefs<T>(...refs: PossibleRef<T>[]) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return React.useCallback(composeRefs(...refs), refs);
-}
-
-export { composeRefs, useComposedRefs };
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/config/README.md b/apps/studio/components/interfaces/DataTableDemo/lib/config/README.md
deleted file mode 100644
index 5d4170ab000..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/config/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-**Goal: deploy data-tables via config files**
-
-Requirement:
-
-- Simple API endpoint to receive configuration
-- Simple CLI command to deploy configuration (using API)
-- Simple Typescript SDK to validate the configuration OR go straight up for `yaml`
-- Versioning
-
-> Versioning is crucial as we will do lots of breaking changes at the beginning. Maybe we can start with commit/version/date versioning (e.g. logs.run/v1, logs.run/eab5f3, logs.run/2025-03).
-
-Questions:
-
-- How to validate config file in general (runtime, not compiled via TS)
-- How to pass `components` to the
-
-Config file should include:
-
-- filter fields
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/delimiters.ts b/apps/studio/components/interfaces/DataTableDemo/lib/delimiters.ts
deleted file mode 100644
index edb49a5f478..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/delimiters.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const ARRAY_DELIMITER = ','
-export const SLIDER_DELIMITER = '-'
-export const SPACE_DELIMITER = '_'
-export const RANGE_DELIMITER = '-'
-export const SORT_DELIMITER = '.'
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/format.ts b/apps/studio/components/interfaces/DataTableDemo/lib/format.ts
deleted file mode 100644
index bc31bf1d44f..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/format.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { format } from "date-fns";
-
-export function formatLatency(ms: number): string {
-  if (ms >= 1000) {
-    return (
-      new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 1,
-      }).format(ms / 1000) + "s"
-    );
-  }
-
-  return (
-    new Intl.NumberFormat("en-US", { maximumFractionDigits: 3 }).format(ms) +
-    "ms"
-  );
-}
-
-export function formatMilliseconds(value: number) {
-  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 3 }).format(
-    value
-  );
-}
-
-export function formatDate(value: Date | string) {
-  return format(new Date(`${value}`), "LLL dd, y HH:mm");
-}
-
-export function formatCompactNumber(value: number) {
-  if (value >= 100 && value < 1000) {
-    return value.toString(); // Keep the number as is if it's in the hundreds
-  } else if (value >= 1000 && value < 1000000) {
-    return (value / 1000).toFixed(1) + "k"; // Convert to 'k' for thousands
-  } else if (value >= 1000000) {
-    return (value / 1000000).toFixed(1) + "M"; // Convert to 'M' for millions
-  } else {
-    return value.toString(); // Optionally handle numbers less than 100 if needed
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/is-array.ts b/apps/studio/components/interfaces/DataTableDemo/lib/is-array.ts
deleted file mode 100644
index a6133adbe11..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/is-array.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export function isArrayOfNumbers(arr: any): arr is number[] {
-  if (!Array.isArray(arr)) return false;
-  return arr.every((item) => typeof item === "number");
-}
-
-export function isArrayOfDates(arr: any): arr is Date[] {
-  if (!Array.isArray(arr)) return false;
-  return arr.every((item) => item instanceof Date);
-}
-
-export function isArrayOfStrings(arr: any): arr is string[] {
-  if (!Array.isArray(arr)) return false;
-  return arr.every((item) => typeof item === "string");
-}
-
-export function isArrayOfBooleans(arr: any): arr is boolean[] {
-  if (!Array.isArray(arr)) return false;
-  return arr.every((item) => typeof item === "boolean");
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/is-json.ts b/apps/studio/components/interfaces/DataTableDemo/lib/is-json.ts
deleted file mode 100644
index 69ba9ef049d..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/is-json.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function isJSON(value: string): boolean {
-  try {
-    JSON.parse(value);
-    return true;
-  } catch (error) {
-    return false;
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/request/level.ts b/apps/studio/components/interfaces/DataTableDemo/lib/request/level.ts
deleted file mode 100644
index 6e2ba3a88e0..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/request/level.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { _LEVELS } from '@/constants/levels'
-import { cn } from '../utils'
-
-export function getLevelColor(
-  value: (typeof _LEVELS)[number]
-): Record<'text' | 'bg' | 'border', string> {
-  switch (value) {
-    case 'success':
-      return {
-        text: 'text-muted',
-        bg: 'bg-muted',
-        border: 'border-muted',
-      }
-    case 'warning':
-      return {
-        text: 'text-warning',
-        bg: 'bg-warning',
-        border: 'border-warning',
-      }
-    case 'error':
-      return {
-        text: 'text-destructive',
-        bg: 'bg-destructive',
-        border: 'border-destructive',
-      }
-    case 'info':
-    default:
-      return {
-        text: 'text-info',
-        bg: 'bg-info',
-        border: 'border-info',
-      }
-  }
-}
-
-export function getLevelRowClassName(value: (typeof _LEVELS)[number]): string {
-  switch (value) {
-    case 'success':
-      return ''
-    case 'warning':
-      return cn(
-        'bg-warning/5 hover:bg-warning/10 data-[state=selected]:bg-warning/20 focus-visible:bg-warning/10',
-        'dark:bg-warning/10 dark:hover:bg-warning/20 dark:data-[state=selected]:bg-warning/30 dark:focus-visible:bg-warning/20'
-      )
-    case 'error':
-      return cn(
-        'bg-destructive/5 hover:bg-destructive/10 data-[state=selected]:bg-destructive/20 focus-visible:bg-destructive/10',
-        'dark:bg-error/10 dark:hover:bg-destructive/20 dark:data-[state=selected]:bg-destructive/30 dark:focus-visible:bg-destructive/20'
-      )
-    case 'info':
-      return cn(
-        'bg-info/5 hover:bg-info/10 data-[state=selected]:bg-info/20 focus-visible:bg-info/10',
-        'dark:bg-info/10 dark:hover:bg-info/20 dark:data-[state=selected]:bg-info/30 dark:focus-visible:bg-info/20'
-      )
-    default:
-      return ''
-  }
-}
-
-export function getLevelLabel(value: (typeof _LEVELS)[number]): string {
-  switch (value) {
-    case 'success':
-      return '2xx'
-    case 'warning':
-      return '4xx'
-    case 'error':
-      return '5xx'
-    default:
-      return 'Unknown'
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/request/percentile.ts b/apps/studio/components/interfaces/DataTableDemo/lib/request/percentile.ts
deleted file mode 100644
index 660022bdb64..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/request/percentile.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-export type Percentile = 50 | 75 | 90 | 95 | 99;
-
-export function calculateSpecificPercentile(
-  values: number[],
-  percentile: Percentile
-) {
-  // Step 1: Sort the values in ascending order
-  const sortedValues = values.slice().sort((a, b) => a - b);
-  const n = sortedValues.length;
-
-  // Step 2: Calculate the index for the given percentile
-  const index = (percentile / 100) * (n - 1);
-
-  // Step 3: Handle non-integer index (interpolate between values)
-  if (Number.isInteger(index)) {
-    return sortedValues[index];
-  } else {
-    const lowerIndex = Math.floor(index);
-    const upperIndex = Math.ceil(index);
-    const weight = index - lowerIndex;
-
-    // Interpolate between the two nearest values
-    return (
-      sortedValues[lowerIndex] * (1 - weight) +
-      sortedValues[upperIndex] * weight
-    );
-  }
-}
-
-export function calculatePercentile(values: number[], value: number) {
-  // Step 1: Sort the values in ascending order
-  const sortedValues = values.slice().sort((a, b) => a - b);
-  const n = sortedValues.length;
-
-  // Step 2: Find how many values are less than or equal to the given value
-  const rank = sortedValues.filter((val) => val <= value).length;
-
-  // Step 3: Calculate the percentile using the formula
-  const percentile = (rank / n) * 100;
-
-  return percentile;
-}
-
-export function getPercentileColor(value: number) {
-  if (value < 50) {
-    return {
-      text: "text-green-500",
-      bg: "bg-green-100 dark:bg-green-900/50",
-      border: "border-green-200 dark:border-green-800",
-    };
-  } else if (value < 75) {
-    return {
-      text: "text-yellow-500",
-      bg: "bg-yellow-100 dark:bg-yellow-900/50",
-      border: "border-yellow-200 dark:border-yellow-800",
-    };
-  } else if (value < 90) {
-    return {
-      text: "text-orange-500",
-      bg: "bg-orange-100 dark:bg-orange-900/50",
-      border: "border-orange-200 dark:border-orange-800",
-    };
-  } else {
-    return {
-      text: "text-red-500",
-      bg: "bg-red-100 dark:bg-red-900/50",
-      border: "border-red-200 dark:border-red-800",
-    };
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/request/status-code.ts b/apps/studio/components/interfaces/DataTableDemo/lib/request/status-code.ts
deleted file mode 100644
index 84e78f73d66..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/request/status-code.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export function getStatusColor(value?: number | string): Record<'text' | 'bg' | 'border', string> {
-  switch (value) {
-    case '1':
-    case 'info':
-      return {
-        text: 'text-blue-500',
-        bg: '',
-        border: 'border-blue-200 dark:border-blue-800',
-      }
-    case '2':
-    case 'success':
-      return {
-        text: 'text-foreground-lighter',
-        bg: '',
-        border: 'border-green-200 dark:border-green-800',
-      }
-    case '4':
-    case 'warning':
-    case 'redirect':
-      return {
-        text: 'text-warning-600 dark:text-warning',
-        bg: 'bg-warning-300 dark:bg-waning-200',
-        border: 'border border-warning-400/50 dark:border-warning-400/50',
-      }
-    case '5':
-    case 'error':
-      return {
-        text: 'text-destructive',
-        bg: 'bg-destructive-300 dark:bg-destructive-300/50',
-        border: 'border border-destructive-400/50 dark:border-destructive-400/50',
-      }
-    default:
-      return {
-        text: 'text-foreground-lighter',
-        bg: '',
-        border: '',
-      }
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/request/timing.ts b/apps/studio/components/interfaces/DataTableDemo/lib/request/timing.ts
deleted file mode 100644
index 3565669fac8..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/request/timing.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export const timingPhases = [
-  "timing.dns",
-  "timing.connection",
-  "timing.tls",
-  "timing.ttfb",
-  "timing.transfer",
-] as const;
-
-export type TimingPhase = (typeof timingPhases)[number];
-
-export function getTimingColor(timing: TimingPhase) {
-  switch (timing) {
-    case "timing.dns":
-      return "bg-emerald-500";
-    case "timing.connection":
-      return "bg-cyan-500";
-    case "timing.tls":
-      return "bg-blue-500";
-    case "timing.ttfb":
-      return "bg-violet-500";
-    case "timing.transfer":
-      return "bg-purple-500";
-    default:
-      return "bg-gray-500";
-  }
-}
-
-export function getTimingLabel(timing: TimingPhase) {
-  switch (timing) {
-    case "timing.dns":
-      return "DNS";
-    case "timing.connection":
-      return "Connection";
-    case "timing.tls":
-      return "TLS";
-    case "timing.ttfb":
-      return "TTFB";
-    case "timing.transfer":
-      return "Transfer";
-    default:
-      return "Unknown";
-  }
-}
-
-export function getTimingPercentage(
-  timing: Record<TimingPhase, number>,
-  latency: number
-): Record<TimingPhase, number | string> {
-  // const total = Object.values(timing).reduce((acc, curr) => acc + curr, 0);
-  const percentage: Record<TimingPhase, number | string> = { ...timing };
-  Object.entries(timing).forEach(([key, value]) => {
-    const pValue = Math.round((value / latency) * 1000) / 1000;
-    percentage[key as keyof typeof timing] = /^0\.00[0-9]+/.test(
-      pValue.toString()
-    )
-      ? "<1%"
-      : `${(pValue * 100).toFixed(1)}%`;
-  });
-  return percentage;
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/table/filterfns.ts b/apps/studio/components/interfaces/DataTableDemo/lib/table/filterfns.ts
deleted file mode 100644
index 1b5e0ecc4e1..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/table/filterfns.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FilterFn } from "@tanstack/react-table";
-import { isAfter, isBefore, isSameDay } from "date-fns";
-import { isArrayOfDates } from "../is-array";
-
-export const inDateRange: FilterFn<any> = (row, columnId, value) => {
-  const date = new Date(row.getValue(columnId));
-  const [start, end] = value as Date[];
-
-  if (isNaN(date.getTime())) return false;
-
-  // if no end date, check if it's the same day
-  if (!end) return isSameDay(date, start);
-
-  return isAfter(date, start) && isBefore(date, end);
-};
-
-inDateRange.autoRemove = (val: any) =>
-  !Array.isArray(val) || !val.length || !isArrayOfDates(val);
-
-export const arrSome: FilterFn<any> = (row, columnId, filterValue) => {
-  if (!Array.isArray(filterValue)) return false;
-  return filterValue.some((val) => row.getValue<unknown[]>(columnId) === val);
-};
-
-arrSome.autoRemove = (val: any) => !Array.isArray(val) || !val?.length;
-
-function testFalsey(val: any) {
-  return val === undefined || val === null || val === "";
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/lib/utils.ts b/apps/studio/components/interfaces/DataTableDemo/lib/utils.ts
deleted file mode 100644
index 365058cebd7..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/api/route.ts b/apps/studio/components/interfaces/DataTableDemo/light/api/route.ts
deleted file mode 100644
index 728d7cdf378..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/api/route.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import { InfiniteQueryResponse } from "@/app/infinite/query-options";
-import type {
-  BaseChartSchema,
-  FacetMetadataSchema,
-} from "@/app/infinite/schema";
-import { differenceInMinutes, subDays } from "date-fns";
-import type { NextRequest } from "next/server";
-import SuperJSON from "superjson";
-import type { ColumnType } from "../columns";
-import { searchParamsCache } from "../search-params";
-
-type _TemporalFacetsType = {
-  facet: string;
-  // REMINDER: some values need to be parsed as int
-  value: string;
-  count: number;
-};
-
-const PAGE_SIZE = 100;
-const VERCEL_EDGE_PING_URL = "https://light.openstatus.dev";
-
-export async function GET(req: NextRequest) {
-  const cookieList = req.cookies.getAll();
-  const tbEndpoint =
-    cookieList.find((cookie) => cookie.name === "tb_endpoint")?.value ||
-    VERCEL_EDGE_PING_URL;
-
-  // TODO: we could use a POST request to avoid this
-  const _search: Map<string, string> = new Map();
-  req.nextUrl.searchParams.forEach((value, key) => _search.set(key, value));
-
-  const search = searchParamsCache.parse(Object.fromEntries(_search));
-
-  const baseParams = new URLSearchParams({
-    ...(search.level?.length && { levels: search.level.join(",") }),
-    ...(search.status?.length && { statuses: search.status.join(",") }),
-    ...(search.method?.length && { methods: search.method.join(",") }),
-    ...(search.region?.length && { regions: search.region.join(",") }),
-    ...(search.latency?.length && {
-      latencyStart: search.latency[0].toString(),
-      latencyEnd: search.latency[search.latency.length - 1].toString(),
-    }),
-    ...(search.timestamp?.length && {
-      timestampStart: search.timestamp[0].getTime().toString(),
-      timestampEnd: search.timestamp[search.timestamp.length - 1]
-        .getTime()
-        .toString(),
-    }),
-  });
-
-  const searchParams = new URLSearchParams(baseParams);
-  const facetsParams = new URLSearchParams(baseParams);
-  const statsParams = new URLSearchParams(baseParams);
-
-  // NOTE: search params for get request
-  searchParams.set("pageSize", PAGE_SIZE.toString());
-
-  if (
-    search.cursor &&
-    search.timestamp?.length &&
-    search.cursor.getTime() <=
-      search.timestamp[search.timestamp.length - 1].getTime()
-  ) {
-    searchParams.set("timestampEnd", search.cursor.getTime().toString());
-  } else if (!search.timestamp?.length) {
-    searchParams.set("timestampEnd", search.cursor.getTime().toString());
-  }
-
-  // NOTE: stats params for get request
-  if (search.timestamp?.length) {
-    statsParams.set(
-      "interval",
-      evaluateInterval(search.timestamp)?.toString() ?? "1440",
-    );
-  } else {
-    statsParams.set(
-      "timestampStart",
-      subDays(new Date(), 30).getTime().toString(),
-    );
-    statsParams.set("timestampEnd", new Date().getTime().toString());
-    statsParams.set("interval", "1440");
-  }
-
-  // TODO: too many requests, especially when scrolling as stats/facets are not cached and are only needed for initial load
-  const [dataRes, chartRes, facetsRes] = await Promise.all([
-    fetch(`${tbEndpoint}/api/get?${searchParams.toString()}`),
-    // TODO: we are missing filter in both, the stats and the facets - nothing urgent
-    fetch(`${tbEndpoint}/api/stats?${statsParams.toString()}`),
-    fetch(`${tbEndpoint}/api/facets?${facetsParams.toString()}`),
-  ]);
-
-  // TODO: we should not return empty data, but we need to handle the error case - ok for now
-  if (!dataRes.ok || !chartRes.ok || !facetsRes.ok) {
-    return Response.json(
-      SuperJSON.stringify({
-        data: [],
-        prevCursor: null,
-        nextCursor: null,
-        meta: {
-          chartData: [],
-          facets: {},
-          totalRowCount: 0,
-          filterRowCount: 0,
-        },
-      } satisfies InfiniteQueryResponse<ColumnType[]>),
-    );
-  }
-
-  // FIXME: too lazy for zod right now
-  const { data, rows_before_limit_at_least: filterRowCount } =
-    (await dataRes.json()) as {
-      data: ColumnType[];
-      // NOTE: automatically added by tb when using LIMIT
-      rows_before_limit_at_least: number;
-      // ... tb response values
-    };
-  const { data: chartData } = (await chartRes.json()) as {
-    data: BaseChartSchema[];
-  };
-  const { data: _facets } = (await facetsRes.json()) as {
-    data: _TemporalFacetsType[];
-  };
-
-  const facets = transformFacets(_facets);
-
-  const lastTimestamp = data[data.length - 1]?.timestamp;
-  const isLastPage = lastTimestamp && filterRowCount <= PAGE_SIZE;
-
-  return Response.json(
-    SuperJSON.stringify({
-      data,
-      prevCursor: null,
-      nextCursor: isLastPage ? null : lastTimestamp - 1,
-      meta: {
-        chartData,
-        facets,
-        totalRowCount: facets["level"]?.total ?? 0,
-        filterRowCount,
-      },
-    } satisfies InfiniteQueryResponse<ColumnType[]>),
-  );
-}
-
-/** ---------- UTILS ---------- */
-
-function transformFacets(
-  facets: _TemporalFacetsType[],
-): Record<string, FacetMetadataSchema> {
-  return facets.reduce(
-    (acc, curr) => {
-      const facet = acc[curr.facet] ?? {
-        rows: [],
-        total: 0,
-      };
-      if (curr.facet === "status") {
-        facet.rows.push({
-          value: parseInt(curr.value),
-          total: curr.count,
-        });
-        // REMINDER: fugly but works and not many status codes so no performance hit
-        facet.rows.sort((a, b) => a.value - b.value);
-        facet.total += curr.count;
-      } else if (curr.facet === "latency") {
-        facet.rows.push({
-          value: parseInt(curr.value),
-          total: curr.count,
-        });
-        facet.total += curr.count;
-        facet.min = Math.min(facet.min ?? 0, parseInt(curr.value));
-        facet.max = Math.max(facet.max ?? 0, parseInt(curr.value));
-      } else {
-        facet.rows.push({
-          value: curr.value,
-          total: curr.count,
-        });
-        facet.total += curr.count;
-      }
-
-      acc[curr.facet] = facet;
-      return acc;
-    },
-    {} as Record<string, FacetMetadataSchema>,
-  );
-}
-
-function evaluateInterval(dates: Date[] | null): number | null {
-  if (!dates) return null;
-  if (dates.length < 1 || dates.length > 3) return null;
-
-  const timeDiffInMinutes = Math.abs(differenceInMinutes(dates[0], dates[1]));
-
-  if (timeDiffInMinutes < 60) return 1;
-  // 2h
-  if (timeDiffInMinutes < 120) return 5;
-  // 4h
-  if (timeDiffInMinutes < 240) return 10;
-  // 8h
-  if (timeDiffInMinutes < 480) return 30;
-  // 12h
-  if (timeDiffInMinutes < 1440) return 60;
-  // 24h
-  if (timeDiffInMinutes < 2880) return 60;
-  // 48h
-  if (timeDiffInMinutes < 5760) return 120;
-  // 2d
-  if (timeDiffInMinutes < 11520) return 240;
-  // 4d
-  if (timeDiffInMinutes < 23040) return 480;
-  // 8d
-  if (timeDiffInMinutes < 46080) return 1440;
-  // 16d
-  if (timeDiffInMinutes < 92160) return 1440;
-  // 32d
-  if (timeDiffInMinutes < 184320) return 2880;
-  // 64d
-  if (timeDiffInMinutes < 368640) return 5760;
-  // 128d
-  if (timeDiffInMinutes < 737280) return 11520;
-  // 256d
-  if (timeDiffInMinutes < 1474560) return 23040;
-  // 512d
-  return 46080;
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/client.tsx b/apps/studio/components/interfaces/DataTableDemo/light/client.tsx
deleted file mode 100644
index 56bf207dca8..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/client.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client'
-
-import { getLevelRowClassName } from 'components/interfaces/DataTableDemo/lib/request/level'
-import { useInfiniteQuery } from '@tanstack/react-query'
-import { useQueryStates } from 'nuqs'
-import * as React from 'react'
-import {
-  getFacetedMinMaxValues,
-  getFacetedUniqueValues,
-} from 'components/interfaces/DataTableDemo/infinite/client'
-import { DataTableInfinite } from 'components/interfaces/DataTableDemo/infinite/data-table-infinite'
-import { columns } from './columns'
-import { filterFields as defaultFilterFields, sheetFields } from './constants'
-import { dataOptions } from './query-options'
-import { searchParamsParser } from './search-params'
-
-export function Client() {
-  const [search] = useQueryStates(searchParamsParser)
-  const { data, isFetching, isLoading, fetchNextPage, hasNextPage, refetch } = useInfiniteQuery(
-    dataOptions(search)
-  )
-
-  const flatData = React.useMemo(
-    () => data?.pages?.flatMap((page) => page.data ?? []) ?? [],
-    [data?.pages]
-  )
-
-  const lastPage = data?.pages?.[data?.pages.length - 1]
-  const firstPage = data?.pages?.[0]
-  const totalDBRowCount = lastPage?.meta?.totalRowCount
-  const filterDBRowCount = firstPage?.meta?.filterRowCount
-  const metadata = lastPage?.meta?.metadata
-  const chartData = lastPage?.meta?.chartData
-  const facets = lastPage?.meta?.facets
-  const totalFetched = flatData?.length
-
-  const { sort, cursor, direction, uuid, ...filter } = search
-
-  // TODO: replace completely by facets
-  const filterFields = React.useMemo(() => {
-    return defaultFilterFields.map((field) => {
-      const facet = facets?.[field.value]
-      if (facet) {
-        // TODO: facets
-        if (['status', 'method'].includes(field.value)) {
-          field.options = facet.rows.map((row) => ({
-            value: row.value,
-            label: row.value,
-          }))
-        }
-        if (field.value === 'latency') {
-          field.min = facet.min || field.min
-          field.max = facet.max || field.max
-          field.options = facet.rows.map((row) => ({
-            value: row.value,
-            label: row.value,
-          }))
-        }
-      }
-      return field
-    })
-  }, [flatData])
-
-  const defaultColumnFilters = React.useMemo(() => {
-    return Object.entries(filter)
-      .map(([key, value]) => ({
-        id: key,
-        value,
-      }))
-      .filter(({ value }) => value ?? undefined)
-  }, [filter])
-
-  return (
-    <DataTableInfinite
-      columns={columns}
-      data={flatData}
-      totalRows={totalDBRowCount}
-      filterRows={filterDBRowCount}
-      totalRowsFetched={totalFetched}
-      defaultColumnFilters={defaultColumnFilters}
-      defaultColumnSorting={sort ? [sort] : undefined}
-      getRowClassName={(row) => getLevelRowClassName(row.original.level)}
-      getRowId={(row) => `${row.region}-${row.timestamp}-${row.url}-${row.latency}`}
-      meta={metadata}
-      chartData={chartData}
-      chartDataColumnId="timestamp"
-      filterFields={filterFields}
-      sheetFields={sheetFields}
-      isFetching={isFetching}
-      isLoading={isLoading}
-      getFacetedUniqueValues={getFacetedUniqueValues(facets)}
-      getFacetedMinMaxValues={getFacetedMinMaxValues(facets)}
-      fetchNextPage={fetchNextPage}
-      hasNextPage={hasNextPage}
-      // NOTE: we are not using live mode
-      fetchPreviousPage={undefined}
-      refetch={refetch}
-      renderSheetTitle={(props) => props.row?.original.url}
-      searchParamsParser={searchParamsParser}
-    />
-  )
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/columns.tsx b/apps/studio/components/interfaces/DataTableDemo/light/columns.tsx
deleted file mode 100644
index af21f061b50..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/columns.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { DataTableColumnLatency } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency'
-import { DataTableColumnLevelIndicator } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator'
-import { DataTableColumnRegion } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region'
-import { DataTableColumnStatusCode } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code'
-import { DataTableColumnTimestamp } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-timestamp'
-import { LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-import { VERCEL_EDGE_REGIONS } from 'components/interfaces/DataTableDemo/constants/region'
-import type { ColumnDef } from '@tanstack/react-table'
-
-export type ColumnType = {
-  level: (typeof LEVELS)[number]
-  url: string
-  method: string
-  status: number
-  latency: number
-  region: (typeof VERCEL_EDGE_REGIONS)[number]
-  timestamp: number
-  headers: string
-  body: string
-}
-
-export const columns: ColumnDef<ColumnType>[] = [
-  {
-    accessorKey: 'level',
-    header: '',
-    cell: ({ row }) => {
-      const level = row.getValue<ColumnType['level']>('level')
-      return <DataTableColumnLevelIndicator value={level} />
-    },
-    enableHiding: false,
-    enableResizing: false,
-    filterFn: 'arrSome',
-    size: 27,
-    minSize: 27,
-    maxSize: 27,
-    meta: {
-      headerClassName:
-        'w-[--header-level-size] max-w-[--header-level-size] min-w-[--header-level-size]',
-      cellClassName: 'w-[--col-level-size] max-w-[--col-level-size] min-w-[--col-level-size]',
-    },
-  },
-  {
-    accessorKey: 'timestamp',
-    header: 'Date',
-    cell: ({ row }) => {
-      const date = new Date(row.getValue<ColumnType['timestamp']>('timestamp'))
-      return <DataTableColumnTimestamp date={date} />
-    },
-    enableResizing: false,
-    filterFn: 'inDateRange',
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: ({ row }) => {
-      const status = row.getValue<ColumnType['status']>('status')
-      return <DataTableColumnStatusCode value={status} />
-    },
-    enableResizing: false,
-    filterFn: 'arrSome',
-  },
-  {
-    accessorKey: 'method',
-    header: 'Method',
-    enableResizing: false,
-    filterFn: 'arrIncludesSome',
-  },
-  {
-    accessorKey: 'url',
-    header: 'URL',
-    enableResizing: false,
-    // meta: {
-    //   cellClassName: "truncate max-w-[250px]",
-    // },
-  },
-  {
-    accessorKey: 'latency',
-    header: 'Latency',
-    cell: ({ row }) => {
-      const latency = row.getValue<ColumnType['latency']>('latency')
-      return <DataTableColumnLatency value={latency} />
-    },
-    enableResizing: false,
-    filterFn: 'inNumberRange',
-  },
-  {
-    accessorKey: 'region',
-    header: 'Region',
-    cell: ({ row }) => {
-      const region = row.getValue<ColumnType['region']>('region')
-      return <DataTableColumnRegion value={region} />
-    },
-    enableResizing: false,
-    filterFn: 'arrIncludesSome',
-  },
-]
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/constants.tsx b/apps/studio/components/interfaces/DataTableDemo/light/constants.tsx
deleted file mode 100644
index eca5b2a472f..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/constants.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-'use client'
-
-import { CopyToClipboardContainer } from 'components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container'
-import { KVTabs } from 'components/interfaces/DataTableDemo/components/custom/kv-tabs'
-import { DataTableColumnLatency } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency'
-import { DataTableColumnLevelIndicator } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator'
-import { DataTableColumnRegion } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region'
-import { DataTableColumnStatusCode } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code'
-import type {
-  DataTableFilterField,
-  Option,
-  SheetField,
-} from 'components/interfaces/DataTableDemo/components/data-table/types'
-import { _LEVELS, LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-import { METHODS } from 'components/interfaces/DataTableDemo/constants/method'
-import { VERCEL_EDGE_REGIONS } from 'components/interfaces/DataTableDemo/constants/region'
-import { isJSON } from 'components/interfaces/DataTableDemo/lib/is-json'
-import { getLevelLabel } from 'components/interfaces/DataTableDemo/lib/request/level'
-import { format } from 'date-fns'
-import type { ColumnType } from './columns'
-
-export const filterFields = [
-  {
-    label: 'Time Range',
-    value: 'timestamp',
-    type: 'timerange',
-    defaultOpen: true,
-    commandDisabled: true,
-  },
-  {
-    label: 'Level',
-    value: 'level',
-    type: 'checkbox',
-    defaultOpen: true,
-    options: LEVELS.map((level) => ({ value: level, label: level })),
-    component: (props: Option) => (
-      <div className="flex items-center justify-between gap-2 font-mono md:w-[106px]">
-        <div className="flex items-center gap-1">
-          <DataTableColumnLevelIndicator value={props.value as (typeof _LEVELS)[number]} />
-          <div className="capitalize text-foreground/70">{props.value}</div>
-        </div>
-        <div className="text-xs text-muted-foreground/70">
-          {getLevelLabel(props.value as (typeof _LEVELS)[number])}
-        </div>
-      </div>
-    ),
-  },
-  {
-    label: 'URL',
-    value: 'url',
-    type: 'input',
-  },
-  {
-    label: 'Status Code',
-    value: 'status',
-    type: 'checkbox',
-    // REMINDER: will be injected by the client.tsx
-    options: [
-      { label: '200', value: 200 },
-      { label: '400', value: 400 },
-      { label: '500', value: 500 },
-    ],
-    component: (props: Option) => <DataTableColumnStatusCode value={props.value as number} />,
-  },
-  {
-    label: 'Method',
-    value: 'method',
-    type: 'checkbox',
-    // REMINDER: will be injected by the client.tsx
-    options: METHODS.map((region) => ({ label: region, value: region })),
-  },
-  {
-    label: 'Region',
-    value: 'region',
-    type: 'checkbox',
-    options: VERCEL_EDGE_REGIONS.map((region) => ({
-      label: region,
-      value: region,
-    })),
-  },
-  {
-    label: 'Latency',
-    value: 'latency',
-    type: 'slider',
-    min: 0,
-    max: 5000,
-    // REMINDER: will be injected by the client.tsx
-    options: [{ label: '0', value: 0 }],
-  },
-] satisfies DataTableFilterField<ColumnType>[]
-
-export const sheetFields = [
-  {
-    id: 'level',
-    label: 'Level',
-    type: 'checkbox',
-    component: (props) => (
-      <div className="flex items-center justify-end gap-1.5">
-        <span className="capitalize">{props.level}</span>
-        <DataTableColumnLevelIndicator value={props.level} />
-      </div>
-    ),
-    skeletonClassName: 'w-2.5',
-  },
-  {
-    id: 'timestamp',
-    label: 'Timestamp',
-    type: 'timerange',
-    component: (props) => format(new Date(props.timestamp), 'LLL dd, y HH:mm:ss'),
-    skeletonClassName: 'w-36',
-  },
-  {
-    id: 'status',
-    label: 'Status',
-    type: 'checkbox',
-    component: (props) => <DataTableColumnStatusCode value={props.status} />,
-    skeletonClassName: 'w-12',
-  },
-  {
-    id: 'method',
-    label: 'Method',
-    type: 'checkbox',
-    skeletonClassName: 'w-10',
-  },
-  {
-    id: 'url',
-    label: 'URL',
-    type: 'input',
-    skeletonClassName: 'w-24',
-  },
-  {
-    id: 'region',
-    label: 'Region',
-    type: 'checkbox',
-    component: (props) => <DataTableColumnRegion value={props.region} reverse showFlag />,
-    skeletonClassName: 'w-12',
-  },
-  {
-    id: 'latency',
-    label: 'Latency',
-    type: 'slider',
-    component: (props) => <DataTableColumnLatency value={props.latency} />,
-    skeletonClassName: 'w-16',
-  },
-  {
-    id: 'headers',
-    label: 'Headers',
-    type: 'readonly',
-    condition: (props) => props.headers && JSON.parse(props.headers),
-    component: (props) => (
-      // REMINDER: negative margin to make it look like the header is on the same level of the tab triggers
-      <KVTabs data={JSON.parse(props.headers)} className="-mt-[22px]" />
-    ),
-    className: 'flex-col items-start w-full gap-1',
-  },
-  {
-    id: 'body',
-    label: 'Body',
-    type: 'readonly',
-    condition: (props) => props.body !== undefined,
-    component: (props) => (
-      <CopyToClipboardContainer key={props.body} variant="default" maxHeight={200}>
-        {isJSON(props.body) ? JSON.stringify(props.body, null, 2) : props.body}
-      </CopyToClipboardContainer>
-    ),
-    className: 'flex-col items-start w-full gap-1',
-  },
-] satisfies SheetField<ColumnType, unknown>[]
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/layout.tsx b/apps/studio/components/interfaces/DataTableDemo/light/layout.tsx
deleted file mode 100644
index 08b8dff815a..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/layout.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client";
-
-import { Kbd } from "@/components/custom/kbd";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { useHotKey } from "@/hooks/use-hot-key";
-import { ArrowRight, ChevronRight, Database, Zap } from "lucide-react";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <Button
-        className="fixed left-1.5 top-1.5 z-[100] -translate-y-12 opacity-0 transition-all focus-visible:translate-y-0 focus-visible:opacity-100"
-        asChild
-      >
-        <Link id="skip-to-content" href="#content">
-          Skip to content
-        </Link>
-      </Button>
-      {children}
-      <div className="fixed bottom-4 left-4 z-50">
-        <APIPopover />
-      </div>
-      <div className="fixed bottom-4 right-4 z-50">
-        <ButtonPile />
-      </div>
-    </>
-  );
-}
-
-function ButtonPile() {
-  return (
-    <div className="group/pile relative pt-1.5">
-      <Button asChild className="group">
-        <a
-          href="https://github.com/openstatusHQ/data-table-filters"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <span className="mr-1">View GitHub Repo</span>
-          <ArrowRight className="relative mb-[1px] inline h-4 w-0 transition-all group-hover:w-4" />
-          <ChevronRight className="relative mb-[1px] inline h-4 w-4 transition-all group-hover:w-0" />
-        </a>
-      </Button>
-      <Button
-        asChild
-        className="group absolute -right-1.5 top-0 -z-10 opacity-70 transition-transform group-hover/pile:-translate-x-1.5 group-hover/pile:-translate-y-10 group-hover/pile:opacity-100"
-      >
-        <a href="https://light.openstatus.dev" target="_blank" rel="noreferrer">
-          <span className="mr-1">Explore Light OS</span>
-          <ArrowRight className="relative mb-[1px] inline h-4 w-0 transition-all group-hover:w-4" />
-          <ChevronRight className="relative mb-[1px] inline h-4 w-4 transition-all group-hover:w-0" />
-        </a>
-      </Button>
-    </div>
-  );
-}
-
-function APIPopover() {
-  const [open, setOpen] = useState(false);
-  const [endpoint, setEndpoint] = useState("");
-  useHotKey(() => setOpen((prev) => !prev), "j");
-
-  useEffect(() => {
-    const cookie = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith("tb_endpoint="));
-    if (cookie) {
-      setEndpoint(decodeURIComponent(cookie.split("=")[1]));
-    }
-  }, []);
-
-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    document.cookie = `tb_endpoint=${encodeURIComponent(endpoint)}; path=/; max-age=${60 * 60 * 24 * 365}`;
-    window.location.reload();
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button size="icon" className="h-8 w-8">
-          <Database className="h-4 w-4" />
-          <span className="sr-only">OpenStatus Light Viewer</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent side="right" align="end" sideOffset={10} className="w-80">
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <div className="flex items-center justify-between gap-2">
-              <h4 className="font-medium leading-none">
-                OpenStatus Light Viewer
-              </h4>
-              <Kbd variant="outline">
-                <span className="mr-1">⌘</span>
-                <span>J</span>
-              </Kbd>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Configure the API endpoint for your{" "}
-              <a
-                href="https://github.com/openstatusHQ/vercel-edge-ping"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <code className="rounded-sm bg-muted px-0.5 underline decoration-muted-foreground underline-offset-4 hover:decoration-foreground">
-                  vercel-edge-ping
-                </code>
-              </a>{" "}
-              project.
-            </p>
-          </div>
-          {/* TODO: use form */}
-          <form className="flex items-center gap-2" onSubmit={handleSubmit}>
-            <div className="flex-1">
-              <Label htmlFor="endpoint" className="sr-only">
-                Endpoint
-              </Label>
-              <Input
-                type="url"
-                id="endpoint"
-                name="endpoint"
-                placeholder="https://light.openstatus.dev"
-                pattern="https://.*"
-                value={endpoint}
-                onChange={(e) => setEndpoint(e.target.value)}
-                className="h-8"
-              />
-            </div>
-            <Button type="submit" size="icon" className="h-8 w-8">
-              <Zap className="h-4 w-4" />
-              <span className="sr-only">Save</span>
-            </Button>
-          </form>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/page.tsx b/apps/studio/components/interfaces/DataTableDemo/light/page.tsx
deleted file mode 100644
index 07ff9b9f0cc..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getQueryClient } from "@/providers/get-query-client";
-import { SearchParams } from "nuqs";
-import * as React from "react";
-import { Client } from "./client";
-import { dataOptions } from "./query-options";
-import { searchParamsCache } from "./search-params";
-
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Promise<SearchParams>;
-}) {
-  const search = searchParamsCache.parse(await searchParams);
-  const queryClient = getQueryClient();
-  await queryClient.prefetchInfiniteQuery(dataOptions(search));
-
-  return <Client />;
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/query-options.ts b/apps/studio/components/interfaces/DataTableDemo/light/query-options.ts
deleted file mode 100644
index 40457f203b7..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/query-options.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { InfiniteQueryResponse } from '../infinite/query-options'
-// Removed keepPreviousData import as it causes persistent lint errors
-// import { keepPreviousData } from '@tanstack/react-query'
-import SuperJSON from 'superjson'
-import type { ColumnType } from './columns'
-import type { SearchParamsType } from './search-params'
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-  SORT_DELIMITER,
-} from 'components/interfaces/DataTableDemo/lib/delimiters'
-
-const createApiQueryString = (params: Record<string, any>): string => {
-  const queryParams = new URLSearchParams()
-
-  for (const [key, value] of Object.entries(params)) {
-    if (value === null || value === undefined) continue
-
-    if (key === 'timestamp' && Array.isArray(value) && value.length === 2) {
-      queryParams.set('timestampStart', value[0].getTime().toString())
-      queryParams.set('timestampEnd', value[1].getTime().toString())
-    } else if (key === 'latency' && Array.isArray(value) && value.length > 0) {
-      queryParams.set('latencyStart', value[0].toString())
-      queryParams.set('latencyEnd', value[value.length - 1].toString())
-    } else if (key === 'status' && Array.isArray(value) && value.length > 0) {
-      queryParams.set('statusStart', value[0].toString())
-      queryParams.set('statusEnd', value[value.length - 1].toString())
-    } else if (Array.isArray(value)) {
-      if (value.length > 0) {
-        queryParams.set(key, value.join(','))
-      }
-    } else if (key === 'sort' && typeof value === 'object' && value !== null) {
-      queryParams.set(
-        key,
-        `${(value as { id: string; desc: boolean }).id}.${(value as { id: string; desc: boolean }).desc ? 'desc' : 'asc'}`
-      )
-    } else if (value instanceof Date) {
-      queryParams.set(key, value.getTime().toString())
-    } else {
-      queryParams.set(key, String(value))
-    }
-  }
-  const queryString = queryParams.toString()
-  return queryString ? `?${queryString}` : ''
-}
-
-export const dataOptions = (search: SearchParamsType) => {
-  const queryKeyParams = Object.entries(search).reduce(
-    (acc, [key, value]) => {
-      if (key !== 'uuid' && value !== null && value !== undefined) {
-        acc[key] = value
-      }
-      return acc
-    },
-    {} as Record<string, any>
-  )
-
-  type PageParam = { cursor: number; direction: 'next' | 'prev' }
-
-  return {
-    queryKey: ['data-table-light', JSON.stringify(queryKeyParams)],
-    queryFn: async ({ pageParam }: { pageParam: PageParam }) => {
-      const cursor = pageParam?.cursor ? new Date(pageParam.cursor) : undefined
-      const direction = pageParam?.direction
-
-      const apiParams = {
-        ...search,
-        ...(cursor && { cursor }),
-        ...(direction && { direction }),
-      }
-
-      const queryString = createApiQueryString(apiParams)
-      const response = await fetch(`/api/data-table/light${queryString}`)
-
-      if (!response.ok) {
-        throw new Error('Network response was not ok')
-      }
-
-      const responseText = await response.text()
-
-      try {
-        const parsedData = SuperJSON.parse<InfiniteQueryResponse<ColumnType[]>>(responseText)
-        // console.log('Parsed data returned from queryFn:', parsedData)
-        return parsedData
-      } catch (e) {
-        console.error('SuperJSON parsing failed:', e)
-        console.error('Received text:', responseText)
-        throw new Error('Failed to parse API response')
-      }
-    },
-    initialPageParam: { cursor: new Date().getTime(), direction: 'next' } as PageParam,
-    getNextPageParam: (
-      lastPage: InfiniteQueryResponse<ColumnType[]>,
-      _pages: InfiniteQueryResponse<ColumnType[]>[]
-    ) => {
-      if (!lastPage.nextCursor) return null
-      return { cursor: lastPage.nextCursor, direction: 'next' } as PageParam
-    },
-    refetchOnWindowFocus: false,
-    // Removed placeholderData due to persistent lint/resolution issues
-    // placeholderData: keepPreviousData,
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/light/search-params.ts b/apps/studio/components/interfaces/DataTableDemo/light/search-params.ts
deleted file mode 100644
index b9b98c6803d..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/light/search-params.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-import { METHODS } from 'components/interfaces/DataTableDemo/constants/method'
-import { VERCEL_EDGE_REGIONS } from 'components/interfaces/DataTableDemo/constants/region'
-// Note: import from 'nuqs/server' comment removed
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-  SORT_DELIMITER,
-} from 'components/interfaces/DataTableDemo/lib/delimiters'
-import {
-  createParser,
-  // createSearchParamsCache, // Removed for Pages Router compatibility
-  // createSerializer, // Removed for Pages Router compatibility
-  parseAsArrayOf,
-  parseAsInteger,
-  parseAsString,
-  parseAsStringLiteral,
-  parseAsTimestamp,
-  type inferParserType,
-  // useQueryStates, // Can be added if a hook is needed
-} from 'nuqs' // Changed from nuqs/server
-
-// https://logs.run/i?sort=latency.desc
-
-export const parseAsSort = createParser({
-  parse(queryValue) {
-    const [id, desc] = queryValue.split(SORT_DELIMITER)
-    if (!id && !desc) return null
-    return { id, desc: desc === 'desc' }
-  },
-  serialize(value) {
-    return `${value.id}.${value.desc ? 'desc' : 'asc'}`
-  },
-})
-
-export const searchParamsParser = {
-  // CUSTOM FILTERS
-  level: parseAsArrayOf(parseAsStringLiteral(LEVELS), ARRAY_DELIMITER),
-  latency: parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  status: parseAsArrayOf(parseAsInteger, SLIDER_DELIMITER),
-  region: parseAsArrayOf(parseAsStringLiteral(VERCEL_EDGE_REGIONS), ARRAY_DELIMITER),
-  method: parseAsArrayOf(parseAsStringLiteral(METHODS), ARRAY_DELIMITER),
-  url: parseAsString,
-  timestamp: parseAsArrayOf(parseAsTimestamp, RANGE_DELIMITER),
-  // REQUIRED FOR SORTING & PAGINATION
-  sort: parseAsSort,
-  // REQUIRED FOR INFINITE SCROLLING (Live Mode and Load More)
-  direction: parseAsStringLiteral(['prev', 'next']).withDefault('next'),
-  cursor: parseAsTimestamp.withDefault(new Date()),
-  // live: parseAsBoolean.withDefault(false),
-  // REQUIRED FOR SELECTION
-  uuid: parseAsString,
-}
-
-// Removed for Pages Router compatibility
-// export const searchParamsCache = createSearchParamsCache(searchParamsParser)
-// export const searchParamsSerializer = createSerializer(searchParamsParser)
-
-export type SearchParamsType = inferParserType<typeof searchParamsParser>
diff --git a/apps/studio/components/interfaces/DataTableDemo/providers/controls.tsx b/apps/studio/components/interfaces/DataTableDemo/providers/controls.tsx
deleted file mode 100644
index 67c01db8683..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/providers/controls.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useLocalStorage } from 'components/interfaces/DataTableDemo/hooks/use-local-storage'
-import { createContext, useContext } from 'react'
-
-interface ControlsContextType {
-  open: boolean
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-export const ControlsContext = createContext<ControlsContextType | null>(null)
-
-export function ControlsProvider({ children }: { children: React.ReactNode }) {
-  const [open, setOpen] = useLocalStorage('data-table-controls', true)
-
-  return (
-    <ControlsContext.Provider value={{ open, setOpen }}>
-      <div
-        // REMINDER: access the data-expanded state with tailwind via `group-data-[expanded=true]/controls:block`
-        // In tailwindcss v4, we could even use `group-data-expanded/controls:block`
-        className="group/controls h-full"
-        data-expanded={open}
-      >
-        {children}
-      </div>
-    </ControlsContext.Provider>
-  )
-}
-
-export function useControls() {
-  const context = useContext(ControlsContext)
-
-  if (!context) {
-    throw new Error('useControls must be used within a ControlsProvider')
-  }
-
-  return context as ControlsContextType
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/providers/get-query-client.ts b/apps/studio/components/interfaces/DataTableDemo/providers/get-query-client.ts
deleted file mode 100644
index e5993fc2823..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/providers/get-query-client.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  QueryClient,
-  defaultShouldDehydrateQuery,
-  isServer,
-} from "@tanstack/react-query";
-
-function makeQueryClient() {
-  return new QueryClient({
-    defaultOptions: {
-      queries: {
-        // staleTime: 10 * 60 * 1000, // 10 minutes
-      },
-      dehydrate: {
-        // include pending queries in dehydration
-        shouldDehydrateQuery: (query) =>
-          defaultShouldDehydrateQuery(query) ||
-          query.state.status === "pending",
-      },
-    },
-  });
-}
-
-let browserQueryClient: QueryClient | undefined = undefined;
-
-export function getQueryClient() {
-  if (isServer) {
-    // Server: always make a new query client
-    return makeQueryClient();
-  } else {
-    // Browser: make a new query client if we don't already have one
-    // This is very important, so we don't re-make a new client if React
-    // suspends during the initial render. This may not be needed if we
-    // have a suspense boundary BELOW the creation of the query client
-    if (!browserQueryClient) browserQueryClient = makeQueryClient();
-    return browserQueryClient;
-  }
-}
diff --git a/apps/studio/components/interfaces/DataTableDemo/providers/react-query.tsx b/apps/studio/components/interfaces/DataTableDemo/providers/react-query.tsx
deleted file mode 100644
index 489968720c7..00000000000
--- a/apps/studio/components/interfaces/DataTableDemo/providers/react-query.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import type * as React from "react";
-import { getQueryClient } from "./get-query-client";
-
-export function ReactQueryProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const queryClient = getQueryClient();
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools />
-    </QueryClientProvider>
-  );
-}
diff --git a/apps/studio/components/interfaces/Trace/data/trace-data.ts b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/data/trace-data.ts
similarity index 99%
rename from apps/studio/components/interfaces/Trace/data/trace-data.ts
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/data/trace-data.ts
index 7e05b358914..0d91735d297 100644
--- a/apps/studio/components/interfaces/Trace/data/trace-data.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/data/trace-data.ts
@@ -1,4 +1,4 @@
-import type { TraceData } from './../types/trace'
+import type { TraceData } from '../types/trace'
 
 // Sample trace data for the trace viewer
 export const sampleTraceData: TraceData = {
diff --git a/apps/studio/components/interfaces/Trace/details/marker-detail.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/details/marker-detail.tsx
similarity index 95%
rename from apps/studio/components/interfaces/Trace/details/marker-detail.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/details/marker-detail.tsx
index a6c71966b8c..c4565473a8a 100644
--- a/apps/studio/components/interfaces/Trace/details/marker-detail.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/details/marker-detail.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { X, AlertTriangle, AlertCircle, CheckCircle, Info } from 'lucide-react'
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
 import { cn } from 'ui'
-import type { Marker } from './../types/trace'
+import type { Marker } from '../types/trace'
 
 interface MarkerDetailProps {
   marker: Marker
diff --git a/apps/studio/components/interfaces/Trace/details/span-detail.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/details/span-detail.tsx
similarity index 97%
rename from apps/studio/components/interfaces/Trace/details/span-detail.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/details/span-detail.tsx
index c3b9064ab9c..3c30b241418 100644
--- a/apps/studio/components/interfaces/Trace/details/span-detail.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/details/span-detail.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { X } from 'lucide-react'
 import { cn } from 'ui'
-import type { LayoutSpan } from './../utils/layout-algorithm'
+import type { LayoutSpan } from '../utils/layout-algorithm'
 
 interface SpanDetailProps {
   span: LayoutSpan
diff --git a/apps/studio/components/interfaces/Trace/span-detail.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/span-detail.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Trace/span-detail.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/span-detail.tsx
diff --git a/apps/studio/components/interfaces/Trace/timeline/minimap.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/minimap.tsx
similarity index 96%
rename from apps/studio/components/interfaces/Trace/timeline/minimap.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/minimap.tsx
index f318f6e596b..5bc456999f7 100644
--- a/apps/studio/components/interfaces/Trace/timeline/minimap.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/minimap.tsx
@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { cn } from 'ui'
-import type { LayoutSpan } from './../utils/layout-algorithm'
+import type { LayoutSpan } from '../utils/layout-algorithm'
 
 interface MinimapProps {
   spans: LayoutSpan[]
diff --git a/apps/studio/components/interfaces/Trace/timeline/timeline-cursor.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-cursor.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Trace/timeline/timeline-cursor.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-cursor.tsx
diff --git a/apps/studio/components/interfaces/Trace/timeline/timeline-header.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-header.tsx
similarity index 95%
rename from apps/studio/components/interfaces/Trace/timeline/timeline-header.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-header.tsx
index dfc564fc22f..3a0f148b177 100644
--- a/apps/studio/components/interfaces/Trace/timeline/timeline-header.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-header.tsx
@@ -1,7 +1,7 @@
 'use client'
-import { Search, ZoomIn, ZoomOut, Clock, ChevronDown } from 'lucide-react'
-import { useState, useRef, useEffect } from 'react'
-import { traceDataSets } from './../data/trace-data'
+import { ChevronDown, Clock, Search, ZoomIn, ZoomOut } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { traceDataSets } from '../data/trace-data'
 
 interface TimelineHeaderProps {
   onZoomIn: () => void
diff --git a/apps/studio/components/interfaces/Trace/timeline/timeline-marker.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-marker.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Trace/timeline/timeline-marker.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-marker.tsx
index 8dd4bf74bb6..9c8a69216c1 100644
--- a/apps/studio/components/interfaces/Trace/timeline/timeline-marker.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-marker.tsx
@@ -1,9 +1,9 @@
 'use client'
 
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react'
 import type React from 'react'
-import { AlertTriangle, AlertCircle, CheckCircle, Info } from 'lucide-react'
 import { cn } from 'ui'
-import type { Marker } from './../types/trace'
+import type { Marker } from '../types/trace'
 
 interface TimelineMarkerProps {
   marker: Marker
diff --git a/apps/studio/components/interfaces/Trace/timeline/timeline-ruler.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-ruler.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Trace/timeline/timeline-ruler.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-ruler.tsx
diff --git a/apps/studio/components/interfaces/Trace/timeline/timeline-span.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-span.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Trace/timeline/timeline-span.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-span.tsx
index adc486bcf75..28ccf99eac6 100644
--- a/apps/studio/components/interfaces/Trace/timeline/timeline-span.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-span.tsx
@@ -1,21 +1,21 @@
 'use client'
 
+import {
+  AlertTriangle,
+  ArrowRight,
+  Cpu,
+  Database,
+  FileCode,
+  Globe,
+  Lock,
+  RefreshCw,
+  Search,
+  Server,
+} from 'lucide-react'
 import type React from 'react'
 import { cn } from 'ui'
-import type { Span } from './../types/trace'
-import type { LayoutSpan } from './../utils/layout-algorithm'
-import {
-  ArrowRight,
-  Database,
-  Server,
-  Globe,
-  FileCode,
-  Lock,
-  Search,
-  Cpu,
-  RefreshCw,
-  AlertTriangle,
-} from 'lucide-react'
+import type { Span } from '../types/trace'
+import type { LayoutSpan } from '../utils/layout-algorithm'
 
 interface TimelineSpanProps {
   span: LayoutSpan
diff --git a/apps/studio/components/interfaces/Trace/trace-viewer-client.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/trace-viewer-client.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Trace/trace-viewer-client.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/trace-viewer-client.tsx
diff --git a/apps/studio/components/interfaces/Trace/trace-viewer.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/trace-viewer.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Trace/trace-viewer.tsx
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/trace-viewer.tsx
index 4755b3e34f9..3ebe19860d9 100644
--- a/apps/studio/components/interfaces/Trace/trace-viewer.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/trace-viewer.tsx
@@ -1,23 +1,20 @@
-'use client'
-
-import type React from 'react'
-import { useState, useRef, useEffect, useMemo } from 'react'
-import type { TraceData, Marker } from './types/trace'
-import { TimelineHeader } from './timeline/timeline-header'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { traceDataSets } from './data/trace-data'
+import { MarkerDetail } from './details/marker-detail'
+import SpanDetail from './span-detail'
 import { Minimap } from './timeline/minimap'
+import { TimelineCursor, type TimelineCursorRef } from './timeline/timeline-cursor'
+import { TimelineHeader } from './timeline/timeline-header'
+import { TimelineMarker } from './timeline/timeline-marker'
 import { TimelineRuler } from './timeline/timeline-ruler'
 import { TimelineSpan } from './timeline/timeline-span'
-import { TimelineMarker } from './timeline/timeline-marker'
-import { TimelineCursor, type TimelineCursorRef } from './timeline/timeline-cursor'
-import SpanDetail from './span-detail'
-import { MarkerDetail } from './details/marker-detail'
+import type { Marker, TraceData } from './types/trace'
 import {
+  calculateAbsoluteRow,
+  calculateTotalRows,
   layoutSpans,
   type LayoutSpan,
-  calculateTotalRows,
-  calculateAbsoluteRow,
 } from './utils/layout-algorithm'
-import { traceDataSets } from './data/trace-data'
 
 interface TraceViewerProps {
   traceData?: TraceData
@@ -439,7 +436,7 @@ export default function TraceViewer({ traceData: initialTraceData }: TraceViewer
         </div>
 
         {/* Detail panel */}
-        {selectedSpan && <SpanDetail span={selectedSpan} onClose={handleCloseDetailPanel} />}
+        {selectedSpan && <SpanDetail span={selectedSpan as any} onClose={handleCloseDetailPanel} />}
         {selectedMarker && (
           <MarkerDetail marker={selectedMarker} onClose={handleCloseDetailPanel} />
         )}
diff --git a/apps/studio/components/interfaces/Trace/types/trace.ts b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/types/trace.ts
similarity index 100%
rename from apps/studio/components/interfaces/Trace/types/trace.ts
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/types/trace.ts
diff --git a/apps/studio/components/interfaces/Trace/utils/layout-algorithm.ts b/apps/studio/components/interfaces/UnifiedLogs/components/Trace/utils/layout-algorithm.ts
similarity index 100%
rename from apps/studio/components/interfaces/Trace/utils/layout-algorithm.ts
rename to apps/studio/components/interfaces/UnifiedLogs/components/Trace/utils/layout-algorithm.ts
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/TraceDetailTab.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/TraceDetailTab.tsx
index 736f4fbf9e9..b76ee8acdea 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/TraceDetailTab.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/TraceDetailTab.tsx
@@ -1,4 +1,4 @@
-import TraceViewerClient from 'components/interfaces/Trace/trace-viewer-client'
+import TraceViewerClient from './Trace/trace-viewer-client'
 
 interface TraceDetailTabProps {
   id: string
diff --git a/apps/studio/components/interfaces/data-table/data-table-chart-tooltip-label.tsx b/apps/studio/components/interfaces/data-table/data-table-chart-tooltip-label.tsx
deleted file mode 100644
index 0faedaf6fa0..00000000000
--- a/apps/studio/components/interfaces/data-table/data-table-chart-tooltip-label.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { TimelineChartSchema } from '../infinite-logs-example/schema'
-
-export function TooltipLabel({ level }: { level: keyof Omit<TimelineChartSchema, 'timestamp'> }) {
-  return (
-    <div className="mr-2 flex w-20 items-center justify-between gap-2 font-mono">
-      <div className="capitalize text-foreground/70">{level}</div>
-      <div className="text-xs text-muted-foreground/70">{getLevelLabel(level)}</div>
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/data-table/data-table-header-layout.tsx b/apps/studio/components/interfaces/data-table/data-table-header-layout.tsx
deleted file mode 100644
index 5222d38f14c..00000000000
--- a/apps/studio/components/interfaces/data-table/data-table-header-layout.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { forwardRef, PropsWithChildren, useEffect, useRef } from 'react'
-import { cn } from 'ui'
-
-export const DataTableHeaderLayout = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{
-    setTopBarHeight: (height: number) => void
-  }>
->(({ setTopBarHeight, ...props }, ref) => {
-  const topBarRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const observer = new ResizeObserver(() => {
-      const rect = topBarRef.current?.getBoundingClientRect()
-      if (rect) {
-        setTopBarHeight(rect.height)
-      }
-    })
-
-    const topBar = topBarRef.current
-    if (!topBar) return
-
-    observer.observe(topBar)
-    return () => observer.unobserve(topBar)
-  }, [topBarRef])
-
-  return (
-    <div
-      ref={topBarRef}
-      className={cn('flex flex-col gap-4 bg-background p-2', 'top-0 z-10 pb-4')}
-      {...props}
-    />
-  )
-})
-DataTableHeaderLayout.displayName = 'DataTableHeaderLayout'
diff --git a/apps/studio/components/interfaces/data-table/data-table-infinite.tsx b/apps/studio/components/interfaces/data-table/data-table-infinite.tsx
deleted file mode 100644
index 62be25dcbdf..00000000000
--- a/apps/studio/components/interfaces/data-table/data-table-infinite.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-'use client'
-
-import { type FetchNextPageOptions } from '@tanstack/react-query'
-import type { ColumnDef, Row, Table as TTable, VisibilityState } from '@tanstack/react-table'
-import { flexRender } from '@tanstack/react-table'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from 'components/interfaces/data-table/table'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { searchParamsParser } from 'components/interfaces/DataTableDemo/infinite/search-params'
-import { formatCompactNumber } from 'components/interfaces/DataTableDemo/lib/format'
-import { LoaderCircle } from 'lucide-react'
-import { useQueryState } from 'nuqs'
-import * as React from 'react'
-import { Button, cn } from 'ui'
-import { useDataTable } from '../DataTableDemo/components/data-table/data-table-provider'
-
-// TODO: add a possible chartGroupBy
-export interface DataTableInfiniteProps<TData, TValue, TMeta> {
-  columns: ColumnDef<TData, TValue>[]
-  defaultColumnVisibility?: VisibilityState
-  totalRows?: number
-  filterRows?: number
-  totalRowsFetched?: number
-  isFetching?: boolean
-  isLoading?: boolean
-  hasNextPage?: boolean
-  fetchNextPage: (options?: FetchNextPageOptions | undefined) => Promise<unknown>
-  renderLiveRow?: (props?: { row: Row<TData> }) => React.ReactNode
-  setColumnOrder: (columnOrder: string[]) => void
-  setColumnVisibility: (columnVisibility: VisibilityState) => void
-}
-
-export function DataTableInfinite<TData, TValue, TMeta>({
-  columns,
-  defaultColumnVisibility = {},
-  isFetching,
-  isLoading,
-  fetchNextPage,
-  hasNextPage,
-  totalRows = 0,
-  filterRows = 0,
-  totalRowsFetched = 0,
-  renderLiveRow,
-  setColumnOrder,
-  setColumnVisibility,
-}: DataTableInfiniteProps<TData, TValue, TMeta>) {
-  const { table } = useDataTable()
-
-  const tableRef = React.useRef<HTMLTableElement>(null)
-  // const [topBarHeight, setTopBarHeight] = React.useState(0)
-  // FIXME: searchParamsParser needs to be passed as property
-
-  const onScroll = React.useCallback(
-    (e: React.UIEvent<HTMLElement>) => {
-      const onPageBottom =
-        Math.ceil(e.currentTarget.scrollTop + e.currentTarget.clientHeight) >=
-        e.currentTarget.scrollHeight
-
-      if (onPageBottom && !isFetching && totalRowsFetched < filterRows) {
-        fetchNextPage()
-      }
-    },
-    [fetchNextPage, isFetching, filterRows, totalRowsFetched]
-  )
-
-  useHotKey(() => {
-    setColumnOrder([])
-    setColumnVisibility(defaultColumnVisibility)
-  }, 'u')
-
-  return (
-    <>
-      <Table
-        containerProps={{
-          onScroll,
-        }}
-        ref={tableRef} // REMINDER: https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
-        className="z-0"
-      >
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-surface-75">
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead
-                    key={header.id}
-                    className={header.column.columnDef.meta?.headerClassName}
-                    aria-sort={
-                      header.column.getIsSorted() === 'asc'
-                        ? 'ascending'
-                        : header.column.getIsSorted() === 'desc'
-                          ? 'descending'
-                          : 'none'
-                    }
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
-                    {header.column.getCanResize() && (
-                      <div
-                        onDoubleClick={() => header.column.resetSize()}
-                        onMouseDown={header.getResizeHandler()}
-                        onTouchStart={header.getResizeHandler()}
-                        className={cn(
-                          'user-select-none absolute -right-2 top-0 z-10 flex h-full w-4 cursor-col-resize touch-none justify-center',
-                          'before:absolute before:inset-y-0 before:w-px before:translate-x-px before:bg-border'
-                        )}
-                      />
-                    )}
-                  </TableHead>
-                )
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody
-          id="content"
-          tabIndex={-1}
-          // REMINDER: avoids scroll (skipping the table header) when using skip to content
-          style={{
-            scrollMarginTop: 'calc(var(--top-bar-height))',
-          }}
-        >
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              // REMINDER: if we want to add arrow navigation https://github.com/TanStack/table/discussions/2752#discussioncomment-192558
-              <React.Fragment key={row.id}>
-                {renderLiveRow?.({ row })}
-                <MemoizedRow row={row} table={table} selected={row.getIsSelected()} />
-              </React.Fragment>
-            ))
-          ) : (
-            <React.Fragment>
-              {renderLiveRow?.()}
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
-                </TableCell>
-              </TableRow>
-            </React.Fragment>
-          )}
-          <TableRow className="hover:bg-transparent data-[state=selected]:bg-transparent">
-            <TableCell colSpan={columns.length} className="text-center">
-              {hasNextPage || isFetching || isLoading ? (
-                <div className="flex flex-col items-center gap-2">
-                  <Button
-                    disabled={isFetching || isLoading}
-                    onClick={() => fetchNextPage()}
-                    size="small"
-                    type="outline"
-                    icon={
-                      isFetching ? <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> : null
-                    }
-                  >
-                    Load More
-                  </Button>
-                  <p className="text-xs text-foreground-lighter">
-                    Showing{' '}
-                    <span className="font-mono font-medium">
-                      {formatCompactNumber(totalRowsFetched)}
-                    </span>{' '}
-                    of{' '}
-                    <span className="font-mono font-medium">{formatCompactNumber(totalRows)}</span>{' '}
-                    rows
-                  </p>
-                </div>
-              ) : (
-                <p className="text-sm text-foreground-lighter py-4">
-                  No more data to load (
-                  <span className="font-mono font-medium">{formatCompactNumber(filterRows)}</span>{' '}
-                  of <span className="font-mono font-medium">{formatCompactNumber(totalRows)}</span>{' '}
-                  rows)
-                </p>
-              )}
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </>
-  )
-}
-
-/**
- * REMINDER: this is the heaviest component in the table if lots of rows
- * Some other components are rendered more often necessary, but are fixed size (not like rows that can grow in height)
- * e.g. DataTableFilterControls, DataTableFilterCommand, DataTableToolbar, DataTableHeader
- */
-
-function Row<TData>({
-  row,
-  table,
-  selected,
-}: {
-  row: Row<TData>
-  table: TTable<TData>
-  // REMINDER: row.getIsSelected(); - just for memoization
-  selected?: boolean
-}) {
-  // REMINDER: rerender the row when live mode is toggled - used to opacity the row
-  // via the `getRowClassName` prop - but for some reasons it wil render the row on data fetch
-  useQueryState('live', searchParamsParser.live)
-  return (
-    <TableRow
-      id={row.id}
-      tabIndex={0}
-      data-state={selected && 'selected'}
-      onClick={() => row.toggleSelected()}
-      onKeyDown={(event) => {
-        if (event.key === 'Enter') {
-          event.preventDefault()
-          row.toggleSelected()
-        }
-      }}
-      className={cn(
-        // '[&>:not(:last-child)]:border-r',
-        // 'outline-1 -outline-offset-1 outline-primary transition-colors focus-visible:bg-muted/50 focus-visible:outline data-[state=selected]:outline',
-        table.options.meta?.getRowClassName?.(row)
-      )}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <TableCell
-          key={cell.id}
-          className={cn(
-            // 'truncate border-b border-border',
-            cell.column.columnDef.meta?.cellClassName
-          )}
-        >
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </TableCell>
-      ))}
-    </TableRow>
-  )
-}
-
-const MemoizedRow = React.memo(
-  Row,
-  (prev, next) => prev.row.id === next.row.id && prev.selected === next.selected
-) as typeof Row
diff --git a/apps/studio/components/interfaces/data-table/data-table-side-bar-layout.tsx b/apps/studio/components/interfaces/data-table/data-table-side-bar-layout.tsx
deleted file mode 100644
index aca24ad3b8a..00000000000
--- a/apps/studio/components/interfaces/data-table/data-table-side-bar-layout.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import * as React from 'react'
-import { cn } from 'ui'
-
-interface DataTableSideBarLayoutProps {
-  children: React.ReactNode
-  className?: string
-  topBarHeight?: number
-}
-
-export function DataTableSideBarLayout({
-  children,
-  className,
-  topBarHeight = 0,
-}: DataTableSideBarLayoutProps) {
-  const { table } = useDataTable()
-
-  /**
-   * https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance
-   * Instead of calling `column.getSize()` on every render for every header
-   * and especially every data cell (very expensive),
-   * we will calculate all column sizes at once at the root table level in a useMemo
-   * and pass the column sizes down as CSS variables to the <table> element.
-   */
-  const columnSizeVars = React.useMemo(() => {
-    const headers = table.getFlatHeaders()
-    const colSizes: { [key: string]: string } = {}
-    for (let i = 0; i < headers.length; i++) {
-      const header = headers[i]!
-      // REMINDER: replace "." with "-" to avoid invalid CSS variable name (e.g. "timing.dns" -> "timing-dns")
-      colSizes[`--header-${header.id.replace('.', '-')}-size`] = `${header.getSize()}px`
-      colSizes[`--col-${header.column.id.replace('.', '-')}-size`] = `${header.column.getSize()}px`
-    }
-    return colSizes
-  }, [
-    // TODO: check if we need this
-    table.getState().columnSizingInfo,
-    table.getState().columnSizing,
-    table.getState().columnVisibility,
-  ])
-
-  return (
-    <div
-      className={cn(
-        'flex flex-row w-full h-full',
-        // 'min-h-screen w-full flex-col sm:flex-row',
-        className
-      )}
-      style={
-        {
-          '--top-bar-height': `${
-            // topBarHeight is the height of the chart and search bar
-            topBarHeight +
-            // 64px is the height of the top bar
-            64
-            //
-          }px`,
-          ...columnSizeVars,
-        } as React.CSSProperties
-      }
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/data-table/filter-side-bar.tsx b/apps/studio/components/interfaces/data-table/filter-side-bar.tsx
deleted file mode 100644
index 8f6f671754c..00000000000
--- a/apps/studio/components/interfaces/data-table/filter-side-bar.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client'
-
-import { DataTableFilterControls } from 'components/interfaces/DataTableDemo/components/data-table/data-table-filter-controls'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { DataTableResetButton } from 'components/interfaces/DataTableDemo/components/data-table/data-table-reset-button'
-import { SocialsFooter } from 'components/interfaces/DataTableDemo/infinite/_components/socials-footer'
-import { cn } from 'ui'
-
-export function FilterSideBar() {
-  const { table } = useDataTable()
-
-  return (
-    <div
-      className={cn(
-        'flex flex-col w-72',
-        'group-data-[expanded=false]/controls:hidden',
-        'hidden sm:flex'
-      )}
-    >
-      <div className="border-b border-border bg-background p-2 md:top-0">
-        <div className="flex h-[46px] items-center justify-between gap-3">
-          <p className="px-2 font-medium text-foreground">Filters</p>
-          <div>{table.getState().columnFilters.length ? <DataTableResetButton /> : null}</div>
-        </div>
-      </div>
-      <div className="flex-1 p-2 sm:overflow-y-scroll">
-        <DataTableFilterControls />
-      </div>
-      {/* <div className="border-t border-border bg-background p-4 md:bottom-0">
-        <SocialsFooter />
-      </div> */}
-    </div>
-  )
-}
diff --git a/apps/studio/components/interfaces/data-table/table.tsx b/apps/studio/components/interfaces/data-table/table.tsx
deleted file mode 100644
index bcb5ddb9e3f..00000000000
--- a/apps/studio/components/interfaces/data-table/table.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as React from 'react'
-
-import { cn } from 'ui'
-import {
-  Table as ShadcnTable,
-  TableBody as ShadcnTableBody,
-  TableCaption as ShadcnTableCaption,
-  TableCell as ShadcnTableCell,
-  TableFooter as ShadcnTableFooter,
-  TableHead as ShadcnTableHead,
-  TableHeader as ShadcnTableHeader,
-  TableRow as ShadcnTableRow,
-} from 'ui/src/components/shadcn/ui/table'
-
-// Only create a custom component for Table with the added props
-const Table = React.forwardRef<HTMLTableElement, React.ComponentPropsWithRef<typeof ShadcnTable>>(
-  ({ className, ...props }, ref) => (
-    <ShadcnTable
-      ref={ref}
-      {...props}
-      className={cn('', className)}
-      containerProps={{
-        className:
-          'table-fixed min-w-max caption-bottom text-sm max-h-[calc(100vh_-_var(--top-bar-height))]',
-        ...props.containerProps,
-      }}
-      // REMINDER: we are not scrolling the table, but the container
-    />
-  )
-)
-Table.displayName = 'Table'
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.ComponentPropsWithRef<typeof ShadcnTableHeader>
->(({ className, ...props }, ref) => (
-  <ShadcnTableHeader ref={ref} className={cn('sticky top-0', className)} {...props} />
-))
-TableHeader.displayName = 'TableHeader'
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.ComponentPropsWithRef<typeof ShadcnTableBody>
->(({ className, ...props }, ref) => (
-  <ShadcnTableBody
-    ref={ref}
-    {...props}
-    className={cn(
-      'outline-1 -outline-offset-1 outline-primary transition-colors focus-visible:outline'
-    )}
-  />
-))
-TableBody.displayName = 'TableBody'
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.ComponentPropsWithRef<typeof ShadcnTableFooter>
->(({ className, ...props }, ref) => (
-  <ShadcnTableFooter ref={ref} className={cn('text-primary-foreground', className)} {...props} />
-))
-TableFooter.displayName = 'TableFooter'
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.ComponentPropsWithRef<typeof ShadcnTableRow>
->(({ className, ...props }, ref) => (
-  <ShadcnTableRow
-    ref={ref}
-    className={cn(
-      'bg-background hover:bg-muted/50',
-      //   '[&>*]:border-t [&>:not(:last-child)]:border-r',
-      'border-b-0',
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = 'TableRow'
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ComponentPropsWithRef<typeof ShadcnTableHead>
->(({ className, ...props }, ref) => (
-  <ShadcnTableHead
-    ref={ref}
-    className={cn(
-      '!text-xs !font-normal text-foreground-lighter font-mono',
-      'relative select-none truncate [&>.cursor-col-resize]:last:opacity-0',
-      'text-muted-foreground h-8 px-2 text-left align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = 'TableHead'
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.ComponentPropsWithRef<typeof ShadcnTableCell>
->(({ className, ...props }, ref) => (
-  <ShadcnTableCell
-    ref={ref}
-    className={cn(
-      'text-[0.8rem] !py-1 p-2 [&>[role=checkbox]]:translate-y-[2px] truncate',
-      className
-    )}
-    {...props}
-  />
-))
-TableCell.displayName = 'TableCell'
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.ComponentPropsWithRef<typeof ShadcnTableCaption>
->(({ className, ...props }, ref) => (
-  <ShadcnTableCaption ref={ref} className={cn('text-sm', className)} {...props} />
-))
-TableCaption.displayName = 'TableCaption'
-
-export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow }
diff --git a/apps/studio/components/interfaces/data-table/timeline-chart.tsx b/apps/studio/components/interfaces/data-table/timeline-chart.tsx
deleted file mode 100644
index df83ad83e3e..00000000000
--- a/apps/studio/components/interfaces/data-table/timeline-chart.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-'use client'
-
-import { Bar, BarChart, CartesianGrid, ReferenceArea, XAxis } from 'recharts'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
-import { useMemo, useState } from 'react'
-import { format } from 'date-fns'
-import { cn } from 'ui'
-import type { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalChart'
-// import { getLevelLabel } from 'components/interfaces/DataTableDemo/lib/request/level'
-import { useDataTable } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-// import { TimelineChartSchema } from './schema'
-
-export type BaseChartSchema = { timestamp: number; [key: string]: number }
-export const description = 'A stacked bar chart'
-
-// const chartConfig = {
-//   success: {
-//     label: <TooltipLabel level="success" />,
-//     color: 'hsl(var(--foreground-muted))',
-//   },
-//   warning: {
-//     label: <TooltipLabel level="warning" />,
-//     color: 'hsl(var(--warning-default))',
-//   },
-//   error: {
-//     label: <TooltipLabel level="error" />,
-//     color: 'hsl(var(--destructive-default))',
-//   },
-// } satisfies ChartConfig
-
-interface TimelineChartProps<TChart extends BaseChartSchema> {
-  className?: string
-  /**
-   * The table column id to filter by - needs to be a type of `timerange` (e.g. "date").
-   * TBD: if using keyof TData to be closer to the data table props
-   */
-  columnId: string
-  /**
-   * Same data as of the InfiniteQueryMeta.
-   */
-  data: TChart[]
-  chartConfig: ChartConfig
-}
-
-export function TimelineChart<TChart extends BaseChartSchema>({
-  data,
-  className,
-  columnId,
-  chartConfig,
-}: TimelineChartProps<TChart>) {
-  const { table } = useDataTable()
-  const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null)
-  const [refAreaRight, setRefAreaRight] = useState<string | null>(null)
-  const [isSelecting, setIsSelecting] = useState(false)
-
-  // REMINDER: date has to be a string for tooltip label to work - don't ask me why
-  const chart = useMemo(
-    () =>
-      data.map((item) => ({
-        ...item,
-        [columnId]: new Date(item.timestamp).toString(),
-      })),
-    [data]
-  )
-
-  const timerange = useMemo(() => {
-    if (data.length === 0) return { interval: 0, period: undefined }
-    const first = data[0].timestamp
-    const last = data[data.length - 1].timestamp
-    const interval = Math.abs(first - last) // in ms
-    return { interval, period: calculatePeriod(interval) }
-  }, [data])
-
-  const handleMouseDown: CategoricalChartFunc = (e) => {
-    if (e.activeLabel) {
-      setRefAreaLeft(e.activeLabel)
-      setIsSelecting(true)
-    }
-  }
-
-  const handleMouseMove: CategoricalChartFunc = (e) => {
-    if (isSelecting && e.activeLabel) {
-      setRefAreaRight(e.activeLabel)
-    }
-  }
-
-  const handleMouseUp: CategoricalChartFunc = (e) => {
-    if (refAreaLeft && refAreaRight) {
-      const [left, right] = [refAreaLeft, refAreaRight].sort(
-        (a, b) => new Date(a).getTime() - new Date(b).getTime()
-      )
-      table.getColumn(columnId)?.setFilterValue([new Date(left), new Date(right)])
-    }
-    setRefAreaLeft(null)
-    setRefAreaRight(null)
-    setIsSelecting(false)
-  }
-
-  return (
-    <ChartContainer
-      config={chartConfig}
-      className={cn(
-        'aspect-auto h-[60px] w-full',
-        '[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/50', // otherwise same color as 200
-        'select-none', // disable text selection
-        className
-      )}
-    >
-      <BarChart
-        accessibilityLayer
-        data={chart}
-        margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        style={{ cursor: 'crosshair' }}
-      >
-        <CartesianGrid vertical={false} />
-        <XAxis
-          dataKey={columnId}
-          tickLine={false}
-          minTickGap={32}
-          axisLine={false}
-          // interval="preserveStartEnd"
-          tickFormatter={(value) => {
-            const date = new Date(value)
-            if (isNaN(date.getTime())) return 'N/A'
-            if (timerange.period === '10m') {
-              return format(date, 'HH:mm:ss')
-            } else if (timerange.period === '1d') {
-              return format(date, 'HH:mm')
-            } else if (timerange.period === '1w') {
-              return format(date, 'LLL dd HH:mm')
-            }
-            return format(date, 'LLL dd, y')
-          }}
-        />
-        <ChartTooltip
-          // defaultIndex={10}
-          content={
-            <ChartTooltipContent
-              labelFormatter={(value) => {
-                const date = new Date(value)
-                if (isNaN(date.getTime())) return 'N/A'
-                if (timerange.period === '10m') {
-                  return format(date, 'LLL dd, HH:mm:ss')
-                }
-                return format(date, 'LLL dd, y HH:mm')
-              }}
-            />
-          }
-        />
-        {/* TODO: we could use the `{timestamp, ...rest} = data[0]` to dynamically create the bars but that would mean the order can be very much random */}
-        <Bar dataKey="error" stackId="a" fill="var(--color-error)" />
-        <Bar dataKey="warning" stackId="a" fill="var(--color-warning)" />
-        <Bar dataKey="success" stackId="a" fill="var(--color-success)" />
-        {refAreaLeft && refAreaRight && (
-          <ReferenceArea
-            x1={refAreaLeft}
-            x2={refAreaRight}
-            strokeOpacity={0.3}
-            fill="hsl(var(--foreground))"
-            fillOpacity={0.08}
-          />
-        )}
-      </BarChart>
-    </ChartContainer>
-  )
-}
-
-// TODO: check what's a good abbreviation for month vs. minutes
-function calculatePeriod(interval: number): '10m' | '1d' | '1w' | '1mo' {
-  if (interval <= 1000 * 60 * 10) {
-    // less than 10 minutes
-    return '10m'
-  } else if (interval <= 1000 * 60 * 60 * 24) {
-    // less than 1 day
-    return '1d'
-  } else if (interval <= 1000 * 60 * 60 * 24 * 7) {
-    // less than 1 week
-    return '1w'
-  }
-  return '1mo' // defaults to 1 month
-}
-
-// TODO: use a `formatTooltipLabel` function instead for composability
-// function TooltipLabel({ level }: { level: keyof Omit<TimelineChartSchema, 'timestamp'> }) {
-//   return (
-//     <div className="mr-2 flex w-20 items-center justify-between gap-2 font-mono">
-//       <div className="capitalize text-foreground/70">{level}</div>
-//       <div className="text-xs text-muted-foreground/70">{getLevelLabel(level)}</div>
-//     </div>
-//   )
-// }
diff --git a/apps/studio/components/interfaces/infinite-logs-example/client.tsx b/apps/studio/components/interfaces/infinite-logs-example/client.tsx
deleted file mode 100644
index 256e78bbc57..00000000000
--- a/apps/studio/components/interfaces/infinite-logs-example/client.tsx
+++ /dev/null
@@ -1,387 +0,0 @@
-'use client'
-
-import { useInfiniteQuery } from '@tanstack/react-query'
-import {
-  ColumnFiltersState,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  getFacetedMinMaxValues as getTTableFacetedMinMaxValues,
-  getFacetedUniqueValues as getTTableFacetedUniqueValues,
-  Row,
-  RowSelectionState,
-  SortingState,
-  useReactTable,
-  VisibilityState,
-  type Table as TTable,
-} from '@tanstack/react-table'
-import { DataTableInfinite } from 'components/interfaces/data-table/data-table-infinite'
-import { TimelineChart } from 'components/interfaces/data-table/timeline-chart'
-import { useHotKey } from 'components/interfaces/DataTableDemo/hooks/use-hot-key'
-import { LiveRow } from 'components/interfaces/DataTableDemo/infinite/_components/live-row'
-import {
-  filterFields as defaultFilterFields,
-  sheetFields,
-} from 'components/interfaces/DataTableDemo/infinite/constants'
-import { dataOptions } from 'components/interfaces/DataTableDemo/infinite/query-options'
-import type {
-  FacetMetadataSchema,
-  TimelineChartSchema,
-} from 'components/interfaces/infinite-logs-example/schema'
-import { searchParamsParser } from 'components/interfaces/DataTableDemo/infinite/search-params'
-import {
-  getLevelLabel,
-  getLevelRowClassName,
-} from 'components/interfaces/DataTableDemo/lib/request/level'
-import { arrSome, inDateRange } from 'components/interfaces/DataTableDemo/lib/table/filterfns'
-import { columns } from 'components/interfaces/infinite-logs-example/columns'
-import { useQueryState, useQueryStates } from 'nuqs'
-import * as React from 'react'
-import { ChartConfig, cn } from 'ui'
-import { DataTableHeaderLayout } from '../data-table/data-table-header-layout'
-import { DataTableSideBarLayout } from '../data-table/data-table-side-bar-layout'
-import { FilterSideBar } from '../data-table/filter-side-bar'
-import { DataTableFilterCommand } from 'components/interfaces/DataTableDemo/components/data-table/data-table-filter-command'
-import { DataTableProvider } from 'components/interfaces/DataTableDemo/components/data-table/data-table-provider'
-import { MemoizedDataTableSheetContent } from 'components/interfaces/infinite-logs-example/data-table-sheet-content'
-import { DataTableSheetDetails } from 'components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-details'
-import { DataTableToolbar } from 'components/interfaces/DataTableDemo/components/data-table/data-table-toolbar'
-import { useLocalStorage } from 'components/interfaces/DataTableDemo/hooks/use-local-storage'
-import { LiveButton } from 'components/interfaces/DataTableDemo/infinite/_components/live-button'
-import { RefreshButton } from 'components/interfaces/DataTableDemo/infinite/_components/refresh-button'
-import { Percentile } from 'components/interfaces/DataTableDemo/lib/request/percentile'
-
-function TooltipLabel({ level }: { level: keyof Omit<TimelineChartSchema, 'timestamp'> }) {
-  return (
-    <div className="mr-2 flex w-20 items-center justify-between gap-2 font-mono">
-      <div className="capitalize text-foreground/70">{level}</div>
-      <div className="text-xs text-muted-foreground/70">{getLevelLabel(level)}</div>
-    </div>
-  )
-}
-
-const chartConfig = {
-  success: {
-    label: <TooltipLabel level="success" />,
-    color: 'hsl(var(--foreground-muted))',
-  },
-  warning: {
-    label: <TooltipLabel level="warning" />,
-    color: 'hsl(var(--warning-default))',
-  },
-  error: {
-    label: <TooltipLabel level="error" />,
-    color: 'hsl(var(--destructive-default))',
-  },
-} satisfies ChartConfig
-export function Client() {
-  const [search, setSearch] = useQueryStates(searchParamsParser)
-
-  const { data, isFetching, isLoading, fetchNextPage, hasNextPage, fetchPreviousPage, refetch } =
-    useInfiniteQuery(dataOptions(search))
-  useResetFocus()
-
-  const [topBarHeight, setTopBarHeight] = React.useState(0)
-
-  const flatData = React.useMemo(
-    () => data?.pages?.flatMap((page) => page.data ?? []) ?? [],
-    [data?.pages]
-  )
-
-  const liveMode = useLiveMode(flatData)
-
-  // REMINDER: meta data is always the same for all pages as filters do not change(!)
-  const lastPage = data?.pages?.[data?.pages.length - 1]
-  const totalDBRowCount = lastPage?.meta?.totalRowCount
-  const filterDBRowCount = lastPage?.meta?.filterRowCount
-  const metadata = lastPage?.meta?.metadata
-  const chartData = lastPage?.meta?.chartData
-  const facets = lastPage?.meta?.facets
-  const totalFetched = flatData?.length
-
-  const { sort, start, size, uuid, cursor, direction, live, ...filter } = search
-
-  const defaultColumnFilters = Object.entries(filter)
-    .map(([key, value]) => ({
-      id: key,
-      value,
-    }))
-    .filter(({ value }) => value ?? undefined)
-
-  const defaultColumnSorting = sort ? [sort] : []
-  const defaultColumnVisibility = {
-    uuid: false,
-    'timing.dns': false,
-    'timing.connection': false,
-    'timing.tls': false,
-    'timing.ttfb': false,
-    'timing.transfer': false,
-  }
-  const defaultRowSelection = search.uuid ? { [search.uuid]: true } : {}
-
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters)
-  const [sorting, setSorting] = React.useState<SortingState>(defaultColumnSorting)
-  const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(
-    'data-table-visibility',
-    defaultColumnVisibility
-  )
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(defaultRowSelection)
-  const [columnOrder, setColumnOrder] = useLocalStorage<string[]>('data-table-column-order', [])
-
-  // REMINDER: this is currently needed for the cmdk search
-  // TODO: auto search via API when the user changes the filter instead of hardcoded
-  const filterFields = React.useMemo(() => {
-    return defaultFilterFields.map((field) => {
-      const facetsField = facets?.[field.value]
-      if (!facetsField) return field
-      if (field.options && field.options.length > 0) return field
-
-      // REMINDER: if no options are set, we need to set them via the API
-      const options = facetsField.rows.map(({ value }) => {
-        return {
-          label: `${value}`,
-          value,
-        }
-      })
-
-      if (field.type === 'slider') {
-        return {
-          ...field,
-          min: facetsField.min ?? field.min,
-          max: facetsField.max ?? field.max,
-          options,
-        }
-      }
-
-      return { ...field, options }
-    })
-  }, [facets])
-
-  // --- DEBUG: Check props before passing to DataTableInfinite ---
-  console.log('>>> [Client] flatData length:', flatData?.length)
-  console.log('>>> [Client] filterDBRowCount:', filterDBRowCount)
-  console.log('>>> [Client] data object:', data) // Log the raw react-query data
-  // --- END DEBUG ---
-
-  const getRowClassName = <TData extends { date: Date; level: string }>(row: Row<TData>) => {
-    const rowTimestamp = row.original.date.getTime()
-    const isPast = rowTimestamp <= (liveMode.timestamp || -1)
-    const levelClassName = getLevelRowClassName(row.original.level)
-    return cn(levelClassName, isPast ? 'opacity-50' : 'opacity-100')
-  }
-
-  const table = useReactTable({
-    data: flatData,
-    columns,
-    state: {
-      columnFilters,
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnOrder,
-    },
-    enableMultiRowSelection: false,
-    columnResizeMode: 'onChange',
-    getRowId: (row) => row.uuid,
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnFiltersChange: setColumnFilters,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnOrderChange: setColumnOrder,
-    getSortedRowModel: getSortedRowModel(),
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getTTableFacetedUniqueValues(),
-    getFacetedMinMaxValues: getTTableFacetedMinMaxValues(),
-    filterFns: { inDateRange, arrSome },
-    debugAll: process.env.NEXT_PUBLIC_TABLE_DEBUG === 'true',
-    meta: { getRowClassName },
-  })
-
-  const selectedRow = React.useMemo(() => {
-    if ((isLoading || isFetching) && !flatData.length) return
-    const selectedRowKey = Object.keys(rowSelection)?.[0]
-    return table.getCoreRowModel().flatRows.find((row) => row.id === selectedRowKey)
-  }, [rowSelection, table, isLoading, isFetching, flatData])
-
-  React.useEffect(() => {
-    const columnFiltersWithNullable = filterFields.map((field) => {
-      const filterValue = columnFilters.find((filter) => filter.id === field.value)
-      if (!filterValue) return { id: field.value, value: null }
-      return { id: field.value, value: filterValue.value }
-    })
-
-    const search = columnFiltersWithNullable.reduce(
-      (prev, curr) => {
-        prev[curr.id as string] = curr.value
-        return prev
-      },
-      {} as Record<string, unknown>
-    )
-
-    setSearch(search)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnFilters])
-
-  React.useEffect(() => {
-    setSearch({ sort: sorting?.[0] || null })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sorting])
-
-  // TODO: can only share uuid within the first batch
-  React.useEffect(() => {
-    if (isLoading || isFetching) return
-    if (Object.keys(rowSelection)?.length && !selectedRow) {
-      setSearch({ uuid: null })
-      setRowSelection({})
-    } else {
-      setSearch({ uuid: Object.keys(rowSelection)?.[0] || null })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowSelection, selectedRow, isLoading, isFetching])
-
-  return (
-    <>
-      <DataTableProvider
-        table={table}
-        columns={columns}
-        filterFields={filterFields}
-        columnFilters={columnFilters}
-        sorting={sorting}
-        rowSelection={rowSelection}
-        columnOrder={columnOrder}
-        columnVisibility={columnVisibility}
-        enableColumnOrdering={true}
-        isLoading={isFetching || isLoading}
-        getFacetedUniqueValues={getFacetedUniqueValues(facets)}
-        getFacetedMinMaxValues={getFacetedMinMaxValues(facets)}
-      >
-        <DataTableSideBarLayout topBarHeight={topBarHeight}>
-          <FilterSideBar />
-          <div
-            className={cn(
-              'flex max-w-full flex-1 flex-col border-border sm:border-l',
-              // Chrome issue
-              'group-data-[expanded=true]/controls:sm:max-w-[calc(100vw_-_208px)] group-data-[expanded=true]/controls:md:max-w-[calc(100vw_-_288px)]'
-            )}
-          >
-            <DataTableHeaderLayout setTopBarHeight={setTopBarHeight}>
-              <DataTableFilterCommand searchParamsParser={searchParamsParser} />
-              {/* TBD: better flexibility with compound components? */}
-              <DataTableToolbar
-                renderActions={() => [
-                  <RefreshButton key="refresh" onClick={refetch} />,
-                  fetchPreviousPage ? (
-                    <LiveButton key="live" fetchPreviousPage={fetchPreviousPage} />
-                  ) : null,
-                ]}
-              />
-              <TimelineChart
-                data={chartData ?? []}
-                className="-mb-2"
-                columnId={'date'}
-                chartConfig={chartConfig}
-              />
-            </DataTableHeaderLayout>
-            <DataTableInfinite
-              table={table}
-              columns={columns}
-              totalRows={totalDBRowCount}
-              filterRows={filterDBRowCount}
-              totalRowsFetched={totalFetched}
-              isFetching={isFetching}
-              isLoading={isLoading}
-              fetchNextPage={fetchNextPage}
-              hasNextPage={hasNextPage}
-              renderLiveRow={(props) => {
-                if (!liveMode.timestamp) return null
-                if (props?.row.original.uuid !== liveMode?.row?.uuid) return null
-                return <LiveRow />
-              }}
-              setColumnOrder={setColumnOrder}
-              setColumnVisibility={setColumnVisibility}
-            />
-          </div>
-          <DataTableSheetDetails title={selectedRow?.original?.pathname} titleClassName="font-mono">
-            <MemoizedDataTableSheetContent
-              table={table}
-              data={selectedRow?.original}
-              filterFields={filterFields}
-              fields={sheetFields}
-              // TODO: check if we should memoize this
-              // REMINDER: this is used to pass additional data like the `InfiniteQueryMeta`
-              metadata={{
-                totalRows: totalDBRowCount ?? 0,
-                filterRows: filterDBRowCount ?? 0,
-                totalRowsFetched: totalFetched ?? 0,
-                currentPercentiles:
-                  metadata?.currentPercentiles ?? ({} as Record<Percentile, number>),
-                // REMINDER: includes `currentPercentiles`
-                ...metadata,
-              }}
-            />
-          </DataTableSheetDetails>
-        </DataTableSideBarLayout>
-      </DataTableProvider>
-    </>
-  )
-}
-
-function useResetFocus() {
-  useHotKey(() => {
-    // FIXME: some dedicated div[tabindex="0"] do not auto-unblur (e.g. the DataTableFilterResetButton)
-    // REMINDER: we cannot just document.activeElement?.blur(); as the next tab will focus the next element in line,
-    // which is not what we want. We want to reset entirely.
-    document.body.setAttribute('tabindex', '0')
-    document.body.focus()
-    document.body.removeAttribute('tabindex')
-  }, '.')
-}
-
-// TODO: make a BaseObject (incl. date and uuid e.g. for every upcoming branch of infinite table)
-export function useLiveMode<TData extends { date: Date }>(data: TData[]) {
-  const [live] = useQueryState('live', searchParamsParser.live)
-  // REMINDER: used to capture the live mode on timestamp
-  const liveTimestamp = React.useRef<number | undefined>(live ? new Date().getTime() : undefined)
-
-  React.useEffect(() => {
-    if (live) liveTimestamp.current = new Date().getTime()
-    else liveTimestamp.current = undefined
-  }, [live])
-
-  const anchorRow = React.useMemo(() => {
-    if (!live) return undefined
-
-    const item = data.find((item) => {
-      // return first item that is there if not liveTimestamp
-      if (!liveTimestamp.current) return true
-      // return first item that is after the liveTimestamp
-      if (item.date.getTime() > liveTimestamp.current) return false
-      return true
-      // return first item if no liveTimestamp
-    })
-
-    return item
-  }, [live, data])
-
-  return { row: anchorRow, timestamp: liveTimestamp.current }
-}
-
-export function getFacetedUniqueValues<TData>(facets?: Record<string, FacetMetadataSchema>) {
-  return (_: TTable<TData>, columnId: string): Map<string, number> => {
-    return new Map(facets?.[columnId]?.rows?.map(({ value, total }) => [value, total]) || [])
-  }
-}
-
-export function getFacetedMinMaxValues<TData>(facets?: Record<string, FacetMetadataSchema>) {
-  return (_: TTable<TData>, columnId: string): [number, number] | undefined => {
-    const min = facets?.[columnId]?.min
-    const max = facets?.[columnId]?.max
-    if (typeof min === 'number' && typeof max === 'number') return [min, max]
-    if (typeof min === 'number') return [min, min]
-    if (typeof max === 'number') return [max, max]
-    return undefined
-  }
-}
diff --git a/apps/studio/components/interfaces/infinite-logs-example/columns.tsx b/apps/studio/components/interfaces/infinite-logs-example/columns.tsx
deleted file mode 100644
index f6538109b9a..00000000000
--- a/apps/studio/components/interfaces/infinite-logs-example/columns.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-'use client'
-
-import { TextWithTooltip } from 'components/interfaces/DataTableDemo/components/custom/text-with-tooltip'
-import { DataTableColumnHeader } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column-header'
-import { DataTableColumnLatency } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-latency'
-import { DataTableColumnLevelIndicator } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-level-indicator'
-import { DataTableColumnRegion } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-region'
-import { DataTableColumnStatusCode } from 'components/interfaces/DataTableDemo/components/data-table/data-table-column/data-table-column-status-code'
-import { HoverCard, HoverCardContent, HoverCardTrigger } from 'ui'
-import {
-  getTimingColor,
-  getTimingLabel,
-  getTimingPercentage,
-  timingPhases,
-} from 'components/interfaces/DataTableDemo/lib/request/timing'
-import { cn } from 'ui'
-import { HoverCardPortal } from '@radix-ui/react-hover-card'
-import type { ColumnDef } from '@tanstack/react-table'
-import { Minus } from 'lucide-react'
-import { HoverCardTimestamp } from 'components/interfaces/DataTableDemo/infinite/_components/hover-card-timestamp'
-import type { ColumnSchema } from 'components/interfaces/infinite-logs-example/schema'
-
-export const columns: ColumnDef<ColumnSchema>[] = [
-  {
-    accessorKey: 'level',
-    header: '',
-    cell: ({ row }) => {
-      const level = row.getValue<ColumnSchema['level']>('level')
-      return <DataTableColumnLevelIndicator value={level} />
-    },
-    enableHiding: false,
-    enableResizing: false,
-    filterFn: 'arrSome',
-    size: 27,
-    minSize: 27,
-    maxSize: 27,
-    meta: {
-      headerClassName:
-        'w-[--header-level-size] max-w-[--header-level-size] min-w-[--header-level-size]',
-      cellClassName: 'w-[--col-level-size] max-w-[--col-level-size] min-w-[--col-level-size]',
-    },
-  },
-  {
-    accessorKey: 'date',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
-    cell: ({ row }) => {
-      const date = new Date(row.getValue<ColumnSchema['date']>('date'))
-      return <HoverCardTimestamp date={date} />
-    },
-    filterFn: 'inDateRange',
-    enableResizing: false,
-    size: 200,
-    minSize: 200,
-    meta: {
-      headerClassName:
-        'w-[--header-date-size] max-w-[--header-date-size] min-w-[--header-date-size]',
-      cellClassName:
-        'font-mono w-[--col-date-size] max-w-[--col-date-size] min-w-[--col-date-size]',
-    },
-  },
-  {
-    id: 'uuid',
-    accessorKey: 'uuid',
-    header: 'Request Id',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['uuid']>('uuid')
-      return <TextWithTooltip text={value} />
-    },
-    size: 130,
-    minSize: 130,
-    meta: {
-      label: 'Request Id',
-      cellClassName:
-        'font-mono w-[--col-uuid-size] max-w-[--col-uuid-size] min-w-[--col-uuid-size]',
-      headerClassName:
-        'min-w-[--header-uuid-size] w-[--header-uuid-size] max-w-[--header-uuid-size]',
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['status']>('status')
-      return <DataTableColumnStatusCode value={value} />
-    },
-    filterFn: 'arrSome',
-    enableResizing: false,
-    size: 60,
-    minSize: 60,
-    meta: {
-      headerClassName:
-        'w-[--header-status-size] max-w-[--header-status-size] min-w-[--header-status-size]',
-      cellClassName:
-        'font-mono w-[--col-status-size] max-w-[--col-status-size] min-w-[--col-status-size]',
-    },
-  },
-  {
-    // TODO: make it a type of MethodSchema!
-    accessorKey: 'method',
-    header: 'Method',
-    filterFn: 'arrIncludesSome',
-    enableResizing: false,
-    size: 69,
-    minSize: 69,
-    meta: {
-      cellClassName:
-        'font-mono text-muted-foreground w-[--col-method-size] max-w-[--col-method-size] min-w-[--col-method-size]',
-      headerClassName:
-        'w-[--header-method-size] max-w-[--header-method-size] min-w-[--header-method-size]',
-    },
-  },
-  {
-    accessorKey: 'host',
-    header: 'Host',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['host']>('host')
-      return <TextWithTooltip text={value} />
-    },
-    size: 125,
-    minSize: 125,
-    meta: {
-      cellClassName: 'font-mono w-[--col-host-size] max-w-[--col-host-size]',
-      headerClassName: 'min-w-[--header-host-size] w-[--header-host-size]',
-    },
-  },
-  {
-    accessorKey: 'pathname',
-    header: 'Pathname',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['pathname']>('pathname')
-      return <TextWithTooltip text={value} />
-    },
-    size: 130,
-    minSize: 130,
-    meta: {
-      cellClassName: 'font-mono w-[--col-pathname-size] max-w-[--col-pathname-size]',
-      headerClassName: 'min-w-[--header-pathname-size] w-[--header-pathname-size]',
-    },
-  },
-  {
-    accessorKey: 'latency',
-    // TODO: check if we can right align the table header/cell (makes is easier to read)
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Latency" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['latency']>('latency')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      headerClassName:
-        'w-[--header-latency-size] max-w-[--header-latency-size] min-w-[--header-latency-size]',
-      cellClassName:
-        'font-mono w-[--col-latency-size] max-w-[--col-latency-size] min-w-[--col-latency-size]',
-    },
-  },
-  {
-    accessorKey: 'regions',
-    header: 'Region',
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['regions']>('regions')
-      if (Array.isArray(value)) {
-        if (value.length > 1) {
-          return <div className="text-muted-foreground">{value.join(', ')}</div>
-        } else {
-          return (
-            <div className="whitespace-nowrap">
-              <DataTableColumnRegion value={value[0]} />
-            </div>
-          )
-        }
-      }
-      if (typeof value === 'string') {
-        return <DataTableColumnRegion value={value} />
-      }
-      return <Minus className="h-4 w-4 text-muted-foreground/50" />
-    },
-    filterFn: 'arrIncludesSome',
-    enableResizing: false,
-    size: 163,
-    minSize: 163,
-    meta: {
-      headerClassName:
-        'w-[--header-regions-size] max-w-[--header-regions-size] min-w-[--header-regions-size]',
-      cellClassName:
-        'font-mono w-[--col-regions-size] max-w-[--col-regions-size] min-w-[--col-regions-size]',
-    },
-  },
-  {
-    accessorKey: 'timing',
-    header: () => <div className="whitespace-nowrap">Timing Phases</div>,
-    cell: ({ row }) => {
-      const timing = {
-        'timing.dns': row.getValue<ColumnSchema['timing.dns']>('timing.dns'),
-        'timing.connection': row.getValue<ColumnSchema['timing.connection']>('timing.connection'),
-        'timing.tls': row.getValue<ColumnSchema['timing.tls']>('timing.tls'),
-        'timing.ttfb': row.getValue<ColumnSchema['timing.ttfb']>('timing.ttfb'),
-        'timing.transfer': row.getValue<ColumnSchema['timing.transfer']>('timing.transfer'),
-      }
-      const latency = row.getValue<ColumnSchema['latency']>('latency')
-      const percentage = getTimingPercentage(timing, latency)
-      // TODO: create a separate component for this in _components
-      return (
-        <HoverCard openDelay={50} closeDelay={50}>
-          <HoverCardTrigger
-            className="opacity-70 hover:opacity-100 data-[state=open]:opacity-100"
-            asChild
-          >
-            <div className="flex">
-              {Object.entries(timing).map(([key, value]) => (
-                <div
-                  key={key}
-                  className={cn(getTimingColor(key as keyof typeof timing), 'h-4')}
-                  style={{ width: `${(value / latency) * 100}%` }}
-                />
-              ))}
-            </div>
-          </HoverCardTrigger>
-          {/* REMINDER: allows us to port the content to the document.body, which is helpful when using opacity-50 on the row element */}
-          <HoverCardPortal>
-            <HoverCardContent side="bottom" align="end" className="z-10 w-auto p-2">
-              <div className="flex flex-col gap-1">
-                {timingPhases.map((phase) => {
-                  const color = getTimingColor(phase)
-                  const percentageValue = percentage[phase]
-                  return (
-                    <div key={phase} className="grid grid-cols-2 gap-4 text-xs">
-                      <div className="flex items-center gap-2">
-                        <div className={cn(color, 'h-2 w-2 rounded-full')} />
-                        <div className="font-mono uppercase text-accent-foreground">
-                          {getTimingLabel(phase)}
-                        </div>
-                      </div>
-                      <div className="flex items-center justify-between gap-4">
-                        <div className="font-mono text-muted-foreground">{percentageValue}</div>
-                        <div className="font-mono">
-                          {new Intl.NumberFormat('en-US', {
-                            maximumFractionDigits: 3,
-                          }).format(timing[phase])}
-                          <span className="text-muted-foreground">ms</span>
-                        </div>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </HoverCardContent>
-          </HoverCardPortal>
-        </HoverCard>
-      )
-    },
-    enableResizing: false,
-    size: 130,
-    minSize: 130,
-    meta: {
-      label: 'Timing Phases',
-      headerClassName:
-        'w-[--header-timing-size] max-w-[--header-timing-size] min-w-[--header-timing-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-size] max-w-[--col-timing-size] min-w-[--col-timing-size]',
-    },
-  },
-  {
-    id: 'timing.dns',
-    accessorFn: (row) => row['timing.dns'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="DNS" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.dns']>('timing.dns')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'DNS',
-      headerClassName:
-        'w-[--header-timing-dns-size] max-w-[--header-timing-dns-size] min-w-[--header-timing-dns-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-dns-size] max-w-[--col-timing-dns-size] min-w-[--col-timing-dns-size]',
-    },
-  },
-  {
-    id: 'timing.connection',
-    accessorFn: (row) => row['timing.connection'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Connection" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.connection']>('timing.connection')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'Connection',
-      headerClassName:
-        'w-[--header-timing-connection-size] max-w-[--header-timing-connection-size] min-w-[--header-timing-connection-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-connection-size] max-w-[--col-timing-connection-size] min-w-[--col-timing-connection-size]',
-    },
-  },
-  {
-    id: 'timing.tls',
-    accessorFn: (row) => row['timing.tls'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="TLS" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.tls']>('timing.tls')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'TLS',
-      headerClassName:
-        'w-[--header-timing-tls-size] max-w-[--header-timing-tls-size] min-w-[--header-timing-tls-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-tls-size] max-w-[--col-timing-tls-size] min-w-[--col-timing-tls-size]',
-    },
-  },
-  {
-    id: 'timing.ttfb',
-    accessorFn: (row) => row['timing.ttfb'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="TTFB" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.ttfb']>('timing.ttfb')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'TTFB',
-      headerClassName:
-        'w-[--header-timing-ttfb-size] max-w-[--header-timing-ttfb-size] min-w-[--header-timing-ttfb-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-ttfb-size] max-w-[--col-timing-ttfb-size] min-w-[--col-timing-ttfb-size]',
-    },
-  },
-  {
-    id: 'timing.transfer',
-    accessorFn: (row) => row['timing.transfer'],
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Transfer" />,
-    cell: ({ row }) => {
-      const value = row.getValue<ColumnSchema['timing.transfer']>('timing.transfer')
-      return <DataTableColumnLatency value={value} />
-    },
-    filterFn: 'inNumberRange',
-    enableResizing: false,
-    size: 110,
-    minSize: 110,
-    meta: {
-      label: 'Transfer',
-      headerClassName:
-        'w-[--header-timing-transfer-size] max-w-[--header-timing-transfer-size] min-w-[--header-timing-transfer-size]',
-      cellClassName:
-        'font-mono w-[--col-timing-transfer-size] max-w-[--col-timing-transfer-size] min-w-[--col-timing-transfer-size]',
-    },
-  },
-]
diff --git a/apps/studio/components/interfaces/infinite-logs-example/data-table-sheet-content.tsx b/apps/studio/components/interfaces/infinite-logs-example/data-table-sheet-content.tsx
deleted file mode 100644
index ebe4504dc97..00000000000
--- a/apps/studio/components/interfaces/infinite-logs-example/data-table-sheet-content.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { cn } from 'ui'
-import { Table } from '@tanstack/react-table'
-import { DataTableSheetRowAction } from 'components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-row-action'
-import {
-  DataTableFilterField,
-  SheetField,
-} from 'components/interfaces/DataTableDemo/components/data-table/types'
-import { SheetDetailsContentSkeleton } from 'components/interfaces/DataTableDemo/components/data-table/data-table-sheet/data-table-sheet-skeleton'
-
-interface DataTableSheetContentProps<TData, TMeta> extends React.HTMLAttributes<HTMLDListElement> {
-  data?: TData
-  table: Table<TData>
-  fields: SheetField<TData, TMeta>[]
-  filterFields: DataTableFilterField<TData>[]
-  // totalRows: number;
-  // filterRows: number;
-  // totalRowsFetched: number;
-  metadata?: TMeta & {
-    totalRows: number
-    filterRows: number
-    totalRowsFetched: number
-  }
-}
-
-export function DataTableSheetContent<TData, TMeta>({
-  data,
-  table,
-  className,
-  fields,
-  filterFields,
-  metadata,
-  ...props
-}: DataTableSheetContentProps<TData, TMeta>) {
-  if (!data) return <SheetDetailsContentSkeleton fields={fields} />
-
-  return (
-    <dl className={cn('divide-y', className)} {...props}>
-      {fields.map((field) => {
-        if (field.condition && !field.condition(data)) return null
-
-        const Component = field.component
-        const value = String(data[field.id])
-
-        return (
-          <div key={field.id.toString()}>
-            {field.type === 'readonly' ? (
-              <div
-                className={cn(
-                  'flex gap-4 my-1 py-1 text-sm justify-between items-center w-full',
-                  field.className
-                )}
-              >
-                <dt className="shrink-0 text-muted-foreground">{field.label}</dt>
-                <dd className="font-mono w-full text-right">
-                  {Component ? <Component {...data} metadata={metadata} /> : value}
-                </dd>
-              </div>
-            ) : (
-              <DataTableSheetRowAction
-                fieldValue={field.id}
-                filterFields={filterFields}
-                value={value}
-                table={table}
-                className={cn(
-                  'flex gap-4 my-1 py-1 text-sm justify-between items-center w-full',
-                  field.className
-                )}
-              >
-                <dt className="shrink-0 text-muted-foreground">{field.label}</dt>
-                <dd className="font-mono w-full text-right">
-                  {Component ? <Component {...data} metadata={metadata} /> : value}
-                </dd>
-              </DataTableSheetRowAction>
-            )}
-          </div>
-        )
-      })}
-    </dl>
-  )
-}
-
-export const MemoizedDataTableSheetContent = React.memo(DataTableSheetContent, (prev, next) => {
-  // REMINDER: only check if data is the same, rest is useless
-  return prev.data === next.data
-}) as typeof DataTableSheetContent
diff --git a/apps/studio/components/interfaces/infinite-logs-example/schema.ts b/apps/studio/components/interfaces/infinite-logs-example/schema.ts
deleted file mode 100644
index 733498b6d91..00000000000
--- a/apps/studio/components/interfaces/infinite-logs-example/schema.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import {
-  ARRAY_DELIMITER,
-  RANGE_DELIMITER,
-  SLIDER_DELIMITER,
-} from 'components/interfaces/DataTableDemo/lib/delimiters'
-import { METHODS } from 'components/interfaces/DataTableDemo/constants/method'
-import { REGIONS } from 'components/interfaces/DataTableDemo/constants/region'
-import { z } from 'zod'
-import { LEVELS } from 'components/interfaces/DataTableDemo/constants/levels'
-
-// https://github.com/colinhacks/zod/issues/2985#issue-2008642190
-const stringToBoolean = z
-  .string()
-  .toLowerCase()
-  .transform((val) => {
-    try {
-      return JSON.parse(val)
-    } catch (e) {
-      console.log(e)
-      return undefined
-    }
-  })
-  .pipe(z.boolean().optional())
-
-export const timingSchema = z.object({
-  'timing.dns': z.number(),
-  'timing.connection': z.number(),
-  'timing.tls': z.number(),
-  'timing.ttfb': z.number(),
-  'timing.transfer': z.number(),
-})
-
-export const columnSchema = z
-  .object({
-    uuid: z.string(),
-    method: z.enum(METHODS),
-    host: z.string(),
-    pathname: z.string(),
-    level: z.enum(LEVELS),
-    latency: z.number(),
-    status: z.number(),
-    regions: z.enum(REGIONS).array(),
-    date: z.date(),
-    headers: z.record(z.string()),
-    message: z.string().optional(),
-    percentile: z.number().optional(),
-  })
-  .merge(timingSchema)
-
-export type ColumnSchema = z.infer<typeof columnSchema>
-export type TimingSchema = z.infer<typeof timingSchema>
-
-// TODO: can we get rid of this in favor of nuqs search-params?
-export const columnFilterSchema = z.object({
-  level: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.enum(LEVELS).array())
-    .optional(),
-  method: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.enum(METHODS).array())
-    .optional(),
-  host: z.string().optional(),
-  pathname: z.string().optional(),
-  latency: z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.dns': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.connection': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.tls': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.ttfb': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  'timing.transfer': z
-    .string()
-    .transform((val) => val.split(SLIDER_DELIMITER))
-    .pipe(z.coerce.number().array().max(2))
-    .optional(),
-  status: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.coerce.number().array())
-    .optional(),
-  regions: z
-    .string()
-    .transform((val) => val.split(ARRAY_DELIMITER))
-    .pipe(z.enum(REGIONS).array())
-    .optional(),
-  date: z
-    .string()
-    .transform((val) => val.split(RANGE_DELIMITER).map(Number))
-    .pipe(z.coerce.date().array())
-    .optional(),
-})
-
-export type ColumnFilterSchema = z.infer<typeof columnFilterSchema>
-
-export const facetMetadataSchema = z.object({
-  rows: z.array(z.object({ value: z.any(), total: z.number() })),
-  total: z.number(),
-  min: z.number().optional(),
-  max: z.number().optional(),
-})
-
-export type FacetMetadataSchema = z.infer<typeof facetMetadataSchema>
-
-export type BaseChartSchema = { timestamp: number; [key: string]: number }
-
-export const timelineChartSchema = z.object({
-  timestamp: z.number(), // UNIX
-  ...LEVELS.reduce(
-    (acc, level) => ({
-      ...acc,
-      [level]: z.number().default(0),
-    }),
-    {} as Record<(typeof LEVELS)[number], z.ZodNumber>
-  ),
-  // REMINDER: make sure to have the `timestamp` field in the object
-}) satisfies z.ZodType<BaseChartSchema>
-
-export type TimelineChartSchema = z.infer<typeof timelineChartSchema>
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterTimerange.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterTimerange.tsx
index b8577678ea6..9981ed31e61 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterTimerange.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterTimerange.tsx
@@ -3,10 +3,9 @@ import type { DateRange } from 'react-day-picker'
 
 import type { DataTableTimerangeFilterField } from '../DataTable.types'
 import { isArrayOfDates } from '../DataTable.utils'
+import { DatePickerWithRange } from '../DatePickerWithRange'
 import { useDataTable } from '../providers/DataTableProvider'
 
-import { DatePickerWithRange } from 'components/interfaces/DataTableDemo/components/custom/date-picker-with-range'
-
 export function DataTableFilterTimerange<TData>({
   value: _value,
   presets,
diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/date-picker-with-range.tsx b/apps/studio/components/ui/DataTable/DatePickerWithRange.tsx
similarity index 86%
rename from apps/studio/components/interfaces/DataTableDemo/components/custom/date-picker-with-range.tsx
rename to apps/studio/components/ui/DataTable/DatePickerWithRange.tsx
index 73413bffa26..7dd0013b814 100644
--- a/apps/studio/components/interfaces/DataTableDemo/components/custom/date-picker-with-range.tsx
+++ b/apps/studio/components/ui/DataTable/DatePickerWithRange.tsx
@@ -1,17 +1,18 @@
-'use client'
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+import { HTMLAttributes, useEffect, useState } from 'react'
+import type { DateRange } from 'react-day-picker'
 
-import { kbdVariants } from 'components/interfaces/DataTableDemo/components/custom/kbd'
-import type { DatePreset } from 'components/interfaces/DataTableDemo/components/data-table/types'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
-import { Input } from 'ui'
-import { Label_Shadcn_ as Label } from 'ui'
 import {
+  Button,
+  Calendar,
+  cn,
+  Input,
+  Label_Shadcn_ as Label,
   Popover_Shadcn_ as Popover,
   PopoverContent_Shadcn_ as PopoverContent,
+  PopoverSeparator_Shadcn_ as PopoverSeparator,
   PopoverTrigger_Shadcn_ as PopoverTrigger,
-} from 'ui'
-import {
   Select_Shadcn_ as Select,
   SelectContent_Shadcn_ as SelectContent,
   SelectGroup_Shadcn_ as SelectGroup,
@@ -20,17 +21,12 @@ import {
   SelectTrigger_Shadcn_ as SelectTrigger,
   SelectValue_Shadcn_ as SelectValue,
 } from 'ui'
-import { Separator } from 'ui'
-import { presets as defaultPresets } from 'components/interfaces/DataTableDemo/constants/date-preset'
-import { useDebounce } from 'components/interfaces/DataTableDemo/hooks/use-debounce'
-import { cn } from 'ui'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import * as React from 'react'
-import type { DateRange } from 'react-day-picker'
-import { PopoverSeparator } from '@ui/components/shadcn/ui/popover'
+import { presets as defaultPresets } from './DataTable.constants'
+import type { DatePreset } from './DataTable.types'
+import { useDebounce } from './hooks/useDebounce'
+import { kbdVariants } from './primitives/Kbd'
 
-interface DatePickerWithRangeProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DatePickerWithRangeProps extends HTMLAttributes<HTMLDivElement> {
   date: DateRange | undefined
   setDate: (date: DateRange | undefined) => void
   presets?: DatePreset[]
@@ -42,8 +38,9 @@ export function DatePickerWithRange({
   setDate,
   presets = defaultPresets,
 }: DatePickerWithRangeProps) {
-  const [open, setOpen] = React.useState(false)
-  React.useEffect(() => {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (!open) return
 
@@ -158,11 +155,9 @@ function DatePresetsSelect({
   function findPreset(from?: Date, to?: Date) {
     return presets.find((p) => p.from === from && p.to === to)?.shortcut
   }
-  const [value, setValue] = React.useState<string | undefined>(
-    findPreset(selected?.from, selected?.to)
-  )
+  const [value, setValue] = useState<string | undefined>(findPreset(selected?.from, selected?.to))
 
-  React.useEffect(() => {
+  useEffect(() => {
     const preset = findPreset(selected?.from, selected?.to)
     if (preset === value) return
     setValue(preset)
@@ -212,8 +207,8 @@ function CustomDateRange({
   selected: DateRange | undefined
   onSelect: (date: DateRange | undefined) => void
 }) {
-  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(selected?.from)
-  const [dateTo, setDateTo] = React.useState<Date | undefined>(selected?.to)
+  const [dateFrom, setDateFrom] = useState<Date | undefined>(selected?.from)
+  const [dateTo, setDateTo] = useState<Date | undefined>(selected?.to)
   const debounceDateFrom = useDebounce(dateFrom, 1000)
   const debounceDateTo = useDebounce(dateTo, 1000)
 
@@ -223,7 +218,7 @@ function CustomDateRange({
     return utcDate.toISOString().slice(0, 16)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     onSelect({ from: debounceDateFrom, to: debounceDateTo })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debounceDateFrom, debounceDateTo])
diff --git a/apps/studio/components/ui/DataTable/hooks/useComposedRefs.ts b/apps/studio/components/ui/DataTable/hooks/useComposedRefs.ts
new file mode 100644
index 00000000000..392968ad00a
--- /dev/null
+++ b/apps/studio/components/ui/DataTable/hooks/useComposedRefs.ts
@@ -0,0 +1,32 @@
+import { Ref, useCallback } from 'react'
+
+type PossibleRef<T> = Ref<T> | undefined
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    ref(value)
+  } else if (ref !== null && ref !== undefined) {
+    ;(ref as React.MutableRefObject<T>).current = value
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+export function composeRefs<T>(...refs: PossibleRef<T>[]) {
+  return (node: T) => refs.forEach((ref) => setRef(ref, node))
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+export function useComposedRefs<T>(...refs: PossibleRef<T>[]) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(composeRefs(...refs), refs)
+}
diff --git a/apps/studio/components/ui/DataTable/primitives/Sortable.tsx b/apps/studio/components/ui/DataTable/primitives/Sortable.tsx
index c138ce567dd..24b45191a95 100644
--- a/apps/studio/components/ui/DataTable/primitives/Sortable.tsx
+++ b/apps/studio/components/ui/DataTable/primitives/Sortable.tsx
@@ -33,8 +33,8 @@ import { Slot, type SlotProps } from '@radix-ui/react-slot'
 import { createContext, forwardRef, useContext, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 
-import { composeRefs } from 'components/interfaces/DataTableDemo/lib/compose-refs'
 import { Button, cn, type ButtonProps } from 'ui'
+import { composeRefs } from '../hooks/useComposedRefs'
 
 const orientationConfig = {
   vertical: {
diff --git a/apps/studio/pages/project/[ref]/logs/trace/[id].tsx b/apps/studio/pages/project/[ref]/logs/trace/[id].tsx
deleted file mode 100644
index bbdd9016056..00000000000
--- a/apps/studio/pages/project/[ref]/logs/trace/[id].tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import TraceViewerClient from 'components/interfaces/Trace/trace-viewer-client'
-// import { SearchParams } from 'nuqs' // No longer needed directly
-// import { useSearchParams } from 'next/navigation' // Switch to useQueryStates
-
-import DefaultLayout from 'components/layouts/DefaultLayout'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
-
-import type { NextPageWithLayout } from 'types'
-
-export const LogPage: NextPageWithLayout = () => {
-  return <TraceViewerClient />
-}
-
-LogPage.getLayout = (page) => (
-  <DefaultLayout>
-    <LogsLayout hideSidebar={true}>{page}</LogsLayout>
-  </DefaultLayout>
-)
-
-export default LogPage