chordia-ui 3.7.2 → 3.7.4

package/src/components/data/DataTable2.jsx

@@ -0,0 +1,2449 @@
+"use client";
+
+import React, { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragOverlay,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, ChevronUp, ChevronDown, ListFilter, ArrowUp, ArrowDown, Settings2, Search, Check, X, ArrowUpDown } from "lucide-react";
+import { createPortal } from "react-dom";
+import Pagination from "../common/Pagination.jsx";
+// TODO: surface column limit errors via callback prop (onMaxColumnsError)
+// TODO: replace with framework-agnostic component
+function OpenCloseArrow({ isOpen, iconSize }) { return null; }
+// TODO: replace with framework-agnostic component
+function Separator() { return <div style={{ height: 1, background: "rgba(52,58,64,0.08)" }} />; }
+
+// ─── Typed-filter helpers ──────────────────────────────────────────────────
+function parseNumberLike(s) {
+  if (s === null || s === undefined) return NaN;
+  const cleaned = String(s).replace(/[,$%]|pp/gi, "").trim();
+  const n = parseFloat(cleaned);
+  return Number.isFinite(n) ? n : NaN;
+}
+
+function parseDurationToSeconds(s) {
+  if (s === null || s === undefined) return NaN;
+  const str = String(s).trim();
+  // HH:MM:SS or MM:SS
+  const colon = str.match(/^(\d+):(\d+)(?::(\d+))?$/);
+  if (colon) {
+    const a = +colon[1], b = +colon[2], c = colon[3] != null ? +colon[3] : null;
+    return c != null ? a * 3600 + b * 60 + c : a * 60 + b;
+  }
+  // 1d 2h 3m 4s
+  let total = 0;
+  let matched = false;
+  const dM = str.match(/(\d+)\s*d\b/i);
+  const hM = str.match(/(\d+)\s*h\b/i);
+  const mM = str.match(/(\d+)\s*m(?!s)\b/i);
+  const sM = str.match(/(\d+)\s*s\b/i);
+  if (dM) { total += +dM[1] * 86400; matched = true; }
+  if (hM) { total += +hM[1] * 3600; matched = true; }
+  if (mM) { total += +mM[1] * 60; matched = true; }
+  if (sM) { total += +sM[1]; matched = true; }
+  return matched ? total : NaN;
+}
+
+function parseDateLike(s) {
+  if (!s) return null;
+  const str = String(s).trim();
+  // MM/DD/YYYY or M/D/YY
+  const slash = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/);
+  if (slash) {
+    const yyyy = slash[3].length === 2 ? 2000 + +slash[3] : +slash[3];
+    const d = new Date(yyyy, +slash[1] - 1, +slash[2]);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  const d = new Date(str);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+function detectFilterType(values) {
+  if (!values || values.length === 0) return "text";
+  const sample = values.slice(0, 25);
+  const allMatch = (test) => sample.every(test);
+  if (allMatch((v) => /^\d{1,2}\/\d{1,2}\/\d{2,4}$/.test(v) || /^\d{4}-\d{2}-\d{2}/.test(v))) return "date";
+  if (allMatch((v) => /^\d+\s*[dhms]\b/i.test(v) || /^\d+:\d+(:\d+)?$/.test(v))) return "duration";
+  if (allMatch((v) => /^-?[\d,.]+(%|pp)?$/i.test(v))) return "number";
+  return "text";
+}
+
+function isFilterActive(filter) {
+  if (!filter) return false;
+  if (Array.isArray(filter)) return filter.length > 0;
+  if (filter.type === "range") return filter.min !== "" && filter.min !== undefined && filter.min !== null
+    || filter.max !== "" && filter.max !== undefined && filter.max !== null;
+  if (filter.type === "durationRange") return (filter.minSec !== "" && filter.minSec != null) || (filter.maxSec !== "" && filter.maxSec != null);
+  if (filter.type === "dateRange") return Boolean(filter.from || filter.to);
+  return false;
+}
+
+function secondsToHMS(sec) {
+  if (sec == null || sec === "" || isNaN(sec)) return "";
+  const n = Number(sec);
+  const h = Math.floor(n / 3600);
+  const m = Math.floor((n % 3600) / 60);
+  const s = Math.floor(n % 60);
+  if (h > 0) return `${h}h ${m}m`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
+function chipSummary(filter) {
+  if (!filter) return "";
+  if (Array.isArray(filter)) return filter.length === 0 ? "" : String(filter[0]);
+  if (filter.type === "range") {
+    const lo = filter.min !== "" && filter.min != null ? filter.min : null;
+    const hi = filter.max !== "" && filter.max != null ? filter.max : null;
+    if (lo != null && hi != null) return `${lo} – ${hi}`;
+    if (lo != null) return `≥ ${lo}`;
+    if (hi != null) return `≤ ${hi}`;
+    return "";
+  }
+  if (filter.type === "durationRange") {
+    const lo = filter.minSec !== "" && filter.minSec != null ? secondsToHMS(filter.minSec) : null;
+    const hi = filter.maxSec !== "" && filter.maxSec != null ? secondsToHMS(filter.maxSec) : null;
+    if (lo && hi) return `${lo} – ${hi}`;
+    if (lo) return `≥ ${lo}`;
+    if (hi) return `≤ ${hi}`;
+    return "";
+  }
+  if (filter.type === "dateRange") {
+    if (filter.from && filter.to) return `${filter.from} – ${filter.to}`;
+    if (filter.from) return `from ${filter.from}`;
+    if (filter.to) return `to ${filter.to}`;
+    return "";
+  }
+  return "";
+}
+
+function chipExtraCount(filter) {
+  if (Array.isArray(filter)) return Math.max(0, filter.length - 1);
+  return 0;
+}
+
+function chipExtraValues(filter) {
+  if (Array.isArray(filter)) return filter.slice(1).map(String).join(", ");
+  return "";
+}
+
+function ExtraValuesBadge({ count, values }) {
+  const [hover, setHover] = useState(false);
+  return (
+    <span
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 22,
+        minWidth: 22,
+        padding: "0 6px",
+        background: "#D8D8D8",
+        color: "#0B0B0B",
+        borderRadius: 14,
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: 1,
+        cursor: "pointer",
+      }}
+    >
+      +{count}
+      {hover && (
+        <span
+          role="tooltip"
+          style={{
+            position: "absolute",
+            bottom: "calc(100% + 6px)",
+            left: "50%",
+            transform: "translateX(-50%)",
+            background: "#1E2125",
+            color: "#FFFFFF",
+            fontFamily: "var(--font-sans)",
+            fontSize: 12,
+            fontWeight: 400,
+            lineHeight: "20px",
+            padding: "6px 10px",
+            borderRadius: 8,
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+            zIndex: 100,
+            boxShadow: "0 6px 16px rgba(11, 11, 11, 0.18)",
+          }}
+        >
+          {values}
+        </span>
+      )}
+    </span>
+  );
+}
+
+function RangeInputs({ leftLabel, rightLabel, leftValue, rightValue, onLeftChange, onRightChange, type = "number", placeholderLeft = "Min", placeholderRight = "Max" }) {
+  const fieldStyle = {
+    width: "100%",
+    height: 32,
+    borderRadius: 8,
+    border: "1px solid #D9D9D9",
+    background: "#FFFFFF",
+    padding: "0 10px",
+    fontFamily: "var(--font-sans)",
+    fontSize: 14,
+    color: "#0B0B0B",
+    outline: "none",
+    boxSizing: "border-box",
+  };
+  const labelStyle = { fontSize: 12, color: "#676767", marginBottom: 4, fontFamily: "var(--font-sans)" };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <span style={labelStyle}>{leftLabel}</span>
+        <input
+          type={type}
+          value={leftValue}
+          onChange={(e) => onLeftChange(e.target.value)}
+          placeholder={placeholderLeft}
+          style={fieldStyle}
+        />
+      </div>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <span style={labelStyle}>{rightLabel}</span>
+        <input
+          type={type}
+          value={rightValue}
+          onChange={(e) => onRightChange(e.target.value)}
+          placeholder={placeholderRight}
+          style={fieldStyle}
+        />
+      </div>
+    </div>
+  );
+}
+
+function FilterValuePicker({ column, columnId, filterType = "text", position, popoverRef, distinctValues, initialValue, onApply, onCancel }) {
+  const isText = filterType === "text";
+  const isNumber = filterType === "number";
+  const isDate = filterType === "date";
+  const isDuration = filterType === "duration";
+
+  // ── State per filterType ────────────────────────────────────────────
+  const [staged, setStaged] = useState(() =>
+    isText ? new Set(Array.isArray(initialValue) ? initialValue : []) : new Set()
+  );
+  const [query, setQuery] = useState("");
+  const [rangeMin, setRangeMin] = useState(() => (isNumber && initialValue?.type === "range" && initialValue.min != null ? initialValue.min : ""));
+  const [rangeMax, setRangeMax] = useState(() => (isNumber && initialValue?.type === "range" && initialValue.max != null ? initialValue.max : ""));
+  const [durMin, setDurMin] = useState(() => (isDuration && initialValue?.type === "durationRange" && initialValue.minSec != null ? initialValue.minSec : ""));
+  const [durMax, setDurMax] = useState(() => (isDuration && initialValue?.type === "durationRange" && initialValue.maxSec != null ? initialValue.maxSec : ""));
+  const [dateFrom, setDateFrom] = useState(() => (isDate && initialValue?.type === "dateRange" ? initialValue.from || "" : ""));
+  const [dateTo, setDateTo] = useState(() => (isDate && initialValue?.type === "dateRange" ? initialValue.to || "" : ""));
+
+  useEffect(() => {
+    if (isText) setStaged(new Set(Array.isArray(initialValue) ? initialValue : []));
+  }, [columnId, isText]);
+
+  const filteredValues = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return distinctValues;
+    return distinctValues.filter((v) => String(v).toLowerCase().includes(q));
+  }, [distinctValues, query]);
+
+  const toggle = (value) => {
+    setStaged((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) next.delete(value); else next.add(value);
+      return next;
+    });
+  };
+
+  const reset = () => {
+    if (isText) setStaged(new Set());
+    if (isNumber) { setRangeMin(""); setRangeMax(""); }
+    if (isDuration) { setDurMin(""); setDurMax(""); }
+    if (isDate) { setDateFrom(""); setDateTo(""); }
+    setQuery("");
+  };
+
+  const apply = () => {
+    if (isText) return onApply(Array.from(staged));
+    if (isNumber) return onApply({ type: "range", min: rangeMin === "" ? "" : Number(rangeMin), max: rangeMax === "" ? "" : Number(rangeMax) });
+    if (isDuration) return onApply({ type: "durationRange", minSec: durMin === "" ? "" : Number(durMin), maxSec: durMax === "" ? "" : Number(durMax) });
+    if (isDate) return onApply({ type: "dateRange", from: dateFrom, to: dateTo });
+  };
+
+  return (
+    <div
+      ref={popoverRef}
+      role="dialog"
+      aria-label={`Filter ${column.label || columnId}`}
+      style={{
+        position: "fixed",
+        top: position.top,
+        left: position.left,
+        zIndex: 50,
+        width: isText ? 240 : 280,
+        background: "#FFFFFF",
+        border: "1px solid #E6E6E6",
+        borderRadius: 10,
+        padding: 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+        boxShadow: "0 8px 24px rgba(11, 11, 11, 0.10)",
+        fontFamily: "var(--font-sans)",
+      }}
+    >
+      {isText && (
+        <>
+          <div
+            style={{
+              background: "#D8D8D8",
+              height: 32,
+              borderRadius: 10,
+              padding: 1,
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <div
+              style={{
+                background: "#FFFFFF",
+                flex: 1,
+                height: 30,
+                borderRadius: 10,
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "0 8px",
+              }}
+            >
+              <Search size={16} color="#989898" strokeWidth={2} />
+              <input
+                autoFocus
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search"
+                style={{
+                  flex: 1,
+                  border: "none",
+                  outline: "none",
+                  background: "transparent",
+                  fontSize: 14,
+                  color: "#0B0B0B",
+                  minWidth: 0,
+                  fontFamily: "var(--font-sans)",
+                }}
+              />
+            </div>
+          </div>
+
+          <div style={{ maxHeight: 220, overflowY: "auto", display: "flex", flexDirection: "column", gap: 4 }}>
+            {filteredValues.length === 0 ? (
+              <div style={{ fontSize: 13, color: "#676767", padding: "8px 4px", textAlign: "center" }}>
+                No values
+              </div>
+            ) : (
+              filteredValues.map((value) => {
+                const checked = staged.has(value);
+                return (
+                  <label
+                    key={value}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 12,
+                      padding: "6px 4px",
+                      cursor: "pointer",
+                      borderRadius: 6,
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: 4,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        background: checked ? "#0B0B0B" : "#FFFFFF",
+                        border: `1px solid ${checked ? "#0B0B0B" : "#676767"}`,
+                        flexShrink: 0,
+                      }}
+                    >
+                      {checked && <Check size={14} color="#FFFFFF" strokeWidth={3} />}
+                    </span>
+                    <input
+                      type="checkbox"
+                      checked={checked}
+                      onChange={() => toggle(value)}
+                      style={{ position: "absolute", opacity: 0, pointerEvents: "none" }}
+                      tabIndex={-1}
+                    />
+                    <span
+                      onClick={(e) => { e.preventDefault(); toggle(value); }}
+                      style={{
+                        fontSize: 14,
+                        lineHeight: "20px",
+                        color: "#0B0B0B",
+                        flex: 1,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {value}
+                    </span>
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </>
+      )}
+
+      {isNumber && (
+        <RangeInputs
+          leftLabel="Min"
+          rightLabel="Max"
+          leftValue={rangeMin}
+          rightValue={rangeMax}
+          onLeftChange={setRangeMin}
+          onRightChange={setRangeMax}
+          type="number"
+        />
+      )}
+
+      {isDuration && (
+        <>
+          <div style={{ fontSize: 12, color: "#676767" }}>Duration in seconds</div>
+          <RangeInputs
+            leftLabel="Min (sec)"
+            rightLabel="Max (sec)"
+            leftValue={durMin}
+            rightValue={durMax}
+            onLeftChange={setDurMin}
+            onRightChange={setDurMax}
+            type="number"
+            placeholderLeft="0"
+            placeholderRight="3600"
+          />
+        </>
+      )}
+
+      {isDate && (
+        <RangeInputs
+          leftLabel="From"
+          rightLabel="To"
+          leftValue={dateFrom}
+          rightValue={dateTo}
+          onLeftChange={setDateFrom}
+          onRightChange={setDateTo}
+          type="date"
+          placeholderLeft=""
+          placeholderRight=""
+        />
+      )}
+
+      <div style={{ height: 1, background: "#D9D9D9", margin: "0 -12px" }} />
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <button
+          type="button"
+          onClick={reset}
+          style={{
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            cursor: "pointer",
+            fontSize: 14,
+            fontWeight: 500,
+            color: "#323232",
+            fontFamily: "var(--font-sans)",
+          }}
+        >
+          Reset
+        </button>
+        <button
+          type="button"
+          onClick={apply}
+          style={{
+            background: "#0B0B0B",
+            color: "#FFFFFF",
+            border: "none",
+            borderRadius: 10,
+            height: 28,
+            padding: "0 14px",
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            fontFamily: "var(--font-sans)",
+          }}
+        >
+          Apply
+        </button>
+      </div>
+    </div>
+  );
+}
+function ResizeColumnsIcon({ size = 10, color = "currentColor" }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ display: "block" }}
+      aria-hidden="true"
+    >
+      <path d="M3.5 8H12.5" stroke={color} strokeWidth="1.4" strokeLinecap="round" />
+      <path d="M5 6.5L3.5 8L5 9.5" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M11 6.5L12.5 8L11 9.5" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M6.8 3V13" stroke={color} strokeWidth="1.2" strokeLinecap="round" />
+      <path d="M9.2 3V13" stroke={color} strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+// TODO: replace with framework-agnostic context
+const useUserContext = () => ({ userData: { email: "anonymous" } });
+// TODO: replace with framework-agnostic image
+const Image = (props) => <img {...props} />;
+import DataTableFilters from "./DataTableFilters";
+// TODO: replace with framework-agnostic tooltip
+function HoverBalloon({
+  children,
+  content,
+  direction = "top",
+  align = "center",
+  styling,
+  indicatorColor,
+}) {
+  const tooltipText =
+    typeof content === "string" ? content : content != null ? String(content) : "";
+  const resolvedArrowColor =
+    typeof indicatorColor === "string" &&
+    (indicatorColor.startsWith("#") ||
+      indicatorColor.startsWith("rgb") ||
+      indicatorColor.startsWith("hsl") ||
+      indicatorColor.startsWith("var("))
+      ? indicatorColor
+      : "var(--Grey-Strong, #2E3236)";
+  const [isVisible, setIsVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0, arrowLeft: 0, placement: "top" });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+
+  if (!tooltipText) return children;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current || typeof window === "undefined") return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const viewportPadding = 8;
+    const gap = 10;
+    const tooltipWidth = tooltipRect.width;
+    const tooltipHeight = tooltipRect.height;
+
+    const spaceAbove = triggerRect.top;
+    const spaceBelow = viewportHeight - triggerRect.bottom;
+    const preferredPlacement = direction === "bottom" ? "bottom" : "top";
+
+    let placement = preferredPlacement;
+    if (preferredPlacement === "top" && spaceAbove < tooltipHeight + gap + viewportPadding && spaceBelow > spaceAbove) {
+      placement = "bottom";
+    } else if (preferredPlacement === "bottom" && spaceBelow < tooltipHeight + gap + viewportPadding && spaceAbove > spaceBelow) {
+      placement = "top";
+    }
+
+    let anchorX = triggerRect.left + triggerRect.width / 2;
+    if (align === "start") anchorX = triggerRect.left;
+    if (align === "end") anchorX = triggerRect.right;
+
+    let top = placement === "top"
+      ? triggerRect.top - tooltipHeight - gap
+      : triggerRect.bottom + gap;
+    let left = align === "start"
+      ? anchorX
+      : align === "end"
+        ? anchorX - tooltipWidth
+        : anchorX - tooltipWidth / 2;
+
+    top = Math.max(viewportPadding, Math.min(top, viewportHeight - tooltipHeight - viewportPadding));
+    left = Math.max(viewportPadding, Math.min(left, viewportWidth - tooltipWidth - viewportPadding));
+
+    const arrowLeft = Math.max(10, Math.min(anchorX - left, tooltipWidth - 10));
+    setPosition({ top, left, arrowLeft, placement });
+  }, [align, direction]);
+
+  useEffect(() => {
+    if (!isVisible || !mounted) return;
+
+    updatePosition();
+
+    const handleReposition = () => updatePosition();
+    window.addEventListener("resize", handleReposition);
+    window.addEventListener("scroll", handleReposition, true);
+
+    return () => {
+      window.removeEventListener("resize", handleReposition);
+      window.removeEventListener("scroll", handleReposition, true);
+    };
+  }, [isVisible, mounted, updatePosition]);
+
+  return (
+    <span
+      ref={triggerRef}
+      style={{ display: "block", width: "100%" }}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && mounted && createPortal(
+        <span
+          ref={tooltipRef}
+          style={{
+            position: "fixed",
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            background: "var(--Grey-Strong, #2E3236)",
+            color: "var(--Grey-White, #FFF)",
+            fontSize: "12px",
+            lineHeight: 1.3,
+            fontWeight: 500,
+            padding: "8px 10px",
+            borderRadius: "6px",
+            whiteSpace: "normal",
+            maxWidth: "320px",
+            width: "max-content",
+            boxShadow: "0 6px 18px rgba(0, 0, 0, 0.2)",
+            zIndex: 99999,
+            pointerEvents: "none",
+            ...(typeof styling === "object" ? styling : {}),
+          }}
+        >
+          {tooltipText}
+          <span
+            style={{
+              position: "absolute",
+              left: `${position.arrowLeft}px`,
+              transform: "translateX(-50%)",
+              width: 0,
+              height: 0,
+              borderLeft: "6px solid transparent",
+              borderRight: "6px solid transparent",
+              ...(position.placement === "top"
+                ? {
+                    top: "100%",
+                    borderTop: `7px solid ${resolvedArrowColor}`,
+                  }
+                : {
+                    bottom: "100%",
+                    borderBottom: `7px solid ${resolvedArrowColor}`,
+                  }),
+            }}
+          />
+        </span>,
+        document.body
+      )}
+    </span>
+  );
+}
+
+/**
+ * DataTable Component
+ * Interactive table with column reordering, filtering, sorting, sticky headers, and pagination
+ * Follows "No Judgment" principle - scores and counts displayed uniformly
+ */
+export default function DataTable2({
+  data = [], 
+  columns = [], 
+  initialPageSize = 10, 
+  onRowClick,
+  // Server-side pagination props (optional)
+  totalCount = null, // Total count from server (null = use client-side pagination)
+  page: controlledPage = null, // Controlled page (null = use internal state)
+  pageSize: controlledPageSize = null, // Controlled pageSize (null = use internal state)
+  onPageChange = null, // Callback for page changes (null = use internal state)
+  onPageSizeChange = null, // Callback for pageSize changes (null = use internal state)
+  onFilterChange = null, // Callback for filter changes (null = use client-side filtering)
+  columnFilters = null, // Controlled inline header filters (columnId -> value). Used to rehydrate inputs in server-side filtering mode.
+  // Optional callback to surface column limit errors to host app
+  onMaxColumnsError = null,
+  // Server-side sorting props (optional)
+  onSort = null, // Callback for sort changes (null = use client-side sorting)
+  sortFields = [], // Array of [field, direction] tuples from parent (null = use internal state)
+  tableId = null, // Optional unique identifier for localStorage persistence (e.g., "history", "agents")
+  isLoading = false, // Loading state to show overlay inside table
+  // Filter props (optional)
+  filtersConfig = null, // Top toolbar filter config (chips/date/export). Note: this is different from `columnFilters` for inline header inputs.
+  // Column resize (optional) — min/max in px; columns may override with column.minWidth / column.maxWidth
+  columnResizeMinWidth = 100,
+  columnResizeMaxWidth = 280,
+}) {
+  // Get user email for user-specific storage
+  const { userData } = useUserContext();
+  const userId = userData?.email || 'anonymous';
+
+  // Component to show tooltip only when text is actually truncated
+  const TruncatedCell = React.memo(({ children, content, className = "" }) => {
+    const textRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+
+    useEffect(() => {
+      const checkTruncation = () => {
+        if (textRef.current) {
+          const isOverflowing = textRef.current.scrollWidth > textRef.current.clientWidth;
+          setIsTruncated(isOverflowing);
+        }
+      };
+
+      checkTruncation();
+      const timeoutId = setTimeout(checkTruncation, 0);
+
+      window.addEventListener('resize', checkTruncation);
+      return () => {
+        clearTimeout(timeoutId);
+        window.removeEventListener('resize', checkTruncation);
+      };
+    }, [children, content]);
+
+    const textElement = (
+      <span className={`truncate block ${className}`} ref={textRef}>
+        {children}
+      </span>
+    );
+
+    if (isTruncated && content) {
+      return (
+        <HoverBalloon
+          content={content}
+          styling="bg-green-2 text-gray-900 px-3 py-2 text-sm rounded-lg shadow-md border border-gray-300 max-w-xs whitespace-normal"
+          indicatorColor="bg-green-2"
+          direction="top"
+        >
+          {textElement}
+        </HoverBalloon>
+      );
+    }
+
+    return textElement;
+  });
+  TruncatedCell.displayName = 'TruncatedCell';
+
+  // Use controlled pagination if props provided, otherwise use internal state
+  const isServerSidePagination = totalCount !== null && onPageChange !== null;
+  // Use server-side filtering if onFilterChange is provided
+  const isServerSideFiltering = onFilterChange !== null;
+  // Use server-side sorting if onSort is provided
+  const isServerSideSorting = onSort !== null;
+  const [internalPage, setInternalPage] = useState(1);
+  const [internalPageSize, setInternalPageSize] = useState(initialPageSize);
+  
+  const page = controlledPage !== null ? controlledPage : internalPage;
+  const pageSize = controlledPageSize !== null ? controlledPageSize : internalPageSize;
+  
+  const setPage = (newPage) => {
+    if (onPageChange) {
+      onPageChange(newPage);
+    } else {
+      setInternalPage(newPage);
+    }
+  };
+  
+  const setPageSize = (newSize) => {
+    if (onPageSizeChange) {
+      onPageSizeChange(newSize);
+    } else {
+      setInternalPageSize(newSize);
+    }
+  };
+  
+  const MAX_COLUMNS = 50;
+  
+  const ACTION_COLUMN_ID = 'action';
+
+  // Refs for localStorage persistence
+  const userHasManuallyChangedColumns = useRef(false);
+  
+  // Generate unique storage key for this table (includes userId)
+  const storageKey = useMemo(() => {
+    if (tableId) {
+      return `dataTable_columns_${tableId}:${userId}`;
+    }
+    // Fallback: use column keys to create unique identifier
+    const columnKeys = columns.map(col => (col.id || col.key)).sort().join('_');
+    return `dataTable_columns_${columnKeys}:${userId}`;
+  }, [tableId, columns, userId]);
+  
+  const manualChangeFlagKey = useMemo(() => {
+    if (tableId) {
+      return `dataTable_manual_change_${tableId}:${userId}`;
+    }
+    return null;
+  }, [tableId, userId]);
+
+  // Load saved column visibility from localStorage
+  const loadSavedColumns = useCallback((key, cols) => {
+    if (typeof window === 'undefined' || !key || !cols || cols.length === 0) return null;
+    try {
+      const saved = localStorage.getItem(key);
+      if (saved) {
+        const savedColumns = JSON.parse(saved);
+        // Validate that saved columns still exist in current columns
+        const validColumns = savedColumns.filter(colId => 
+          cols.some(col => (col.id || col.key) === colId)
+        );
+        if (validColumns.length > 0) {
+          return validColumns;
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to load saved columns from localStorage:', error);
+    }
+    return null;
+  }, []);
+  
+  // filters: { [columnId]: string[] } — array of selected values per column
+  const [filters, setFilters] = useState({});
+  // Free-text global search applied to all visible string-cells
+  const [globalQuery, setGlobalQuery] = useState("");
+  // Which column header has its filter popover open (columnId or null)
+  const [openFilterColumnId, setOpenFilterColumnId] = useState(null);
+  const [filterPopoverPosition, setFilterPopoverPosition] = useState({ top: 0, left: 0 });
+  const filterPopoverRef = useRef(null);
+  const filterIconRefs = useRef({});
+  // Internal sorting state (only used for client-side sorting)
+  const [internalSortField, setInternalSortField] = useState(null);
+  const [internalSortDirection, setInternalSortDirection] = useState("asc");
+
+  const setColumnFilter = useCallback((columnId, value) => {
+    const active = isFilterActive(value);
+    setFilters((prev) => {
+      const next = { ...prev };
+      if (!active) delete next[columnId];
+      else next[columnId] = value;
+      return next;
+    });
+    if (onPageChange) onPageChange(1); else setInternalPage(1);
+    if (isServerSideFiltering && onFilterChange) {
+      onFilterChange(
+        active
+          ? { ...filters, [columnId]: value }
+          : Object.fromEntries(Object.entries(filters).filter(([k]) => k !== columnId))
+      );
+    }
+  }, [filters, onFilterChange, isServerSideFiltering, onPageChange]);
+
+  const clearAllFilters = useCallback(() => {
+    setFilters({});
+    setGlobalQuery("");
+    if (onPageChange) onPageChange(1); else setInternalPage(1);
+    if (isServerSideFiltering && onFilterChange) onFilterChange({});
+  }, [onFilterChange, isServerSideFiltering, onPageChange]);
+
+  const getDistinctValuesForColumn = useCallback((columnId) => {
+    if (!data || data.length === 0) return [];
+    const seen = new Set();
+    const out = [];
+    for (const row of data) {
+      const v = row[columnId];
+      if (v === null || v === undefined) continue;
+      const s = typeof v === "object" ? JSON.stringify(v) : String(v);
+      if (!seen.has(s)) {
+        seen.add(s);
+        out.push(s);
+      }
+    }
+    return out.sort((a, b) => a.localeCompare(b));
+  }, [data]);
+
+  const getColumnFilterType = useCallback((columnId) => {
+    const col = columns.find((c) => getColumnId(c) === columnId);
+    if (col && col.filterType) return col.filterType;
+    return detectFilterType(getDistinctValuesForColumn(columnId));
+  }, [columns, getDistinctValuesForColumn]);
+
+  const openFilterPopoverFor = useCallback((columnId, anchorEl) => {
+    if (!anchorEl) {
+      setOpenFilterColumnId(columnId);
+      return;
+    }
+    const rect = anchorEl.getBoundingClientRect();
+    setFilterPopoverPosition({ top: rect.bottom + 6, left: rect.left });
+    setOpenFilterColumnId((prev) => (prev === columnId ? null : columnId));
+  }, []);
+
+  // Outside click closes filter popover
+  useEffect(() => {
+    if (!openFilterColumnId) return;
+    const onMouseDown = (e) => {
+      if (filterPopoverRef.current && filterPopoverRef.current.contains(e.target)) return;
+      const anchor = filterIconRefs.current[openFilterColumnId];
+      if (anchor && anchor.contains(e.target)) return;
+      setOpenFilterColumnId(null);
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, [openFilterColumnId]);
+  
+  // Normalize inline filters by removing empty/null values.
+  // Example usage (server-side mode):
+  // <DataTable onFilterChange={handleFilterChange} columnFilters={dataTableFilters} />
+  const normalizeColumnFilters = useCallback((incomingFilters) => {
+    if (!incomingFilters || typeof incomingFilters !== "object") return {};
+    return Object.fromEntries(
+      Object.entries(incomingFilters).filter(([, value]) => {
+        if (value === null || value === undefined) return false;
+        if (typeof value === "string") return value.trim() !== "";
+        return true; // allow numbers/booleans
+      })
+    );
+  }, []);
+
+  const areFiltersEqual = useCallback((a, b) => {
+    const aKeys = Object.keys(a || {});
+    const bKeys = Object.keys(b || {});
+    if (aKeys.length !== bKeys.length) return false;
+    return aKeys.every((key) => a[key] === b[key]);
+  }, []);
+
+  // Sync internal inline filter input UI from controlled prop in server-side mode.
+  // This does not trigger onFilterChange and therefore does not create callback loops.
+  useEffect(() => {
+    if (!isServerSideFiltering || columnFilters === null) return;
+    const normalizedFilters = normalizeColumnFilters(columnFilters);
+    setFilters((prev) => (areFiltersEqual(prev, normalizedFilters) ? prev : normalizedFilters));
+  }, [isServerSideFiltering, columnFilters, normalizeColumnFilters, areFiltersEqual]);
+  
+  // Get current sort state (from props if server-side, otherwise from internal state)
+  // For server-side sorting, we need to map the sortField back to the column key
+  // because History.js's handleSort maps some keys (e.g., "evaluation.csat_score" -> "csat_score")
+  // but we need to compare against the original column key
+  const getSortFieldForComparison = useCallback((sortFieldFromProps, columnId) => {
+    // Reverse mapping: if sortField is "csat_score", it should match column "evaluation.csat_score"
+    if (sortFieldFromProps === "csat_score" && columnId === "evaluation.csat_score") {
+      return columnId;
+    }
+    // For other fields, use as-is (they should match)
+    return sortFieldFromProps;
+  }, []);
+  
+  const sortField = isServerSideSorting && sortFields.length > 0 ? sortFields[0][0] : internalSortField;
+  const sortDirection = isServerSideSorting && sortFields.length > 0 ? sortFields[0][1] : internalSortDirection;
+  // Support both 'id' and 'key' for column identifiers
+  const [columnOrder, setColumnOrder] = useState(() => 
+    columns.map((col) => col.id || col.key)
+  );
+  const enforceActionPosition = useCallback((cols) => {
+    if (!cols || cols.length === 0) return cols;
+
+    // De-duplicate and enforce max column limit first
+    let result = Array.from(new Set(cols));
+    if (result.length > MAX_COLUMNS) {
+      result = result.slice(0, MAX_COLUMNS);
+    }
+
+    const allColumnIds = columns.map((col) => col.id || col.key);
+    const tableHasActionColumn = allColumnIds.includes(ACTION_COLUMN_ID);
+    const hasAction = result.includes(ACTION_COLUMN_ID);
+
+    // If the table defines an action column, always include it in the visible set,
+    // counting toward the MAX_COLUMNS cap.
+    if (!hasAction && tableHasActionColumn) {
+      if (result.length >= MAX_COLUMNS) {
+        // Replace the last non-action entry with the action column
+        result = [...result.slice(0, MAX_COLUMNS - 1), ACTION_COLUMN_ID];
+      } else {
+        result = [...result, ACTION_COLUMN_ID];
+      }
+    }
+
+    // Ensure the action column is always rendered last
+    const withoutAction = result.filter((id) => id !== ACTION_COLUMN_ID);
+    return [...withoutAction, ACTION_COLUMN_ID];
+  }, [columns]);
+
+  // Column selection state - load persisted columns if they exist, otherwise default to first 9
+  const [visibleColumns, setVisibleColumns] = useState(() => {
+    // Try to load persisted columns immediately on mount
+    if (typeof window !== 'undefined' && tableId) {
+      try {
+        // Check if user has manually changed columns before
+        const hasManualChange = localStorage.getItem(`dataTable_manual_change_${tableId}:${userId}`) === 'true';
+        
+        if (hasManualChange) {
+          // User has manually changed columns, load persisted selection immediately
+          const saved = localStorage.getItem(`dataTable_columns_${tableId}:${userId}`);
+          if (saved) {
+            const savedColumns = JSON.parse(saved);
+            if (Array.isArray(savedColumns) && savedColumns.length > 0) {
+              userHasManuallyChangedColumns.current = true;
+              // Validate saved columns exist in current columns
+              const validColumns = savedColumns.filter(colId => 
+                columns.some(col => (col.id || col.key) === colId)
+              );
+              if (validColumns.length > 0) {
+                return validColumns.slice(0, MAX_COLUMNS);
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.warn('Failed to load saved columns from localStorage:', error);
+      }
+    }
+    
+    // If no persisted columns, default to first 9 columns
+    const columnIds = columns.map((col) => col.id || col.key);
+    const initial = columnIds.slice(0, MAX_COLUMNS);
+    return enforceActionPosition(initial);
+  });
+  const [isColumnDropdownOpen, setIsColumnDropdownOpen] = useState(false);
+  const [columnDropdownPosition, setColumnDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [pendingSelection, setPendingSelection] = useState(new Set());
+  const [pendingDeselection, setPendingDeselection] = useState(new Set());
+  // Snapshot of the columns visible on first mount; used as the Reset target
+  const initialVisibleColumnsRef = useRef(null);
+  if (initialVisibleColumnsRef.current === null) {
+    initialVisibleColumnsRef.current = [...visibleColumns];
+  }
+  const [draggedColumnIndex, setDraggedColumnIndex] = useState(null);
+  const [dragOverColumnIndex, setDragOverColumnIndex] = useState(null);
+  const columnDropdownRef = useRef(null);
+  const columnDropdownMenuRef = useRef(null);
+  const toastTimeoutRef = useRef(null);
+  const [activeId, setActiveId] = useState(null);
+  const [columnWidths, setColumnWidths] = useState({});
+  const tableRef = useRef(null);
+  const resizeStateRef = useRef(null);
+
+  // Helper to get column identifier (id or key)
+  const getColumnId = (col) => col.id || col.key;
+  const toPixelWidth = useCallback((value) => {
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      if (trimmed.endsWith("px")) {
+        const parsed = parseFloat(trimmed);
+        return Number.isFinite(parsed) ? parsed : null;
+      }
+      const parsed = parseFloat(trimmed);
+      return Number.isFinite(parsed) && `${parsed}` === trimmed ? parsed : null;
+    }
+    return null;
+  }, []);
+  const getResolvedColumnWidth = useCallback((columnId, fallbackWidth) => {
+    if (columnWidths[columnId] != null) return `${columnWidths[columnId]}px`;
+    if (typeof fallbackWidth === "number") return `${fallbackWidth}px`;
+    return fallbackWidth || "auto";
+  }, [columnWidths]);
+
+  const handleResizeMove = useCallback((event) => {
+    if (!resizeStateRef.current) return;
+    const { columnId, startX, startWidth, minWidth, maxWidth } = resizeStateRef.current;
+    const delta = event.clientX - startX;
+    const nextWidth = Math.round(startWidth + delta);
+    const clamped = Math.min(maxWidth, Math.max(minWidth, nextWidth));
+    setColumnWidths((prev) => ({ ...prev, [columnId]: clamped }));
+  }, []);
+
+  const stopResize = useCallback(() => {
+    resizeStateRef.current = null;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", stopResize);
+  }, [handleResizeMove]);
+
+  const startResize = useCallback((event, column, currentWidth) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const columnId = column.id || column.key;
+    const colMin = toPixelWidth(column.minWidth) ?? columnResizeMinWidth;
+    const colMax = toPixelWidth(column.maxWidth) ?? columnResizeMaxWidth;
+    const minWidth = Math.min(colMin, colMax);
+    const maxWidth = Math.max(colMin, colMax);
+    const widthFromDom = event.currentTarget.closest("th")?.getBoundingClientRect().width || 0;
+    const parsed = toPixelWidth(currentWidth);
+    const base =
+      parsed != null
+        ? parsed
+        : Math.max(minWidth, Math.round(widthFromDom) || minWidth);
+    const startWidth = Math.min(maxWidth, Math.max(minWidth, base));
+    resizeStateRef.current = { columnId, startX: event.clientX, startWidth, minWidth, maxWidth };
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", stopResize);
+  }, [columnResizeMaxWidth, columnResizeMinWidth, handleResizeMove, stopResize, toPixelWidth]);
+
+  useEffect(() => () => stopResize(), [stopResize]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Handle column drag end (table-level drag and drop)
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      if (active.id === ACTION_COLUMN_ID || over.id === ACTION_COLUMN_ID) {
+        showMaxColumnsError("Cannot drop columns on the Action column");
+        setActiveId(null);
+        return;
+      }
+      // Mark that user has manually changed columns
+      userHasManuallyChangedColumns.current = true;
+      
+      // Update visibleColumns order when dragging in table header
+      setVisibleColumns((prev) => {
+        const oldIndex = prev.indexOf(active.id);
+        const newIndex = prev.indexOf(over.id);
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const reordered = arrayMove(prev, oldIndex, newIndex);
+          const constrained = enforceActionPosition(reordered);
+          // Save immediately after drag
+          saveColumnsToStorage(constrained);
+          return constrained;
+        }
+        return prev;
+      });
+      
+      // Also update columnOrder for consistency
+      setColumnOrder((items) => {
+        const oldIndex = items.indexOf(active.id);
+        const newIndex = items.indexOf(over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+    setActiveId(null);
+  };
+
+  // Handle column drag start
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+
+  // Filter data based on filter inputs - supports multiple keywords
+  // For server-side filtering, skip client-side filtering (data is already filtered by server)
+  const filteredData = useMemo(() => {
+    if (isServerSideFiltering) {
+      // Server-side filtering: data is already filtered, use as-is
+      return data || [];
+    }
+    
+    // Client-side filtering: filter the data locally
+    if (!data || data.length === 0) return [];
+    
+    const globalQ = globalQuery.trim().toLowerCase();
+    const filterEntries = Object.entries(filters).filter(([, f]) => isFilterActive(f));
+
+    return data.filter((row) => {
+      for (const [key, filter] of filterEntries) {
+        const cellValue = row[key];
+        if (cellValue === null || cellValue === undefined) return false;
+        // Text-values filter (legacy / default)
+        if (Array.isArray(filter)) {
+          const cellStr = String(cellValue);
+          if (!filter.some((v) => String(v) === cellStr)) return false;
+          continue;
+        }
+        if (filter.type === "range") {
+          const n = parseNumberLike(cellValue);
+          if (isNaN(n)) return false;
+          if (filter.min !== "" && filter.min != null && n < Number(filter.min)) return false;
+          if (filter.max !== "" && filter.max != null && n > Number(filter.max)) return false;
+          continue;
+        }
+        if (filter.type === "durationRange") {
+          const sec = parseDurationToSeconds(cellValue);
+          if (isNaN(sec)) return false;
+          if (filter.minSec !== "" && filter.minSec != null && sec < Number(filter.minSec)) return false;
+          if (filter.maxSec !== "" && filter.maxSec != null && sec > Number(filter.maxSec)) return false;
+          continue;
+        }
+        if (filter.type === "dateRange") {
+          const d = parseDateLike(cellValue);
+          if (!d) return false;
+          if (filter.from) {
+            const from = new Date(filter.from + "T00:00:00");
+            if (d < from) return false;
+          }
+          if (filter.to) {
+            const to = new Date(filter.to + "T23:59:59");
+            if (d > to) return false;
+          }
+          continue;
+        }
+      }
+      // Global search — substring match across any cell value
+      if (globalQ) {
+        const anyMatch = Object.values(row).some((v) => {
+          if (v === null || v === undefined) return false;
+          return String(v).toLowerCase().includes(globalQ);
+        });
+        if (!anyMatch) return false;
+      }
+      return true;
+    });
+  }, [data, filters, globalQuery, isServerSideFiltering]);
+
+  // Sort filtered data
+  // For server-side sorting, skip client-side sorting (data is already sorted by server)
+  const sortedData = useMemo(() => {
+    if (isServerSideSorting) {
+      // Server-side sorting: data is already sorted, use as-is
+      return filteredData;
+    }
+    
+    // Client-side sorting: sort the filtered data locally
+    if (!sortField) return filteredData;
+    
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[sortField];
+      const bVal = b[sortField];
+      
+      // Handle null/undefined
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+      
+      // Handle numbers
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
+      }
+      
+      // Handle strings
+      const aStr = String(aVal).toLowerCase();
+      const bStr = String(bVal).toLowerCase();
+      
+      if (sortDirection === "asc") {
+        return aStr.localeCompare(bStr);
+      } else {
+        return bStr.localeCompare(aStr);
+      }
+    });
+  }, [filteredData, sortField, sortDirection, isServerSideSorting]);
+
+  // Paginate sorted data
+  // For server-side pagination, use data as-is (already paginated by server)
+  // For client-side pagination, paginate the sorted data
+  const paginatedData = useMemo(() => {
+    if (isServerSidePagination) {
+      // Server-side: data is already paginated, use as-is
+      // Use data directly (not sortedData) since server handles sorting
+      return data || [];
+    } else {
+      // Client-side: paginate the sorted data
+      const startIndex = (page - 1) * pageSize;
+      const endIndex = startIndex + pageSize;
+      return sortedData.slice(startIndex, endIndex);
+    }
+  }, [data, sortedData, page, pageSize, isServerSidePagination]);
+
+  // Handle header click for sorting
+  const handleSort = (field) => {
+    if (isServerSideSorting && onSort) {
+      // Server-side sorting: call parent's onSort callback
+      onSort(field);
+      // Reset to first page on sort (if pagination is controlled)
+      if (onPageChange) {
+        onPageChange(1);
+      } else {
+        setInternalPage(1);
+      }
+    } else {
+      // Client-side sorting: update internal state
+      if (internalSortField === field) {
+        setInternalSortDirection(internalSortDirection === "asc" ? "desc" : "asc");
+      } else {
+        setInternalSortField(field);
+        setInternalSortDirection("asc");
+      }
+      setPage(1); // Reset to first page on sort
+    }
+  };
+
+  // Legacy handler kept for any callers that still pass a string value;
+  // it splits on whitespace and treats the resulting tokens as the selected values.
+  const handleFilterChange = (id, value) => {
+    const tokens = (value || "")
+      .split(/\s+/)
+      .map((t) => t.trim())
+      .filter(Boolean);
+    setColumnFilter(id, tokens);
+  };
+
+  // Surface max columns limit error via callback, throttled to once per 3s
+  const showMaxColumnsError = (message) => {
+    if (toastTimeoutRef.current) return;
+    if (typeof onMaxColumnsError === 'function') {
+      onMaxColumnsError(message);
+    }
+    toastTimeoutRef.current = setTimeout(() => {
+      toastTimeoutRef.current = null;
+    }, 3000);
+  };
+
+  // Save columns to localStorage
+  const saveColumnsToStorage = useCallback((cols) => {
+    if (typeof window !== 'undefined' && storageKey && cols.length > 0 && userHasManuallyChangedColumns.current) {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(cols));
+        if (manualChangeFlagKey) {
+          localStorage.setItem(manualChangeFlagKey, 'true');
+        }
+      } catch (error) {
+        console.warn('Failed to save columns to localStorage:', error);
+      }
+    }
+  }, [storageKey, manualChangeFlagKey]);
+
+  // Toggle column selection with smooth transitions
+  const toggleColumnSelection = (columnId) => {
+    // Prevent toggling the action column visibility; it should always be shown
+    if (columnId === ACTION_COLUMN_ID) {
+      return;
+    }
+    // Mark that user has manually changed columns
+    userHasManuallyChangedColumns.current = true;
+    
+    setVisibleColumns(prev => {
+      // Unselecting: show unchecked state first, then remove from selected list
+      if (prev.includes(columnId)) {
+        // Clear any pending throttling timeout when unselecting
+        if (toastTimeoutRef.current) {
+          clearTimeout(toastTimeoutRef.current);
+          toastTimeoutRef.current = null;
+        }
+        // toast.dismiss("max-columns-toast");
+
+        // Don't allow deselecting all columns
+        if (prev.length === 1) return prev;
+        
+        // Show unchecked state first, then remove after delay
+        setPendingDeselection(prevSet => new Set(prevSet).add(columnId));
+        setTimeout(() => {
+          setVisibleColumns(current => {
+            const updated = current.filter(id => id !== columnId);
+            const constrained = enforceActionPosition(updated);
+            // Save immediately after user change
+            saveColumnsToStorage(constrained);
+            return constrained;
+          });
+          setPendingDeselection(prevSet => {
+            const next = new Set(prevSet);
+            next.delete(columnId);
+            return next;
+          });
+        }, 200); // 200ms delay for smooth transition
+        
+        return prev; // Return current state, actual removal happens in setTimeout
+      }
+      
+      // Selecting: check if we're at the maximum limit
+      if (prev.length >= MAX_COLUMNS) {
+        showMaxColumnsError("Maximum 9 column selection allowed");
+        return prev;
+      }
+      
+      // Show checked state first, then add to selected list after delay
+      setPendingSelection(prevSet => new Set(prevSet).add(columnId));
+      setTimeout(() => {
+        setVisibleColumns(current => {
+          const updated = !current.includes(columnId) ? [...current, columnId] : current;
+          const constrained = enforceActionPosition(updated);
+          // Save immediately after user change
+          saveColumnsToStorage(constrained);
+          return constrained;
+        });
+        setPendingSelection(prevSet => {
+          const next = new Set(prevSet);
+          next.delete(columnId);
+          return next;
+        });
+      }, 200); // 200ms delay for smooth transition
+      
+      return prev; // Return current state, actual addition happens in setTimeout
+    });
+  };
+
+  // Column drag handlers for reordering in dropdown
+  const handleColumnDragStart = (e, index) => {
+    if (visibleColumns[index] === ACTION_COLUMN_ID) return;
+    setDraggedColumnIndex(index);
+  };
+
+  const handleColumnDragEnd = () => {
+    setDraggedColumnIndex(null);
+    setDragOverColumnIndex(null);
+  };
+
+  const handleColumnDragOver = (e, index) => {
+    e.preventDefault();
+    if (draggedColumnIndex !== null && draggedColumnIndex !== index) {
+      setDragOverColumnIndex(index);
+    }
+  };
+
+  const handleColumnDragLeave = () => {
+    setDragOverColumnIndex(null);
+  };
+
+  const handleColumnDrop = (e, dropIndex) => {
+    e.preventDefault();
+    if (
+      draggedColumnIndex !== null &&
+      draggedColumnIndex !== dropIndex &&
+      visibleColumns[dropIndex] !== ACTION_COLUMN_ID &&
+      visibleColumns[draggedColumnIndex] !== ACTION_COLUMN_ID
+    ) {
+      // Mark that user has manually changed columns
+      userHasManuallyChangedColumns.current = true;
+      
+      setVisibleColumns(prev => {
+        const reordered = arrayMove(prev, draggedColumnIndex, dropIndex);
+        const constrained = enforceActionPosition(reordered);
+        // Save immediately after drag
+        saveColumnsToStorage(constrained);
+        return constrained;
+      });
+    }
+    setDraggedColumnIndex(null);
+    setDragOverColumnIndex(null);
+  };
+
+  // Update columnOrder when visibleColumns changes
+  useEffect(() => {
+    setColumnOrder(prev => {
+      // Keep visible columns in their current order, append any new ones
+      const visibleOrder = visibleColumns.filter(id => prev.includes(id));
+      const newColumns = visibleColumns.filter(id => !prev.includes(id));
+      const hiddenColumns = prev.filter(id => !visibleColumns.includes(id));
+      return [...visibleOrder, ...newColumns, ...hiddenColumns];
+    });
+  }, [visibleColumns]);
+
+  // Save to localStorage whenever visibleColumns changes (only if user has manually changed columns)
+  useEffect(() => {
+    if (typeof window !== 'undefined' && storageKey && visibleColumns.length > 0 && userHasManuallyChangedColumns.current) {
+      try {
+        const constrained = enforceActionPosition(visibleColumns);
+        localStorage.setItem(storageKey, JSON.stringify(constrained));
+        if (manualChangeFlagKey) {
+          localStorage.setItem(manualChangeFlagKey, 'true');
+        }
+      } catch (error) {
+        console.warn('Failed to save columns to localStorage:', error);
+      }
+    }
+  }, [visibleColumns, storageKey, manualChangeFlagKey]);
+
+  // Initialize visibleColumns when columns become available (if not already initialized)
+  useEffect(() => {
+    // Only initialize if columns are available and visibleColumns is empty
+    if (columns.length > 0 && visibleColumns.length === 0) {
+      // Check if user has manually changed columns before
+      if (typeof window !== 'undefined' && tableId) {
+        try {
+          const hasManualChange = localStorage.getItem(`dataTable_manual_change_${tableId}:${userId}`) === 'true';
+          if (hasManualChange) {
+            const saved = localStorage.getItem(`dataTable_columns_${tableId}:${userId}`);
+            if (saved) {
+              const savedColumns = JSON.parse(saved);
+              if (Array.isArray(savedColumns) && savedColumns.length > 0) {
+                // Validate saved columns exist in current columns
+                const validColumns = savedColumns.filter(colId => 
+                  columns.some(col => (col.id || col.key) === colId)
+                );
+                if (validColumns.length > 0) {
+                  userHasManuallyChangedColumns.current = true;
+                  setVisibleColumns(validColumns.slice(0, MAX_COLUMNS));
+                  return;
+                }
+              }
+            }
+          }
+        } catch (error) {
+          console.warn('Failed to load saved columns from localStorage:', error);
+        }
+      }
+      
+      // Default to first 9 columns if no saved columns
+      const columnIds = columns.map((col) => col.id || col.key);
+      setVisibleColumns(enforceActionPosition(columnIds.slice(0, MAX_COLUMNS)));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, tableId, userId, enforceActionPosition]);
+
+  // Get ordered columns based on visibleColumns and columnOrder
+  const orderedColumns = useMemo(() => {
+    // Filter to only show visible columns, maintaining their order
+    const cols = visibleColumns
+      .map((id) => columns.find((col) => getColumnId(col) === id))
+      .filter(Boolean);
+    return enforceActionPosition(cols.map(getColumnId))
+      .map((id) => columns.find((col) => getColumnId(col) === id))
+      .filter(Boolean);
+  }, [columns, visibleColumns]);
+
+  // Check if any columns are filterable
+  const hasFilterableColumns = useMemo(() => {
+    return orderedColumns.some((col) => col.filterable === true);
+  }, [orderedColumns]);
+
+  // Column dropdown position management
+  useEffect(() => {
+    if (!isColumnDropdownOpen || !columnDropdownRef.current) return;
+
+    const updatePosition = () => {
+      if (columnDropdownRef.current) {
+        const rect = columnDropdownRef.current.getBoundingClientRect();
+        // For position: fixed, use viewport coordinates directly (no scroll offset needed)
+        // This ensures the dropdown scrolls with the button
+        // Connect menu directly to button (no gap)
+        setColumnDropdownPosition({
+          top: rect.bottom, // No gap - connect directly
+          left: rect.left,
+          width: Math.max(rect.width || 220, 220),
+        });
+      }
+    };
+
+    updatePosition();
+    
+    // Use simple scroll listeners like Dropdown component for smooth scrolling
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isColumnDropdownOpen]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        isColumnDropdownOpen &&
+        columnDropdownRef.current &&
+        !columnDropdownRef.current.contains(event.target) &&
+        columnDropdownMenuRef.current &&
+        !columnDropdownMenuRef.current.contains(event.target)
+      ) {
+        setIsColumnDropdownOpen(false);
+      }
+    };
+
+    if (isColumnDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isColumnDropdownOpen]);
+
+  // Display text for dropdown button
+  const displayText = visibleColumns.length === 1 
+    ? columns.find(col => (col.id || col.key) === visibleColumns[0])?.label || "1 selected"
+    : `${visibleColumns.length} selected`;
+
+  // Sortable header cell component
+  function SortableHeader({ column, isHeaderRow = true }) {
+    const columnId = getColumnId(column);
+    const isActionColumn = columnId === ACTION_COLUMN_ID;
+    const resolvedWidth = getResolvedColumnWidth(columnId, column.width);
+    const [isHeaderHovered, setIsHeaderHovered] = useState(false);
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging,
+    } = useSortable({ id: columnId });
+
+    const style = {
+      transform: CSS.Transform.toString(transform),
+      transition,
+      opacity: isDragging ? 0.5 : 1,
+      width: resolvedWidth,
+      minWidth: resolvedWidth,
+    };
+
+    // For server-side sorting, check if the sortField matches this column
+    // Handle reverse mapping (e.g., "csat_score" matches "evaluation.csat_score")
+    let isSorted = false;
+    if (isServerSideSorting && sortFields.length > 0) {
+      const sortFieldFromProps = sortFields[0][0];
+      // Direct match
+      if (sortFieldFromProps === columnId) {
+        isSorted = true;
+      }
+      // Reverse mapping: "csat_score" matches "evaluation.csat_score"
+      else if (sortFieldFromProps === "csat_score" && columnId === "evaluation.csat_score") {
+        isSorted = true;
+      }
+    } else {
+      // Client-side sorting: direct comparison
+      isSorted = sortField === columnId;
+    }
+    
+    const isAsc = sortDirection === "asc";
+    const isFilterable = column.filterable === true; // Only filterable if explicitly set to true
+
+    // Filter row
+    if (!isHeaderRow) {
+      return (
+        <th
+          style={{
+            width: resolvedWidth,
+            minWidth: resolvedWidth,
+            backgroundColor: "var(--primary-foreground)",
+          }}
+          className="sticky top-[57px] z-10 border-b border-[var(--border-strong)] px-4 py-2 text-left"
+        >
+          {isFilterable ? (
+            <div className="relative">
+              <Filter
+                size={12}
+                className="absolute left-2 top-1/2 -translate-y-1/2 text-[var(--text-faint)] pointer-events-none"
+              />
+              <input
+                type="text"
+                placeholder="Filter..."
+                value={filters[columnId] || ""}
+                onChange={(e) => {
+                  e.stopPropagation();
+                  handleFilterChange(columnId, e.target.value);
+                }}
+                onKeyDown={(e) => e.stopPropagation()}
+                onMouseDown={(e) => e.stopPropagation()}
+                className="w-full pl-7 pr-2 py-1.5 text-xs border border-[var(--border)] rounded text-[var(--text-ink)] placeholder:text-[var(--text-faint)] focus:outline-none focus:border-[var(--border-hover)] focus:ring-1 focus:ring-[var(--focus)] transition-colors"
+                style={{ fontFamily: 'var(--font-sans)', backgroundColor: "var(--primary-foreground)" }}
+                autoComplete="off"
+              />
+            </div>
+          ) : (
+            <div className="h-[34px]"></div>
+          )}
+        </th>
+      );
+    }
+
+    // Header row
+    const filterPopoverOpen = openFilterColumnId === columnId;
+    const hasActiveFilter = isFilterActive(filters[columnId]);
+    const showSortBtn = column.sortable !== false && (isHeaderHovered || isSorted);
+    const showFilterBtn = column.filterable !== false && !isActionColumn && (isHeaderHovered || filterPopoverOpen || hasActiveFilter);
+    return (
+      <th
+        ref={setNodeRef}
+        onMouseEnter={() => setIsHeaderHovered(true)}
+        onMouseLeave={() => setIsHeaderHovered(false)}
+        style={{
+          ...style,
+          padding: '0 12px',
+          height: 36,
+          textAlign: isActionColumn ? 'center' : 'left',
+          fontWeight: 500,
+          fontSize: '14px',
+          letterSpacing: 'normal',
+          textTransform: 'none',
+          color: '#0b0b0b',
+          cursor: column.sortable !== false ? 'pointer' : 'default',
+          width: resolvedWidth,
+          borderRight: 'none',
+          userSelect: 'none',
+          background: isHeaderHovered || filterPopoverOpen ? '#e6e6e6' : '#f2f2f0',
+          borderBottom: '1px solid #e6e6e6',
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          fontFamily: 'var(--font-sans)',
+          transition: 'background 100ms ease',
+        }}
+      >
+        {/* Left edge separator (1px × 16px, vertically centered) */}
+        {!isActionColumn && (
+          <span
+            aria-hidden="true"
+            style={{
+              position: "absolute",
+              left: 0,
+              top: "50%",
+              transform: "translateY(-50%)",
+              width: 1,
+              height: 16,
+              background: "#e6e6e6",
+              pointerEvents: "none",
+            }}
+          />
+        )}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            justifyContent: isActionColumn ? 'center' : 'flex-start',
+            position: 'relative',
+            minHeight: 20,
+          }}
+        >
+          {!isActionColumn && (
+            <div
+              {...attributes}
+              {...listeners}
+              style={{ cursor: 'grab', color: 'rgba(11, 11, 11, 0.36)', display: 'inline-flex', alignItems: 'center' }}
+            >
+              <GripVertical size={14} />
+            </div>
+          )}
+          <span
+            onClick={() => column.sortable !== false && handleSort(columnId)}
+            style={{ cursor: column.sortable !== false ? 'pointer' : 'default', flex: 1, lineHeight: '20px' }}
+          >
+            {column.label}
+          </span>
+          {showSortBtn && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); handleSort(columnId); }}
+              title="Sort"
+              style={{
+                background: "transparent",
+                border: "none",
+                padding: 4,
+                borderRadius: 4,
+                cursor: "pointer",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: isSorted ? "#0b0b0b" : "rgba(11, 11, 11, 0.55)",
+              }}
+            >
+              {isSorted
+                ? (isAsc ? <ArrowUp size={14} strokeWidth={1.75} /> : <ArrowDown size={14} strokeWidth={1.75} />)
+                : <ArrowUpDown size={14} strokeWidth={1.75} />}
+            </button>
+          )}
+          {showFilterBtn && (
+            <button
+              type="button"
+              ref={(el) => { filterIconRefs.current[columnId] = el; }}
+              onClick={(e) => { e.stopPropagation(); openFilterPopoverFor(columnId, e.currentTarget); }}
+              title="Filter"
+              style={{
+                position: "relative",
+                background: filterPopoverOpen || hasActiveFilter ? "#D8D8D8" : "transparent",
+                border: "none",
+                padding: 4,
+                borderRadius: 4,
+                cursor: "pointer",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: hasActiveFilter ? "#0b0b0b" : "rgba(11, 11, 11, 0.7)",
+              }}
+            >
+              <ListFilter size={14} strokeWidth={1.75} />
+              {hasActiveFilter && (
+                <span
+                  aria-hidden="true"
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    background: "#0B0B0B",
+                  }}
+                />
+              )}
+            </button>
+          )}
+        </div>
+        {/* Right edge separator (1px × 16px, vertically centered, on the cell's right edge) */}
+        {!isActionColumn && (
+          <span
+            aria-hidden="true"
+            style={{
+              position: "absolute",
+              right: 0,
+              top: "50%",
+              transform: "translateY(-50%)",
+              width: 1,
+              height: 16,
+              background: "#e6e6e6",
+              pointerEvents: "none",
+            }}
+          />
+        )}
+        {/* Resize handle — sits right at the cell's right edge, away from the filter icon */}
+        {!isActionColumn && (
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label={`Resize ${column.label || columnId} column`}
+            title="Drag to resize column"
+            onMouseDown={(e) => startResize(e, column, resolvedWidth)}
+            onClick={(e) => e.stopPropagation()}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = "rgba(30, 33, 37, 0.18)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = "transparent";
+            }}
+            style={{
+              position: "absolute",
+              top: 0,
+              right: -2,
+              width: 4,
+              height: "100%",
+              cursor: "col-resize",
+              zIndex: 4,
+              background: "transparent",
+            }}
+          />
+        )}
+      </th>
+    );
+  }
+
+  // Drag overlay for column header
+  const activeColumn = activeId ? columns.find((col) => getColumnId(col) === activeId) : null;
+
+  // Column dropdown menu
+  const renderColumnRow = ({ col, columnId, isSelected, draggable, isAction, actualIndex }) => {
+    const isDragging = draggable && draggedColumnIndex === actualIndex;
+    const isDragOver = draggable && dragOverColumnIndex === actualIndex && draggedColumnIndex !== null && draggedColumnIndex !== actualIndex;
+    const isPending = isSelected ? pendingDeselection.has(columnId) : pendingSelection.has(columnId);
+    // Visual checked state: selected and not pending deselect, OR unselected and pending select
+    const checked = isSelected ? !pendingDeselection.has(columnId) : pendingSelection.has(columnId);
+    return (
+      <div
+        draggable={draggable}
+        onDragStart={draggable ? (e) => handleColumnDragStart(e, actualIndex) : undefined}
+        onDragEnd={draggable ? handleColumnDragEnd : undefined}
+        onDragOver={draggable ? (e) => handleColumnDragOver(e, actualIndex) : undefined}
+        onDragLeave={draggable ? handleColumnDragLeave : undefined}
+        onDrop={draggable ? (e) => handleColumnDrop(e, actualIndex) : undefined}
+        onClick={() => { if (!isAction) toggleColumnSelection(columnId); }}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "2px 0",
+          cursor: isAction ? "default" : (draggable ? "grab" : "pointer"),
+          opacity: isDragging ? 0.5 : 1,
+          background: isDragOver ? "#F2F2F0" : "transparent",
+          borderRadius: 6,
+        }}
+      >
+        {/* Drag handle — visible only for selected (sortable) items */}
+        <span
+          style={{
+            width: 16,
+            height: 16,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#989898",
+            visibility: draggable ? "visible" : "hidden",
+            flexShrink: 0,
+          }}
+        >
+          <GripVertical size={14} strokeWidth={1.75} />
+        </span>
+        {/* Checkbox 20x20 */}
+        <span
+          style={{
+            width: 20,
+            height: 20,
+            borderRadius: 4,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: checked ? "#0B0B0B" : "#FFFFFF",
+            border: `1px solid ${checked ? "#0B0B0B" : "#676767"}`,
+            flexShrink: 0,
+            marginLeft: 8,
+          }}
+        >
+          {checked && <Check size={14} color="#FFFFFF" strokeWidth={3} />}
+        </span>
+        <span
+          style={{
+            flex: 1,
+            fontFamily: "var(--font-sans)",
+            fontSize: 14,
+            lineHeight: "20px",
+            color: "#0B0B0B",
+            marginLeft: 8,
+          }}
+        >
+          {col.label}
+        </span>
+      </div>
+    );
+  };
+
+  const columnDropdownMenu = isColumnDropdownOpen ? (
+    <div
+      ref={columnDropdownMenuRef}
+      style={{
+        position: "fixed",
+        top: `${columnDropdownPosition.top}px`,
+        left: `${columnDropdownPosition.left}px`,
+        width: 217,
+        maxHeight: 400,
+        overflow: "auto",
+        zIndex: 49,
+        background: "#FFFFFF",
+        border: "1px solid #E6E6E6",
+        borderRadius: 10,
+        padding: 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        fontFamily: "var(--font-sans)",
+        boxShadow: "0 8px 24px rgba(11, 11, 11, 0.08)",
+      }}
+    >
+      {/* Selected columns — draggable */}
+      {visibleColumns.map((columnId, index) => {
+        const col = columns.find((c) => getColumnId(c) === columnId);
+        if (!col) return null;
+        const isAction = columnId === ACTION_COLUMN_ID;
+        return (
+          <React.Fragment key={`selected-${columnId}-${index}`}>
+            {renderColumnRow({
+              col,
+              columnId,
+              isSelected: true,
+              draggable: !isAction,
+              isAction,
+              actualIndex: index,
+            })}
+          </React.Fragment>
+        );
+      })}
+
+      {/* Unselected columns */}
+      {columns
+        .filter((col) => !visibleColumns.includes(getColumnId(col)))
+        .map((col) => {
+          const columnId = getColumnId(col);
+          return (
+            <React.Fragment key={`unselected-${columnId}`}>
+              {renderColumnRow({
+                col,
+                columnId,
+                isSelected: false,
+                draggable: false,
+                isAction: false,
+                actualIndex: -1,
+              })}
+            </React.Fragment>
+          );
+        })}
+
+      {/* Footer — divider + Reset + Apply */}
+      <div style={{ height: 1, background: "#D9D9D9", margin: "0 -12px" }} />
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          height: 30,
+        }}
+      >
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Restore visible columns to the initial snapshot, drop staged toggles
+            const snapshot = initialVisibleColumnsRef.current
+              ? [...initialVisibleColumnsRef.current]
+              : columns.map(getColumnId).slice(0, MAX_COLUMNS);
+            userHasManuallyChangedColumns.current = false;
+            setVisibleColumns(enforceActionPosition(snapshot));
+            setPendingSelection(new Set());
+            setPendingDeselection(new Set());
+            if (typeof window !== "undefined" && storageKey) {
+              try { localStorage.removeItem(storageKey); } catch (_) {}
+            }
+          }}
+          style={{
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            cursor: "pointer",
+            fontFamily: "var(--font-sans)",
+            fontSize: 14,
+            fontWeight: 500,
+            color: "#323232",
+          }}
+        >
+          Reset
+        </button>
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsColumnDropdownOpen(false);
+          }}
+          style={{
+            background: "#2E3236",
+            color: "#FFFFFF",
+            border: "none",
+            borderRadius: 10,
+            height: 28,
+            padding: "0 14px",
+            fontFamily: "var(--font-sans)",
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+          }}
+        >
+          Apply
+        </button>
+      </div>
+    </div>
+  ) : null;
+
+  const openFilterColumn = openFilterColumnId
+    ? columns.find((c) => getColumnId(c) === openFilterColumnId)
+    : null;
+  const filterPopoverNode = openFilterColumn
+    ? (
+      <FilterValuePicker
+        key={openFilterColumnId}
+        column={openFilterColumn}
+        columnId={openFilterColumnId}
+        filterType={getColumnFilterType(openFilterColumnId)}
+        position={filterPopoverPosition}
+        popoverRef={filterPopoverRef}
+        distinctValues={getDistinctValuesForColumn(openFilterColumnId)}
+        initialValue={filters[openFilterColumnId]}
+        onApply={(value) => {
+          setColumnFilter(openFilterColumnId, value);
+          setOpenFilterColumnId(null);
+        }}
+        onCancel={() => setOpenFilterColumnId(null)}
+      />
+    )
+    : null;
+
+  return (
+    <div className="w-full" style={{top:'130px', position: 'sticky', zIndex: 35, backgroundColor: "var(--primary-foreground)"}}>
+      {/* Filter popover (anchored under the active column header) */}
+      {filterPopoverNode && createPortal(filterPopoverNode, document.body)}
+      {/* Toolbar: Columns dropdown + Search */}
+      {columns.length > 0 && (
+        <div
+          className="pt-2 pb-1"
+          style={{
+            position: "sticky",
+            zIndex: 35,
+            backgroundColor: "var(--primary-foreground)",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 16,
+              flexWrap: "wrap",
+            }}
+          >
+            {filtersConfig && (
+              <div style={{ marginRight: "auto" }}>
+                <DataTableFilters
+                  dateRangePicker={filtersConfig.dateRangePicker}
+                  onWeekToDate={filtersConfig.onWeekToDate}
+                  exportConfig={filtersConfig.exportConfig}
+                  filterChipsConfig={filtersConfig.filterChipsConfig}
+                  trailingActions={filtersConfig.trailingActions}
+                />
+              </div>
+            )}
+
+            {/* Columns button — compact */}
+            <div style={{ position: "relative" }}>
+              <button
+                ref={columnDropdownRef}
+                type="button"
+                onClick={() => setIsColumnDropdownOpen(!isColumnDropdownOpen)}
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 10,
+                  height: 32,
+                  padding: "0 16px",
+                  background: "#FFFFFF",
+                  border: "1px solid #D9D9D9",
+                  borderRadius: 10,
+                  cursor: "pointer",
+                  fontFamily: "var(--font-sans)",
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: "#2E3236",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                <Settings2 size={20} strokeWidth={1.75} />
+                Columns
+              </button>
+              {isColumnDropdownOpen && createPortal(columnDropdownMenu, document.body)}
+            </div>
+
+            {/* Search input */}
+            <div
+              style={{
+                background: "#D8D8D8",
+                width: 260,
+                height: 32,
+                borderRadius: 11,
+                padding: 1,
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <div
+                style={{
+                  background: "#FFFFFF",
+                  flex: 1,
+                  height: 30,
+                  borderRadius: 10,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  padding: "0 8px",
+                }}
+              >
+                <Search size={18} color="#989898" strokeWidth={1.75} />
+                <input
+                  type="text"
+                  placeholder="Search"
+                  value={globalQuery}
+                  onChange={(e) => {
+                    setGlobalQuery(e.target.value);
+                    if (onPageChange) onPageChange(1); else setInternalPage(1);
+                  }}
+                  style={{
+                    flex: 1,
+                    border: "none",
+                    outline: "none",
+                    background: "transparent",
+                    fontFamily: "var(--font-sans)",
+                    fontSize: 14,
+                    color: "#0B0B0B",
+                    minWidth: 0,
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* Filter chip strip — appears below the toolbar when any filter is active */}
+      {Object.keys(filters).length > 0 && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            flexWrap: "wrap",
+            padding: "8px 0",
+          }}
+        >
+          {Object.entries(filters).map(([colId, filter]) => {
+            const col = columns.find((c) => getColumnId(c) === colId);
+            if (!col || !isFilterActive(filter)) return null;
+            const first = chipSummary(filter);
+            const extra = chipExtraCount(filter);
+            const extraValues = chipExtraValues(filter);
+            return (
+              <span
+                key={`chip-${colId}`}
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 8,
+                  height: 28,
+                  padding: "0 12px",
+                  borderRadius: 20,
+                  border: "1px solid #B2B2B0",
+                  background: "#F2F2F0",
+                  fontFamily: "var(--font-sans)",
+                  fontSize: 14,
+                  lineHeight: "20px",
+                  color: "#0B0B0B",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                <span>
+                  <span style={{ color: "#676767" }}>{col.label}: </span>
+                  <span>{first}</span>
+                </span>
+                {extra > 0 && (
+                  <ExtraValuesBadge count={extra} values={extraValues} />
+                )}
+                <button
+                  type="button"
+                  onClick={() => setColumnFilter(colId, [])}
+                  aria-label={`Remove ${col.label} filter`}
+                  style={{
+                    background: "transparent",
+                    border: "none",
+                    padding: 0,
+                    cursor: "pointer",
+                    display: "inline-flex",
+                    color: "#676767",
+                  }}
+                >
+                  <X size={14} strokeWidth={2} />
+                </button>
+              </span>
+            );
+          })}
+          <button
+            type="button"
+            onClick={clearAllFilters}
+            style={{
+              marginLeft: "auto",
+              background: "transparent",
+              border: "none",
+              padding: "0 4px",
+              cursor: "pointer",
+              fontFamily: "var(--font-sans)",
+              fontSize: 14,
+              fontWeight: 500,
+              color: "#323232",
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      )}
+
+      {/* Only render table if we have columns */}
+      {columns.length > 0 && orderedColumns.length > 0 ? (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          <div style={{
+            borderRadius: 8,
+            border: '1px solid #E6E6E6',
+            overflow: 'hidden',
+            background: 'var(--primary-foreground)',
+            position: 'relative',
+            top: '0.5rem',
+          }}>
+            {/* Loading overlay */}
+            {isLoading && (
+              <div style={{
+                position: 'absolute',
+                inset: 0,
+                background: 'rgba(255, 255, 255, 0.9)',
+                backdropFilter: 'blur(2px)',
+                zIndex: 20,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '14px'
+              }}>
+                <div style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: '12px'
+                }}>
+                  <p style={{
+                    fontSize: '13px',
+                    color: 'rgba(30, 33, 37, 0.6)',
+                    margin: 0
+                  }}>Loading...</p>
+                   <Image
+                      src="/BrandLoading.gif"
+                      alt="Loading"
+                      width={50}
+                      height={50}
+                      unoptimized
+                      className="mt-1"
+                    />
+                </div>
+              </div>
+            )}
+            <div className="overflow-x-auto custom-thin-scrollbar-hidden" ref={tableRef} style={{ maxHeight: '500px', overflowY: 'auto', position: 'relative', zIndex: 1 }}>
+              <table style={{
+                width: 'auto',
+                minWidth: '100%',
+                borderCollapse: 'collapse',
+                fontSize: '13px',
+                fontFamily: 'var(--font-sans)'
+              }}>
+                <thead>
+                  {/* Header row with column labels */}
+                  <tr>
+                    <SortableContext
+                      items={visibleColumns}
+                      strategy={horizontalListSortingStrategy}
+                    >
+                      {orderedColumns.map((column) => (
+                        <SortableHeader key={`header-${getColumnId(column)}`} column={column} isHeaderRow={true} />
+                      ))}
+                    </SortableContext>
+                  </tr>
+              </thead>
+              <tbody>
+                {!isLoading && paginatedData.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={orderedColumns.length}
+                            style={{
+                              padding: '32px',
+                              textAlign: 'center',
+                              color: 'rgba(30, 33, 37, 0.42)',
+                              fontSize: '12px',
+                              fontFamily: 'var(--font-sans)',
+                            }}
+                    >
+                      No results found
+                    </td>
+                  </tr>
+                ) : !isLoading && paginatedData.length > 0 ? (
+                  paginatedData.map((row, rowIndex) => (
+                    <tr
+                      key={rowIndex}
+                      data-row-id={row.id || rowIndex}
+                      style={{
+                        borderBottom: '1px solid #e6e6e6',
+                        cursor: onRowClick ? 'pointer' : 'default',
+                        transition: 'background 0.15s ease'
+                      }}
+                      onClick={onRowClick ? (e) => {
+                        e.stopPropagation();
+                        onRowClick(row, rowIndex);
+                      } : undefined}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.background = 'rgba(231, 212, 162, 0.12)';
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.background = 'transparent';
+                      }}
+                    >
+                      {orderedColumns.map((column) => {
+                        const columnId = getColumnId(column);
+                        const resolvedWidth = getResolvedColumnWidth(columnId, column.width);
+                        const cellValue = row[columnId];
+                        const renderValue = column.render
+                          ? column.render(cellValue, row)
+                          : cellValue;
+
+                        // Only show tooltip for string values that might be truncated
+                        const hasWidthConstraint = resolvedWidth && resolvedWidth !== 'auto';
+                        const isStringValue = typeof renderValue === 'string' && renderValue.trim() !== '';
+                        const shouldUseTruncatedCell = hasWidthConstraint && isStringValue;
+
+                        const displayValue = shouldUseTruncatedCell ? (
+                          <TruncatedCell content={renderValue}>
+                            {renderValue}
+                          </TruncatedCell>
+                        ) : renderValue;
+
+                        return (
+                          <td
+                            key={columnId}
+                            style={{
+                              padding: '10px 14px',
+                              color: 'rgba(30, 33, 37, 0.78)',
+                              fontSize: '13px',
+                              borderRight: '1px solid rgba(52, 58, 64, 0.04)',
+                              width: resolvedWidth,
+                              fontFamily: 'var(--font-sans)',
+                              ...(shouldUseTruncatedCell && { maxWidth: resolvedWidth || '200px' }),
+                            }}
+                          >
+                            {displayValue}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  ))
+                ) : null}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+          <DragOverlay>
+            {activeColumn ? (
+              <div className="bg-[var(--paper-high)] border border-[var(--border-strong)] rounded px-4 py-2 shadow-lg">
+                <div className="flex items-center gap-2">
+                  <GripVertical size={14} className="text-[var(--text-faint)]" />
+                  <span className="text-sm font-semibold text-[var(--text-ink)]">
+                    {activeColumn.label}
+                  </span>
+                </div>
+              </div>
+            ) : null}
+          </DragOverlay>
+        </DndContext>
+      ) : null}
+
+      {(isServerSidePagination ? totalCount > 0 : sortedData.length > 0) && (
+        <Pagination
+          page={page}
+          pageSizeOptions={[5, 10, 20, 50, 100]}
+          pageSize={pageSize}
+          totalCount={isServerSidePagination ? totalCount : sortedData.length}
+          currentDataLength={paginatedData.length}
+          onPageChange={setPage}
+          onPageSizeChange={(newSize) => {
+            setPageSize(newSize);
+            setPage(1);
+          }}
+          showPageSizeSelector={true}
+        />
+      )}
+    </div>
+  );
+}
+