datool 0.0.5 → 0.0.7

package/src/client/components/data-table.tsx

@@ -1,13 +1,18 @@
 /* eslint-disable react-hooks/incompatible-library, react-refresh/only-export-components */
 import {
+  getExpandedRowModel,
+  getGroupedRowModel,
   functionalUpdate,
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
   useReactTable,
+  type AggregationFnOption,
   type ColumnDef,
   type ColumnFiltersState,
+  type ExpandedState,
   type FilterFn,
+  type GroupingState,
   type OnChangeFn,
   type Row,
   type RowData,
@@ -19,6 +24,8 @@ import {
 import { useVirtualizer } from "@tanstack/react-virtual"
 import {
   Check,
+  ChevronDown,
+  ChevronRight,
   CircleAlert,
   EyeOff,
   LayoutGrid,
@@ -46,7 +53,10 @@ import {
   inferDataTableColumnKind,
   type DataTableColumnKind,
 } from "./data-table-col-icon"
-import type { DatoolEnumColorMap } from "../../shared/types"
+import type {
+  DatoolDateFormat,
+  DatoolEnumColorMap,
+} from "../../shared/types"
 import { Button } from "@/components/ui/button"
 import {
   ContextMenu,
@@ -142,10 +152,13 @@ export type DataTableRowAction<TData extends DataTableRow> = {
 export type DataTableColumnConfig<TData extends DataTableRow> = {
   accessorFn?: (row: TData) => unknown
   accessorKey?: Extract<keyof TData, string>
+  aggregatedCell?: ColumnDef<TData>["aggregatedCell"]
+  aggregationFn?: AggregationFnOption<TData>
   align?: DataTableAlign
   cell?: (args: { row: TData; value: unknown }) => React.ReactNode
   cellClassName?: string
   enableFiltering?: boolean
+  enableGrouping?: boolean
   enableHiding?: boolean
   enableResizing?: boolean
   enableSorting?: boolean
@@ -161,6 +174,7 @@ export type DataTableColumnConfig<TData extends DataTableRow> = {
   minWidth?: number
   truncate?: boolean
   width?: number
+  getGroupingValue?: (row: TData) => unknown
 }
 
 export type DataTableProps<TData extends DataTableRow> = {
@@ -170,10 +184,12 @@ export type DataTableProps<TData extends DataTableRow> = {
   columnVisibility?: VisibilityState
   columns?: DataTableColumnConfig<TData>[]
   data: TData[]
+  dateFormat?: DatoolDateFormat
   edgeHorizontalPadding?: React.CSSProperties["paddingLeft"]
   enableRowSelection?: boolean
   filterPlaceholder?: string
   globalFilter?: string
+  grouping?: GroupingState
   getRowId?: (row: TData, index: number) => string
   height?: React.CSSProperties["height"]
   highlightQuery?: string
@@ -181,6 +197,7 @@ export type DataTableProps<TData extends DataTableRow> = {
   onColumnFiltersChange?: (value: ColumnFiltersState) => void
   onColumnVisibilityChange?: (value: VisibilityState) => void
   onGlobalFilterChange?: (value: string) => void
+  onGroupingChange?: (value: GroupingState) => void
   resolveColumnHighlightTerms?: (columnId: string, query: string) => string[]
   rowActions?: DataTableRowAction<TData>[]
   rowClassName?: (row: TData) => string | undefined
@@ -227,6 +244,7 @@ type PersistedTableState = {
   highlightedColumns?: Record<string, boolean>
   columnVisibility?: VisibilityState
   globalFilter?: string
+  grouping?: GroupingState
   sorting?: SortingState
 }
 
@@ -402,6 +420,7 @@ function getPersistedUrlParam(id: string) {
 function isPersistedStateEmpty(state: PersistedTableState) {
   return (
     (state.sorting?.length ?? 0) === 0 &&
+    (state.grouping?.length ?? 0) === 0 &&
     (state.columnFilters?.length ?? 0) === 0 &&
     Object.keys(state.highlightedColumns ?? {}).length === 0 &&
     Object.keys(state.columnVisibility ?? {}).length === 0 &&
@@ -496,6 +515,111 @@ function inferWidth(kind: DataTableColumnKind) {
   }
 }
 
+type DateRangeAggregate = {
+  durationMs: number
+  endMs: number
+  startMs: number
+}
+
+function toTimestamp(value: unknown) {
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value.getTime()
+  }
+
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : null
+  }
+
+  if (typeof value === "string") {
+    const timestamp = Date.parse(value)
+
+    return Number.isNaN(timestamp) ? null : timestamp
+  }
+
+  return null
+}
+
+function buildDateRangeAggregate<TData extends DataTableRow>(
+  columnId: string,
+  leafRows: Row<TData>[]
+) {
+  let startMs = Number.POSITIVE_INFINITY
+  let endMs = Number.NEGATIVE_INFINITY
+
+  for (const row of leafRows) {
+    const timestamp = toTimestamp(row.getValue(columnId))
+
+    if (timestamp === null) {
+      continue
+    }
+
+    startMs = Math.min(startMs, timestamp)
+    endMs = Math.max(endMs, timestamp)
+  }
+
+  if (
+    startMs === Number.POSITIVE_INFINITY ||
+    endMs === Number.NEGATIVE_INFINITY
+  ) {
+    return null
+  }
+
+  return {
+    durationMs: Math.max(0, endMs - startMs),
+    endMs,
+    startMs,
+  } satisfies DateRangeAggregate
+}
+
+function isDateRangeAggregate(value: unknown): value is DateRangeAggregate {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "durationMs" in value &&
+    "endMs" in value &&
+    "startMs" in value
+  )
+}
+
+function formatSummaryNumber(value: number) {
+  return new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: Number.isInteger(value) ? 0 : 2,
+  }).format(value)
+}
+
+function formatDuration(durationMs: number) {
+  const totalSeconds = Math.max(0, Math.floor(durationMs / 1000))
+  const days = Math.floor(totalSeconds / 86_400)
+  const hours = Math.floor((totalSeconds % 86_400) / 3_600)
+  const minutes = Math.floor((totalSeconds % 3_600) / 60)
+  const seconds = totalSeconds % 60
+  const parts = [
+    days > 0 ? `${days}d` : null,
+    hours > 0 ? `${hours}h` : null,
+    minutes > 0 ? `${minutes}m` : null,
+    seconds > 0 || totalSeconds === 0 ? `${seconds}s` : null,
+  ].filter(Boolean)
+
+  return parts.join(" ")
+}
+
+function resolveGroupedPadding(
+  padding: React.CSSProperties["paddingLeft"],
+  depth: number
+) {
+  const indent = depth * 16
+
+  if (typeof padding === "number") {
+    return padding + indent
+  }
+
+  if (typeof padding === "string") {
+    return `calc(${padding} + ${indent}px)`
+  }
+
+  return indent
+}
+
 function resolveColumnId<TData extends DataTableRow>(
   column: DataTableColumnConfig<TData>,
   index: number
@@ -512,6 +636,7 @@ function resolveColumnId<TData extends DataTableRow>(
 function buildColumns<TData extends DataTableRow>(
   data: TData[],
   columns?: DataTableColumnConfig<TData>[],
+  dateFormat?: DatoolDateFormat,
   showRowSelectionColumn?: boolean,
   showRowActionButtonsColumn?: boolean,
   rowActionsColumnSize?: number
@@ -553,18 +678,29 @@ function buildColumns<TData extends DataTableRow>(
     return {
       accessorFn: column.accessorFn,
       accessorKey: column.accessorKey,
+      aggregatedCell: column.aggregatedCell,
+      aggregationFn:
+        column.aggregationFn ??
+        (kind === "date"
+          ? buildDateRangeAggregate
+          : kind === "number"
+            ? "sum"
+            : undefined),
       cell: ({ getValue, row }) =>
         column.cell
           ? column.cell({ row: row.original, value: getValue() })
           : fallbackCellValue(getValue(), kind, {
+              dateFormat,
               enumColors: kind === "enum" ? column.enumColors : undefined,
               enumOptions: kind === "enum" ? column.enumOptions : undefined,
             }),
       enableGlobalFilter: column.enableFiltering ?? true,
+      enableGrouping: column.enableGrouping ?? true,
       filterFn: column.filterFn,
       enableHiding: column.enableHiding ?? true,
       enableResizing: column.enableResizing ?? true,
       enableSorting: column.enableSorting ?? true,
+      getGroupingValue: column.getGroupingValue,
       header: column.header ?? formatHeaderLabel(id),
       id,
       maxSize: column.maxWidth ?? 420,
@@ -583,6 +719,7 @@ function buildColumns<TData extends DataTableRow>(
       ...builtColumns,
       {
         cell: () => null,
+        enableGrouping: false,
         enableGlobalFilter: false,
         enableHiding: false,
         enableResizing: false,
@@ -604,13 +741,16 @@ function buildColumns<TData extends DataTableRow>(
     {
       cell: ({ row }) => (
         <div className="flex items-center justify-center">
-          <DataTableCheckbox
-            ariaLabel={`Select row ${row.index + 1}`}
-            checked={row.getIsSelected()}
-            onCheckedChange={(checked) => row.toggleSelected(checked)}
-          />
+          {row.getCanSelect() ? (
+            <DataTableCheckbox
+              ariaLabel={`Select row ${row.index + 1}`}
+              checked={row.getIsSelected()}
+              onCheckedChange={(checked) => row.toggleSelected(checked)}
+            />
+          ) : null}
         </div>
       ),
+      enableGrouping: false,
       enableGlobalFilter: false,
       enableHiding: false,
       enableResizing: false,
@@ -649,6 +789,7 @@ function buildColumns<TData extends DataTableRow>(
     ...withSelectionColumn,
     {
       cell: () => null,
+      enableGrouping: false,
       enableGlobalFilter: false,
       enableHiding: false,
       enableResizing: false,
@@ -704,6 +845,31 @@ function shouldIgnoreRowSelectionTarget(target: EventTarget | null) {
   )
 }
 
+function shouldIgnoreSelectionShortcutTarget(target: EventTarget | null) {
+  return (
+    target instanceof Element &&
+    Boolean(
+      target.closest(
+        [
+          "a",
+          "button",
+          "input",
+          "select",
+          "textarea",
+          "[contenteditable=true]",
+          '[role="button"]',
+          '[role="combobox"]',
+          '[role="dialog"]',
+          '[role="menu"]',
+          '[role="menuitem"]',
+          '[role="searchbox"]',
+          '[role="textbox"]',
+        ].join(",")
+      )
+    )
+  )
+}
+
 function resolveRowActionRows<TData extends DataTableRow>(
   action: DataTableRowAction<TData>,
   row: Row<TData>,
@@ -1126,10 +1292,12 @@ function DataTableView<TData extends DataTableRow>({
   columnVisibility: controlledColumnVisibility,
   columns,
   data,
+  dateFormat,
   edgeHorizontalPadding = "16px",
   enableRowSelection = false,
   filterPlaceholder = "Search across visible columns",
   globalFilter,
+  grouping: controlledGrouping,
   getRowId,
   height = 620,
   highlightQuery = "",
@@ -1137,6 +1305,7 @@ function DataTableView<TData extends DataTableRow>({
   onColumnFiltersChange,
   onColumnVisibilityChange,
   onGlobalFilterChange,
+  onGroupingChange,
   resolveColumnHighlightTerms,
   rowActions,
   rowClassName,
@@ -1163,6 +1332,12 @@ function DataTableView<TData extends DataTableRow>({
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     () => persistedState.columnFilters ?? []
   )
+  const [grouping, setGrouping] = React.useState<GroupingState>(
+    () => persistedState.grouping ?? []
+  )
+  const [expanded, setExpanded] = React.useState<ExpandedState>(() =>
+    (controlledGrouping ?? persistedState.grouping ?? []).length > 0 ? true : {}
+  )
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
   const [rowActionStatuses, setRowActionStatuses] = React.useState<
     Record<string, RowActionStatus>
@@ -1185,9 +1360,15 @@ function DataTableView<TData extends DataTableRow>({
   const isColumnFiltersControlled = controlledColumnFilters !== undefined
   const isColumnVisibilityControlled = controlledColumnVisibility !== undefined
   const isGlobalFilterControlled = globalFilter !== undefined
+  const isGroupingControlled = controlledGrouping !== undefined
   const resolvedColumnFilters = controlledColumnFilters ?? columnFilters
   const resolvedColumnVisibility =
     controlledColumnVisibility ?? columnVisibility
+  const resolvedGrouping = controlledGrouping ?? grouping
+  const groupingKey = React.useMemo(
+    () => resolvedGrouping.join("\u001f"),
+    [resolvedGrouping]
+  )
   const hasSelectionActions = rowActions
     ? hasSelectionScopedAction(rowActions)
     : false
@@ -1234,6 +1415,7 @@ function DataTableView<TData extends DataTableRow>({
       buildColumns(
         data,
         columnsWithEnumOptions,
+        dateFormat,
         showRowSelectionColumn,
         showRowActionButtonsColumn,
         rowActionsColumnSize
@@ -1241,6 +1423,7 @@ function DataTableView<TData extends DataTableRow>({
     [
       columnsWithEnumOptions,
       data,
+      dateFormat,
       rowActionsColumnSize,
       showRowActionButtonsColumn,
       showRowSelectionColumn,
@@ -1314,28 +1497,50 @@ function DataTableView<TData extends DataTableRow>({
       resolvedColumnVisibility,
     ]
   )
+  const handleGroupingChange = React.useCallback<OnChangeFn<GroupingState>>(
+    (updater) => {
+      const nextValue = functionalUpdate(updater, resolvedGrouping)
+
+      if (!isGroupingControlled) {
+        setGrouping(nextValue)
+      }
+
+      onGroupingChange?.(nextValue)
+    },
+    [isGroupingControlled, onGroupingChange, resolvedGrouping]
+  )
 
   const table = useReactTable({
+    autoResetExpanded: false,
     columnResizeMode: "onChange",
     columns: tableColumns,
     data,
     enableColumnResizing: true,
-    enableRowSelection: canSelectRows,
+    enableGrouping: true,
+    enableRowSelection: canSelectRows ? (row) => !row.getIsGrouped() : false,
+    enableSubRowSelection: false,
     getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getGroupedRowModel: getGroupedRowModel(),
     getRowId,
     getSortedRowModel: getSortedRowModel(),
+    groupedColumnMode: false,
     globalFilterFn: globalFilterFn as FilterFn<TData>,
     onColumnFiltersChange: handleColumnFiltersChange,
     onColumnSizingChange: handleColumnSizingChange,
     onColumnVisibilityChange: handleColumnVisibilityChange,
+    onExpandedChange: setExpanded,
+    onGroupingChange: handleGroupingChange,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     state: {
       columnFilters: resolvedColumnFilters,
       columnSizing,
       columnVisibility: resolvedColumnVisibility,
+      expanded,
       globalFilter: deferredSearch.trim(),
+      grouping: resolvedGrouping,
       rowSelection,
       sorting,
     },
@@ -1346,6 +1551,10 @@ function DataTableView<TData extends DataTableRow>({
   const hasAutoScrolledOnMountRef = React.useRef(false)
   const previousDataLengthRef = React.useRef(0)
   const rows = table.getRowModel().rows
+  const selectableRows = React.useMemo(
+    () => rows.filter((row) => row.getCanSelect()),
+    [rows]
+  )
   const selectedTableRows = table.getSelectedRowModel().rows
   const resolvedHeight = typeof height === "number" ? height : 0
   const initialOffsetRef = React.useRef(
@@ -1387,6 +1596,15 @@ function DataTableView<TData extends DataTableRow>({
     }
     setHighlightedColumns(nextState.highlightedColumns ?? {})
     setColumnFilters(nextState.columnFilters ?? [])
+    if (!isGroupingControlled) {
+      setGrouping(nextState.grouping ?? [])
+    }
+    setExpanded(
+      (isGroupingControlled ? controlledGrouping : nextState.grouping ?? [])
+        .length > 0
+        ? true
+        : {}
+    )
     setSearchDraft(nextState.globalFilter ?? "")
     setRowSelection({})
     dragSelectionRef.current = null
@@ -1398,7 +1616,14 @@ function DataTableView<TData extends DataTableRow>({
     }
     rowActionStatusTimersRef.current = {}
     setRowActionStatuses({})
-  }, [id, isColumnFiltersControlled, isColumnVisibilityControlled, statePersistence])
+  }, [
+    controlledGrouping,
+    id,
+    isColumnFiltersControlled,
+    isColumnVisibilityControlled,
+    isGroupingControlled,
+    statePersistence,
+  ])
 
   React.useEffect(() => {
     if (!isColumnFiltersControlled) {
@@ -1416,6 +1641,14 @@ function DataTableView<TData extends DataTableRow>({
     setColumnVisibility(controlledColumnVisibility)
   }, [controlledColumnVisibility, isColumnVisibilityControlled])
 
+  React.useEffect(() => {
+    if (!isGroupingControlled) {
+      return
+    }
+
+    setGrouping(controlledGrouping)
+  }, [controlledGrouping, isGroupingControlled])
+
   React.useEffect(() => {
     if (!isGlobalFilterControlled) {
       return
@@ -1439,6 +1672,15 @@ function DataTableView<TData extends DataTableRow>({
       }
       setHighlightedColumns(nextState.highlightedColumns ?? {})
       setColumnFilters(nextState.columnFilters ?? [])
+      if (!isGroupingControlled) {
+        setGrouping(nextState.grouping ?? [])
+      }
+      setExpanded(
+        (isGroupingControlled ? controlledGrouping : nextState.grouping ?? [])
+          .length > 0
+          ? true
+          : {}
+      )
       setSearchDraft(nextState.globalFilter ?? "")
       setRowSelection({})
       dragSelectionRef.current = null
@@ -1450,7 +1692,13 @@ function DataTableView<TData extends DataTableRow>({
     window.addEventListener("popstate", syncFromUrl)
 
     return () => window.removeEventListener("popstate", syncFromUrl)
-  }, [id, isColumnVisibilityControlled, statePersistence])
+  }, [
+    controlledGrouping,
+    id,
+    isColumnVisibilityControlled,
+    isGroupingControlled,
+    statePersistence,
+  ])
 
   React.useEffect(() => {
     if (isGlobalFilterControlled || isColumnFiltersControlled) {
@@ -1463,6 +1711,7 @@ function DataTableView<TData extends DataTableRow>({
       highlightedColumns,
       columnVisibility: resolvedColumnVisibility,
       globalFilter: deferredSearch.trim(),
+      grouping: resolvedGrouping,
       sorting,
     })
   }, [
@@ -1473,11 +1722,17 @@ function DataTableView<TData extends DataTableRow>({
     id,
     isColumnFiltersControlled,
     isGlobalFilterControlled,
+    isGroupingControlled,
     resolvedColumnVisibility,
+    resolvedGrouping,
     sorting,
     statePersistence,
   ])
 
+  React.useEffect(() => {
+    setExpanded(resolvedGrouping.length > 0 ? true : {})
+  }, [groupingKey, resolvedGrouping.length])
+
   React.useEffect(() => {
     const container = containerRef.current
 
@@ -1579,6 +1834,13 @@ function DataTableView<TData extends DataTableRow>({
 
     onGlobalFilterChange?.(value)
   }
+  const clearRowSelection = React.useCallback(() => {
+    setRowSelection({})
+    dragSelectionRef.current = null
+    dragPointerRef.current = null
+    setIsDragSelecting(false)
+    selectionAnchorIdRef.current = null
+  }, [])
 
   const isColumnHighlightEnabled = React.useCallback(
     (columnId: string, meta: DataTableColumnMeta) =>
@@ -1591,10 +1853,10 @@ function DataTableView<TData extends DataTableRow>({
       rowId: string,
       baseSelection: RowSelectionState = {}
     ) => {
-      const anchorIndex = rows.findIndex(
+      const anchorIndex = selectableRows.findIndex(
         (candidateRow) => candidateRow.id === anchorId
       )
-      const rowIndex = rows.findIndex(
+      const rowIndex = selectableRows.findIndex(
         (candidateRow) => candidateRow.id === rowId
       )
 
@@ -1610,13 +1872,13 @@ function DataTableView<TData extends DataTableRow>({
       setRowSelection({
         ...baseSelection,
         ...Object.fromEntries(
-          rows
+          selectableRows
             .slice(start, end + 1)
             .map((candidateRow) => [candidateRow.id, true])
         ),
       })
     },
-    [rows]
+    [selectableRows]
   )
   const selectSingleRow = React.useCallback((rowId: string) => {
     selectionAnchorIdRef.current = rowId
@@ -1663,6 +1925,7 @@ function DataTableView<TData extends DataTableRow>({
       if (
         event.button !== 0 ||
         !canSelectRows ||
+        !row.getCanSelect() ||
         shouldIgnoreRowSelectionTarget(event.target)
       ) {
         return
@@ -1724,6 +1987,7 @@ function DataTableView<TData extends DataTableRow>({
     (event: React.MouseEvent<HTMLTableRowElement>, row: Row<TData>) => {
       if (
         !canSelectRows ||
+        !row.getCanSelect() ||
         event.buttons !== 1 ||
         shouldIgnoreRowSelectionTarget(event.target) ||
         !dragSelectionRef.current
@@ -1739,7 +2003,7 @@ function DataTableView<TData extends DataTableRow>({
   )
   const handleRowContextMenu = React.useCallback(
     (row: Row<TData>) => {
-      if (!canSelectRows) {
+      if (!canSelectRows || !row.getCanSelect()) {
         return
       }
 
@@ -1819,6 +2083,27 @@ function DataTableView<TData extends DataTableRow>({
       window.cancelAnimationFrame(frameId)
     }
   }, [isDragSelecting, updateDragSelectionFromPointer])
+  React.useEffect(() => {
+    if (!canSelectRows) {
+      return
+    }
+
+    const handleWindowKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key !== "Escape" ||
+        Object.keys(rowSelection).length === 0 ||
+        shouldIgnoreSelectionShortcutTarget(event.target)
+      ) {
+        return
+      }
+
+      clearRowSelection()
+    }
+
+    window.addEventListener("keydown", handleWindowKeyDown)
+
+    return () => window.removeEventListener("keydown", handleWindowKeyDown)
+  }, [canSelectRows, clearRowSelection, rowSelection])
 
   return (
     <section
@@ -1896,66 +2181,160 @@ function DataTableView<TData extends DataTableRow>({
             ) : (
               virtualRows.map((virtualRow) => {
                 const row = rows[virtualRow.index]
-                const visibleRowActions = resolveVisibleRowActions(
-                  rowActions ?? [],
-                  row,
-                  selectedTableRows
-                )
+                const isGroupRow = row.getIsGrouped()
+                const visibleRowActions = isGroupRow
+                  ? []
+                  : resolveVisibleRowActions(
+                      rowActions ?? [],
+                      row,
+                      selectedTableRows
+                    )
                 const isSelected = row.getIsSelected()
+                const groupVisibleCells = row.getVisibleCells()
+                const groupingColumn = row.groupingColumnId
+                  ? table.getColumn(row.groupingColumnId)
+                  : undefined
+                const groupingMeta = groupingColumn?.columnDef.meta as
+                  | DataTableColumnMeta
+                  | undefined
+                const groupingValue = groupingColumn
+                  ? fallbackCellValue(row.groupingValue, groupingMeta?.kind, {
+                      dateFormat,
+                      enumColors: groupingMeta?.enumColors,
+                      enumOptions: groupingMeta?.enumOptions,
+                    })
+                  : null
+                const hasVisibleGroupedCell = groupVisibleCells.some((cell) =>
+                  cell.getIsGrouped()
+                )
+                const primaryGroupCellId = groupVisibleCells.find(
+                  (cell) =>
+                    cell.column.id !== "__select" && cell.column.id !== "__actions"
+                )?.id
                 const rowContent = (
                   <tr
                     aria-selected={isSelected}
                     className={cn(
-                      "absolute left-0 flex w-full bg-card transition-colors",
-                      canSelectRows && "cursor-pointer",
-                      rowClassName?.(row.original),
-                      isSelected &&
+                      "absolute left-0 flex w-full transition-colors",
+                      isGroupRow
+                        ? "bg-transparent"
+                        : "bg-card",
+                      canSelectRows &&
+                        row.getCanSelect() &&
+                        "cursor-pointer",
+                      !isGroupRow && rowClassName?.(row.original),
+                      !isGroupRow &&
+                        isSelected &&
                         "bg-primary/10 before:absolute before:-top-px before:left-0 before:h-px before:w-full before:bg-primary before:content-[''] after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-primary after:content-['']"
                     )}
                     data-index={virtualRow.index}
                     data-row-id={row.id}
-                    data-state={isSelected ? "selected" : undefined}
+                    data-state={!isGroupRow && isSelected ? "selected" : undefined}
                     key={row.id}
-                    onContextMenu={() => handleRowContextMenu(row)}
-                    onMouseDown={(event) => handleRowMouseDown(event, row)}
-                    onMouseEnter={(event) => handleRowMouseEnter(event, row)}
+                    onContextMenu={
+                      isGroupRow ? undefined : () => handleRowContextMenu(row)
+                    }
+                    onMouseDown={
+                      isGroupRow
+                        ? undefined
+                        : (event) => handleRowMouseDown(event, row)
+                    }
+                    onMouseEnter={
+                      isGroupRow
+                        ? undefined
+                        : (event) => handleRowMouseEnter(event, row)
+                    }
                     ref={(node) => {
                       if (node) {
                         rowVirtualizer.measureElement(node)
                       }
                     }}
                     style={{
-                      ...rowStyle?.(row.original),
-                      minHeight: rowHeight,
+                      ...(!isGroupRow ? rowStyle?.(row.original) : undefined),
+                      minHeight: isGroupRow ? Math.max(rowHeight, 44) : rowHeight,
                       transform: `translateY(${virtualRow.start}px)`,
                       width: table.getTotalSize(),
                     }}
                   >
-                    {row.getVisibleCells().map((cell, index, visibleCells) => {
-                      const meta = (cell.column.columnDef.meta ??
-                        {}) as DataTableColumnMeta
-                      const isActionsCell = cell.column.id === "__actions"
-                      const highlightTerms =
-                        meta.kind === "text" &&
-                        resolveColumnHighlightTerms &&
-                        isColumnHighlightEnabled(cell.column.id, meta)
-                          ? resolveColumnHighlightTerms(
-                              cell.column.id,
-                              highlightQuery
+                    {isGroupRow ? (
+                      groupVisibleCells.map((cell, index, visibleCells) => {
+                        const meta = (cell.column.columnDef.meta ??
+                          {}) as DataTableColumnMeta
+                        const isActionsCell = cell.column.id === "__actions"
+                        const isSelectionCell = meta.kind === "selection"
+                        const shouldRenderGroupLabel =
+                          cell.getIsGrouped() ||
+                          (!hasVisibleGroupedCell && cell.id === primaryGroupCellId)
+                        const value = cell.getValue()
+                        let content: React.ReactNode = null
+
+                        if (!isActionsCell && !isSelectionCell) {
+                          if (shouldRenderGroupLabel) {
+                            content = (
+                              <div className="flex min-w-0 items-center gap-0.5">
+                                {row.getCanExpand() ? (
+                                  <button
+                                    aria-label={
+                                      row.getIsExpanded()
+                                        ? "Collapse group"
+                                        : "Expand group"
+                                    }
+                                    className="-ml-4"
+                                    onClick={() => row.toggleExpanded()}
+                                    type="button"
+                                  >
+                                    {row.getIsExpanded() ? (
+                                      <ChevronDown className="size-3.5" />
+                                    ) : (
+                                      <ChevronRight className="size-3.5" />
+                                    )}
+                                  </button>
+                                ) : null}
+                                <div className="min-w-0 truncate font-medium text-foreground">
+                                  {groupingColumn ? groupingValue : "Group"}
+                                </div>
+                              </div>
                             )
-                          : []
+                          } else if (meta.kind === "date" && isDateRangeAggregate(value)) {
+                            content = (
+                              <div className="min-w-0 truncate">
+                                <span className="font-medium text-foreground">
+                                  {formatDuration(value.durationMs)}
+                                </span>
+                                <span className="ml-2 text-[11px] text-muted-foreground">
+                                  span
+                                </span>
+                              </div>
+                            )
+                          } else if (meta.kind === "number" && typeof value === "number") {
+                            content = (
+                              <div className="min-w-0 truncate font-medium text-foreground">
+                                {formatSummaryNumber(value)}
+                              </div>
+                            )
+                          }
+                        }
 
-                      if (isActionsCell) {
                         return (
                           <td
                             className={cn(
-                              "flex shrink-0 border-b border-border px-2 py-1.5 align-middle text-sm text-foreground justify-end text-right",
-                              meta.cellClassName
+                              "flex shrink-0 items-center border-y border-border/70 px-2 py-2 align-middle text-xs text-muted-foreground",
+                              meta.align === "center" && "justify-center text-center",
+                              meta.align === "right" && "justify-end text-right",
+                              meta.sticky === "left" &&
+                                "sticky left-0 z-10 border-r border-r-border"
                             )}
                             key={cell.id}
                             style={{
+                              background:
+                                "var(--color-table-gap, color-mix(in oklab, var(--color-muted) 84%, transparent))",
                               paddingLeft:
-                                index === 0 ? edgeHorizontalPadding : undefined,
+                                index === 0
+                                  ? resolveGroupedPadding(
+                                      edgeHorizontalPadding,
+                                      row.depth
+                                    )
+                                  : undefined,
                               paddingRight:
                                 index === visibleCells.length - 1
                                   ? edgeHorizontalPadding
@@ -1963,33 +2342,72 @@ function DataTableView<TData extends DataTableRow>({
                               width: cell.column.getSize(),
                             }}
                           >
-                            <div className="w-full min-w-0">
-                              <RowActionButtonGroup
-                                resolvedActions={visibleRowActions}
-                                setStatus={setRowActionStatus}
-                                statuses={rowActionStatuses}
-                              />
-                            </div>
+                            <div className="w-full min-w-0">{content}</div>
                           </td>
                         )
-                      }
+                      })
+                    ) : (
+                      row.getVisibleCells().map((cell, index, visibleCells) => {
+                        const meta = (cell.column.columnDef.meta ??
+                          {}) as DataTableColumnMeta
+                        const isActionsCell = cell.column.id === "__actions"
+                        const highlightTerms =
+                          meta.kind === "text" &&
+                          resolveColumnHighlightTerms &&
+                          isColumnHighlightEnabled(cell.column.id, meta)
+                            ? resolveColumnHighlightTerms(
+                                cell.column.id,
+                                highlightQuery
+                              )
+                            : []
+
+                        if (isActionsCell) {
+                          return (
+                            <td
+                              className={cn(
+                                "flex shrink-0 border-b border-border px-2 py-1.5 align-middle text-sm text-foreground justify-end text-right",
+                                meta.cellClassName
+                              )}
+                              key={cell.id}
+                              style={{
+                                paddingLeft:
+                                  index === 0 ? edgeHorizontalPadding : undefined,
+                                paddingRight:
+                                  index === visibleCells.length - 1
+                                    ? edgeHorizontalPadding
+                                    : undefined,
+                                width: cell.column.getSize(),
+                              }}
+                            >
+                              <div className="w-full min-w-0">
+                                <RowActionButtonGroup
+                                  resolvedActions={visibleRowActions}
+                                  setStatus={setRowActionStatus}
+                                  statuses={rowActionStatuses}
+                                />
+                              </div>
+                            </td>
+                          )
+                        }
 
-                      return (
-                        <DataTableBodyCell
-                          cell={cell}
-                          highlightTerms={highlightTerms}
-                          key={cell.id}
-                          paddingLeft={
-                            index === 0 ? edgeHorizontalPadding : undefined
-                          }
-                          paddingRight={
-                            index === visibleCells.length - 1
-                              ? edgeHorizontalPadding
-                              : undefined
-                          }
-                        />
-                      )
-                    })}
+                        return (
+                          <DataTableBodyCell
+                            cell={cell}
+                            dateFormat={dateFormat}
+                            highlightTerms={highlightTerms}
+                            key={cell.id}
+                            paddingLeft={
+                              index === 0 ? edgeHorizontalPadding : undefined
+                            }
+                            paddingRight={
+                              index === visibleCells.length - 1
+                                ? edgeHorizontalPadding
+                                : undefined
+                            }
+                          />
+                        )
+                      })
+                    )}
                   </tr>
                 )