diff --git a/apps/web/src/components/data-table/single-region/columns.tsx b/apps/web/src/components/data-table/single-region/columns.tsx
new file mode 100644
index 00000000..75161934
--- /dev/null
+++ b/apps/web/src/components/data-table/single-region/columns.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { SimpleChart } from "@/components/monitor-charts/simple-chart";
+import { formatNumber } from "@/components/monitor-dashboard/metrics-card";
+import type { Region, ResponseTimeMetricsByRegion } from "@openstatus/tinybird";
+import { flyRegionsDict } from "@openstatus/utils";
+import type { ColumnDef } from "@tanstack/react-table";
+import { DataTableColumnHeader } from "./data-table-column-header";
+
+export interface RegionWithMetrics {
+  data: (Partial<Record<Region, string>> & { timestamp: string })[];
+  metrics?: ResponseTimeMetricsByRegion;
+  region: Region;
+}
+
+export const columns: ColumnDef<RegionWithMetrics>[] = [
+  {
+    accessorKey: "region",
+    header: "Region",
+    cell: ({ row }) => {
+      const region = row.getValue("region") as Region;
+      const { code, flag, location } = flyRegionsDict[region];
+      return (
+        <div>
+          <p className="text-muted-foreground text-xs">{location}</p>
+          <p className="font-mono text-xs">
+            {flag} {code}
+          </p>
+        </div>
+      );
+    },
+    meta: {
+      headerClassName: "w-[100px]",
+    },
+  },
+  {
+    accessorKey: "data",
+    header: "Trend",
+    cell: ({ row }) => {
+      const data = row.getValue("data") as RegionWithMetrics["data"];
+      const region = row.getValue("region") as Region;
+      return <SimpleChart data={data} region={region} />;
+    },
+    meta: {
+      headerClassName: "min-w-[300px] w-full",
+    },
+  },
+  {
+    accessorKey: "p50",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="P50" />
+    ),
+    accessorFn: (row) => row.metrics?.p50Latency,
+    cell: ({ row }) => {
+      const p50 = row.getValue("p50") as number;
+      return (
+        <div className="whitespace-nowrap">
+          <span className="font-mono">{formatNumber(p50)}</span>{" "}
+          <span className="font-normal text-muted-foreground text-xs">ms</span>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "p95",
+    accessorFn: (row) => row.metrics?.p95Latency,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="P95" />
+    ),
+    cell: ({ row }) => {
+      const p95 = row.getValue("p95") as number;
+      return (
+        <div className="whitespace-nowrap">
+          <span className="font-mono">{formatNumber(p95)}</span>{" "}
+          <span className="font-normal text-muted-foreground text-xs">ms</span>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "p99",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="P99" />
+    ),
+    accessorFn: (row) => row.metrics?.p99Latency,
+    cell: ({ row }) => {
+      const p99 = row.getValue("p99") as number;
+      return (
+        <div className="whitespace-nowrap">
+          <span className="font-mono">{formatNumber(p99)}</span>{" "}
+          <span className="font-normal text-muted-foreground text-xs">ms</span>
+        </div>
+      );
+    },
+  },
+];
diff --git a/apps/web/src/components/data-table/single-region/data-table-column-header.tsx b/apps/web/src/components/data-table/single-region/data-table-column-header.tsx
new file mode 100644
index 00000000..68b1fea9
--- /dev/null
+++ b/apps/web/src/components/data-table/single-region/data-table-column-header.tsx
@@ -0,0 +1,66 @@
+import type { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@openstatus/ui";
+
+import { cn } from "@/lib/utils";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowUp className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowDown className="ml-2 h-4 w-4" />
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Desc
+          </DropdownMenuItem>
+          {/* <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            Hide
+          </DropdownMenuItem> */}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/data-table/single-region/data-table.tsx b/apps/web/src/components/data-table/single-region/data-table.tsx
new file mode 100644
index 00000000..bc542013
--- /dev/null
+++ b/apps/web/src/components/data-table/single-region/data-table.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import type { ColumnDef, SortingState } from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import * as React from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@openstatus/ui";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting },
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <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}
+                    className={header.column.columnDef.meta?.headerClassName}
+                  >
+                    {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}
+                    className={cell.column.columnDef.meta?.cellClassName}
+                  >
+                    {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>
+  );
+}
diff --git a/apps/web/src/components/monitor-charts/combined-chart-wrapper.tsx b/apps/web/src/components/monitor-charts/combined-chart-wrapper.tsx
index 174554ff..750bfe43 100644
--- a/apps/web/src/components/monitor-charts/combined-chart-wrapper.tsx
+++ b/apps/web/src/components/monitor-charts/combined-chart-wrapper.tsx
@@ -11,6 +11,8 @@ import type {
 } from "@openstatus/tinybird";
 import { Toggle } from "@openstatus/ui";
 
+import { columns } from "@/components/data-table/single-region/columns";
+import { DataTable } from "@/components/data-table/single-region/data-table";
 import { IntervalPreset } from "@/components/monitor-dashboard/interval-preset";
 import { QuantilePreset } from "@/components/monitor-dashboard/quantile-preset";
 import { RegionsPreset } from "@/components/monitor-dashboard/region-preset";
@@ -18,7 +20,6 @@ import type { Interval, Period, Quantile } from "@/lib/monitor/utils";
 import { usePreferredSettings } from "@/lib/preferred-settings/client";
 import type { PreferredSettings } from "@/lib/preferred-settings/server";
 import { Chart } from "./chart";
-import { RegionTable } from "./region-table";
 import { groupDataByTimestamp } from "./utils";
 
 export function CombinedChartWrapper({
@@ -53,6 +54,18 @@ export function CombinedChartWrapper({
 
   const combinedRegions = preferredSettings?.combinedRegions ?? false;
 
+  const tableData = useMemo(
+    () =>
+      regions
+        .map((region) => ({
+          region,
+          data: chartData.data,
+          metrics: metricsByRegion.find((metrics) => metrics.region === region),
+        }))
+        .filter((row) => !!row.metrics),
+    [regions, chartData, metricsByRegion],
+  );
+
   return (
     <>
       <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
@@ -82,15 +95,11 @@ export function CombinedChartWrapper({
           <IntervalPreset interval={interval} />
         </div>
       </div>
-      <div className="grid gap-3">
+      <div>
         {combinedRegions ? (
           <Chart data={chartData.data} regions={regions} />
         ) : (
-          <RegionTable
-            metricsByRegion={metricsByRegion}
-            regions={regions}
-            data={chartData}
-          />
+          <DataTable columns={columns} data={tableData} />
         )}
       </div>
     </>
diff --git a/apps/web/src/components/monitor-charts/region-table.tsx b/apps/web/src/components/monitor-charts/region-table.tsx
index b585d9bb..638eb526 100644
--- a/apps/web/src/components/monitor-charts/region-table.tsx
+++ b/apps/web/src/components/monitor-charts/region-table.tsx
@@ -23,13 +23,15 @@ export interface RegionTableProps {
   caption?: string;
 }
 
+/**
+ * @deprecated use the /region/data-table.tsx component instead, this is only used for the content blog posts
+ */
 export function RegionTable({
   regions,
   data,
   metricsByRegion,
   caption = "A list of all the selected regions.",
 }: RegionTableProps) {
-  // console.log(JSON.stringify({ regions, data, metricsByRegion }, null, 2));
   return (
     <Table>
       <TableCaption>{caption}</TableCaption>
@@ -81,12 +83,6 @@ export function RegionTable({
             );
           })}
       </TableBody>
-      {/* <TableFooter>
-        <TableRow>
-          <TableCell colSpan={4}>Total</TableCell>
-          <TableCell className="text-right">0</TableCell>
-        </TableRow>
-      </TableFooter> */}
     </Table>
   );
 }
diff --git a/apps/web/src/react-table.d.ts b/apps/web/src/react-table.d.ts
new file mode 100644
index 00000000..3e6ce4ab
--- /dev/null
+++ b/apps/web/src/react-table.d.ts
@@ -0,0 +1,8 @@
+import "@tanstack/react-table";
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta {
+    headerClassName?: string;
+    cellClassName?: string;
+  }
+}