4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T447,"use client" /** * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance. * * Before reporting anything: please check the changelog first. * - In-repo: ./CHANGELOG.md * - Docs site: https://niko-table.com/changelog * * Found a bug or have a fix? Open an issue or PR on GitHub so other * users (and future LLMs reading this code) benefit: * https://github.com/Semkoo/niko-table-registry */ import type { RowData } from "@tanstack/react-table" import { useDataTable } from "../core/data-table-context" import { TableViewMenu, type TableViewMenuProps, } from "../filters/table-view-menu" type DataTableViewMenuProps = Omit< TableViewMenuProps, "table" > export function DataTableViewMenu( props: DataTableViewMenuProps, ) { const { table } = useDataTable() return } /** * @required displayName is required for auto feature detection * @see "feature-detection.ts" */ DataTableViewMenu.displayName = "DataTableViewMenu" 4f:T1da3,"use client" /** * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance. * * Before reporting anything: please check the changelog first. * - In-repo: ./CHANGELOG.md * - Docs site: https://niko-table.com/changelog * * Found a bug or have a fix? Open an issue or PR on GitHub so other * users (and future LLMs reading this code) benefit: * https://github.com/Semkoo/niko-table-registry */ /** * A dropdown menu component that allows users to toggle the visibility of table columns. * It uses a popover to display a list of columns with checkboxes. * * Two opt-in extensions: * - `lockedColumnIds`: include columns marked `enableHiding: false` in the * list, but render them disabled (always-on, can't toggle). * - `onReset` + `resetLabel`: render a Reset button below a separator. * * Tuned for large column counts (200+): rows are a memoized component, the * search filter runs at this layer (so non-matching rows skip rendering * entirely), and `lockedColumnIds` is consulted via a `Set` for O(1) lookups. * * For drag-to-reorder, see `TableViewDndMenu` — it lives in a separate file * so consumers who don't need DnD don't pay the `@dnd-kit/*` bundle cost. */ import type { RowData } from "@tanstack/react-table" import { Check, ChevronsUpDown, RotateCcw, Settings2 } from "lucide-react" import * as React from "react" 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 { cn } from "@/lib/utils" import { formatLabel } from "../lib/format" import type { DataTableColumn, DataTableInstance } from "../types" function getColumnTitle( column: DataTableColumn, ): string { return column.columnDef.meta?.label ?? formatLabel(column.id) } export interface TableViewMenuProps { table: DataTableInstance className?: string onColumnVisibilityChange?: (columnId: string, isVisible: boolean) => void /** * Column ids that should appear in the menu but cannot be toggled off. * Useful for columns the table marks `enableHiding: false` but the * consumer still wants visible in the column list (typically with a * Reset to Defaults affordance below). */ lockedColumnIds?: string[] /** * When provided, renders a Reset button at the bottom of the menu. * Useful when paired with persisted column preferences so users can * revert to defaults. */ onReset?: () => void /** Label for the reset button. Defaults to "Reset to defaults". */ resetLabel?: string /** * Replaces the default toolbar button. * * Same `trigger` contract the sibling filters already expose * (`TableColumnActions`, `TableDateFilter`, `TableFacetedFilter`), so a * consumer that needs a different trigger shape — a header-sized bare icon * beside a column title, for instance — composes one instead of waiting for * a boolean per shape. */ trigger?: React.ReactNode } interface MenuRowProps { column: DataTableColumn isLocked: boolean isVisible: boolean onToggle: (columnId: string) => void } const MenuRow = React.memo(function MenuRow({ column, isLocked, isVisible, onToggle, }: MenuRowProps) { return ( { if (isLocked) return onToggle(column.id) }} > {getColumnTitle(column)} ) }) as (props: MenuRowProps) => React.ReactElement export function TableViewMenu({ table, onColumnVisibilityChange, lockedColumnIds, onReset, trigger, resetLabel, }: TableViewMenuProps) { // Controlled search. cmdk's built-in filter hides non-matching `CommandItem`s // but still renders all of them — at 200+ columns that's the bottleneck. // Filtering at this layer means non-matching rows skip rendering entirely. const [search, setSearch] = React.useState("") // O(1) lookups instead of O(m) `.includes()` per row. const lockedSet = React.useMemo( () => new Set(lockedColumnIds ?? []), [lockedColumnIds], ) const columns = React.useMemo( () => table .getAllColumns() .filter( column => typeof column.accessorFn !== "undefined" && (column.getCanHide() || lockedSet.has(column.id)), ), // Depend on the column set, not just the (stable) table ref. // eslint-disable-next-line react-hooks/exhaustive-deps [table, table.options.columns, lockedSet], ) const visibleColumns = React.useMemo(() => { const q = search.trim().toLowerCase() if (!q) return columns return columns.filter(c => getColumnTitle(c).toLowerCase().includes(q)) }, [columns, search]) // Stable callback so memoized rows skip re-render on keystrokes. const onToggle = React.useCallback( (columnId: string) => { const column = table.getColumn(columnId) if (!column) return const newVisibility = !column.getIsVisible() column.toggleVisibility(newVisibility) onColumnVisibilityChange?.(columnId, newVisibility) }, [table, onColumnVisibilityChange], ) return ( {trigger ?? ( )} No columns found. {visibleColumns.map(column => ( ))} {onReset ? ( <>

) : null} ) } /** * @required displayName is required for auto feature detection * @see "feature-detection.ts" */ TableViewMenu.displayName = "TableViewMenu" 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@niko-table","registryDependencies":["https://niko-table.com/r/data-table-core.json","button","command","popover"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/niko-table/components/data-table-view-menu.tsx","content":"$4e","type":"registry:component","target":"components/niko-table/components/data-table-view-menu.tsx"},{"path":"src/components/niko-table/filters/table-view-menu.tsx","content":"$4f","type":"registry:component","target":"components/niko-table/filters/table-view-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]