4e: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"] 4f: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"] 50:Tffa,"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 React from "react" import { useDataTable } from "../core/data-table-context" import { TableInline, type TableInlineProps, } from "../filters/table-inline-filter" import { useGeneratedOptions } from "../hooks/use-generated-options" import { FILTER_VARIANTS } from "../lib/constants" import type { Option } from "../types" type BaseInlineProps = Omit< TableInlineProps, "table" > interface AutoOptionProps { autoOptions?: boolean showCounts?: boolean dynamicCounts?: boolean /** * If true, only generate options from filtered rows. If false, generate from all rows. * This controls which rows are used to generate the option list itself. * Note: This is separate from dynamicCounts which controls count calculation. * @default true */ limitToFilteredRows?: boolean includeColumns?: string[] excludeColumns?: string[] limitPerColumn?: number mergeStrategy?: "preserve" | "augment" | "replace" } type DataTableInlineFilterProps = BaseInlineProps & AutoOptionProps export function DataTableInlineFilter({ autoOptions = true, showCounts = true, dynamicCounts = true, limitToFilteredRows = true, includeColumns, excludeColumns, limitPerColumn, mergeStrategy = "preserve", ...props }: DataTableInlineFilterProps) { const { table } = useDataTable() const generatedOptions = useGeneratedOptions(table, { showCounts, dynamicCounts, limitToFilteredRows, includeColumns, excludeColumns, limitPerColumn, mergeStrategy, }) /** * BUG: stale counts on filter changes — see `data-table-filter-menu.tsx` * for full doc. We capture pristine caller options in a ref and rebuild * `meta.options` from that source on every augment so counts refresh * (and zeroes get filled in for the count-0 hide rule). */ React.useMemo(() => { if (!autoOptions) return null table.getAllColumns().forEach(column => { const meta = (column.columnDef.meta ||= {}) const variant = meta.variant ?? FILTER_VARIANTS.TEXT if ( variant !== FILTER_VARIANTS.SELECT && variant !== FILTER_VARIANTS.MULTI_SELECT ) return const gen = generatedOptions[column.id] if (!gen || gen.length === 0) return if (!meta.options) { meta.options = gen return } if (mergeStrategy === "replace") { meta.options = gen return } if (mergeStrategy === "augment") { // See `data-table-filter-menu.tsx` for the staleness rationale. // We stash the pristine options on `meta` so the next augment can // rebuild from them instead of from the previous augment's output. const metaWithStash = meta as typeof meta & { __nikoOriginalOptions?: Option[] } if (!metaWithStash.__nikoOriginalOptions) { metaWithStash.__nikoOriginalOptions = meta.options } const original = metaWithStash.__nikoOriginalOptions const countMap = new Map(gen.map(o => [o.value, o.count])) meta.options = original.map((opt: Option) => ({ ...opt, count: showCounts ? (countMap.get(opt.value) ?? 0) : undefined, })) } }) }, [autoOptions, generatedOptions, mergeStrategy, showCounts, table]) return } /** * @required displayName is required for auto feature detection * @see "feature-detection.ts" */ DataTableInlineFilter.displayName = "DataTableInlineFilter" 51:T9bd2,"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 */ // Inline-filter module: utilities, sync hooks, value-input renderers, and the // `TableInline` toolbar. import type { RowData } from "@tanstack/react-table" import { BadgeCheck, CalendarIcon, Check, ListFilter, Text, X, } from "lucide-react" import * as React from "react" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { getDefaultFilterOperator, getFilterOperators, processFiltersForLogic, } from "../lib/data-table" import { formatDate } from "../lib/format" import { useKeyboardShortcut } from "../hooks/use-keyboard-shortcut" import { cn } from "@/lib/utils" import { FILTER_OPERATORS, FILTER_VARIANTS, JOIN_OPERATORS, KEYBOARD_SHORTCUTS, } from "../lib/constants" import { dataTableConfig } from "../config/data-table" import type { DataTableColumn, DataTableInstance, ExtendedColumnFilter, FilterOperator, JoinOperator, Option, } from "../types" import { TableRangeFilter } from "./table-range-filter" /* --------------------------------- Utilities -------------------------------- */ /** * Create a deterministic filter ID based on filter properties * This ensures filters can be shared via URL and will have consistent IDs */ function createFilterId( filter: Omit, "filterId">, index?: number, ): string { // Create a deterministic ID based on filter properties // Using a combination that should be unique for each filter configuration const valueStr = typeof filter.value === "string" ? filter.value : JSON.stringify(filter.value) // Include index as a fallback to ensure uniqueness for URL sharing const indexSuffix = typeof index === "number" ? `-${index}` : "" return `${filter.id}-${filter.operator}-${filter.variant}-${valueStr}${indexSuffix}` .toLowerCase() .replace(/[^a-z0-9-]/g, "-") .replace(/-+/g, "-") .substring(0, 100) // Limit length to avoid extremely long IDs } /** * Type for filters without filterId (for URL serialization) */ type FilterWithoutId = Omit< ExtendedColumnFilter, "filterId" > /** * Normalize filters loaded from URL by ensuring they have filterId * If filterId is missing, generate it deterministically * * This allows filters to be stored in URL without filterId, making URLs shorter * and more robust. The filterId is auto-generated when filters are loaded. * * @param filters - Filters that may or may not have filterId * @returns Filters with guaranteed filterId values */ function normalizeFiltersFromUrl( filters: (FilterWithoutId | ExtendedColumnFilter)[], ): ExtendedColumnFilter[] { return filters.map((filter, index) => { // If filterId is missing, generate it if (!("filterId" in filter) || !filter.filterId) { return { ...filter, filterId: createFilterId(filter, index), } as ExtendedColumnFilter } return filter as ExtendedColumnFilter }) } /* -------------------------------- Custom Hooks ------------------------------ */ /** * Hook to initialize filters from table state (for URL restoration) * Replaces the initialization useEffect with derived state * * @description This hook runs ONCE on mount to extract initial filter state from: * 1. Controlled filters (if provided via props) * 2. Table's globalFilter (for OR logic filters) * 3. Table's columnFilters (for AND logic filters) * * @debug Check React DevTools > Components > useInitialFilters to see returned value */ function useInitialFilters( table: DataTableInstance, controlledFilters?: ExtendedColumnFilter[], ): ExtendedColumnFilter[] { const initialFilters = React.useMemo(() => { if (controlledFilters) { const normalized = normalizeFiltersFromUrl(controlledFilters) if (process.env.NODE_ENV === "development") { console.log( "[TableInline useInitialFilters] Using controlled filters:", normalized, ) } return normalized } const globalFilter = table.state.globalFilter if ( globalFilter && typeof globalFilter === "object" && "filters" in globalFilter ) { const filterObj = globalFilter as { filters: (FilterWithoutId | ExtendedColumnFilter)[] } const normalized = normalizeFiltersFromUrl(filterObj.filters) if (process.env.NODE_ENV === "development") { console.log( "[TableInline useInitialFilters] Extracted from globalFilter:", normalized, ) } return normalized } const columnFilters = table.state.columnFilters if (columnFilters && columnFilters.length > 0) { const extractedFilters = columnFilters .map(cf => cf.value) .filter( (v): v is FilterWithoutId | ExtendedColumnFilter => v !== null && typeof v === "object" && "id" in v, ) if (extractedFilters.length > 0) { const normalized = normalizeFiltersFromUrl(extractedFilters) if (process.env.NODE_ENV === "development") { console.log( "[TableInline useInitialFilters] Extracted from columnFilters:", normalized, ) } return normalized } } if (process.env.NODE_ENV === "development") { console.log("[TableInline useInitialFilters] No initial filters found") } return [] // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return initialFilters } /** * Hook to sync filters with table state * Replaces multiple useEffect hooks with a single focused effect * * @description Manages synchronization between filter state and TanStack Table: * - Updates table.meta.joinOperator for the global filter function * - In uncontrolled mode: updates table's globalFilter or columnFilters based on join operators * - In controlled mode: only updates table.meta (parent handles table state) * * @debug * - Check table.state.globalFilter to see OR filters * - Check table.state.columnFilters to see AND filters * - Check table.options.meta.joinOperator to see current join logic */ function useSyncFiltersWithTable( table: DataTableInstance, filters: ExtendedColumnFilter[], isControlled: boolean, ) { // Use core utility to process filters and determine logic const filterLogic = React.useMemo( () => processFiltersForLogic(filters), [filters], ) // Update table meta (happens during render, safe mutation) if (table.options.meta) { table.options.meta.hasIndividualJoinOperators = true table.options.meta.joinOperator = filterLogic.joinOperator } // Sync with table state only when filters change (and not in controlled mode) React.useEffect(() => { if (isControlled) { if (process.env.NODE_ENV === "development") { console.log( "[TableInline useSyncFiltersWithTable] Controlled mode - skipping table sync", ) } return } if (process.env.NODE_ENV === "development") { console.log("[TableInline useSyncFiltersWithTable] Syncing filters:", { filterCount: filters.length, hasOrFilters: filterLogic.hasOrFilters, hasSameColumnFilters: filterLogic.hasSameColumnFilters, joinOperator: filterLogic.joinOperator, }) } // Use core utility to determine routing if (filterLogic.shouldUseGlobalFilter) { table.resetColumnFilters() table.setGlobalFilter({ filters: filterLogic.processedFilters, joinOperator: filterLogic.joinOperator, }) if (process.env.NODE_ENV === "development") { console.log( "[TableInline useSyncFiltersWithTable] Set globalFilter (OR/MIXED logic)", { hasOrFilters: filterLogic.hasOrFilters, hasSameColumnFilters: filterLogic.hasSameColumnFilters, }, ) } } else { table.setGlobalFilter("") const columnFilters = filterLogic.processedFilters.map(filter => ({ id: filter.id, value: { operator: filter.operator, value: filter.value, id: filter.id, filterId: filter.filterId, joinOperator: filter.joinOperator, }, })) table.setColumnFilters(columnFilters) if (process.env.NODE_ENV === "development") { console.log( "[TableInline useSyncFiltersWithTable] Set columnFilters (AND logic)", ) } } }, [filters, filterLogic, table, isControlled]) } export interface TableInlineProps< TData extends RowData, > extends React.ComponentProps<"div"> { table: DataTableInstance filters?: ExtendedColumnFilter[] onFiltersChange?: (filters: ExtendedColumnFilter[]) => void } export function TableInline({ table, filters: controlledFilters, onFiltersChange: controlledOnFiltersChange, children, className, ...props }: TableInlineProps) { const id = React.useId() // Check if we're in controlled mode const isControlled = controlledFilters !== undefined // Get initial filters from table state (for URL restoration) const initialFilters = useInitialFilters(table, controlledFilters) // Internal state - manages filters when not controlled const [internalFilters, setInternalFilters] = React.useState[]>(initialFilters) // Use controlled values if provided, otherwise use internal state const filters = controlledFilters ?? internalFilters // Sync filters with table state (handles both controlled and uncontrolled) useSyncFiltersWithTable(table, filters, isControlled) // Handler that works with both controlled and internal state const onFiltersChange = React.useCallback( (newFilters: ExtendedColumnFilter[]) => { if (controlledOnFiltersChange) { // In controlled mode, just notify parent - don't call table methods // Parent will update URL state, which will flow back to table state via DataTableRoot controlledOnFiltersChange(newFilters) } else { // In uncontrolled mode, update internal state // Table sync happens via useSyncFiltersWithTable hook setInternalFilters(newFilters) } }, [controlledOnFiltersChange], ) const columns = React.useMemo( () => table.getAllColumns().filter(column => column.getCanFilter()), // Depend on the column set, not just the (stable) table ref. // eslint-disable-next-line react-hooks/exhaustive-deps [table, table.options.columns], ) const [open, setOpen] = React.useState(false) const [selectedColumn, setSelectedColumn] = React.useState | null>(null) const [inputValue, setInputValue] = React.useState("") const triggerRef = React.useRef(null) const inputRef = React.useRef(null) const onOpenChange = React.useCallback((open: boolean) => { setOpen(open) if (!open) { setTimeout(() => { setSelectedColumn(null) setInputValue("") }, 100) } }, []) const onFilterAdd = React.useCallback( (column: DataTableColumn, value: string) => { if ( !value.trim() && column.columnDef.meta?.variant !== FILTER_VARIANTS.BOOLEAN ) { return } const filterValue = column.columnDef.meta?.variant === FILTER_VARIANTS.MULTI_SELECT ? [value] : value const filterWithoutId = { id: column.id as Extract, value: filterValue, variant: column.columnDef.meta?.variant ?? FILTER_VARIANTS.TEXT, operator: getDefaultFilterOperator( column.columnDef.meta?.variant ?? FILTER_VARIANTS.TEXT, ), joinOperator: JOIN_OPERATORS.AND, // Default to AND for new filters } // Use current filter length as index to ensure unique IDs const newFilterIndex = filters.length const newFilter: ExtendedColumnFilter = { ...filterWithoutId, filterId: createFilterId(filterWithoutId, newFilterIndex), } onFiltersChange([...filters, newFilter]) setOpen(false) setTimeout(() => { setSelectedColumn(null) setInputValue("") }, 100) }, [filters, onFiltersChange], ) const onFilterRemove = React.useCallback( (filterId: string) => { const updatedFilters = filters.filter( filter => filter.filterId !== filterId, ) onFiltersChange(updatedFilters) requestAnimationFrame(() => { triggerRef.current?.focus() }) }, [filters, onFiltersChange], ) const onFilterUpdate = React.useCallback( ( filterId: string, updates: Partial, "filterId">>, ) => { const updatedFilters = filters.map(filter => { if (filter.filterId === filterId) { return { ...filter, ...updates } as ExtendedColumnFilter } return filter }) onFiltersChange(updatedFilters) }, [filters, onFiltersChange], ) const onFiltersReset = React.useCallback(() => { onFiltersChange([]) }, [onFiltersChange]) // Toggle filter menu with 'F' key useKeyboardShortcut({ key: KEYBOARD_SHORTCUTS.FILTER_TOGGLE, onTrigger: () => setOpen(prev => !prev), }) // Remove last filter with Shift+F useKeyboardShortcut({ key: KEYBOARD_SHORTCUTS.FILTER_REMOVE, requireShift: true, onTrigger: () => { if (filters.length > 0) { onFilterRemove(filters[filters.length - 1]?.filterId ?? "") } }, condition: () => filters.length > 0, }) const onInputKeyDown = React.useCallback( (event: React.KeyboardEvent) => { const key = event.key.toLowerCase() if ( (key === KEYBOARD_SHORTCUTS.BACKSPACE || key === KEYBOARD_SHORTCUTS.DELETE) && !inputValue && selectedColumn ) { event.preventDefault() setSelectedColumn(null) } }, [inputValue, selectedColumn], ) const onTriggerKeyDown = React.useCallback( (event: React.KeyboardEvent) => { const key = event.key.toLowerCase() if ( (key === KEYBOARD_SHORTCUTS.BACKSPACE || key === KEYBOARD_SHORTCUTS.DELETE) && filters.length > 0 ) { event.preventDefault() onFilterRemove(filters[filters.length - 1]?.filterId ?? "") } }, [filters, onFilterRemove], ) return ( ) } TableInline.displayName = "TableInline" interface TableInlineFilterItemProps { filter: ExtendedColumnFilter filterItemId: string columns: DataTableColumn[] onFilterUpdate: ( filterId: string, updates: Partial, "filterId">>, ) => void onFilterRemove: (filterId: string) => void } function TableInlineFilterItem({ filter, filterItemId, columns, onFilterUpdate, onFilterRemove, }: TableInlineFilterItemProps) { const [showFieldSelector, setShowFieldSelector] = React.useState(false) const [showOperatorSelector, setShowOperatorSelector] = React.useState(false) const [showValueSelector, setShowValueSelector] = React.useState(false) const column = columns.find(column => column.id === filter.id) const operatorListboxId = `${filterItemId}-operator-listbox` const inputId = `${filterItemId}-input` const columnMeta = column?.columnDef.meta const filterOperators = getFilterOperators(filter.variant) const onItemKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if ( event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement ) { return } if (showFieldSelector || showOperatorSelector || showValueSelector) { return } const key = event.key.toLowerCase() if ( key === KEYBOARD_SHORTCUTS.BACKSPACE || key === KEYBOARD_SHORTCUTS.DELETE ) { event.preventDefault() onFilterRemove(filter.filterId) } }, [ filter.filterId, showFieldSelector, showOperatorSelector, showValueSelector, onFilterRemove, ], ) if (!column) return null return (

No fields found. {columns.map(column => ( { onFilterUpdate(filter.filterId, { id: column.id as Extract, variant: column.columnDef.meta?.variant ?? FILTER_VARIANTS.TEXT, operator: getDefaultFilterOperator( column.columnDef.meta?.variant ?? FILTER_VARIANTS.TEXT, ), value: "", }) setShowFieldSelector(false) }} > {column.columnDef.meta?.icon && ( )} {column.columnDef.meta?.label ?? column.id} ))} {onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValueSelector, setShowValueSelector, })}

) } TableInlineFilterItem.displayName = "TableInlineFilterItem" interface FilterValueSelectorProps { column: DataTableColumn value: string onSelect: (value: string) => void } function FilterValueSelector({ column, value, onSelect, }: FilterValueSelectorProps) { const variant = column.columnDef.meta?.variant ?? FILTER_VARIANTS.TEXT switch (variant) { case FILTER_VARIANTS.BOOLEAN: return ( onSelect("true")}> True onSelect("false")}> False ) case FILTER_VARIANTS.SELECT: case FILTER_VARIANTS.MULTI_SELECT: return ( {/* Cross-filter narrowing: hide options at count 0 (matches the rule used by `TableColumnFacetedFilterMenu` and the filter menu). Pure label-only option lists (no counts) render unchanged. */} {column.columnDef.meta?.options ?.filter((option: Option) => option.count !== 0) .map((option: Option) => ( onSelect(option.value)} > {option.icon && } {option.label} {option.count && ( {option.count} )} ))} ) case FILTER_VARIANTS.DATE: case FILTER_VARIANTS.DATE_RANGE: return ( onSelect(date?.getTime().toString() ?? "")} /> ) default: { const isEmpty = !value.trim() return ( onSelect(value)} disabled={isEmpty} > {isEmpty ? ( <> Type to add filter... ) : ( <> Filter by "{value}" )} ) } } } FilterValueSelector.displayName = "FilterValueSelector" function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValueSelector, setShowValueSelector, }: { filter: ExtendedColumnFilter column: DataTableColumn inputId: string onFilterUpdate: ( filterId: string, updates: Partial, "filterId">>, ) => void showValueSelector: boolean setShowValueSelector: (value: boolean) => void }) { if ( filter.operator === FILTER_OPERATORS.EMPTY || filter.operator === FILTER_OPERATORS.NOT_EMPTY ) { return (

) } switch (filter.variant) { case FILTER_VARIANTS.TEXT: case FILTER_VARIANTS.NUMBER: case FILTER_VARIANTS.RANGE: { if ( (filter.variant === FILTER_VARIANTS.RANGE && filter.operator === FILTER_OPERATORS.BETWEEN) || filter.operator === FILTER_OPERATORS.BETWEEN ) { return ( ) } const isNumber = filter.variant === FILTER_VARIANTS.NUMBER || filter.variant === FILTER_VARIANTS.RANGE return ( onFilterUpdate(filter.filterId, { value: event.target.value }) } /> ) } case FILTER_VARIANTS.BOOLEAN: { const inputListboxId = `${inputId}-listbox` return ( ) } case FILTER_VARIANTS.SELECT: case FILTER_VARIANTS.MULTI_SELECT: { const inputListboxId = `${inputId}-listbox` const options = column.columnDef.meta?.options ?? [] const selectedValues = Array.isArray(filter.value) ? filter.value : [filter.value] const selectedOptions = options.filter((option: Option) => selectedValues.includes(option.value), ) return ( No options found. {options.map((option: Option) => ( { const value = filter.variant === FILTER_VARIANTS.MULTI_SELECT ? selectedValues.includes(option.value) ? selectedValues.filter(v => v !== option.value) : [...selectedValues, option.value] : option.value onFilterUpdate(filter.filterId, { value }) }} > {option.icon && } {option.label} {filter.variant === FILTER_VARIANTS.MULTI_SELECT && ( )} ))} ) } case FILTER_VARIANTS.DATE: case FILTER_VARIANTS.DATE_RANGE: { const inputListboxId = `${inputId}-listbox` const dateValue = Array.isArray(filter.value) ? filter.value.filter(Boolean) : [filter.value, filter.value].filter(Boolean) const displayValue = filter.operator === FILTER_OPERATORS.BETWEEN && dateValue.length === 2 ? `${formatDate(new Date(Number(dateValue[0])))} - ${formatDate( new Date(Number(dateValue[1])), )}` : dateValue[0] ? formatDate(new Date(Number(dateValue[0]))) : "Pick date..." return ( {filter.operator === FILTER_OPERATORS.BETWEEN ? ( { onFilterUpdate(filter.filterId, { value: date ? [ (date.from?.getTime() ?? "").toString(), (date.to?.getTime() ?? "").toString(), ] : [], }) }} /> ) : ( { onFilterUpdate(filter.filterId, { value: (date?.getTime() ?? "").toString(), }) }} /> )} ) } default: return null } } 52:T121a,"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 */ /** * Table range filter component * @description A range filter component for DataTable that allows users to filter data based on numerical ranges. */ import * as React from "react" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" import type { DataTableColumn, ExtendedColumnFilter } from "../types" import type { RowData } from "@tanstack/react-table" interface TableRangeFilterProps< TData extends RowData, > extends React.ComponentProps<"div"> { filter: ExtendedColumnFilter column: DataTableColumn inputId: string onFilterUpdate: ( filterId: string, updates: Partial, "filterId">>, ) => void } export function TableRangeFilter({ filter, column, inputId, onFilterUpdate, className, ...props }: TableRangeFilterProps) { const meta = column.columnDef.meta // Capture faceted min/max as scalars so the memo refreshes on data change // (column ref alone is stable across faceted-row updates). const metaRange = column.columnDef.meta?.range const facetedValues = column.getFacetedMinMaxValues() const facetedMin = facetedValues?.[0] const facetedMax = facetedValues?.[1] const [min, max] = React.useMemo<[number, number]>(() => { if (Array.isArray(metaRange) && metaRange.length === 2) { const [a, b] = metaRange as [number, number] return [a, b] } if (facetedMin != null && facetedMax != null) { return [Number(facetedMin), Number(facetedMax)] } return [0, 100] }, [metaRange, facetedMin, facetedMax]) // Plain-string formatter — `` requires a parsable // value, so locale-formatted output (commas, NBSPs) breaks the input. const formatValue = React.useCallback( (value: string | number | undefined) => { if (value === undefined || value === "") return "" const numValue = Number(value) return Number.isNaN(numValue) ? "" : String(numValue) }, [], ) const value = React.useMemo(() => { if (Array.isArray(filter.value)) return filter.value.map(formatValue) return [formatValue(filter.value), ""] }, [filter.value, formatValue]) const onRangeValueChange = React.useCallback( (value: string | number, isMin?: boolean) => { const numValue = Number(value) const currentValues = Array.isArray(filter.value) ? filter.value : ["", ""] const otherValue = isMin ? (currentValues[1] ?? "") : (currentValues[0] ?? "") if ( value === "" || (!Number.isNaN(numValue) && (isMin ? numValue >= min && numValue <= (Number(otherValue) || max) : numValue <= max && numValue >= (Number(otherValue) || min))) ) { onFilterUpdate(filter.filterId, { value: isMin ? [String(value), String(otherValue)] : [String(otherValue), String(value)], }) } }, [filter.filterId, filter.value, min, max, onFilterUpdate], ) return (

onRangeValueChange(String(event.target.value), true)} /> to onRangeValueChange(String(event.target.value))} />

) } 4d:["$","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"}]]}]}],["$","li","react-day-picker",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-day-picker","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":"react-day-picker"}]]}]}]]}],["$","$L4e",null,{"namespace":"@niko-table","registryDependencies":["https://niko-table.com/r/data-table-core.json","button","input","popover","command","select","calendar"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/niko-table/components/data-table-inline-filter.tsx","content":"$50","type":"registry:component","target":"components/niko-table/components/data-table-inline-filter.tsx"},{"path":"src/components/niko-table/filters/table-inline-filter.tsx","content":"$51","type":"registry:component","target":"components/niko-table/filters/table-inline-filter.tsx"},{"path":"src/components/niko-table/filters/table-range-filter.tsx","content":"$52","type":"registry:component","target":"components/niko-table/filters/table-range-filter.tsx"}],"className":"h-[70svh] min-h-80"}]]}]