@flanksource/clicky-ui 0.3.22 → 0.3.24

package/dist/data/DataTable.js

@@ -22,7 +22,8 @@ import { CellFilterActions } from "./cells/CellFilterActions.js";
 import { tagActionsFromRecord, tagFilterTokens, normalizeTags, splitTagToken } from "./cells/tag-utils.js";
 import { StatusDot } from "./cells/StatusDot.js";
 import { normalizeStatus } from "./cells/status-mapping.js";
-import { groupRecords, isGroupCollapsedByDefault } from "./DataTable.grouping.js";
+import { dataTableGroupLabel, dataTableGroupKey, groupRecords, isGroupCollapsedByDefault } from "./DataTable.grouping.js";
+import { DataTableGroupingControls } from "./DataTableGroupingControls.js";
 import { UiEllipsis } from "../icons/components/UiEllipsis.js";
 import { UiFilterFilled, UiFilter } from "../icons/components/UiFilter.js";
 import { UiChevronRight } from "../icons/components/UiChevronRight.js";
@@ -65,6 +66,44 @@ const TIMESTAMP_RANGE_PRESETS = [
   { label: "Last 7 days", from: "now-7d", to: "now" },
   { label: "Last 30 days", from: "now-30d", to: "now" }
 ];
+function assertDataTableGroupingProps({
+  grouping,
+  groupingModes,
+  groupingMode,
+  defaultGroupingMode,
+  onGroupingModeChange
+}) {
+  if (grouping && groupingModes) {
+    throw new Error("DataTable accepts grouping or groupingModes, not both");
+  }
+  if (!groupingModes) {
+    if (groupingMode !== void 0 || defaultGroupingMode !== void 0) {
+      throw new Error("DataTable groupingMode values require groupingModes");
+    }
+    return;
+  }
+  if (groupingModes.length === 0) {
+    throw new Error("DataTable groupingModes must not be empty");
+  }
+  const values = new Set(groupingModes.map((mode) => mode.value));
+  if (values.size !== groupingModes.length) {
+    throw new Error("DataTable groupingModes values must be unique");
+  }
+  if (groupingMode !== void 0 && !onGroupingModeChange) {
+    throw new Error(
+      "DataTable controlled groupingMode requires onGroupingModeChange"
+    );
+  }
+  if (groupingMode !== void 0 && defaultGroupingMode !== void 0) {
+    throw new Error(
+      "DataTable cannot combine groupingMode with defaultGroupingMode"
+    );
+  }
+  const selected = groupingMode ?? defaultGroupingMode;
+  if (selected !== void 0 && !values.has(selected)) {
+    throw new Error(`DataTable grouping mode "${selected}" does not exist`);
+  }
+}
 function DataTableInner({
   data,
   error,
@@ -101,6 +140,10 @@ function DataTableInner({
   getRowClassName,
   footer,
   grouping,
+  groupingModes,
+  groupingMode,
+  defaultGroupingMode,
+  onGroupingModeChange,
   onRowClick,
   isRowClickable,
   getRowHref,
@@ -126,6 +169,14 @@ function DataTableInner({
   showHeaderFilters = true,
   menuActions
 }) {
+  var _a;
+  assertDataTableGroupingProps({
+    grouping,
+    groupingModes,
+    groupingMode,
+    defaultGroupingMode,
+    onGroupingModeChange
+  });
   const columns = useMemo(
     () => columnsInput.map(
       (column) => typeof column === "string" ? { key: column, label: column } : column
@@ -159,17 +210,18 @@ function DataTableInner({
   const [numberFilters, setNumberFilters] = useState({});
   const [expandedRows, setExpandedRows] = useState({});
   const [detailRow, setDetailRow] = useState(null);
+  const [localGroupingMode, setLocalGroupingMode] = useState(defaultGroupingMode);
   const [localGlobalFilter, setLocalGlobalFilter] = useState("");
   const [timeRangeFilter, setTimeRangeFilter] = useState(() => {
-    var _a, _b, _c, _d;
+    var _a2, _b, _c, _d;
     const seed = columns.find(
       (column) => {
-        var _a2;
-        return column.kind === "timestamp" && ((_a2 = column.timestamp) == null ? void 0 : _a2.defaultRange);
+        var _a3;
+        return column.kind === "timestamp" && ((_a3 = column.timestamp) == null ? void 0 : _a3.defaultRange);
       }
     );
     return {
-      from: ((_b = (_a = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _a.defaultRange) == null ? void 0 : _b.from) ?? "",
+      from: ((_b = (_a2 = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _a2.defaultRange) == null ? void 0 : _b.from) ?? "",
       to: ((_d = (_c = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _c.defaultRange) == null ? void 0 : _d.to) ?? ""
     };
   });
@@ -247,7 +299,7 @@ function DataTableInner({
     [data, getRowId]
   );
   const timestampFormats = useMemo(() => {
-    var _a;
+    var _a2;
     const out = {};
     for (const column of columns) {
       if (column.kind !== "timestamp") continue;
@@ -259,7 +311,7 @@ function DataTableInner({
       }
       const dataFormat = chooseTimestampFormat(dates);
       out[column.key] = modeToFormat(
-        ((_a = column.timestamp) == null ? void 0 : _a.mode) ?? "auto",
+        ((_a2 = column.timestamp) == null ? void 0 : _a2.mode) ?? "auto",
         dataFormat
       );
     }
@@ -271,6 +323,35 @@ function DataTableInner({
     ),
     [columns, timestampFormats]
   );
+  const activeGroupingModeValue = groupingMode ?? localGroupingMode ?? defaultGroupingMode ?? ((_a = groupingModes == null ? void 0 : groupingModes[0]) == null ? void 0 : _a.value);
+  const activeGroupingMode = groupingModes == null ? void 0 : groupingModes.find(
+    (mode) => mode.value === activeGroupingModeValue
+  );
+  const effectiveGrouping = useMemo(() => {
+    if (!activeGroupingMode) return grouping;
+    if (activeGroupingMode.type === "none") return void 0;
+    if (activeGroupingMode.type === "custom") return activeGroupingMode;
+    const column = effectiveColumns.find(
+      (candidate) => candidate.key === activeGroupingMode.columnKey
+    );
+    if (!column) {
+      throw new Error(
+        `DataTable grouping mode "${activeGroupingMode.value}" references missing column "${activeGroupingMode.columnKey}"`
+      );
+    }
+    return {
+      ...activeGroupingMode,
+      getGroupKey: (row) => dataTableGroupKey(resolveColumnValue(row, column)),
+      // `emptyGroupLabel` is a header label, never a key — resolving it here
+      // keeps rows with no value apart from rows whose value happens to read
+      // like the label.
+      getGroupLabel: (key, rows2) => {
+        var _a2;
+        const custom = (_a2 = activeGroupingMode.getGroupLabel) == null ? void 0 : _a2.call(activeGroupingMode, key, rows2);
+        return custom !== void 0 ? custom : dataTableGroupLabel(key, activeGroupingMode.emptyGroupLabel);
+      }
+    };
+  }, [activeGroupingMode, effectiveColumns, grouping]);
   const visibleColumns = useMemo(() => {
     if (!hideableColumns) return effectiveColumns;
     const next = effectiveColumns.filter(
@@ -294,8 +375,8 @@ function DataTableInner({
   const rangeCapableColumn = useMemo(
     () => effectiveColumns.find(
       (column) => {
-        var _a;
-        return column.kind === "timestamp" && column.filterable !== false && ((_a = column.timestamp) == null ? void 0 : _a.autoRangeFilter) !== false;
+        var _a2;
+        return column.kind === "timestamp" && column.filterable !== false && ((_a2 = column.timestamp) == null ? void 0 : _a2.autoRangeFilter) !== false;
       }
     ) ?? null,
     [effectiveColumns]
@@ -323,7 +404,7 @@ function DataTableInner({
   const generatedFilters = useMemo(() => {
     if (!autoFilter || loading) return [];
     return filterableColumns.map((column) => {
-      var _a;
+      var _a2;
       const numberBounds = getNumericFilterBounds(rows, column);
       if (numberBounds) {
         return {
@@ -345,7 +426,7 @@ function DataTableInner({
       const multiCap = column.kind === "tags" ? 50 : 20;
       const fitsMulti = options.length >= 2 && options.length <= multiCap;
       if (column.kind === "tags" && fitsMulti) {
-        const separator = ((_a = column.tags) == null ? void 0 : _a.separator) ?? "=";
+        const separator = ((_a2 = column.tags) == null ? void 0 : _a2.separator) ?? "=";
         const groups2 = groupTagOptions(options, separator);
         if (groups2.length >= 2) {
           return {
@@ -391,7 +472,7 @@ function DataTableInner({
   }) : setLocalGlobalFilter;
   const nativeFilters = useMemo(
     () => generatedFilters.map((filter) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       const columnKey = filter.column.key;
       if (filter.kind === "multi") {
         return {
@@ -427,7 +508,7 @@ function DataTableInner({
             (current) => updateNumberFilterValue(current, columnKey, next)
           )
         };
-        if (((_a = filter.numberBounds) == null ? void 0 : _a.min) !== void 0) {
+        if (((_a2 = filter.numberBounds) == null ? void 0 : _a2.min) !== void 0) {
           numberFilter.domainMin = filter.numberBounds.min;
         }
         if (((_b = filter.numberBounds) == null ? void 0 : _b.max) !== void 0) {
@@ -476,13 +557,13 @@ function DataTableInner({
     (filterBarProps == null ? void 0 : filterBarProps.leading) || (filterBarProps == null ? void 0 : filterBarProps.children) || (filterBarProps == null ? void 0 : filterBarProps.trailing) || (filterBarProps == null ? void 0 : filterBarProps.timeRange) || (filterBarProps == null ? void 0 : filterBarProps.dateRange)
   );
   const autoTimeRange = useMemo(() => {
-    var _a, _b, _c, _d;
+    var _a2, _b, _c, _d;
     if (!timeRangeColumn) return null;
     const next = {
       from: timeRangeFilter.from,
       to: timeRangeFilter.to,
       onApply: (from, to) => setTimeRangeFilter({ from, to }),
-      presets: ((_a = timeRangeColumn.timestamp) == null ? void 0 : _a.rangePresets) ?? TIMESTAMP_RANGE_PRESETS,
+      presets: ((_a2 = timeRangeColumn.timestamp) == null ? void 0 : _a2.rangePresets) ?? TIMESTAMP_RANGE_PRESETS,
       fromPlaceholder: "now-24h",
       toPlaceholder: "now",
       emptyLabel: "Any time"
@@ -525,20 +606,11 @@ function DataTableInner({
     globalFilterControlled: globalFilter !== void 0 || onGlobalFilterChange !== void 0,
     hasExternalSearch: externalSearch !== void 0
   });
-  const showFilterBar = resolvedShowGlobalFilter || nativeFilters.length > 0 || !!barTimeRange || !!externalSearch || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
+  const showFilterBar = resolvedShowGlobalFilter || nativeFilters.length > 0 || !!barTimeRange || !!externalSearch || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || !!groupingModes || showTablePreferencesControl;
   const setDensityOverride = (next) => {
     if (!densityControlled) setLocalDensityOverride(next);
     onDensityChange == null ? void 0 : onDensityChange(next);
   };
-  const filterBarTrailing = showTablePreferencesControl ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    filterBarProps == null ? void 0 : filterBarProps.trailing,
-    /* @__PURE__ */ jsx(
-      ColumnVisibilityTrigger,
-      {
-        onOpen: (event) => setColumnMenu(menuStateFromTrigger(event))
-      }
-    )
-  ] }) : filterBarProps == null ? void 0 : filterBarProps.trailing;
   const showHeaderFilterControls = showHeaderFilters && (headerFilterByColumn.size > 0 || !!columnTimeRange);
   const filteredRows = useMemo(() => {
     if (manualFilter) return rows;
@@ -648,8 +720,8 @@ function DataTableInner({
   const selectableVisibleRows = useMemo(
     () => visibleSorted.filter(
       (record) => {
-        var _a;
-        return ((_a = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+        var _a2;
+        return ((_a2 = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
       }
     ),
     [rowSelection, visibleSorted]
@@ -677,9 +749,9 @@ function DataTableInner({
   );
   const toggleRowSelection = useCallback(
     (record) => {
-      var _a;
+      var _a2;
       if (!rowSelection) return;
-      if (((_a = rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) === false) return;
+      if (((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) === false) return;
       const next = new Set(selectedRowIDs);
       if (next.has(record.id)) next.delete(record.id);
       else next.add(record.id);
@@ -718,31 +790,67 @@ function DataTableInner({
     totalRowCount: data.length,
     loading
   }) : footer : pagination ? null : loading && sorted.length === 0 ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}`;
-  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const [collapseStateByMode, setCollapseStateByMode] = useState({});
+  const collapseStateKey = activeGroupingMode ? `mode:${activeGroupingMode.value}` : "fixed";
+  const collapseState = collapseStateByMode[collapseStateKey];
   const groups = useMemo(() => {
-    if (!grouping) return null;
+    if (!effectiveGrouping) return null;
     const buckets = groupRecords(
       visibleSorted,
-      (record) => grouping.getGroupKey(record.row)
+      (record) => effectiveGrouping.getGroupKey(record.row)
     );
     const resolved = buckets.map((bucket) => ({
       key: bucket.key,
       records: bucket.rows,
       rows: bucket.rows.map((record) => record.row)
     }));
-    if (grouping.compareGroups) {
-      resolved.sort((a, b) => grouping.compareGroups(a, b));
+    if (effectiveGrouping.compareGroups) {
+      resolved.sort((a, b) => effectiveGrouping.compareGroups(a, b));
     }
     return resolved.map((group) => {
-      var _a, _b;
+      var _a2, _b;
       return {
         ...group,
-        label: ((_a = grouping.getGroupLabel) == null ? void 0 : _a.call(grouping, group.key, group.rows)) ?? group.key,
-        meta: (_b = grouping.getGroupMeta) == null ? void 0 : _b.call(grouping, group.key, group.rows),
-        collapsed: collapsedGroups[group.key] ?? isGroupCollapsedByDefault(group, grouping.defaultCollapsed)
+        label: ((_a2 = effectiveGrouping.getGroupLabel) == null ? void 0 : _a2.call(effectiveGrouping, group.key, group.rows)) ?? group.key,
+        meta: (_b = effectiveGrouping.getGroupMeta) == null ? void 0 : _b.call(effectiveGrouping, group.key, group.rows),
+        collapsed: (collapseState == null ? void 0 : collapseState.groups[group.key]) ?? (collapseState == null ? void 0 : collapseState.all) ?? isGroupCollapsedByDefault(group, effectiveGrouping.defaultCollapsed)
       };
     });
-  }, [collapsedGroups, grouping, visibleSorted]);
+  }, [collapseState, effectiveGrouping, visibleSorted]);
+  const hasGroups = !!(groups == null ? void 0 : groups.length);
+  const allGroupsExpanded = hasGroups && groups.every((group) => !group.collapsed);
+  const allGroupsCollapsed = hasGroups && groups.every((group) => group.collapsed);
+  const setAllGroupsCollapsed = (collapsed) => {
+    setCollapseStateByMode((current) => ({
+      ...current,
+      [collapseStateKey]: { all: collapsed, groups: {} }
+    }));
+  };
+  const filterBarTrailing = (filterBarProps == null ? void 0 : filterBarProps.trailing) || groupingModes || showTablePreferencesControl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    filterBarProps == null ? void 0 : filterBarProps.trailing,
+    groupingModes ? /* @__PURE__ */ jsx(
+      DataTableGroupingControls,
+      {
+        modes: groupingModes,
+        value: activeGroupingModeValue,
+        hasGroups,
+        allExpanded: allGroupsExpanded,
+        allCollapsed: allGroupsCollapsed,
+        onModeChange: (value) => {
+          if (groupingMode === void 0) setLocalGroupingMode(value);
+          onGroupingModeChange == null ? void 0 : onGroupingModeChange(value);
+        },
+        onExpandAll: () => setAllGroupsCollapsed(false),
+        onCollapseAll: () => setAllGroupsCollapsed(true)
+      }
+    ) : null,
+    showTablePreferencesControl ? /* @__PURE__ */ jsx(
+      ColumnVisibilityTrigger,
+      {
+        onOpen: (event) => setColumnMenu(menuStateFromTrigger(event))
+      }
+    ) : null
+  ] }) : void 0;
   const rowStream = useMemo(() => {
     if (!groups) {
       return visibleSorted.map((record) => ({ kind: "row", record }));
@@ -757,8 +865,8 @@ function DataTableInner({
       if (!rowSelection) return;
       const selectable = records.filter(
         (record) => {
-          var _a;
-          return ((_a = rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+          var _a2;
+          return ((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
         }
       );
       const next = new Set(selectedRowIDs);
@@ -777,8 +885,8 @@ function DataTableInner({
       if (!node || !sentinelActive) return;
       revealObserver.current = new IntersectionObserver(
         (entries) => {
-          var _a;
-          if (!((_a = entries[0]) == null ? void 0 : _a.isIntersecting)) return;
+          var _a2;
+          if (!((_a2 = entries[0]) == null ? void 0 : _a2.isIntersecting)) return;
           if (infiniteEnabled) {
             requestMoreRows();
             return;
@@ -828,14 +936,14 @@ function DataTableInner({
     document.body.style.userSelect = "none";
   };
   const autoFitColumn = (event, column) => {
-    var _a;
+    var _a2;
     event.preventDefault();
     event.stopPropagation();
     const header = event.currentTarget.closest("th");
     const table = event.currentTarget.closest("table");
     if (!header || !table) return;
     const columnIndex = Array.from(
-      ((_a = header.parentElement) == null ? void 0 : _a.children) ?? []
+      ((_a2 = header.parentElement) == null ? void 0 : _a2.children) ?? []
     ).indexOf(header);
     if (columnIndex < 0) return;
     const width = measureColumnContentWidth(table, columnIndex, column);
@@ -1040,28 +1148,37 @@ function DataTableInner({
                       children: emptyMessage
                     }
                   ) }) : rowStream.map((item) => {
-                    var _a;
+                    var _a2;
                     if (item.kind === "group") {
                       return /* @__PURE__ */ jsx(
                         DataTableGroupHeaderRow,
                         {
                           label: item.group.label,
                           meta: item.group.meta,
-                          metaAlign: (grouping == null ? void 0 : grouping.metaAlign) ?? "end",
-                          ...(grouping == null ? void 0 : grouping.metaClassName) ? { metaClassName: grouping.metaClassName } : {},
+                          metaAlign: (effectiveGrouping == null ? void 0 : effectiveGrouping.metaAlign) ?? "end",
+                          ...(effectiveGrouping == null ? void 0 : effectiveGrouping.metaClassName) ? { metaClassName: effectiveGrouping.metaClassName } : {},
                           count: item.group.records.length,
                           colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
                           collapsed: item.group.collapsed,
-                          onToggleCollapsed: () => setCollapsedGroups((current) => ({
-                            ...current,
-                            [item.group.key]: !item.group.collapsed
-                          })),
+                          onToggleCollapsed: () => setCollapseStateByMode((current) => {
+                            var _a3;
+                            return {
+                              ...current,
+                              [collapseStateKey]: {
+                                ...current[collapseStateKey],
+                                groups: {
+                                  ...(_a3 = current[collapseStateKey]) == null ? void 0 : _a3.groups,
+                                  [item.group.key]: !item.group.collapsed
+                                }
+                              }
+                            };
+                          }),
                           ...rowSelection ? {
                             selection: {
                               selectableCount: item.group.records.filter(
                                 (record2) => {
-                                  var _a2;
-                                  return ((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(
+                                  var _a3;
+                                  return ((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
                                     rowSelection,
                                     record2.row
                                   )) ?? true;
@@ -1089,7 +1206,7 @@ function DataTableInner({
                     const expandsInline = expandable && detailStyle === "row";
                     const opensDialog = expandable && detailStyle === "dialog";
                     const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
-                    const rowSelectable = ((_a = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+                    const rowSelectable = ((_a2 = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
                     const selectionClickEnabled = !!(rowSelection == null ? void 0 : rowSelection.toggleOnRowClick) && rowSelectable;
                     const clickable = !!href || rowClickEnabled || expandable || selectionClickEnabled;
                     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -1103,7 +1220,8 @@ function DataTableInner({
                             getRowClassName == null ? void 0 : getRowClassName(record.row)
                           ),
                           onClick: () => {
-                            if (selectionClickEnabled) toggleRowSelection(record);
+                            if (selectionClickEnabled)
+                              toggleRowSelection(record);
                             if (expandsInline) {
                               setExpandedRows((current) => ({
                                 ...current,
@@ -1142,7 +1260,7 @@ function DataTableInner({
                               }
                             ) : null,
                             visibleColumns.map((column, index) => {
-                              var _a2;
+                              var _a3;
                               const rawValue = resolveColumnValue(
                                 record.row,
                                 column
@@ -1166,7 +1284,7 @@ function DataTableInner({
                                   {
                                     value: serverFilterValue,
                                     ...serverFilterDisplayValue !== void 0 ? { displayValue: serverFilterDisplayValue } : {},
-                                    mode: (_a2 = cellFilters == null ? void 0 : cellFilters[filterKey]) == null ? void 0 : _a2[serverFilterValue],
+                                    mode: (_a3 = cellFilters == null ? void 0 : cellFilters[filterKey]) == null ? void 0 : _a3[serverFilterValue],
                                     onChange: (mode) => onCellFilterChange({
                                       key: filterKey,
                                       value: serverFilterValue,
@@ -1363,7 +1481,10 @@ function DataTablePaginationFooter({
   const atLast = cursor ? cursor.next == null : pagination.hasMore != null ? !pagination.hasMore : totalPages != null ? safePage >= totalPages - 1 : visibleRowCount < pageSize;
   const hasVisibleRows = visibleRowCount > 0;
   const rangeStart = total === 0 || !hasVisibleRows ? 0 : infinite ? 1 : safePage * pageSize + 1;
-  const rangeEnd = total != null && hasVisibleRows ? Math.min(approximate ? Infinity : total, rangeStart + Math.max(visibleRowCount - 1, 0)) : visibleRowCount;
+  const rangeEnd = total != null && hasVisibleRows ? Math.min(
+    approximate ? Infinity : total,
+    rangeStart + Math.max(visibleRowCount - 1, 0)
+  ) : visibleRowCount;
   const rangeLabel = total != null ? `${rangeStart}-${rangeEnd} of ${approximate ? `~${total}+` : total}` : `${visibleRowCount} row${visibleRowCount === 1 ? "" : "s"}`;
   const steppable = !infinite && (cursor != null || onPageChange != null);
   const goPrevious = () => {
@@ -1468,7 +1589,7 @@ function DataTableGroupHeaderRow({
         "aria-expanded": !collapsed,
         onClick: onToggleCollapsed,
         className: cn(
-          "flex min-w-0 items-center gap-1.5 text-left text-xs font-semibold text-foreground hover:text-primary",
+          "flex min-w-0 items-center gap-1.5 text-left text-sm font-semibold text-foreground hover:text-primary",
           // `flex-1` is what pushes the meta to the trailing edge. Dropping
           // it lets the meta sit right after the count instead.
           metaAlign === "end" && "flex-1"
@@ -1490,7 +1611,7 @@ function DataTableGroupHeaderRow({
       "div",
       {
         className: cn(
-          "shrink-0 text-xs text-muted-foreground",
+          "shrink-0 text-sm text-muted-foreground",
           metaClassName
         ),
         children: meta
@@ -2047,10 +2168,7 @@ function CellContent({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
-        cellContentClassName(column),
-        alignmentClass(column.align)
-      ),
+      className: cn(cellContentClassName(column), alignmentClass(column.align)),
       children
     }
   );