5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 61:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 62:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 69:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zod@^4.3.6"}] 50:["$","li","date-fns@^4.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns@^4.1.0"}]]}]}] 51:["$","li","clsx@^2.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx@^2.1.1"}]]}]}] 52:["$","li","tailwind-merge@^2.6.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge@^2.6.0"}]]}]}] 53:["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}] 54:["$","li","@radix-ui/react-slider@^1.2.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slider","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slider@^1.2.2"}]]}]}] 55:["$","li","@radix-ui/react-visually-hidden@^1.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-visually-hidden","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-visually-hidden@^1.1.1"}]]}]}] 56:["$","li","@radix-ui/react-slot@^1.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot@^1.1.1"}]]}]}] 57:["$","li","@dnd-kit/core@^6.3.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core@^6.3.1"}]]}]}] 58:["$","li","@dnd-kit/modifiers@^9.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fmodifiers","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/modifiers@^9.0.0"}]]}]}] 59:["$","li","@dnd-kit/sortable@^10.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/sortable@^10.0.0"}]]}]}] 5a:["$","li","@dnd-kit/utilities@^3.2.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/utilities@^3.2.2"}]]}]}] 5b:["$","li","@radix-ui/react-accordion@^1.2.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-accordion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-accordion@^1.2.2"}]]}]}] 5c:["$","$L5f",null,{"namespace":"@catalogs","registryDependencies":["button","input","input-group","kbd","table","checkbox","tooltip","dropdown-menu","separator","label","command","popover","skeleton","drawer","calendar","select"]}] 5d:["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.723 0.193 149.579)"}}],["$","p",null,{"children":"oklch(0.723 0.193 149.579)"}]]}]}]]}],["$","div","warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.705 0.187 47.602)"}}],["$","p",null,{"children":"oklch(0.705 0.187 47.602)"}]]}]}]]}],["$","div","error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.637 0.208 25.326)"}}],["$","p",null,{"children":"oklch(0.637 0.208 25.326)"}]]}]}]]}],["$","div","info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.685 0.148 237.321)"}}],["$","p",null,{"children":"oklch(0.685 0.148 237.321)"}]]}]}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.723 0.193 149.579)"}}],["$","p",null,{"children":"oklch(0.723 0.193 149.579)"}]]}]}]]}],["$","div","warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.705 0.187 47.602)"}}],["$","p",null,{"children":"oklch(0.705 0.187 47.602)"}]]}]}]]}],["$","div","error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":"$L63"}],"$L64"]}],"$L65"]}],"$L66"]}]}]]}],"$L67","$L68"]}]}]}] 6a:Tbe8,import type { SerializableDisplayConfig } from "@/lib/table-schema/types"; import type { JSX } from "react"; export type SearchParams = { [key: string]: string | string[] | undefined; }; export type DatePreset = { label: string; from: Date; to: Date; shortcut: string; }; // TODO: we could type the value(!) especially when using enums export type Option = { label: string; value: string | boolean | number | undefined; }; export type Input = { type: "input"; options?: Option[]; }; /** * What a checkbox filter hands its option component: the option, plus the * field's `options` as they are at render time — a field filled from facets * only has them then — for anything that depends on the siblings, like * alignment. It is the whole list, not the rows the search box leaves * visible, so what depends on it holds still while the user types. */ export type CheckboxOptionProps = Option & { options?: Option[] }; export type Checkbox = { type: "checkbox"; component?: (props: CheckboxOptionProps) => JSX.Element | null; options?: Option[]; }; export type Slider = { type: "slider"; min: number; max: number; // if options is undefined, faceted unique values from the data are used in the command options?: Option[]; unit?: string; }; export type Timerange = { type: "timerange"; options?: Option[]; // required for TS presets?: DatePreset[]; }; export type Base = { label: string; value: keyof TData; /** * Defines if the accordion in the filter bar is open by default */ defaultOpen?: boolean; /** * Defines if the command input is disabled for this field */ commandDisabled?: boolean; }; export type DataTableCheckboxFilterField = Base & Checkbox; export type DataTableSliderFilterField = Base & Slider; export type DataTableInputFilterField = Base & Input; export type DataTableTimerangeFilterField = Base & Timerange; export type DataTableFilterField = | DataTableCheckboxFilterField | DataTableSliderFilterField | DataTableInputFilterField | DataTableTimerangeFilterField; /** ----------------------------------------- */ export type SheetField> = { id: keyof TData; label: string; // FIXME: rethink that! I dont think we need this as there is no input type // REMINDER: readonly if we only want to copy the value (e.g. uuid) // TODO: we might have some values that are not in the data but can be computed type: "readonly" | "input" | "checkbox" | "slider" | "timerange"; display?: SerializableDisplayConfig; component?: ( // REMINDER: this is used to pass additional data like the `InfiniteQueryMeta` props: TData & { metadata?: { totalRows: number; filterRows: number; totalRowsFetched: number; } & TMeta; }, ) => JSX.Element | null | string; condition?: (props: TData) => boolean; className?: string; skeletonClassName?: string; }; 6b:T1309,// TODO: check if we can move to /data-table-filter-command/utils.ts import { ARRAY_DELIMITER, RANGE_DELIMITER, SLIDER_DELIMITER, } from "@/lib/delimiters"; import type { ColumnFiltersState } from "@tanstack/react-table"; import type { CSSProperties } from "react"; import { z } from "zod"; import type { DataTableFilterField } from "./types"; export function deserialize(schema: T) { const castToSchema = z.preprocess((val) => { if (typeof val !== "string") return val; return val .trim() .split(" ") .reduce( (prev, curr) => { // Split on the FIRST colon only — values legitimately contain colons // (urls, timestamps), and `split(":")` would truncate them. const separatorIndex = curr.indexOf(":"); // -1 = no separator, 0 = empty name; both are skipped if (separatorIndex < 1) return prev; const name = curr.slice(0, separatorIndex); const value = curr.slice(separatorIndex + 1); if (!value) return prev; prev[name] = value; return prev; }, {} as Record, ); }, schema); return (value: string) => castToSchema.safeParse(value); } export function serializeColumnFilters( columnFilters: ColumnFiltersState, filterFields?: DataTableFilterField[], ) { return columnFilters.reduce((prev, curr) => { const { type, commandDisabled } = filterFields?.find( (field) => curr.id === field.value, ) || { commandDisabled: true }; // if column filter is not found, disable the command by default if (commandDisabled) return prev; if (Array.isArray(curr.value)) { if (type === "slider") { return `${prev}${curr.id}:${curr.value.join(SLIDER_DELIMITER)} `; } if (type === "checkbox") { return `${prev}${curr.id}:${curr.value.join(ARRAY_DELIMITER)} `; } if (type === "timerange") { return `${prev}${curr.id}:${curr.value.join(RANGE_DELIMITER)} `; } } return `${prev}${curr.id}:${curr.value} `; }, ""); } /** * Whether another `fetchNextPage()` would actually return rows. * * `hasNextPage` alone is not enough for cursor pagination as this table's API * implements it: the response reports `nextCursor: null` only once a page comes * back *empty*, so after the final row React Query still believes there is a * next page. Left to `hasNextPage`, the button keeps offering "Load More" until * one wasted click fetches nothing and flips it to "No more data to load". * * When the server reports how many rows match the active filters, that count is * authoritative and lets us stop one page early. Consumers that do not pass * `filterRows` keep the plain `hasNextPage` behaviour. */ export function canLoadMore({ hasNextPage, filterRows, totalRowsFetched, }: { hasNextPage?: boolean; filterRows?: number; totalRowsFetched?: number; }): boolean { if (!hasNextPage) return false; if (filterRows === undefined || totalRowsFetched === undefined) return true; return totalRowsFetched < filterRows; } /** * The sizing bounds TanStack merges into every column def * (`getDefaultColumnSizingColumnDef` in table-core, not re-exported). */ const TANSTACK_SIZE_DEFAULTS = { minSize: 20, maxSize: Number.MAX_SAFE_INTEGER, }; /** * Derive a header/cell width style from the column's sizing mode: * * - resizable → track the measured size var (`clamp` is `"min"` on headers so * a drag can grow past the content, `"max"` on cells so `truncate` kicks in) * - locked (`maxSize` on the def) → pin the var as width, min and max * - floor only (`minSize` without `maxSize`) → flex, but never below the floor * - unsized → flex freely * * TanStack merges its own defaults (`minSize: 20`, `maxSize: MAX_SAFE_INTEGER`) * into every `columnDef`, so "not set" has to be read as "still the default". * Reading presence alone locked every column, and a table narrower than its * container then spread the surplus over all of them instead of letting the * one unsized column absorb it. */ export function columnSizeStyle( column: { getCanResize: () => boolean; columnDef: { minSize?: number; maxSize?: number }; }, sizeVar: string, clamp: "min" | "max", ): CSSProperties | undefined { const width = `var(${sizeVar})`; if (column.getCanResize()) { return clamp === "min" ? { width, minWidth: width } : { width, maxWidth: width }; } const { minSize, maxSize } = column.columnDef; const hasMax = maxSize !== undefined && maxSize !== TANSTACK_SIZE_DEFAULTS.maxSize; const hasMin = minSize !== undefined && minSize !== TANSTACK_SIZE_DEFAULTS.minSize; if (hasMax) return { width, minWidth: width, maxWidth: width }; if (hasMin) return { minWidth: width }; return undefined; } 6c:T668,/** * Props that are spelled differently on Radix and on Base UI. * * The blocks resolve `ui/tooltip`, `ui/hover-card` and friends from whichever * library the project was initialized with — `shadcn init -d` gives Base UI, * `init -b radix` gives Radix — so a literal prop that only one of them * accepts fails to typecheck on the other. Spreading a shared object sets the * name the installed primitive reads and leaves the other one inert: a JSX * spread is not excess-property checked, and these roots are context providers * that render no DOM element, so the unused key never reaches the page. * * Delete the key you don't need if you only ever install on one library. */ /** * Radix: `delayDuration`. Base UI: `delay`. * * Spread this on the `TooltipProvider`, never on the tooltip itself: Radix * reads its spelling on either, but Base UI's tooltip root has no delay prop * at all, so on the tooltip this would silently apply to Radix only. */ export const TOOLTIP_DELAY = { delayDuration: 100, delay: 100 }; /** * Radix: `disableHoverableContent`. Base UI: `disableHoverablePopup`. * * Both belong on the tooltip root. Radix also accepts its spelling on the * provider; Base UI does not, which is why this is separate from the delay. */ export const TOOLTIP_NOT_HOVERABLE = { disableHoverableContent: true, disableHoverablePopup: true, }; /** * Radix: `openDelay` / `closeDelay`. * * Base UI's preview card — what its `hover-card` is built on — takes neither, * so these apply on Radix and Base UI uses its own defaults. */ export const HOVER_CARD_DELAY = { openDelay: 0, closeDelay: 0 }; 6d:T11b7,import { DataTableFilterField } from "@/components/data-table/types"; import type { DataTableFeatures } from "@/lib/table/features"; import { ControlsProvider } from "@/providers/controls"; import type { ColumnDef, ColumnFiltersState, ColumnVisibilityState, PaginationState, ReactTable, RowData, RowSelectionState, SortingState, Table, } from "@tanstack/react-table"; import { createContext, useContext, useMemo } from "react"; import { DataTableStoreSync } from "./data-table-store-sync"; // REMINDER: read about how to move controlled state out of the useTable hook // https://github.com/TanStack/table/discussions/4005#discussioncomment-7303569 interface DataTableStateContextType { columnFilters: ColumnFiltersState; sorting: SortingState; rowSelection: RowSelectionState; columnOrder: string[]; columnVisibility: ColumnVisibilityState; pagination: PaginationState; enableColumnOrdering: boolean; } /** * `TFeatures` is pinned to `DataTableFeatures` rather than left generic. * * v9 declares it `in out` — invariant — so a component generic over `TFeatures` * cannot resolve any feature API (TypeScript cannot evaluate the feature-map * lookup behind an unresolved type parameter), and `Table` is not a * supertype it could fall back to. Pinning is the only typing that works, and * it costs nothing here: `features.ts` ships as part of the block, so a * consumer who registers extra features edits that one file and every type * below follows through `typeof dataTableFeatures`. */ interface DataTableBaseContextType< TData extends RowData = RowData, TValue = unknown, > { // `ReactTable`, not the core `Table`: `table.state` (v9's replacement for // `getState()`), `table.Subscribe` and `table.FlexRender` are added by // `useTable` and consumers of this context read them. table: ReactTable; filterFields: DataTableFilterField[]; columns: ColumnDef[]; isLoading?: boolean; totalRows?: number; filterRows?: number; getFacetedUniqueValues?: ( table: Table, columnId: string, ) => Map; getFacetedMinMaxValues?: ( table: Table, columnId: string, ) => undefined | [number, number]; } interface DataTableContextType< TData extends RowData = RowData, TValue = unknown, > extends DataTableStateContextType, DataTableBaseContextType {} export const DataTableContext = createContext | null>(null); export function DataTableProvider({ children, ...props }: Partial & DataTableBaseContextType & { children: React.ReactNode; }) { const value = useMemo( // eslint-disable-next-line react-hooks/preserve-manual-memoization () => ({ ...props, columnFilters: props.columnFilters ?? [], sorting: props.sorting ?? [], rowSelection: props.rowSelection ?? {}, columnOrder: props.columnOrder ?? [], columnVisibility: props.columnVisibility ?? {}, pagination: props.pagination ?? { pageIndex: 0, pageSize: 10 }, enableColumnOrdering: props.enableColumnOrdering ?? false, }), [ props.columnFilters, props.sorting, props.rowSelection, props.columnOrder, props.columnVisibility, props.pagination, props.table, props.filterFields, props.columns, props.enableColumnOrdering, props.isLoading, props.totalRows, props.filterRows, props.getFacetedUniqueValues, props.getFacetedMinMaxValues, ], ); return ( // `TData` is invariant in v9, so a concrete `DataTableContextType` // is not assignable to the erased `` the context is declared // with — even though `any` is involved. React contexts cannot be generic, // so the erasure happens here and `useDataTable` casts it back. }> {children} ); } export function useDataTable() { const context = useContext(DataTableContext); if (!context) { throw new Error("useDataTable must be used within a DataTableProvider"); } return context as DataTableContextType; } 6e:T13a9,"use client"; /** * DataTableStoreSync - Syncs React Table state to/from BYOS adapter * * On initial mount: seeds the table's columnFilters from BYOS state (BYOS → Table). * This handles the case where URL params are available in BYOS but useState missed * them during SSR/hydration (e.g. nuqs reads URL after initial render). * * After mount: syncs changes from React Table's state (columnFilters, sorting, * rowSelection) to the BYOS adapter (Table → BYOS). Filter components update * the table directly via column.setFilterValue(), and this component propagates * those changes to the BYOS adapter for URL sync (nuqs) or state persistence. */ import { useStoreContext } from "@/lib/store/context"; import { useFilterActions } from "@/lib/store/hooks/useFilterActions"; import { isStateEqual } from "@/lib/store/schema"; import { useEffect, useRef } from "react"; import { useDataTable } from "./data-table-provider"; export function DataTableStoreSync() { useDataTableStoreSync(); return null; } /** * Hook version for more control - syncs filters, sorting, and selection */ export function useDataTableStoreSync() { const context = useStoreContext(); const { table, filterFields, sorting, rowSelection } = useDataTable(); const { setFilters } = useFilterActions(); const lastSentFiltersRef = useRef>({}); const lastSentSortRef = useRef<{ id: string; desc: boolean } | null>(null); const lastSentUuidRef = useRef(""); const isInitialMount = useRef(true); const columnFilters = table.state.columnFilters; // Sync column filters useEffect(() => { if (!context) return; if (isInitialMount.current) { isInitialMount.current = false; const filterFieldKeys = new Set( filterFields?.map((f) => f.value as string) || [], ); const currentFilters: Record = {}; for (const filter of columnFilters) { if (filterFieldKeys.has(filter.id)) { currentFilters[filter.id] = filter.value; } } // Seed table from BYOS on initial mount (handles URL hydration where // useState(defaultColumnFilters) missed the URL-derived values) const byosState = context.adapter.getSnapshot().state as Record< string, unknown >; for (const key of filterFieldKeys) { if (key in currentFilters) continue; const byosValue = byosState[key]; if (byosValue == null) continue; if (Array.isArray(byosValue) && byosValue.length === 0) continue; table.getColumn(key)?.setFilterValue(byosValue); currentFilters[key] = byosValue; } lastSentFiltersRef.current = { ...currentFilters }; lastSentSortRef.current = sorting?.[0] || null; const selectedKeys = Object.keys(rowSelection || {}); lastSentUuidRef.current = selectedKeys.length > 0 ? selectedKeys[0] : ""; return; } const filterFieldKeys = new Set( filterFields?.map((f) => f.value as string) || [], ); const currentFilters: Record = {}; for (const filter of columnFilters) { if (filterFieldKeys.has(filter.id)) { currentFilters[filter.id] = filter.value; } } if (isStateEqual(currentFilters, lastSentFiltersRef.current)) { return; } const updates: Record = { ...currentFilters }; // Only null out keys that we previously sent — never clear BYOS filters // that were set externally (e.g. from URL) and not managed by this sync. for (const key of Object.keys(lastSentFiltersRef.current)) { if (!(key in currentFilters)) { updates[key] = null; } } lastSentFiltersRef.current = { ...currentFilters }; setFilters(updates); // eslint-disable-next-line react-hooks/exhaustive-deps }, [columnFilters, context, filterFields, setFilters]); // Sync sorting useEffect(() => { if (!context) return; if (isInitialMount.current) return; const newSort = sorting?.[0] || null; const lastSort = lastSentSortRef.current; if (newSort?.id === lastSort?.id && newSort?.desc === lastSort?.desc) { return; } lastSentSortRef.current = newSort; setFilters({ sort: newSort }); }, [sorting, context, setFilters]); // Sync row selection (single-select only — skip when multi-row selection is // enabled because rowSelection is used for checkbox bulk actions, not sheet) useEffect(() => { if (!context) return; if (isInitialMount.current) return; if (table.options.enableMultiRowSelection) return; const selectedKeys = Object.keys(rowSelection || {}); const newUuid = selectedKeys.length > 0 ? selectedKeys[0] : null; const newUuidStr = newUuid || ""; if (newUuidStr === lastSentUuidRef.current) { return; } lastSentUuidRef.current = newUuidStr; setFilters({ uuid: newUuid }); }, [ rowSelection, context, setFilters, table.options.enableMultiRowSelection, ]); } 6f:T735a,"use client"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/custom/table"; import { DataTableFilterControls } from "@/components/data-table/data-table-filter-controls"; import { DataTableFilterRail } from "@/components/data-table/data-table-filter-rail"; import { DataTableProvider } from "@/components/data-table/data-table-provider"; import { DataTableResetButton } from "@/components/data-table/data-table-reset-button"; import { DataTableToolbar } from "@/components/data-table/data-table-toolbar"; // TODO: check where to put this import type { DataTableFilterField } from "@/components/data-table/types"; import { Button } from "@/components/ui/button"; import { useHotKey } from "@/hooks/use-hot-key"; import { useLocalStorage } from "@/hooks/use-local-storage"; import { getColumnOrderKey, getColumnVisibilityKey, } from "@/lib/constants/local-storage"; import { formatCompactNumber } from "@/lib/format"; import { useFilterActions } from "@/lib/store/hooks/useFilterActions"; import { useFilterState } from "@/lib/store/hooks/useFilterState"; import { dataTableFeatures, type DataTableFeatures, } from "@/lib/table/features"; import { cn } from "@/lib/utils"; import { useControls } from "@/providers/controls"; import { type FetchNextPageOptions, type FetchPreviousPageOptions, } from "@tanstack/react-query"; import type { ColumnDef, ColumnFiltersState, ColumnVisibilityState, Row, RowData, RowSelectionState, SortingState, TableOptions, Table as TTable, } from "@tanstack/react-table"; import { flexRender, Subscribe, useTable } from "@tanstack/react-table"; import { LoaderCircle } from "lucide-react"; import * as React from "react"; import { canLoadMore, columnSizeStyle } from "./utils"; // TODO: add a possible chartGroupBy /** * BREAKING (v9): the `TValue` type parameter is gone. * * It forced every column in the array to share one cell-value type, which was * never true. v9 makes per-column `TValue` explicit (`ColumnDef`, and `columnHelper.columns([...])` to preserve it), and the * `columns` table option is typed against the default `CellData`. Every call * site in this repo passed `unknown` anyway. */ export interface DataTableInfiniteProps { columns: ColumnDef[]; /** * Extra classes for each row, re-evaluated whenever this callback's identity * changes — that is how live mode dims the rows behind it. * * Keep it stable (the React Compiler, or a `useCallback`): it is compared by * the row memo, so a fresh arrow per render re-renders every row on screen. */ getRowClassName?: (row: Row) => string; // REMINDER: make sure to pass the correct id to access the rows getRowId?: TableOptions["getRowId"]; data: TData[]; defaultColumnFilters?: ColumnFiltersState; defaultColumnSorting?: SortingState; defaultRowSelection?: RowSelectionState; defaultColumnVisibility?: ColumnVisibilityState; filterFields?: DataTableFilterField[]; // REMINDER: close to the same signature as the `facetedUniqueValues` slot on // `tableFeatures()`, but resolved rather than curried getFacetedUniqueValues?: ( table: TTable, columnId: string, ) => Map; getFacetedMinMaxValues?: ( table: TTable, columnId: string, ) => undefined | [number, number]; totalRows?: number; /** * How many rows match the active filters, as reported by the server. * * Must be authoritative relative to what `fetchNextPage` can actually return: * both the "Load More" button (`canLoadMore`) and the scroll auto-load stop * once `totalRowsFetched` reaches it. A value that under-reports the real * count makes the remaining rows unreachable, because there is no other way * to trigger a fetch. Leave it undefined rather than pass a guess — the * button then falls back to `hasNextPage` alone. */ filterRows?: number; totalRowsFetched?: number; isFetching?: boolean; isLoading?: boolean; hasNextPage?: boolean; fetchNextPage: ( options?: FetchNextPageOptions | undefined, ) => Promise; fetchPreviousPage?: ( options?: FetchPreviousPageOptions | undefined, ) => Promise; renderLiveRow?: (props?: { row: Row; }) => React.ReactNode; // Used to store column order and visibility in local storage for specific data-table namespace tableId?: string; // Optional slots for extensibility commandSlot?: React.ReactNode; sheetSlot?: React.ReactNode; toolbarActions?: React.ReactNode; chartSlot?: React.ReactNode; footerSlot?: React.ReactNode; floatingBarSlot?: React.ReactNode; className?: string; } export function DataTableInfinite({ columns, getRowClassName, getRowId, data, defaultColumnFilters = [], defaultColumnSorting = [], defaultRowSelection = {}, defaultColumnVisibility = {}, filterFields = [], isFetching, isLoading, fetchNextPage, hasNextPage, fetchPreviousPage, totalRows, filterRows, totalRowsFetched = 0, getFacetedUniqueValues, getFacetedMinMaxValues, renderLiveRow, tableId = "infinite", commandSlot, sheetSlot, toolbarActions, chartSlot, footerSlot, floatingBarSlot, className, }: DataTableInfiniteProps) { const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters); const [sorting, setSorting] = React.useState(defaultColumnSorting); const [rowSelection, setRowSelection] = React.useState(defaultRowSelection); const [columnOrder, setColumnOrder] = useLocalStorage( getColumnOrderKey(tableId), [], ); const [columnVisibility, setColumnVisibility] = useLocalStorage( getColumnVisibilityKey(tableId), defaultColumnVisibility, ); const tableRef = React.useRef(null); // Detect if a select column exists to enable multi-row selection const hasSelectColumn = React.useMemo( () => columns.some((col) => col.meta?.kind === "select"), [columns], ); const onScroll = React.useCallback( (e: React.UIEvent) => { const onPageBottom = Math.ceil(e.currentTarget.scrollTop + e.currentTarget.clientHeight) >= e.currentTarget.scrollHeight; if (onPageBottom && !isFetching && totalRowsFetched < (filterRows ?? 0)) { fetchNextPage(); } }, [fetchNextPage, isFetching, filterRows, totalRowsFetched], ); // See `canLoadMore` — `hasNextPage` stays true past the final row because the // API only signals the end with an empty page. const hasMoreToLoad = canLoadMore({ hasNextPage, filterRows, totalRowsFetched, }); /** * BREAKING (v9): the options object has to be memoized by the caller. * * `useTable` ends with `useMemo(() => ({ ...table, options, state }), [table, * options, state])`, so an inline literal hands back a *new* table object on * every render — v8's `useReactTable` returned one stable instance. That * identity is what `DataTableProvider` memoizes its context value on, so an * unmemoized literal re-renders every `useDataTable()` consumer (toolbar, * filter controls, command, sheet, floating bar) and re-runs the * `useReactTableSync` effect on each ResizeObserver tick, `isFetching` flip * and live poll. */ const tableOptions = React.useMemo( () => ({ // Row models, filter fns and sort fns all live on the feature set in v9 — // see `lib/table/features.ts`. features: dataTableFeatures, // This table paginates on the server (cursor-based, via `fetchNextPage`), // so client pagination must be off. It is not optional: the shared feature // set registers `paginatedRowModel` for the paginated blocks, and v9 // routes `getRowModel()` through it whenever that slot exists and this // flag is falsy — silently truncating every page to the default pageSize // of 10. manualPagination: true, data, columns, state: { columnFilters, sorting, columnVisibility, rowSelection, columnOrder, }, enableMultiRowSelection: hasSelectColumn, columnResizeMode: "onChange" as const, getRowId, onColumnVisibilityChange: setColumnVisibility, onColumnFiltersChange: setColumnFilters, onRowSelectionChange: setRowSelection, onSortingChange: setSorting, onColumnOrderChange: setColumnOrder, debugAll: process.env.NEXT_PUBLIC_TABLE_DEBUG === "true", // Kept on `meta` for consumers that declared it in `react-table.d.ts`; // `Row` reads the prop, not this — see the reminder on that prop. meta: { getRowClassName }, }), [ data, columns, columnFilters, sorting, columnVisibility, rowSelection, columnOrder, hasSelectColumn, getRowId, setColumnVisibility, setColumnFilters, setRowSelection, setSorting, setColumnOrder, getRowClassName, ], ); const table = useTable(tableOptions); // Clear multi-select when filters or sorting change React.useEffect(() => { if (hasSelectColumn) { setRowSelection({}); } }, [columnFilters, sorting, hasSelectColumn, setRowSelection]); // NOTE: Filter, sort, and selection syncing is now handled by DataTableStoreSync /** * https://tanstack.com/table/latest/docs/guide/column-sizing#advanced-column-resizing-performance * Instead of calling `column.getSize()` on every render for every header * and especially every data cell (very expensive), * we will calculate all column sizes at once at the root table level in a useMemo * and pass the column sizes down as CSS variables to the element. */ const columnSizeVars = React.useMemo(() => { const headers = table.getFlatHeaders(); const colSizes: { [key: string]: string } = {}; for (let i = 0; i < headers.length; i++) { const header = headers[i]!; // REMINDER: replace "." with "-" to avoid invalid CSS variable name (e.g. "timing.dns" -> "timing-dns") colSizes[`--header-${header.id.replaceAll(".", "-")}-size`] = `${header.getSize()}px`; colSizes[`--col-${header.column.id.replaceAll(".", "-")}-size`] = `${header.column.getSize()}px`; } return colSizes; }, [ table.state.columnResizing, table.state.columnSizing, table.state.columnVisibility, ]); useHotKey(() => { setColumnOrder([]); setColumnVisibility(defaultColumnVisibility); }, "u"); const { setFilters } = useFilterActions(); /** * REMINDER: the detail row id is deliberately *not* read here. * Subscribing to it at this level re-rendered the entire table on every * detail click, and — because the callback closed over it — handed every * `MemoizedRow` a new `onRowClick`, so all rows re-rendered too. Each row * reads its own detail state instead and passes it back in, which keeps this * callback stable across selections. */ const onRowClick = React.useCallback( (row: Row, isDetail: boolean) => { if (hasSelectColumn) { setFilters({ uuid: isDetail ? null : row.id }); } else { row.toggleSelected(); } }, [hasSelectColumn, setFilters], ); return ( {/* The viewport is the frame: the sidebar and the main column are both exactly one screen tall, and the only things that scroll are the filter list and the table container. Nothing here depends on a measured height, so the page itself can never grow past the viewport. */}

Filters

{table.state.columnFilters.length ? ( ) : null}

{/* REMINDER: no top padding - it would offset the first filter row */}

{footerSlot ? (

{footerSlot}

) : null}

{commandSlot} {/* TBD: better flexibility with compound components? */} toolbarActions : undefined} /> {chartSlot}

{/* `min-h-0` lets the flex item shrink so the table container scrolls instead of the page. */}

{table.getHeaderGroups().map((headerGroup) => ( :not(:last-child)]:border-r", )} > {headerGroup.headers.map((header) => { return ( .cursor-col-resize]:opacity-0", header.column.columnDef.meta?.headerClassName, )} aria-sort={ header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" } > {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} {header.column.getCanResize() && (

header.column.resetSize()} onMouseDown={header.getResizeHandler()} onTouchStart={header.getResizeHandler()} className={cn( "user-select-none absolute top-0 -right-2 z-10 flex h-full w-4 cursor-col-resize touch-none justify-center", "before:bg-border before:absolute before:inset-y-0 before:w-px before:translate-x-px", )} /> )} ); })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( // REMINDER: if we want to add arrow navigation https://github.com/TanStack/table/discussions/2752#discussioncomment-192558 {renderLiveRow?.({ row })} )) ) : ( {renderLiveRow?.()} No results. )} {hasMoreToLoad || isFetching || isLoading ? ( ) : (

No more data to load ( {formatCompactNumber(filterRows ?? 0)} {" "} of{" "} {formatCompactNumber(totalRows ?? 0)} {" "} rows)

)}

{sheetSlot} {floatingBarSlot} ); } /** * The filter controls column. Collapsing animates `width` — `display` can't be * transitioned — so the inner wrapper holds its own width and the content * slides out of view instead of reflowing on every frame. Mirrors the shadcn * sidebar's `transition-[width] duration-200 ease-linear`. */ function FilterPanel({ children }: { children: React.ReactNode }) { const { open } = useControls(); return (

{children}

); } /** * REMINDER: this is the heaviest component in the table if lots of rows * Some other components are rendered more often necessary, but are fixed size (not like rows that can grow in height) * e.g. DataTableFilterControls, DataTableFilterCommand, DataTableToolbar, DataTableHeader */ function Row({ row, selected, isMultiSelect, onRowClick, getRowClassName, }: { row: Row; // REMINDER: row.getIsSelected(); - just for memoization selected?: boolean; // Whether the table renders a select column (multi-select + detail sheet) isMultiSelect: boolean; onRowClick: (row: Row, isDetail: boolean) => void; /** * REMINDER: taken as a prop rather than read back off * `row.table.options.meta`. Compiled, `cn(..., row.table.options.meta * ?.getRowClassName?.(row))` caches on `row` identity alone — the callback is * invisible to the compiler behind that method chain — so the class was * computed once per row object and never again. This row used to subscribe to * `live` to force the recompute; the subscription re-rendered every row on * every toggle and changed nothing. As a prop the callback is a real * dependency of both the compiler and the `MemoizedRow` comparator, so the * class follows live mode and nothing else re-renders for it. */ getRowClassName?: (row: Row) => string; }) { /** * REMINDER: selects a boolean, not the uuid itself, so `useSyncExternalStore` * bails out for every row whose detail state did not flip. `isMultiSelect` * belongs *inside* the selector: in single-select mode `DataTableStoreSync` * still writes the selected row id to `uuid`, and folding the flag in keeps * that write from waking any row at all. */ const isDetail = useFilterState((s) => isMultiSelect && s.uuid === row.id); const handleClick = React.useCallback(() => { onRowClick(row, isDetail); }, [onRowClick, row, isDetail]); return ( { if (event.key === "Enter") { event.preventDefault(); handleClick(); } }} className={cn( "[&>:not(:last-child)]:border-r", "outline-primary focus-visible:bg-muted/50 outline-1 -outline-offset-1 transition-colors outline-none focus-visible:outline-solid", "data-[state=selected]:outline-solid", "data-detail:outline-solid", "data-checked:bg-muted/50", getRowClassName?.(row), )} > {/* REMINDER: the cells read table state behind method calls (`row.getVisibleCells()` → `columnVisibility` + `columnOrder`, `row.getIsSelected()` in the select column's checkbox), which the React Compiler cannot see. Compiled, it caches this callback on `row` identity and the `` element on that callback, so the whole subtree is an unchanged element that React bails out of re-rendering — no prop change on `Row`, and no parent re-render, can reach it. Every slice the cells render from therefore has to be selected here: `Subscribe`'s own store subscription is the only thing that re-runs them. That is what lets the rest of the file stay compiled instead of opting out with "use no memo". https://tanstack.com/table/latest/docs/framework/react/guide/react-compiler */} ({ columnVisibility: state.columnVisibility, columnOrder: state.columnOrder, // REMINDER: this row's own selection, not the whole `rowSelection` // map — `shallow` then re-renders the rows that actually flipped // instead of every mounted row on every checkbox click. selected: state.rowSelection?.[row.id] ?? false, })} > {() => row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} )) } ); } /** * REMINDER: this comparator cannot be dropped in favour of the React Compiler. * `createCoreRowModel` memoizes on `[table.options.data]`, so every * `fetchNextPage` rebuilds the core row model and hands back a *new* `row` * object for every already-rendered row. Comparing by `row.id` says "same row, * same render" — a fact about this table that the compiler cannot infer, since * it can only ever key on the identity it is given. Without it, each page fetch * re-runs `cn()` (tailwind-merge), `getVisibleCells()` and a full reconcile for * every row on screen, and that count only grows as you scroll. * * REMINDER: the id alone is not enough. A row action edits a row in place — * same id, new contents — and comparing ids only holds the old cells on screen * until a filter change or a reload rebuilds the table (a delete looks like it * works, because the row leaves the list entirely). `row.original` is the * identity of the underlying record, so a row the server changed always * re-renders. * * It costs the memo nothing on the path it was written for: `fetchNextPage` * appends a page and leaves the earlier ones referentially untouched, so * `original` is identical for every row already on screen. A full refetch is * the other story — react-query's `replaceEqualDeep` bails out of non-plain * values, and one `Date` on the row (`date`, here) is enough to make it hand * back a fresh object for every row, changed or not. So an action's * invalidation re-renders the mounted rows once. That is the price of never * showing a stale row, and it is paid per action, not per scroll. */ const MemoizedRow = React.memo( Row, (prev, next) => prev.row.id === next.row.id && prev.row.original === next.row.original && prev.selected === next.selected && prev.isMultiSelect === next.isMultiSelect && prev.onRowClick === next.onRowClick && // Changes when live mode is toggled — see the prop's own reminder. prev.getRowClassName === next.getRowClassName, ) as typeof Row; 70:Tb20,"use client"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { useHotKey } from "@/hooks/use-hot-key"; import { boxRadiusClassName } from "@/lib/style"; import type { DataTableFeatures } from "@/lib/table/features"; import { cn } from "@/lib/utils"; import type { Row, RowData, Table as TTable } from "@tanstack/react-table"; import { X } from "lucide-react"; import * as React from "react"; import { useDataTable } from "./data-table-provider"; import { TOOLTIP_DELAY } from "./ui-compat"; interface DataTableFloatingBarProps { children: (props: { rows: Row[]; table: TTable; }) => React.ReactNode; } export function DataTableFloatingBar({ children, }: DataTableFloatingBarProps) { const { table, rowSelection } = useDataTable(); const selectedRowCount = Object.keys(rowSelection).length; const selectedRows = React.useMemo(() => { return table.getFilteredSelectedRowModel().rows; // rowSelection is not used directly but serves as an invalidation trigger }, [table, rowSelection]); useHotKey(() => table.resetRowSelection(), "x", { shift: true }); if (selectedRowCount === 0) return null; return (

{selectedRowCount} selected

Deselect all ⌘ ⇧ X

{children({ rows: selectedRows, table })}

); } 71:T623,import { Button } from "@/components/ui/button"; import type { DataTableFeatures } from "@/lib/table/features"; import { cn } from "@/lib/utils"; import type { Column, RowData } from "@tanstack/react-table"; import { ChevronDown, ChevronUp } from "lucide-react"; import type React from "react"; interface DataTableColumnHeaderProps extends React.ComponentProps { column: Column; title: string; } export function DataTableColumnHeader({ column, title, className, ...props }: DataTableColumnHeaderProps) { if (!column.getCanSort()) { return

{title}

; } return ( ); } 72:Te19,"use client"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { useHotKey } from "@/hooks/use-hot-key"; import { formatCompactNumber } from "@/lib/format"; import { useControls } from "@/providers/controls"; import { PanelLeftClose, PanelLeftOpen } from "lucide-react"; import { DataTableFilterControlsDrawer } from "./data-table-filter-controls-drawer"; import { DataTableResetButton } from "./data-table-reset-button"; import { DataTableViewOptions } from "./data-table-view-options"; import { TOOLTIP_DELAY } from "./ui-compat"; interface DataTableToolbarProps { renderActions?: () => React.ReactNode; } export function DataTableToolbar({ renderActions }: DataTableToolbarProps) { const { table, isLoading, columnFilters, totalRows, filterRows } = useDataTable(); const { open, setOpen } = useControls(); useHotKey(() => setOpen((prev) => !prev), "b"); const rows = { total: totalRows ?? table.getCoreRowModel().rows.length, filtered: filterRows ?? table.getFilteredRowModel().rows.length, }; return (

Toggle controls with{" "} ⌘ B

{formatCompactNumber(rows.filtered)} {" "} of{" "} {formatCompactNumber(rows.total)} {" "} row(s) filtered

{formatCompactNumber(rows.filtered)} {" "} row(s)

{columnFilters.length ? : null} {renderActions?.()}

); } 73:T4d6,"use client"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { Button } from "@/components/ui/button"; import { LoaderCircle, RefreshCcw } from "lucide-react"; /** * A toolbar action that re-reads the table from the top. Pair it with * `refreshDataTableQuery` rather than the bare `refetch`: the helper resets * the cache to a fresh first page first, so a list extended by live mode or * infinite scroll does not restart from a stale cursor. * * @example * ```tsx * const queryClient = useQueryClient(); * const refresh = () => refreshDataTableQuery(queryClient, dataOptions(search)); * } /> * ``` */ export function DataTableRefreshButton({ onClick }: { onClick: () => void }) { const { isLoading } = useDataTable(); return ( ); } 74:T1258,"use client"; import { Sortable, SortableDragHandle, SortableItem, } from "@/components/custom/sortable"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { boxRadiusClassName } from "@/lib/style"; import { cn } from "@/lib/utils"; import { Check, GripVertical, Settings2 } from "lucide-react"; import { useMemo, useState } from "react"; export function DataTableViewOptions() { const { table, enableColumnOrdering } = useDataTable(); const [open, setOpen] = useState(false); const [drag, setDrag] = useState(false); const [search, setSearch] = useState(""); const columnOrder = table.state.columnOrder; const sortedColumns = useMemo( () => table.getAllColumns().sort((a, b) => { return columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id); }), [columnOrder, table], ); return ( No option found. ({ id: c.id }))} onValueChange={(items) => table.setColumnOrder(items.map((c) => c.id)) } overlay={

} onDragStart={() => setDrag(true)} onDragEnd={() => setDrag(false)} onDragCancel={() => setDrag(false)} > {sortedColumns // `getCanHide()` is the single source of truth: columns that // must always render (select) declare `enableHiding: false` // instead of being special-cased here. .filter((column) => column.getCanHide()) .map((column) => ( column.toggleVisibility(!column.getIsVisible()) } className={"capitalize"} disabled={drag} >

{column.columnDef.meta?.label || column.id} {enableColumnOrdering && !search ? ( ) : null} ))} ); } 75:T4c7,"use client"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { useHotKey } from "@/hooks/use-hot-key"; import { X } from "lucide-react"; import { TOOLTIP_DELAY } from "./ui-compat"; export function DataTableResetButton() { const { table } = useDataTable(); useHotKey(table.resetColumnFilters, "Escape"); return (

Reset filters with{" "} ⌘ Esc

); } 76:T15c9,"use client"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { Checkbox } from "@/components/ui/checkbox"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Label } from "@/components/ui/label"; import { Skeleton } from "@/components/ui/skeleton"; import { formatCompactNumber } from "@/lib/format"; import { boxRadiusClassName, boxSurfaceClassName, } from "@/lib/style"; import { cn } from "@/lib/utils"; import { Search } from "lucide-react"; import { useState } from "react"; import type { DataTableCheckboxFilterField } from "./types"; export function DataTableFilterCheckbox({ value: _value, options, component, }: DataTableCheckboxFilterField) { const value = _value as string; const [inputValue, setInputValue] = useState(""); const { table, columnFilters, isLoading, getFacetedUniqueValues } = useDataTable(); const column = table.getColumn(value); // REMINDER: avoid using column?.getFilterValue() const filterValue = columnFilters.find((i) => i.id === value)?.value; const facetedValue = getFacetedUniqueValues?.(table, value) || column?.getFacetedUniqueValues(); const Component = component; // filter out the options based on the input value const filterOptions = options?.filter( (option) => inputValue === "" || option.label.toLowerCase().includes(inputValue.toLowerCase()), ); // CHECK: it could be filterValue or searchValue const filters = filterValue ? Array.isArray(filterValue) ? filterValue : [filterValue] : []; // REMINDER: if no options are defined, while fetching data, we should show a skeleton if (isLoading && !filterOptions?.length) return (

{Array.from({ length: 3 }).map((_, index) => (

))}

); return (

{options && options.length > 4 ? ( setInputValue(e.target.value)} /> ) : null} {/* FIXME: due to the added max-h and overflow-y-auto, the hover state and border is laying on top of the scroll bar */}

{filterOptions // TODO: we shoudn't sort the options here, instead filterOptions should be sorted by default // .sort((a, b) => a.label.localeCompare(b.label)) ?.map((option, index) => { const checked = filters.includes(option.value); return (

{ const newValue = checked ? [...(filters || []), option.value] : filters?.filter((value) => option.value !== value); column?.setFilterValue( newValue?.length ? newValue : undefined, ); }} /> {Component ? ( ) : ( {option.label} )} {isLoading ? ( ) : facetedValue?.has(option.value) ? ( formatCompactNumber(facetedValue.get(option.value) || 0) ) : null}

); })}

); } 77:T73d,"use client"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Label } from "@/components/ui/label"; import { useDebounce } from "@/hooks/use-debounce"; import { Search } from "lucide-react"; import { useEffect, useState } from "react"; import type { DataTableInputFilterField } from "./types"; function getFilter(filterValue: unknown) { return typeof filterValue === "string" ? filterValue : null; } export function DataTableFilterInput({ value: _value, }: DataTableInputFilterField) { const value = _value as string; const { table, columnFilters } = useDataTable(); const column = table.getColumn(value); const filterValue = columnFilters.find((i) => i.id === value)?.value; const filters = getFilter(filterValue); const [input, setInput] = useState(filters); const debouncedInput = useDebounce(input, 500); useEffect(() => { const newValue = debouncedInput?.trim() === "" ? null : debouncedInput; if (debouncedInput === null) return; column?.setFilterValue(newValue); }, [debouncedInput]); useEffect(() => { if (debouncedInput?.trim() !== filters) { setInput(filters); } }, [filters]); return (

{value} setInput(e.target.value)} />

); } 78:Tf06,"use client"; import { Slider } from "@/components/custom/slider"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Label } from "@/components/ui/label"; import { useDebounce } from "@/hooks/use-debounce"; import { isArrayOfNumbers } from "@/lib/is-array"; import { useEffect, useState } from "react"; import type { DataTableSliderFilterField } from "./types"; function getFilter(filterValue: unknown) { return typeof filterValue === "number" ? [filterValue, filterValue] : Array.isArray(filterValue) && isArrayOfNumbers(filterValue) ? filterValue.length === 1 ? [filterValue[0], filterValue[0]] : filterValue : null; } // TODO: discuss if we even need the `defaultMin` and `defaultMax` export function DataTableFilterSlider({ value: _value, min: defaultMin, max: defaultMax, unit, }: DataTableSliderFilterField) { const value = _value as string; const { table, columnFilters, getFacetedMinMaxValues } = useDataTable(); const column = table.getColumn(value); const filterValue = columnFilters.find((i) => i.id === value)?.value; const filters = getFilter(filterValue); const [input, setInput] = useState(filters); const [min, max] = getFacetedMinMaxValues?.(table, value) || column?.getFacetedMinMaxValues() || [defaultMin, defaultMax]; const debouncedInput = useDebounce(input, 500); useEffect(() => { if (debouncedInput?.length === 2) { column?.setFilterValue(debouncedInput); } }, [debouncedInput]); useEffect(() => { if (debouncedInput?.length !== 2) { } else if (!filters) { setInput(null); } else if ( debouncedInput[0] !== filters[0] || debouncedInput[1] !== filters[1] ) { setInput(filters); } }, [filters]); return (

Min. setInput((prev) => [Number(e.target.value), prev?.[1] || max]) } /> {unit ? ( {unit} ) : null}

Max. setInput((prev) => [prev?.[0] || min, Number(e.target.value)]) } /> {unit ? ( {unit} ) : null}

setInput(values)} />

); } 79:T565,"use client"; import { DatePickerWithRange } from "@/components/custom/date-picker-with-range"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { isArrayOfDates } from "@/lib/is-array"; import { useMemo } from "react"; import type { DateRange } from "react-day-picker"; import type { DataTableTimerangeFilterField } from "./types"; export function DataTableFilterTimerange({ value: _value, presets, }: DataTableTimerangeFilterField) { const value = _value as string; const { table, columnFilters } = useDataTable(); const column = table.getColumn(value); const filterValue = columnFilters.find((i) => i.id === value)?.value; const date: DateRange | undefined = useMemo( () => filterValue instanceof Date ? { from: filterValue, to: undefined } : Array.isArray(filterValue) && isArrayOfDates(filterValue) ? { from: filterValue?.[0], to: filterValue?.[1] } : undefined, [filterValue], ); const setDate = (date: DateRange | undefined) => { if (!date) { column?.setFilterValue(undefined); return; } if (date.from && !date.to) { column?.setFilterValue([date.from]); } if (date.to && date.from) { column?.setFilterValue([date.from, date.to]); } }; return ; } 7a:T593,"use client"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { Button } from "@/components/ui/button"; import { X } from "lucide-react"; import type { DataTableFilterField } from "./types"; export function DataTableFilterResetButton({ value: _value, }: DataTableFilterField) { const { columnFilters, table } = useDataTable(); const value = _value as string; const column = table.getColumn(value); const filterValue = columnFilters.find((f) => f.id === value)?.value; // TODO: check if we could useMemo const filters = filterValue ? Array.isArray(filterValue) ? filterValue : [filterValue] : []; if (filters.length === 0) return null; return ( ); } 7b:Td71,"use client"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/custom/accordion"; import { useDataTable } from "@/components/data-table/data-table-provider"; import * as React from "react"; import { DataTableFilterCheckbox } from "./data-table-filter-checkbox"; import { DataTableFilterInput } from "./data-table-filter-input"; import { DataTableFilterResetButton } from "./data-table-filter-reset-button"; import { DataTableFilterSlider } from "./data-table-filter-slider"; import { DataTableFilterTimerange } from "./data-table-filter-timerange"; // FIXME: use @container (especially for the slider element) to restructure elements // TODO: only pass the columns to generate the filters! // https://tanstack.com/table/latest/docs/framework/react/examples/filters // Pluggable filter registry — extend by adding entries export const FILTER_COMPONENTS: Record> = { checkbox: DataTableFilterCheckbox, input: DataTableFilterInput, slider: DataTableFilterSlider, timerange: DataTableFilterTimerange, }; export function DataTableFilterControls() { const { filterFields } = useDataTable(); const [isMounted, setIsMounted] = React.useState(false); React.useEffect(() => { const timer = setTimeout(() => setIsMounted(true), 0); return () => clearTimeout(timer); }, []); return ( defaultOpen) ?.map(({ value }) => value as string)} > {filterFields?.map((field) => { const value = field.value as string; const FilterComponent = FILTER_COMPONENTS[field.type]; if (!FilterComponent) return null; return ( // REMINDER: -mx-2 lets the border-b span the full sidebar width despite the parent p-2; px-2 keeps the content aligned

{field.label}

{value !== field.label.toLowerCase() && !field.commandDisabled ? (

{value}

) : null}

{/* REMINDER: avoid the focus state to be cut due to overflow-hidden */} {/* REMINDER: need to move within here because of accordion height animation */}

); })} ); } 7c:T9c3,import { Button } from "@/components/ui/button"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"; import { Kbd } from "@/components/ui/kbd"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { useHotKey } from "@/hooks/use-hot-key"; import { useMediaQuery } from "@/hooks/use-media-query"; import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; import { FilterIcon } from "lucide-react"; import React from "react"; import { DataTableFilterControls } from "./data-table-filter-controls"; import { TOOLTIP_DELAY } from "./ui-compat"; export function DataTableFilterControlsDrawer() { const triggerButtonRef = React.useRef(null); const isMobile = useMediaQuery("(max-width: 640px)"); useHotKey(() => { triggerButtonRef.current?.click(); }, "b"); return (

Toggle controls with{" "} ⌘ B

Filters Adjust your table filters

); } 7d:T455,"use client"; import { cn } from "@/lib/utils"; import { useControls } from "@/providers/controls"; /** * The hit area on the filter sidebar's border, mirroring the app sidebar's * rail. Absolutely positioned so it costs no layout width; the accessible * control is the toolbar's Hide/Show Controls button. */ export function DataTableFilterRail({ className, ...props }: React.ComponentProps<"button">) { const { open, setOpen } = useControls(); return (