feat(data-grid): add better badge trancation

public/r/registry.json

@@ -385,6 +385,10 @@
           "type": "registry:component",
           "target": "src/components/data-grid/data-grid-search.tsx"
         },
+        {
+          "path": "src/hooks/use-badge-overflow.ts",
+          "type": "registry:hook"
+        },
         {
           "path": "src/hooks/use-callback-ref.ts",
           "type": "registry:hook"

registry.json

@@ -385,6 +385,10 @@
           "type": "registry:component",
           "target": "src/components/data-grid/data-grid-search.tsx"
         },
+        {
+          "path": "src/hooks/use-badge-overflow.ts",
+          "type": "registry:hook"
+        },
         {
           "path": "src/hooks/use-callback-ref.ts",
           "type": "registry:hook"

src/components/data-grid/data-grid-cell-variants.tsx

@@ -43,6 +43,7 @@ import {
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
+import { useBadgeOverflow } from "@/hooks/use-badge-overflow";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { getLineCount } from "@/lib/data-grid";
 import { cn } from "@/lib/utils";
@@ -794,15 +795,15 @@ export function MultiSelectCell<TData>({
     .filter(Boolean);
 
   const rowHeight = table.options.meta?.rowHeight ?? "short";
-
   const lineCount = getLineCount(rowHeight);
-  const maxVisibleBadgeCount = lineCount * 3;
 
-  const visibleLabels = displayLabels.slice(0, maxVisibleBadgeCount);
-  const hiddenBadgeCount = Math.max(
-    0,
-    displayLabels.length - maxVisibleBadgeCount,
-  );
+  const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =
+    useBadgeOverflow({
+      items: displayLabels,
+      getLabel: (label) => label,
+      containerRef,
+      lineCount,
+    });
 
   return (
     <DataGridCellWrapper
@@ -1511,10 +1512,17 @@ export function FileCell<TData>({
 
   const rowHeight = table.options.meta?.rowHeight ?? "short";
   const lineCount = getLineCount(rowHeight);
-  const maxVisibleBadgeCount = lineCount * 3;
 
-  const visibleFiles = files.slice(0, maxVisibleBadgeCount);
-  const hiddenFileCount = Math.max(0, files.length - maxVisibleBadgeCount);
+  const { visibleItems: visibleFiles, hiddenCount: hiddenFileCount } =
+    useBadgeOverflow({
+      items: files,
+      getLabel: (file) => file.name,
+      containerRef,
+      lineCount,
+      cacheKeyPrefix: "file",
+      iconSize: 12,
+      maxWidth: 100,
+    });
 
   return (
     <DataGridCellWrapper

src/hooks/use-badge-overflow.ts

@@ -0,0 +1,179 @@
+import * as React from "react";
+
+const badgeWidthCache = new Map<string, number>();
+
+const DEFAULT_CONTAINER_PADDING = 16; // px-2 = 8px * 2
+const DEFAULT_BADGE_GAP = 4; // gap-1 = 4px
+const DEFAULT_OVERFLOW_BADGE_WIDTH = 40; // Approximate width of "+N" badge
+
+interface MeasureBadgeWidthProps {
+  label: string;
+  cacheKey: string;
+  iconSize?: number;
+  maxWidth?: number;
+  className?: string;
+}
+
+function measureBadgeWidth({
+  label,
+  cacheKey,
+  iconSize,
+  maxWidth,
+  className,
+}: MeasureBadgeWidthProps): number {
+  const cached = badgeWidthCache.get(cacheKey);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const measureEl = document.createElement("div");
+  measureEl.className = `inline-flex items-center rounded-md border px-1.5 text-xs font-semibold h-5 gap-1 shrink-0 absolute invisible pointer-events-none ${
+    className ?? ""
+  }`;
+  measureEl.style.whiteSpace = "nowrap";
+
+  if (iconSize) {
+    const icon = document.createElement("span");
+    icon.className = "shrink-0";
+    icon.style.width = `${iconSize}px`;
+    icon.style.height = `${iconSize}px`;
+    measureEl.appendChild(icon);
+  }
+
+  if (maxWidth) {
+    const text = document.createElement("span");
+    text.className = "truncate";
+    text.style.maxWidth = `${maxWidth}px`;
+    text.textContent = label;
+    measureEl.appendChild(text);
+  } else {
+    measureEl.textContent = label;
+  }
+
+  document.body.appendChild(measureEl);
+  const width = measureEl.offsetWidth;
+  document.body.removeChild(measureEl);
+
+  badgeWidthCache.set(cacheKey, width);
+  return width;
+}
+
+interface UseBadgeOverflowProps<T> {
+  items: T[];
+  getLabel: (item: T) => string;
+  containerRef: React.RefObject<HTMLElement | null>;
+  lineCount: number;
+  cacheKeyPrefix?: string;
+  iconSize?: number;
+  maxWidth?: number;
+  className?: string;
+  containerPadding?: number;
+  badgeGap?: number;
+  overflowBadgeWidth?: number;
+}
+
+interface UseBadgeOverflowReturn<T> {
+  visibleItems: T[];
+  hiddenCount: number;
+  containerWidth: number;
+}
+
+export function useBadgeOverflow<T>({
+  items,
+  getLabel,
+  containerRef,
+  lineCount,
+  cacheKeyPrefix = "",
+  containerPadding = DEFAULT_CONTAINER_PADDING,
+  badgeGap = DEFAULT_BADGE_GAP,
+  overflowBadgeWidth = DEFAULT_OVERFLOW_BADGE_WIDTH,
+  iconSize,
+  maxWidth,
+  className,
+}: UseBadgeOverflowProps<T>): UseBadgeOverflowReturn<T> {
+  const [containerWidth, setContainerWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+
+    function measureWidth() {
+      if (containerRef.current) {
+        const width = containerRef.current.clientWidth - containerPadding;
+        setContainerWidth(width);
+      }
+    }
+
+    measureWidth();
+
+    const resizeObserver = new ResizeObserver(measureWidth);
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, containerPadding]);
+
+  const result = React.useMemo(() => {
+    if (!containerWidth || items.length === 0) {
+      return { visibleItems: items, hiddenCount: 0, containerWidth };
+    }
+
+    let currentLineWidth = 0;
+    let currentLine = 1;
+    const visible: T[] = [];
+
+    for (const item of items) {
+      const label = getLabel(item);
+      const cacheKey = cacheKeyPrefix ? `${cacheKeyPrefix}:${label}` : label;
+      const badgeWidth = measureBadgeWidth({
+        label,
+        cacheKey,
+        iconSize,
+        maxWidth,
+        className,
+      });
+      const widthWithGap = badgeWidth + badgeGap;
+
+      if (currentLineWidth + widthWithGap <= containerWidth) {
+        currentLineWidth += widthWithGap;
+        visible.push(item);
+      } else if (currentLine < lineCount) {
+        currentLine++;
+        currentLineWidth = widthWithGap;
+        visible.push(item);
+      } else {
+        if (
+          currentLineWidth + overflowBadgeWidth > containerWidth &&
+          visible.length > 0
+        ) {
+          visible.pop();
+        }
+
+        break;
+      }
+    }
+
+    return {
+      visibleItems: visible,
+      hiddenCount: Math.max(0, items.length - visible.length),
+      containerWidth,
+    };
+  }, [
+    items,
+    getLabel,
+    containerWidth,
+    lineCount,
+    cacheKeyPrefix,
+    iconSize,
+    maxWidth,
+    className,
+    badgeGap,
+    overflowBadgeWidth,
+  ]);
+
+  return result;
+}
+
+export function clearBadgeWidthCache(): void {
+  badgeWidthCache.clear();
+}