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:Tc53,"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 * as React from "react" import { useDataTable } from "../core/data-table-context" import { TableSliderFilter, type TableSliderFilterProps, } from "../filters/table-slider-filter" import { useDerivedColumnTitle } from "../hooks/use-derived-column-title" import { FILTER_VARIANTS } from "../lib/constants" type DataTableSliderFilterProps = Omit< TableSliderFilterProps, "column" | "title" > & { /** * The accessor key of the column to filter (matches column definition) */ accessorKey: keyof TData & string /** * Optional title override (if not provided, will use column.meta.label) */ title?: string } /** * A slider filter component that automatically connects to the DataTable context * and derives the title from column metadata. * * @example - Auto-detect everything from column metadata and data * const columns: DataTableColumnDef[] = [{ accessorKey: "price",..., meta: { label: "Price", unit: "$", range: [0, 1000] } },...] * * * @example - Custom range shorthand with unit * * * @example - Individual min/max control * * * @example - Full manual control with custom title * */ export function DataTableSliderFilter({ accessorKey, title, ...props }: DataTableSliderFilterProps) { const { table } = useDataTable() const column = table.getColumn(accessorKey as string) const derivedTitle = useDerivedColumnTitle(column, String(accessorKey), title) // Auto-set variant in column meta if not already set // This allows the auto-filterFn to be applied based on variant React.useMemo(() => { if (!column) return const meta = (column.columnDef.meta ||= {}) // Only set variant if not already set (respects manual configuration) if (!meta.variant) { meta.variant = FILTER_VARIANTS.RANGE } }, [column]) // Early return if column not found if (!column) { console.warn( `Column with accessorKey "${accessorKey}" not found in table columns`, ) return null } return } /** * @required displayName is required for auto feature detection * @see "feature-detection.ts" */ DataTableSliderFilter.displayName = "DataTableSliderFilter" 51:T2e8b,"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 slider filter component * @description A slider filter component for DataTable that allows users to filter numerical data within a specified range. It supports manual configuration of range, min/max values, step size, and unit labels. */ import { PlusCircle, XCircle } from "lucide-react" import * as React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Separator } from "@/components/ui/separator" import { Slider } from "@/components/ui/slider" import { cn } from "@/lib/utils" import type { DataTableColumn } from "../types" import type { RowData } from "@tanstack/react-table" interface Range { min: number max: number } type RangeValue = [number, number] function getIsValidRange(value: unknown): value is RangeValue { return ( Array.isArray(value) && value.length === 2 && typeof value[0] === "number" && typeof value[1] === "number" ) } function parseValuesAsNumbers(value: unknown): RangeValue | undefined { if ( Array.isArray(value) && value.length === 2 && value.every( v => (typeof v === "string" || typeof v === "number") && !Number.isNaN(v), ) ) { return [Number(value[0]), Number(value[1])] } return undefined } export interface TableSliderFilterProps { column: DataTableColumn title?: string /** * Manual range [min, max] (overrides min/max props and column.meta.range) */ range?: RangeValue /** * Manual minimum value (overrides column.meta.range and faceted values) */ min?: number /** * Manual maximum value (overrides column.meta.range and faceted values) */ max?: number /** * Manual step value for the slider */ step?: number /** * Unit label to display (e.g., "$", "kg", "km") */ unit?: string onValueChange?: (value: [number, number] | undefined) => void } export function TableSliderFilter({ column, title, range: manualRange, min: manualMin, max: manualMax, step: manualStep, unit: manualUnit, onValueChange, }: TableSliderFilterProps) { const id = React.useId() const columnFilterValue = parseValuesAsNumbers(column.getFilterValue()) const defaultRange = column.columnDef.meta?.range const unit = manualUnit ?? column.columnDef.meta?.unit const label = title ?? column.columnDef.meta?.label ?? column.id // Capture faceted min/max as scalars so the memo re-runs when filters/data change. const facetedValues = column.getFacetedMinMaxValues() const facetedMin = facetedValues?.[0] const facetedMax = facetedValues?.[1] // Compute range values - memoized to avoid recalculation // This is safe because we're not triggering state updates, just reading values const { min, max, step } = React.useMemo(() => { let minValue = 0 let maxValue = 100 // Priority 1: Manual range prop (highest priority) if (manualRange && getIsValidRange(manualRange)) { minValue = manualRange[0] maxValue = manualRange[1] } // Priority 2: Manual min/max props else if (manualMin != null && manualMax != null) { minValue = manualMin maxValue = manualMax } // Priority 3: Use explicit range from column metadata else if (defaultRange && getIsValidRange(defaultRange)) { minValue = defaultRange[0] maxValue = defaultRange[1] } // Priority 4: Get min/max from faceted values // This is safe in useMemo as long as we're not calling setFilterValue else if (facetedMin != null && facetedMax != null) { minValue = Number(facetedMin) maxValue = Number(facetedMax) } // Calculate appropriate step size based on range const rangeSize = maxValue - minValue const calculatedStep = rangeSize <= 20 ? 1 : rangeSize <= 100 ? Math.ceil(rangeSize / 20) : Math.ceil(rangeSize / 50) return { min: minValue, max: maxValue, step: manualStep ?? calculatedStep, } }, [ defaultRange, manualRange, manualMin, manualMax, manualStep, facetedMin, facetedMax, ]) const range = React.useMemo((): RangeValue => { return columnFilterValue ?? [min, max] }, [columnFilterValue, min, max]) const formatValue = React.useCallback((value: number) => { return value.toLocaleString(undefined, { maximumFractionDigits: 0 }) }, []) // Match count: rows that fall inside the currently-selected range, // sourced from the faceted row model so the number reflects "matches // before this filter is applied" within the current cross-filter // context. Renders inside the popover next to the label so the user // sees the hit count for the active range as they drag the slider. const facetedRows = column.getFacetedRowModel().rows const matchCount = React.useMemo(() => { const [filterMin, filterMax] = range let count = 0 for (const row of facetedRows) { const raw = row.getValue(column.id) const value = typeof raw === "number" ? raw : Number(raw) if (!Number.isFinite(value)) continue if (value >= filterMin && value <= filterMax) count += 1 } return count }, [range, facetedRows, column.id]) const applyFilterValue = React.useCallback( (value: [number, number] | undefined) => { column.setFilterValue(value) onValueChange?.(value) }, [column, onValueChange], ) const onRangeValueChange = React.useCallback( (value: string | number, isMin?: boolean) => { const numValue = Number(value) const currentValues = range if (value === "") { // Allow empty value, don't update filter return } if ( !Number.isNaN(numValue) && (isMin ? numValue >= min && numValue <= currentValues[1] : numValue <= max && numValue >= currentValues[0]) ) { applyFilterValue( isMin ? [numValue, currentValues[1]] : [currentValues[0], numValue], ) } }, [min, max, range, applyFilterValue], ) const onSliderValueChange = React.useCallback( // Radix sliders emit number[]; Base UI emits number | readonly number[] (value: RangeValue | number | readonly number[]) => { if (Array.isArray(value) && value.length === 2) { applyFilterValue([value[0], value[1]]) } }, [applyFilterValue], ) const onReset = React.useCallback( (event: React.MouseEvent) => { // Always stop the bubble — the previous DIV-only check let SVG/icon // clicks reach the popover trigger and re-open it on Clear. event.stopPropagation() applyFilterValue(undefined) }, [applyFilterValue], ) return (

{label}

{matchCount}

From

onRangeValueChange(String(event.target.value), true) } className={cn("h-8 w-full", unit && "pr-8")} /> {unit && ( {unit} )}

onRangeValueChange(String(event.target.value)) } className={cn("h-8 w-full", unit && "pr-8")} /> {unit && ( {unit} )}

{label} slider

) } /** * @required displayName is required for auto feature detection * @see "feature-detection.ts" */ TableSliderFilter.displayName = "TableSliderFilter" 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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@niko-table","registryDependencies":["https://niko-table.com/r/data-table-core.json","button","input","label","popover","separator","slider"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/niko-table/components/data-table-slider-filter.tsx","content":"$50","type":"registry:component","target":"components/niko-table/components/data-table-slider-filter.tsx"},{"path":"src/components/niko-table/filters/table-slider-filter.tsx","content":"$51","type":"registry:component","target":"components/niko-table/filters/table-slider-filter.tsx"}],"className":"h-[70svh] min-h-80"}]]}]