4d: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"] 4e: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"] 4f:T654e,'use client' 'use no memo' import { IconUser, IconMail, IconBuilding, IconMapPin, IconFilter2, IconFilterX, IconAlertCircle, } from '@tabler/icons-react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { Alert, AlertTitle } from '@/components/ui/alert' import { Badge } from '@/components/ui/badge' import { DataGrid, DataGridContainer } from '@/components/spaceui/data-grid' import { DataGridColumnHeader } from '@/components/spaceui/data-grid-column-header' import { DataGridPagination } from '@/components/spaceui/data-grid-pagination' import { DataGridTable } from '@/components/spaceui/data-grid-table' import { createFilter, Filters, type Filter, type FilterFieldConfig } from '@/components/spaceui/filters' import { ColumnDef, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, PaginationState, SortingState, useReactTable, } from '@tanstack/react-table' import { createParser, parseAsBoolean, parseAsJson, useQueryState, useQueryStates } from 'nuqs' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Button } from '@/components/ui/button' import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area' import { Skeleton } from '@/components/ui/skeleton' interface IData { id: string name: string availability: 'online' | 'away' | 'busy' | 'offline' avatar: string status: 'active' | 'inactive' flag: string // Emoji flags email: string company: string role: string joined: string location: string balance: number } const demoData: IData[] = [ { id: '1', name: 'Alex Johnson', availability: 'online', avatar: 'https://avatars.spaceui.one/v1?name=pluto&variant=glass', status: 'active', flag: 'us', email: 'alex@apple.com', company: 'Apple', role: 'CEO', joined: 'Jan, 2024', location: 'San Francisco, USA', balance: 5143.03, }, { id: '2', name: 'Sarah Chen', availability: 'away', avatar: 'https://avatars.spaceui.one/v1?name=neptune&variant=pebble', status: 'inactive', flag: 'gb', email: 'sarah@openai.com', company: 'OpenAI', role: 'CTO', joined: 'Mar, 2023', location: 'London, UK', balance: 4321.87, }, { id: '3', name: 'Michael Rodriguez', availability: 'busy', avatar: 'https://avatars.spaceui.one/v1?name=uranus&variant=invader', status: 'active', flag: 'ca', email: 'michael@meta.com', company: 'Meta', role: 'Designer', joined: 'Jun, 2022', location: 'Toronto, Canada', balance: 7654.98, }, { id: '4', name: 'Emma Wilson', availability: 'offline', avatar: 'https://avatars.spaceui.one/v1?name=earth&variant=kendo', status: 'inactive', flag: 'au', email: 'emma@tesla.com', company: 'Tesla', role: 'Developer', joined: 'Sep, 2024', location: 'Sydney, Australia', balance: 3456.45, }, { id: '5', name: 'David Kim', availability: 'online', avatar: 'https://avatars.spaceui.one/v1?name=orion&variant=lumina', status: 'active', flag: 'de', email: 'david@sap.com', company: 'SAP', role: 'Lawyer', joined: 'Nov, 2023', location: 'Berlin, Germany', balance: 9876.54, }, { id: '6', name: 'Aron Thompson', availability: 'away', avatar: 'https://avatars.spaceui.one/v1?name=lyra&variant=shaula', status: 'active', flag: 'my', email: 'aron@keenthemes.com', company: 'Keenthemes', role: 'Director', joined: 'Feb, 2022', location: 'Kuala Lumpur, MY', balance: 6214.22, }, { id: '7', name: 'James Brown', availability: 'busy', avatar: 'https://avatars.spaceui.one/v1?name=vega&variant=singularity', status: 'inactive', flag: 'es', email: 'james@bbva.es', company: 'BBVA', role: 'Product Manager', joined: 'Aug, 2024', location: 'Barcelona, Spain', balance: 5321.77, }, { id: '8', name: 'Maria Garcia', availability: 'offline', avatar: 'https://avatars.spaceui.one/v1?name=sirius&variant=triton', status: 'active', flag: 'jp', email: 'maria@sony.jp', company: 'Sony', role: 'Marketing Lead', joined: 'Dec, 2023', location: 'Tokyo, Japan', balance: 8452.39, }, { id: '9', name: 'Nick Johnson', availability: 'online', avatar: 'https://avatars.spaceui.one/v1?name=nova&variant=solar-flare', status: 'active', flag: 'fr', email: 'nick@lvmh.fr', company: 'LVMH', role: 'Data Scientist', joined: 'Apr, 2022', location: 'Paris, France', balance: 7345.1, }, { id: '10', name: 'Liam Thompson', availability: 'away', avatar: 'https://avatars.spaceui.one/v1?name=pulsar&variant=titan', status: 'inactive', flag: 'it', email: 'liam@eni.it', company: 'ENI', role: 'Engineer', joined: 'Jul, 2024', location: 'Milan, Italy', balance: 5214.88, }, { id: '11', name: 'Alex Johnson', availability: 'busy', avatar: 'https://avatars.spaceui.one/v1?name=quasar&variant=glass', status: 'active', flag: 'br', email: 'alex@vale.br', company: 'Vale', role: 'Software Engineer', joined: 'May, 2023', location: 'Rio de Janeiro, Brazil', balance: 9421.5, }, { id: '12', name: 'Sarah Chen', availability: 'offline', avatar: 'https://avatars.spaceui.one/v1?name=comet&variant=pebble', status: 'active', flag: 'in', email: 'sarah@tata.in', company: 'Tata', role: 'Sales Manager', joined: 'Oct, 2024', location: 'Mumbai, India', balance: 4521.67, }, ] // Availability status component const AvailabilityStatus = ({ availability }: { availability: string }) => { const getStatusColor = (status: string) => { switch (status) { case 'online': return 'bg-green-500' case 'away': return 'bg-yellow-500' case 'busy': return 'bg-red-500' case 'offline': return 'bg-gray-400' default: return 'bg-gray-400' } } const getStatusLabel = (status: string) => { switch (status) { case 'online': return 'Online' case 'away': return 'Away' case 'busy': return 'Busy' case 'offline': return 'Offline' default: return 'Unknown' } } return (

{getStatusLabel(availability)}

) } // Helper to check if a filter has meaningful values const getActiveFilters = (filters: Filter[]) => { return filters.filter((filter) => { const { values } = filter // Check if filter has meaningful values if (!values || values.length === 0) return false // For text/string values, check if they're not empty strings if (values.every((value) => typeof value === 'string' && value.trim() === '')) return false // For number values, check if they're not null/undefined if (values.every((value) => value === null || value === undefined)) return false // For arrays, check if they're not empty if (values.every((value) => Array.isArray(value) && value.length === 0)) return false return true }) } type FilterState = { operator: string; values: string[] } // Custom parser for "operator:value1|value2" format const parseAsFilterValue = createParser({ parse: (queryValue: string) => { if (!queryValue) return null const separatorIndex = queryValue.indexOf(':') if (separatorIndex === -1) { return { operator: 'is', values: queryValue.split('|').filter(Boolean) } } const operator = queryValue.slice(0, separatorIndex) const values = queryValue .slice(separatorIndex + 1) .split('|') .filter(Boolean) return { operator, values } }, serialize: (filter: FilterState) => { if (!filter.values?.length) return '' return `${filter.operator}:${filter.values.join('|')}` }, }) export default function Demo() { const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5, }) // Sorting state synced with URL const [sorting, setSorting] = useQueryState( 'sort', parseAsJson((v) => v as SortingState).withDefault([{ id: 'name', desc: false }]), ) // Individual filter states synced with URL const [filterStates, setFilterStates] = useQueryStates( { filters: parseAsBoolean.withDefault(false), name: parseAsFilterValue, email: parseAsFilterValue, company: parseAsFilterValue, role: parseAsFilterValue, status: parseAsFilterValue, availability: parseAsFilterValue, location: parseAsFilterValue, }, { history: 'replace', shallow: true }, ) // Derived filters array for the Filters component const filters = useMemo(() => { return Object.entries(filterStates) .filter(([key, state]) => key !== 'filters' && state !== null && typeof state !== 'boolean') .map(([key, state]) => { const filterState = state as FilterState return createFilter(key, filterState.operator, filterState.values) }) }, [filterStates]) // Async state management const [isLoading, setIsLoading] = useState(false) const [filteredData, setFilteredData] = useState(demoData) const isInitialLoad = useRef(true) const filterTimeoutRef = useRef(null) // Filter field configurations const fields: FilterFieldConfig[] = [ { key: 'name', label: 'Name', icon: , type: 'text', className: 'w-40', placeholder: 'Search names...', }, { key: 'email', label: 'Email', icon: , type: 'text', className: 'w-48', placeholder: 'user@example.com', }, { key: 'company', label: 'Company', icon: , type: 'select', searchable: true, className: 'w-[180px]', options: [ { value: 'Apple', label: 'Apple' }, { value: 'OpenAI', label: 'OpenAI' }, { value: 'Meta', label: 'Meta' }, { value: 'Tesla', label: 'Tesla' }, { value: 'SAP', label: 'SAP' }, { value: 'Keenthemes', label: 'Keenthemes' }, { value: 'BBVA', label: 'BBVA' }, { value: 'Sony', label: 'Sony' }, { value: 'LVMH', label: 'LVMH' }, { value: 'ENI', label: 'ENI' }, { value: 'Vale', label: 'Vale' }, { value: 'Tata', label: 'Tata' }, ], }, { key: 'role', label: 'Role', icon: , type: 'select', searchable: true, className: 'w-[160px]', options: [ { value: 'CEO', label: 'CEO' }, { value: 'CTO', label: 'CTO' }, { value: 'Designer', label: 'Designer' }, { value: 'Developer', label: 'Developer' }, { value: 'Lawyer', label: 'Lawyer' }, { value: 'Director', label: 'Director' }, { value: 'Product Manager', label: 'Product Manager' }, { value: 'Marketing Lead', label: 'Marketing Lead' }, { value: 'Data Scientist', label: 'Data Scientist' }, { value: 'Engineer', label: 'Engineer' }, { value: 'Software Engineer', label: 'Software Engineer' }, { value: 'Sales Manager', label: 'Sales Manager' }, ], }, { key: 'status', label: 'Status', icon: , type: 'multiselect', searchable: false, className: 'w-[140px]', options: [ { value: 'active', label: 'Active', icon:

, }, { value: 'inactive', label: 'Inactive', icon:

, }, { value: 'archived', label: 'Archived', icon:

, }, ], }, { key: 'availability', label: 'Availability', icon: , type: 'select', searchable: false, className: 'w-[160px]', options: [ { value: 'online', label: 'Online', icon: (

Online

), }, { value: 'away', label: 'Away', icon: (

Away

), }, { value: 'busy', label: 'Busy', icon: (

Busy

), }, { value: 'offline', label: 'Offline', icon: (

Offline

), }, ], }, { key: 'location', label: 'Location', icon: , type: 'text', className: 'w-40', placeholder: 'Search locations...', }, ] // Apply filters to data (shared function) const applyFiltersToData = useCallback((newFilters: Filter[]) => { let filtered = [...demoData] // Filter out empty filters before applying const activeFilters = getActiveFilters(newFilters) activeFilters.forEach((filter) => { const { field, operator, values } = filter filtered = filtered.filter((item) => { const fieldValue = item[field as keyof IData] switch (operator) { case 'is': return values.includes(fieldValue) case 'is_not': return !values.includes(fieldValue) case 'contains': return values.some((value) => String(fieldValue).toLowerCase().includes(String(value).toLowerCase())) case 'not_contains': return !values.some((value) => String(fieldValue).toLowerCase().includes(String(value).toLowerCase())) case 'equals': return fieldValue === values[0] case 'not_equals': return fieldValue !== values[0] case 'greater_than': return Number(fieldValue) > Number(values[0]) case 'less_than': return Number(fieldValue) < Number(values[0]) case 'greater_than_or_equal': return Number(fieldValue) >= Number(values[0]) case 'less_than_or_equal': return Number(fieldValue) <= Number(values[0]) case 'between': if (values.length >= 2) { const min = Number(values[0]) const max = Number(values[1]) return Number(fieldValue) >= min && Number(fieldValue) <= max } return true case 'not_between': if (values.length >= 2) { const min = Number(values[0]) const max = Number(values[1]) return Number(fieldValue) < min || Number(fieldValue) > max } return true case 'before': return new Date(String(fieldValue)) < new Date(String(values[0])) case 'after': return new Date(String(fieldValue)) > new Date(String(values[0])) default: return true } }) }) return filtered }, []) // Simulate async data filtering const simulateAsyncFiltering = useCallback( async (newFilters: Filter[]) => { setIsLoading(true) // Show loading on current data // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 800 + Math.random() * 1200)) // Apply filters and update data after timeout const filtered = applyFiltersToData(newFilters) setFilteredData(filtered) setIsLoading(false) }, [applyFiltersToData], ) const handleFiltersChange = useCallback( (newFilters: Filter[]) => { const oldActive = getActiveFilters(filters) const newActive = getActiveFilters(newFilters) // Convert Filter[] back to individual query states const nextStates: Record = {} // Reset all tracked fields first Object.keys(filterStates).forEach((key) => { nextStates[key] = null }) // Set only active ones newFilters.forEach((f) => { if (f.values.length > 0) { nextStates[f.field] = { operator: f.operator, values: f.values as string[], } } }) // Set the filters marker if any filters exist nextStates.filters = newFilters.length > 0 ? true : null setFilterStates(nextStates) if (JSON.stringify(oldActive) === JSON.stringify(newActive)) { return } setPagination((prev) => ({ ...prev, pageIndex: 0 })) // Clear any pending timeout if (filterTimeoutRef.current) { clearTimeout(filterTimeoutRef.current) } // Add a small debounce before starting the async simulation filterTimeoutRef.current = setTimeout(() => { simulateAsyncFiltering(newFilters) }, 300) }, [filters, filterStates, setFilterStates, simulateAsyncFiltering], ) // Cleanup timeout on unmount useEffect(() => { return () => { if (filterTimeoutRef.current) { clearTimeout(filterTimeoutRef.current) } } }, []) // Initial data load - only run once on mount useEffect(() => { if (isInitialLoad.current) { // Apply initial filter without loading state const initialFiltered = applyFiltersToData(filters || []) setFilteredData(initialFiltered) isInitialLoad.current = false } }, [filters, applyFiltersToData]) const columns = useMemo[]>( () => [ { accessorKey: 'name', id: 'name', header: ({ column }) => , cell: ({ row }) => { return (

{row.original.name .split(' ') .map((n) => n[0]) .join('')}

{row.original.name}

{row.original.email}

) }, size: 200, enableSorting: true, enableHiding: false, meta: { skeleton: (

), }, }, { accessorKey: 'company', id: 'company', header: ({ column }) => , cell: (info) => {info.getValue() as string}, size: 150, enableSorting: true, enableHiding: false, meta: { skeleton: , }, }, { accessorKey: 'role', id: 'role', header: ({ column }) => , cell: (info) => {info.getValue() as string}, size: 125, enableSorting: true, enableHiding: false, meta: { skeleton: , }, }, { accessorKey: 'status', id: 'status', header: 'Status', cell: ({ row }) => { const status = row.original.status if (status == 'active') { return Active } else if (status == 'inactive') { return Inactive } else if (status == 'archived') { return Archived } }, size: 100, meta: { skeleton: , }, }, { accessorKey: 'availability', id: 'availability', header: 'Availability', cell: ({ row }) => , size: 120, enableSorting: true, meta: { skeleton: (

), }, }, { accessorKey: 'location', id: 'location', header: ({ column }) => , cell: ({ row }) => (

{row.original.location}

), size: 180, enableSorting: true, meta: { skeleton: (

), }, }, { accessorKey: 'balance', id: 'balance', header: ({ column }) => , cell: ({ row }) => ${row.original.balance.toLocaleString()}, size: 120, enableSorting: true, meta: { skeleton: , }, }, ], [], ) const [columnOrder, setColumnOrder] = useState(columns.map((column) => column.id as string)) const table = useReactTable({ columns, data: filteredData, pageCount: Math.ceil((filteredData?.length || 0) / pagination.pageSize), getRowId: (row: IData) => row.id, state: { pagination, sorting: sorting || [], columnOrder, }, onColumnOrderChange: setColumnOrder, onPaginationChange: setPagination, onSortingChange: (updater) => { const nextSorting = typeof updater === 'function' ? updater(sorting || []) : updater setSorting(nextSorting, { history: 'replace', shallow: true }) }, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), }) return (

{/* Filters Section */}

} />

{filters.length > 0 && ( )}

{/* Data Grid */}

{/* Async Info Alert */} Async Mode: Simulated API Delay of 800-2000ms

) } 4c:["$","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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","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":"@tanstack/react-table"}]]}]}],["$","li","nuqs",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nuqs","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":"nuqs"}]]}]}]]}],["$","$L4d",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-data-grid.json","https://www.spaceui.one/r/components-spaceui-data-grid-column-header.json","https://www.spaceui.one/r/components-spaceui-data-grid-pagination.json","https://www.spaceui.one/r/components-spaceui-data-grid-table.json","https://www.spaceui.one/r/components-spaceui-filters.json","https://www.spaceui.one/r/primitives-alert.json","https://www.spaceui.one/r/primitives-avatar.json","https://www.spaceui.one/r/primitives-badge.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-scroll-area.json","https://www.spaceui.one/r/primitives-skeleton.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/registry/demo/components/spaceui/filters/c-filters-08/index.tsx","content":"$4f","type":"registry:component","target":"components/spaceui/filters.tsx"}],"className":"h-[70svh] min-h-80"}]]}]