diff --git a/app/[query]/merges/merge-performance.ts b/app/[query]/merges/merge-performance.ts
index cdd131a0..88d654af 100644
--- a/app/[query]/merges/merge-performance.ts
+++ b/app/[query]/merges/merge-performance.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mergePerformanceConfig: QueryConfig = {
diff --git a/app/[query]/merges/merges.ts b/app/[query]/merges/merges.ts
index 71c16fb7..8e909165 100644
--- a/app/[query]/merges/merges.ts
+++ b/app/[query]/merges/merges.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mergesConfig: QueryConfig = {
diff --git a/app/[query]/merges/mutations.ts b/app/[query]/merges/mutations.ts
index 720b4291..1e32618b 100644
--- a/app/[query]/merges/mutations.ts
+++ b/app/[query]/merges/mutations.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mutationsConfig: QueryConfig = {
diff --git a/app/[query]/more/asynchronous-metrics.ts b/app/[query]/more/asynchronous-metrics.ts
index 28d9c5ce..22b33365 100644
--- a/app/[query]/more/asynchronous-metrics.ts
+++ b/app/[query]/more/asynchronous-metrics.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const asynchronousMetricsConfig: QueryConfig = {
diff --git a/app/[query]/more/backups.ts b/app/[query]/more/backups.ts
index 877b2f71..b443a39a 100644
--- a/app/[query]/more/backups.ts
+++ b/app/[query]/more/backups.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const backupsConfig: QueryConfig = {
diff --git a/app/[query]/more/count-across-replicas.ts b/app/[query]/more/count-across-replicas.ts
index 90fb3a5c..49e537d0 100644
--- a/app/[query]/more/count-across-replicas.ts
+++ b/app/[query]/more/count-across-replicas.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const countAcrossReplicasConfig: QueryConfig = {
diff --git a/app/[query]/more/mergetree-settings.ts b/app/[query]/more/mergetree-settings.ts
index 642e582c..23257bf6 100644
--- a/app/[query]/more/mergetree-settings.ts
+++ b/app/[query]/more/mergetree-settings.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mergeTreeSettingsConfig: QueryConfig = {
diff --git a/app/[query]/more/metrics.ts b/app/[query]/more/metrics.ts
index f5e919ea..4656e34c 100644
--- a/app/[query]/more/metrics.ts
+++ b/app/[query]/more/metrics.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const metricsConfig: QueryConfig = {
diff --git a/app/[query]/more/settings.ts b/app/[query]/more/settings.ts
index e4caf230..2b07908f 100644
--- a/app/[query]/more/settings.ts
+++ b/app/[query]/more/settings.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const settingsConfig: QueryConfig = {
diff --git a/app/[query]/more/top-usage-columns.ts b/app/[query]/more/top-usage-columns.ts
index 85821ba7..30ba34f1 100644
--- a/app/[query]/more/top-usage-columns.ts
+++ b/app/[query]/more/top-usage-columns.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const topUsageColumnsConfig: QueryConfig = {
diff --git a/app/[query]/more/top-usage-tables.ts b/app/[query]/more/top-usage-tables.ts
index ace051d4..b5d27036 100644
--- a/app/[query]/more/top-usage-tables.ts
+++ b/app/[query]/more/top-usage-tables.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const topUsageTablesConfig: QueryConfig = {
diff --git a/app/[query]/more/zookeeper.ts b/app/[query]/more/zookeeper.ts
index bc242d5b..c86694c2 100644
--- a/app/[query]/more/zookeeper.ts
+++ b/app/[query]/more/zookeeper.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const zookeeperConfig: QueryConfig = {
diff --git a/app/[query]/queries/common-errors.ts b/app/[query]/queries/common-errors.ts
index 64caca5e..ed7fe941 100644
--- a/app/[query]/queries/common-errors.ts
+++ b/app/[query]/queries/common-errors.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const commonErrorsConfig: QueryConfig = {
diff --git a/app/[query]/queries/expensive-queries-by-memory.ts b/app/[query]/queries/expensive-queries-by-memory.ts
index e1e11973..4f78d342 100644
--- a/app/[query]/queries/expensive-queries-by-memory.ts
+++ b/app/[query]/queries/expensive-queries-by-memory.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const expensiveQueriesByMemoryConfig: QueryConfig = {
diff --git a/app/[query]/queries/expensive-queries.ts b/app/[query]/queries/expensive-queries.ts
index f1c469d1..ff2be8fc 100644
--- a/app/[query]/queries/expensive-queries.ts
+++ b/app/[query]/queries/expensive-queries.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const expensiveQueriesConfig: QueryConfig = {
diff --git a/app/[query]/queries/failed-queries.ts b/app/[query]/queries/failed-queries.ts
index f4d9c60f..273ae1d7 100644
--- a/app/[query]/queries/failed-queries.ts
+++ b/app/[query]/queries/failed-queries.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const failedQueriesConfig: QueryConfig = {
diff --git a/app/[query]/queries/history-queries.ts b/app/[query]/queries/history-queries.ts
index 5dd539de..bf842c42 100644
--- a/app/[query]/queries/history-queries.ts
+++ b/app/[query]/queries/history-queries.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const historyQueriesConfig: QueryConfig = {
diff --git a/app/[query]/queries/running-queries.ts b/app/[query]/queries/running-queries.ts
index 309ed238..9b8c770f 100644
--- a/app/[query]/queries/running-queries.ts
+++ b/app/[query]/queries/running-queries.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const runningQueriesConfig: QueryConfig = {
diff --git a/app/[query]/tables/distributed-ddl-queue.ts b/app/[query]/tables/distributed-ddl-queue.ts
index b212ce2f..7dd8770e 100644
--- a/app/[query]/tables/distributed-ddl-queue.ts
+++ b/app/[query]/tables/distributed-ddl-queue.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const distributedDdlQueueConfig: QueryConfig = {
diff --git a/app/[query]/tables/readonly-tables.ts b/app/[query]/tables/readonly-tables.ts
index e9620576..dd9d1751 100644
--- a/app/[query]/tables/readonly-tables.ts
+++ b/app/[query]/tables/readonly-tables.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const readOnlyTablesConfig: QueryConfig = {
diff --git a/app/[query]/tables/replicas.ts b/app/[query]/tables/replicas.ts
index a7db4989..f9b8cbc5 100644
--- a/app/[query]/tables/replicas.ts
+++ b/app/[query]/tables/replicas.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const replicasConfig: QueryConfig = {
diff --git a/app/[query]/tables/replication-queue.ts b/app/[query]/tables/replication-queue.ts
index 0ec80816..dfbf4712 100644
--- a/app/[query]/tables/replication-queue.ts
+++ b/app/[query]/tables/replication-queue.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const replicationQueueConfig: QueryConfig = {
diff --git a/app/[query]/tables/table-overview.ts b/app/[query]/tables/table-overview.ts
index 42d94c26..c07a697f 100644
--- a/app/[query]/tables/table-overview.ts
+++ b/app/[query]/tables/table-overview.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const tablesOverviewConfig: QueryConfig = {
diff --git a/app/clusters/[cluster]/count-across-replicas/page.tsx b/app/clusters/[cluster]/count-across-replicas/page.tsx
index e9bdc20e..6b160225 100644
--- a/app/clusters/[cluster]/count-across-replicas/page.tsx
+++ b/app/clusters/[cluster]/count-across-replicas/page.tsx
@@ -1,6 +1,6 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
+import { ColumnFormat } from '@/lib/types/column-format'
 
 import type { QueryConfig } from '@/lib/types/query-config'
 
diff --git a/app/clusters/[cluster]/parts-across-replicas/page.tsx b/app/clusters/[cluster]/parts-across-replicas/page.tsx
index b6287eba..390b18df 100644
--- a/app/clusters/[cluster]/parts-across-replicas/page.tsx
+++ b/app/clusters/[cluster]/parts-across-replicas/page.tsx
@@ -1,6 +1,6 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
+import { ColumnFormat } from '@/lib/types/column-format'
 
 import type { QueryConfig } from '@/lib/types/query-config'
 
diff --git a/app/clusters/[cluster]/replicas-status/config.ts b/app/clusters/[cluster]/replicas-status/config.ts
index 56efa83c..b6634a90 100644
--- a/app/clusters/[cluster]/replicas-status/config.ts
+++ b/app/clusters/[cluster]/replicas-status/config.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {
diff --git a/app/clusters/config.ts b/app/clusters/config.ts
index a4ee7650..e7b339ab 100644
--- a/app/clusters/config.ts
+++ b/app/clusters/config.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {
diff --git a/app/database/[database]/[table]/config.ts b/app/database/[database]/[table]/config.ts
index d0b1efe1..9781da1c 100644
--- a/app/database/[database]/[table]/config.ts
+++ b/app/database/[database]/[table]/config.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {
@@ -70,6 +70,7 @@ export const config: QueryConfig = {
     'comment',
   ],
   columnFormats: {
+    column: [ColumnFormat.HoverCard, { content: 'Column note: [comment]' }],
     type: ColumnFormat.Code,
     codec: ColumnFormat.Code,
     part_count: ColumnFormat.Number,
diff --git a/app/database/[database]/[table]/loading.tsx b/app/database/[database]/[table]/loading.tsx
index 6fafa7a8..bcb050d1 100644
--- a/app/database/[database]/[table]/loading.tsx
+++ b/app/database/[database]/[table]/loading.tsx
@@ -1,10 +1,5 @@
-import { UpdateIcon } from '@radix-ui/react-icons'
+import { TableSkeleton } from '@/components/skeleton'
 
 export default function Loading() {
-  return (
-    <div className="flex flex-row items-center gap-3">
-      <UpdateIcon className="size-4 animate-spin" />
-      Loading table detail ...
-    </div>
-  )
+  return <TableSkeleton className="mb-4" />
 }
diff --git a/app/database/[database]/breadcrumb.tsx b/app/database/[database]/breadcrumb.tsx
index b04a0976..cc533dec 100644
--- a/app/database/[database]/breadcrumb.tsx
+++ b/app/database/[database]/breadcrumb.tsx
@@ -31,7 +31,7 @@ interface DatabaseCount {
 export async function DatabaseBreadcrumb({ database }: Props) {
   // Default
   let databases: { name: string; count: number }[] = [
-    { name: database, count: 0 },
+    { name: database, count: -1 },
   ]
 
   try {
@@ -64,8 +64,8 @@ export async function DatabaseBreadcrumbSkeleton({ database }: Props) {
     <Internal
       current={database}
       databases={[
-        { name: database, count: 0 },
-        { name: 'Loading ...', count: 0 },
+        { name: database, count: -1 },
+        { name: 'Loading ...', count: -1 },
       ]}
     />
   )
@@ -93,7 +93,7 @@ function Internal({
 
         <DropdownMenu>
           <DropdownMenuTrigger className="flex items-center gap-1">
-            {current} ({currentCount} {currentCount == 1 ? 'table' : 'tables'})
+            {current} (<Count count={currentCount} />)
             <ChevronDownIcon />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
@@ -114,3 +114,10 @@ function Internal({
     </Breadcrumb>
   )
 }
+
+function Count({ count }: { count?: number }) {
+  if (count == undefined || count == -1) return 'loading ...'
+  if (count == 0) return '0 table'
+  if (count == 1) return '1 table'
+  return `${count} tables`
+}
diff --git a/app/database/[database]/page.tsx b/app/database/[database]/page.tsx
index 5a38aa8b..7a68502a 100644
--- a/app/database/[database]/page.tsx
+++ b/app/database/[database]/page.tsx
@@ -1,6 +1,6 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 import { type RowData } from '@tanstack/react-table'
 
diff --git a/app/disks/config.ts b/app/disks/config.ts
index 03c5ccab..fb391c28 100644
--- a/app/disks/config.ts
+++ b/app/disks/config.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {
diff --git a/app/replica/[replica]/tables/config.ts b/app/replica/[replica]/tables/config.ts
index 8fc8333b..dcf83ca7 100644
--- a/app/replica/[replica]/tables/config.ts
+++ b/app/replica/[replica]/tables/config.ts
@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {
diff --git a/components/data-table/cells/hover-card-format.tsx b/components/data-table/cells/hover-card-format.tsx
new file mode 100644
index 00000000..3ca10a14
--- /dev/null
+++ b/components/data-table/cells/hover-card-format.tsx
@@ -0,0 +1,50 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+import React from 'react'
+
+export type HoverCardContent = string | React.ReactNode
+
+export type HoverCardOptions = {
+  content: HoverCardContent
+}
+
+interface HoverCardProps {
+  row: any
+  value: any
+  options?: HoverCardOptions
+}
+
+export function HoverCardFormat({ row, value, options }: HoverCardProps) {
+  let { content } = options || {}
+
+  if (!content) {
+    content = value
+  }
+
+  // Content replacement, e.g. "Hover content: [column_name]"
+  if (
+    typeof content === 'string' &&
+    content.includes('[') &&
+    content.includes(']')
+  ) {
+    const matches = content.match(/\[(.*?)\]/g)
+    if (matches) {
+      matches.forEach((match) => {
+        const key = match.replace('[', '').replace(']', '').trim()
+        const replacementValue = row.getValue(key)
+        if (typeof content === 'string') {
+          content = content.replace(match, replacementValue)
+        }
+      })
+    }
+  }
+  return (
+    <HoverCard>
+      <HoverCardTrigger>{value}</HoverCardTrigger>
+      <HoverCardContent>{content}</HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/components/data-table/column-defs.tsx b/components/data-table/column-defs.tsx
index ff77d5d2..3ac203e1 100644
--- a/components/data-table/column-defs.tsx
+++ b/components/data-table/column-defs.tsx
@@ -4,32 +4,12 @@ import {
   CaretUpIcon,
 } from '@radix-ui/react-icons'
 import type { ColumnDef, Row, RowData, Table } from '@tanstack/react-table'
-import { LinkProps } from 'next/link'
 
-import { formatCell } from '@/components/data-table/cell'
-import { type Action } from '@/components/data-table/cells/actions/types'
+import { formatCell } from '@/components/data-table/format-cell'
 import { Button } from '@/components/ui/button'
+import { ColumnFormat, ColumnFormatOptions } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
-export enum ColumnFormat {
-  BackgroundBar = 'background-bar',
-  ColoredBadge = 'colored-badge',
-  RelatedTime = 'related-time',
-  NumberShort = 'number-short',
-  CodeToggle = 'code-toggle',
-  Duration = 'duration',
-  Boolean = 'boolean',
-  Action = 'action',
-  Number = 'number',
-  Badge = 'badge',
-  Code = 'code',
-  Link = 'link',
-  None = 'none',
-}
-
-// Union of all possible format options
-export type ColumnFormatOptions = Action[] | LinkProps
-
 export type ColumnType = { [key: string]: string }
 
 const formatHeader = (name: string, format: ColumnFormat) => {
diff --git a/components/data-table/cell.tsx b/components/data-table/format-cell.tsx
similarity index 86%
rename from components/data-table/cell.tsx
rename to components/data-table/format-cell.tsx
index c8248ce7..e21d6a82 100644
--- a/components/data-table/cell.tsx
+++ b/components/data-table/format-cell.tsx
@@ -1,11 +1,8 @@
 import type { Row, RowData, Table } from '@tanstack/react-table'
 import { type LinkProps } from 'next/link'
 
-import {
-  ColumnFormat,
-  ColumnFormatOptions,
-} from '@/components/data-table/column-defs'
 import { formatReadableQuantity } from '@/lib/format-readable'
+import { ColumnFormat, ColumnFormatOptions } from '@/lib/types/column-format'
 
 import { ActionFormat } from './cells/action-format'
 import { type Action } from './cells/actions/types'
@@ -15,6 +12,7 @@ import { BooleanFormat } from './cells/boolean-format'
 import { CodeToggleFormat } from './cells/code-toggle-format'
 import { ColoredBadgeFormat } from './cells/colored-badge-format'
 import { DurationFormat } from './cells/duration-format'
+import { HoverCardFormat, HoverCardOptions } from './cells/hover-card-format'
 import { LinkFormat } from './cells/link-format'
 import { RelatedTimeFormat } from './cells/related-time-format'
 
@@ -82,6 +80,15 @@ export const formatCell = <TData extends RowData, TValue>(
         />
       )
 
+    case ColumnFormat.HoverCard:
+      return (
+        <HoverCardFormat
+          row={row}
+          value={value}
+          options={columnFormatOptions as unknown as HoverCardOptions}
+        />
+      )
+
     default:
       return <span className="text-nowrap">{value as string}</span>
   }
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 00000000..a84c92e7
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
+
+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, HoverCardContent, HoverCardTrigger }
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index 84e95efd..98dde965 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -126,7 +126,7 @@ export {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  NavigationMenuViewport,
   navigationMenuTriggerClasses,
   navigationMenuTriggerStyle,
+  NavigationMenuViewport,
 }
diff --git a/lib/types/column-format.ts b/lib/types/column-format.ts
new file mode 100644
index 00000000..6cfa05d3
--- /dev/null
+++ b/lib/types/column-format.ts
@@ -0,0 +1,29 @@
+import { LinkProps } from 'next/link'
+
+import { type Action } from '@/components/data-table/cells/actions/types'
+import { type HoverCardOptions } from '@/components/data-table/cells/hover-card-format'
+
+export enum ColumnFormat {
+  BackgroundBar = 'background-bar',
+  ColoredBadge = 'colored-badge',
+  RelatedTime = 'related-time',
+  NumberShort = 'number-short',
+  CodeToggle = 'code-toggle',
+  HoverCard = 'hover-card',
+  Duration = 'duration',
+  Boolean = 'boolean',
+  Action = 'action',
+  Number = 'number',
+  Badge = 'badge',
+  Code = 'code',
+  Link = 'link',
+  None = 'none',
+}
+
+export type ColumnFormatWithArgs =
+  | [ColumnFormat.Action, Action[]]
+  | [ColumnFormat.Link, LinkProps]
+  | [ColumnFormat.HoverCard, HoverCardOptions]
+
+// Union of all possible format options
+export type ColumnFormatOptions = ColumnFormatWithArgs[1]
diff --git a/lib/types/query-config.ts b/lib/types/query-config.ts
index a09558aa..be48d5e4 100644
--- a/lib/types/query-config.ts
+++ b/lib/types/query-config.ts
@@ -1,8 +1,8 @@
 import type { ChartProps } from '@/components/charts/chart-props'
 import type {
   ColumnFormat,
-  ColumnFormatOptions,
-} from '@/components/data-table/column-defs'
+  ColumnFormatWithArgs,
+} from '@/lib/types/column-format'
 import type { PartialBy } from '@/lib/types/generic'
 import type { Icon } from '@/lib/types/icon'
 import type { ClickHouseSettings } from '@clickhouse/client'
@@ -28,7 +28,7 @@ export interface QueryConfig {
    * ```
    */
   columnFormats?: {
-    [key: string]: ColumnFormat | [ColumnFormat, ColumnFormatOptions]
+    [key: string]: ColumnFormat | ColumnFormatWithArgs
   }
   relatedCharts?:
     | string[]
diff --git a/package.json b/package.json
index cbdb8d00..21afc2b8 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
diff --git a/yarn.lock b/yarn.lock
index f6828b92..b7c07906 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1314,6 +1314,21 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-hover-card@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.1.1.tgz#2982a5a91c7ae5a98e0cacd845fbdfbfdcdab355"
+  integrity sha512-IwzAOP97hQpDADYVKrEEHUH/b2LA+9MgB0LgdmnbFO2u/3M5hmEofjjr2M6CyzUblaAqJdFm6B7oFtU72DPXrA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-icons@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"