@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/x/data-table-x.tsx

@@ -1,1753 +0,0 @@
-/**
-
-
-
-
-
-
-export function DataTableX({ dataTable = 'default', children, ...props }: any) {
-    switch (dataTable) {
-        case 'Closable':
-            break
-        default:
-            break;
-    }
-}
-
-const DataTableDemo = () => {
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection
-    }
-  })
-
-  return (
-    <div className='w-full'>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Default data table</p>
-    </div>
-  )
-}
-
-const DataTableDensityDemo = () => {
-  const [density, setDensity] = useState<string>()
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection
-    }
-  })
-
-  return (
-    <div className='w-full'>
-      <div className='py-4'>
-        <Select value={density} onValueChange={setDensity}>
-          <SelectTrigger className='w-full max-w-3xs' aria-label='Density select'>
-            <SelectValue placeholder='Density' />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Density</SelectLabel>
-              <SelectItem value='compact'>
-                <div className='flex items-center gap-2'>
-                  <Rows4Icon className='size-4' />
-                  Compact
-                </div>
-              </SelectItem>
-              <SelectItem value='standard' className='flex items-center gap-2'>
-                <div className='flex items-center gap-2'>
-                  <Rows3Icon className='size-4' /> Standard
-                </div>
-              </SelectItem>
-              <SelectItem value='flexible' className='flex items-center gap-2'>
-                <div className='flex items-center gap-2'>
-                  <Rows2Icon className='size-4' />
-                  Flexible
-                </div>
-              </SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </div>
-      <div className='rounded-md border'>
-        <Table
-          className={cn({
-            '[&_td]:py-px [&_th]:py-px': density === 'compact',
-            '[&_td]:py-1 [&_th]:py-1': density === 'standard',
-            '[&_td]:py-2 [&_th]:py-1': density === 'flexible'
-          })}
-        >
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>
-        Density data table{' '}
-        <a
-          href='https://www.shadcnui-blocks.com/components/table'
-          className='hover:text-primary underline'
-          target='_blank'
-        >
-          Shadcn UI Blocks
-        </a>
-      </p>
-    </div>
-  )
-}
-
-const DataTableColumnsVisibilityDemo = () => {
-  const [searchQuery, setSearchQuery] = useState<string>('')
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection
-    }
-  })
-
-  return (
-    <div className='w-full'>
-      <div className='py-4'>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant='outline' className='w-full max-w-3xs justify-between'>
-              <span className='flex items-center gap-2'>
-                <Columns3Icon />
-                Columns
-              </span>{' '}
-              <ChevronDownIcon className='ml-3' />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align='end'>
-            <div className='relative'>
-              <Input
-                value={searchQuery}
-                onChange={e => setSearchQuery(e.target.value)}
-                className='pl-8'
-                placeholder='Search'
-                onKeyDown={e => e.stopPropagation()}
-              />
-              <SearchIcon className='absolute inset-y-0 left-2 my-auto size-4' />
-            </div>
-            <DropdownMenuSeparator />
-            {table
-              .getAllColumns()
-              .filter(column => column.getCanHide())
-              .map(column => {
-                if (searchQuery && !column.id.toLowerCase().includes(searchQuery.toLowerCase())) {
-                  return null
-                }
-
-                return (
-                  <DropdownMenuCheckboxItem
-                    key={column.id}
-                    className='capitalize'
-                    checked={column.getIsVisible()}
-                    onCheckedChange={value => column.toggleVisibility(!!value)}
-                    onSelect={e => e.preventDefault()}
-                  >
-                    {column.id}
-                  </DropdownMenuCheckboxItem>
-                )
-              })}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={() => {
-                table.resetColumnVisibility()
-                setSearchQuery('')
-              }}
-            >
-              <RefreshCcwIcon /> Reset
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Data table column visibility</p>
-    </div>
-  )
-}
-
-const DataTableWithColumnFilterDemo = () => {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      id: 'price',
-      desc: false
-    }
-  ])
-
-  const table = useReactTable({
-    data: items,
-    columns,
-    state: {
-      sorting,
-      columnFilters
-    },
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    getFacetedMinMaxValues: getFacetedMinMaxValues(),
-    onSortingChange: setSorting,
-    enableSortingRemoval: false
-  })
-
-  return (
-    <div className='w-full'>
-      <div className='rounded-md border'>
-        <div className='flex flex-wrap gap-3 px-2 py-6'>
-          <div className='w-44'>
-            <Filter column={table.getColumn('product')!} />
-          </div>
-          <div className='w-36'>
-            <Filter column={table.getColumn('price')!} />
-          </div>
-          <div className='w-44'>
-            <Filter column={table.getColumn('availability')!} />
-          </div>
-          <div className='w-36'>
-            <Filter column={table.getColumn('rating')!} />
-          </div>
-        </div>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id} className='bg-muted/50'>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id} className='relative h-10 border-t select-none'>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Data table with column filter</p>
-    </div>
-  )
-}
-
-const DataTableWithSortableColumnDemo = () => {
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection
-    }
-  })
-
-  return (
-    <div className='w-full'>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead
-                      key={header.id}
-                      aria-sort={
-                        header.column.getIsSorted() === 'asc'
-                          ? 'ascending'
-                          : header.column.getIsSorted() === 'desc'
-                            ? 'descending'
-                            : 'none'
-                      }
-                    >
-                      {header.isPlaceholder ? null : (
-                        <div
-                          className={cn(
-                            header.column.getCanSort() &&
-                              'flex h-full cursor-pointer items-center justify-between gap-2 select-none'
-                          )}
-                          onClick={header.column.getToggleSortingHandler()}
-                          onKeyDown={e => {
-                            if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {
-                              e.preventDefault()
-                              header.column.getToggleSortingHandler()?.(e)
-                            }
-                          }}
-                          tabIndex={header.column.getCanSort() ? 0 : undefined}
-                        >
-                          <span className='truncate'>
-                            {flexRender(header.column.columnDef.header, header.getContext())}
-                          </span>
-                          {{
-                            asc: <ChevronUpIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />,
-                            desc: <ChevronDownIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />
-                          }[header.column.getIsSorted() as string] ?? null}
-                        </div>
-                      )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Data table with sortable column</p>
-    </div>
-  )
-}
-
-const DataTableWithResizableColumnsDemo = () => {
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [rowSelection, setRowSelection] = useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    columnResizeMode: 'onChange',
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      rowSelection
-    }
-  })
-
-  return (
-    <div className='max-w-3xl max-md:max-w-full'>
-      <div className='rounded-md border'>
-        <Table
-          className='table-fixed'
-          style={{
-            width: table.getCenterTotalSize()
-          }}
-        >
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead
-                      key={header.id}
-                      className='group/head relative h-10 select-none last:[&>.cursor-col-resize]:opacity-0'
-                      {...{
-                        colSpan: header.colSpan,
-                        style: {
-                          width: header.getSize()
-                        }
-                      }}
-                    >
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                      {header.column.getCanResize() && (
-                        <div
-                          {...{
-                            onDoubleClick: () => header.column.resetSize(),
-                            onMouseDown: header.getResizeHandler(),
-                            onTouchStart: header.getResizeHandler(),
-                            className:
-                              'group-last/head:hidden absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px'
-                          }}
-                        />
-                      )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id} className='truncate'>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Data table with resizable columns</p>
-    </div>
-  )
-}
-
-const DataTablePinnableColumnDemo = () => {
-  const [sorting, setSorting] = useState<SortingState>([])
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting
-    },
-    enableSortingRemoval: false
-  })
-
-  return (
-    <div className='w-full'>
-      <div className='rounded-md border'>
-        <Table className='[&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_tfoot_td]:border-t [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b'>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  const { column } = header
-                  const isPinned = column.getIsPinned()
-                  const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')
-                  const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')
-
-                  return (
-                    <TableHead
-                      key={header.id}
-                      className='data-pinned:bg-muted/90 relative h-10 truncate data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0'
-                      colSpan={header.colSpan}
-                      style={{ ...getPinningStyles(column) }}
-                      data-pinned={isPinned || undefined}
-                      data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}
-                    >
-                      <div className='flex items-center justify-between gap-2'>
-                        <span className='truncate'>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.header, header.getContext())}
-                        </span>
-
-                        {!header.isPlaceholder &&
-                          header.column.getCanPin() &&
-                          (header.column.getIsPinned() ? (
-                            <Button
-                              size='icon'
-                              variant='ghost'
-                              className='-mr-1 size-7'
-                              onClick={() => header.column.pin(false)}
-                              aria-label={`Unpin ${header.column.columnDef.header as string} column`}
-                              title={`Unpin ${header.column.columnDef.header as string} column`}
-                            >
-                              <PinOffIcon className='opacity-60' aria-hidden='true' />
-                            </Button>
-                          ) : (
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <Button
-                                  size='icon'
-                                  variant='ghost'
-                                  className='-mr-1 size-7'
-                                  aria-label={`Pin options for ${header.column.columnDef.header as string} column`}
-                                  title={`Pin options for ${header.column.columnDef.header as string} column`}
-                                >
-                                  <EllipsisIcon className='opacity-60' aria-hidden='true' />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align='end'>
-                                <DropdownMenuItem onClick={() => header.column.pin('left')}>
-                                  <ArrowLeftFromLineIcon size={16} className='opacity-60' aria-hidden='true' />
-                                  Stick to left
-                                </DropdownMenuItem>
-                                <DropdownMenuItem onClick={() => header.column.pin('right')}>
-                                  <ArrowRightFromLineIcon size={16} className='opacity-60' aria-hidden='true' />
-                                  Stick to right
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          ))}
-                      </div>
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => {
-                    const { column } = cell
-                    const isPinned = column.getIsPinned()
-                    const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')
-                    const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')
-
-                    return (
-                      <TableCell
-                        key={cell.id}
-                        className='data-pinned:bg-background/90 truncate data-pinned:backdrop-blur-xs'
-                        style={{ ...getPinningStyles(column) }}
-                        data-pinned={isPinned || undefined}
-                        data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
-                    )
-                  })}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Data table with pinnable columns</p>
-    </div>
-  )
-}
-
-const DraggableColumnDataTableDemo = () => {
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnOrder, setColumnOrder] = useState<string[]>(columns.map(column => column.id as string))
-
-  const table = useReactTable({
-    data,
-    columns,
-    columnResizeMode: 'onChange',
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    state: {
-      sorting,
-      columnOrder
-    },
-    onColumnOrderChange: setColumnOrder,
-    enableSortingRemoval: false
-  })
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-
-    if (active && over && active.id !== over.id) {
-      setColumnOrder(columnOrder => {
-        const oldIndex = columnOrder.indexOf(active.id as string)
-        const newIndex = columnOrder.indexOf(over.id as string)
-
-        return arrayMove(columnOrder, oldIndex, newIndex)
-      })
-    }
-  }
-
-  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}))
-
-  return (
-    <div className='w-full'>
-      <div className='rounded-md border'>
-        <DndContext
-          id={useId()}
-          collisionDetection={closestCenter}
-          modifiers={[restrictToHorizontalAxis]}
-          onDragEnd={handleDragEnd}
-          sensors={sensors}
-        >
-          <Table>
-            <TableHeader>
-              {table.getHeaderGroups().map(headerGroup => (
-                <TableRow key={headerGroup.id} className='bg-muted/50 [&>th]:border-t-0'>
-                  <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
-                    {headerGroup.headers.map(header => (
-                      <DraggableTableHeader key={header.id} header={header} />
-                    ))}
-                  </SortableContext>
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map(row => (
-                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                    {row.getVisibleCells().map(cell => (
-                      <SortableContext key={cell.id} items={columnOrder} strategy={horizontalListSortingStrategy}>
-                        <DragAlongCell key={cell.id} cell={cell} />
-                      </SortableContext>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell colSpan={columns.length} className='h-24 text-center'>
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </DndContext>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Data table with draggable columns</p>
-    </div>
-  )
-}
-
-const DraggableTableHeader = ({ header }: { header: Header<Employee, unknown> }) => {
-  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
-    id: header.column.id
-  })
-
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: 'relative',
-    transform: CSS.Translate.toString(transform),
-    transition,
-    whiteSpace: 'nowrap',
-    width: header.column.getSize(),
-    zIndex: isDragging ? 1 : 0
-  }
-
-  return (
-    <TableHead
-      ref={setNodeRef}
-      className='before:bg-border relative h-10 border-t before:absolute before:inset-y-0 before:left-0 before:w-px first:before:bg-transparent'
-      style={style}
-      aria-sort={
-        header.column.getIsSorted() === 'asc'
-          ? 'ascending'
-          : header.column.getIsSorted() === 'desc'
-            ? 'descending'
-            : 'none'
-      }
-    >
-      <div className='flex items-center justify-start gap-0.5'>
-        <Button
-          size='icon'
-          variant='ghost'
-          className='-ml-2 size-7'
-          {...attributes}
-          {...listeners}
-          aria-label='Drag to reorder'
-        >
-          <GripVerticalIcon className='opacity-60' aria-hidden='true' />
-        </Button>
-        <span className='grow truncate'>
-          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-        </span>
-        <Button
-          size='icon'
-          variant='ghost'
-          className='group -mr-1 size-7'
-          onClick={header.column.getToggleSortingHandler()}
-          onKeyDown={e => {
-            if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {
-              e.preventDefault()
-              header.column.getToggleSortingHandler()?.(e)
-            }
-          }}
-          aria-label='Toggle sorting'
-        >
-          {{
-            asc: <ChevronUpIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />,
-            desc: <ChevronDownIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />
-          }[header.column.getIsSorted() as string] ?? (
-            <ChevronUpIcon className='shrink-0 opacity-0 group-hover:opacity-60' size={16} aria-hidden='true' />
-          )}
-        </Button>
-      </div>
-    </TableHead>
-  )
-}
-
-const DragAlongCell = ({ cell }: { cell: Cell<Employee, unknown> }) => {
-  const { isDragging, setNodeRef, transform, transition } = useSortable({
-    id: cell.column.id
-  })
-
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: 'relative',
-    transform: CSS.Translate.toString(transform),
-    transition,
-    width: cell.column.getSize(),
-    zIndex: isDragging ? 1 : 0
-  }
-
-  return (
-    <TableCell ref={setNodeRef} className='truncate' style={style}>
-      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-    </TableCell>
-  )
-}
-
-const DataTableWithExpandableRowsDemo = () => {
-  const table = useReactTable({
-    data,
-    columns,
-    getRowCanExpand: row => Boolean(row.original.members),
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel()
-  })
-
-  return (
-    <div className='w-full'>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id} className='hover:bg-transparent'>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <Fragment key={row.id}>
-                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                    {row.getVisibleCells().map(cell => (
-                      <TableCell
-                        key={cell.id}
-                        className='[&:has([aria-expanded])]: [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0'
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                  {row.getIsExpanded() && (
-                    <TableRow className='hover:bg-transparent'>
-                      <TableCell colSpan={row.getVisibleCells().length} className='p-0'>
-                        <Table>
-                          <TableHeader className='border-b'>
-                            <TableRow className='hover:bg-muted/30!'>
-                              <TableHead className='w-23.5'></TableHead>
-                              <TableHead>Member Name</TableHead>
-                              <TableHead>Role</TableHead>
-                              <TableHead>Email</TableHead>
-                              <TableHead>Hire Date</TableHead>
-                              <TableHead>Date of Birth</TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {row.original.members.map(member => (
-                              <TableRow key={member.email}>
-                                <TableCell></TableCell>
-                                <TableCell>{member.name}</TableCell>
-                                <TableCell>{member.role}</TableCell>
-                                <TableCell>{member.email}</TableCell>
-                                <TableCell>{member.hireDate}</TableCell>
-                                <TableCell>{member.dob}</TableCell>
-                              </TableRow>
-                            ))}
-                          </TableBody>
-                        </Table>
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </Fragment>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Data table with expanding sub-rows made</p>
-    </div>
-  )
-}
-
-const PaginatedDataTableDemo = () => {
-  const id = useId()
-
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 5
-  })
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      id: 'product_name',
-      desc: false
-    }
-  ])
-
-  const [data, setData] = useState<Item[]>([])
-
-  useEffect(() => {
-    async function fetchPosts() {
-      const res = await fetch('https://cdn.jsdelivr.net/gh/themeselection/fy-assets/assets/json/mobile-stock.json')
-
-      if (!res.ok) {
-        throw new Error('Failed to fetch data')
-      }
-
-      const items = await res.json()
-
-      const data = await items.data
-
-      setData([...data, ...data])
-    }
-
-    fetchPosts()
-  }, [])
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    enableSortingRemoval: false,
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    state: {
-      sorting,
-      pagination
-    }
-  })
-
-  return (
-    <div className='space-y-4 md:w-full'>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id} className='hover:bg-transparent'>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id} style={{ width: `${header.getSize()}px` }} className='h-11'>
-                      {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                        <div
-                          className={cn(
-                            header.column.getCanSort() &&
-                              'flex h-full cursor-pointer items-center justify-between gap-2 select-none'
-                          )}
-                          onClick={header.column.getToggleSortingHandler()}
-                          onKeyDown={e => {
-                            if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {
-                              e.preventDefault()
-                              header.column.getToggleSortingHandler()?.(e)
-                            }
-                          }}
-                          tabIndex={header.column.getCanSort() ? 0 : undefined}
-                        >
-                          {flexRender(header.column.columnDef.header, header.getContext())}
-                          {{
-                            asc: <ChevronUpIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />,
-                            desc: <ChevronDownIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />
-                          }[header.column.getIsSorted() as string] ?? null}
-                        </div>
-                      ) : (
-                        flexRender(header.column.columnDef.header, header.getContext())
-                      )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      <div className='flex items-center justify-between gap-8'>
-        <div className='flex items-center gap-3'>
-          <Label htmlFor={id} className='max-sm:sr-only'>
-            Rows per page
-          </Label>
-          <Select
-            value={table.getState().pagination.pageSize.toString()}
-            onValueChange={value => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger id={id} className='w-fit whitespace-nowrap'>
-              <SelectValue placeholder='Select number of results' />
-            </SelectTrigger>
-            <SelectContent className='[&_*[role=option]]:pr-8 [&_*[role=option]]:pl-2 [&_*[role=option]>span]:right-2 [&_*[role=option]>span]:left-auto'>
-              {[5, 10, 25, 50].map(pageSize => (
-                <SelectItem key={pageSize} value={pageSize.toString()}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        <div className='text-muted-foreground flex grow justify-end text-sm whitespace-nowrap'>
-          <p className='text-muted-foreground text-sm whitespace-nowrap' aria-live='polite'>
-            <span className='text-foreground'>
-              {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-
-              {Math.min(
-                Math.max(
-                  table.getState().pagination.pageIndex * table.getState().pagination.pageSize +
-                    table.getState().pagination.pageSize,
-                  0
-                ),
-                table.getRowCount()
-              )}
-            </span>{' '}
-            of <span className='text-foreground'>{table.getRowCount().toString()}</span>
-          </p>
-        </div>
-
-        <div>
-          <Pagination>
-            <PaginationContent>
-              <PaginationItem>
-                <Button
-                  size='icon'
-                  variant='outline'
-                  className='disabled:pointer-events-none disabled:opacity-50'
-                  onClick={() => table.firstPage()}
-                  disabled={!table.getCanPreviousPage()}
-                  aria-label='Go to first page'
-                >
-                  <ChevronFirstIcon aria-hidden='true' />
-                </Button>
-              </PaginationItem>
-
-              <PaginationItem>
-                <Button
-                  size='icon'
-                  variant='outline'
-                  className='disabled:pointer-events-none disabled:opacity-50'
-                  onClick={() => table.previousPage()}
-                  disabled={!table.getCanPreviousPage()}
-                  aria-label='Go to previous page'
-                >
-                  <ChevronLeftIcon aria-hidden='true' />
-                </Button>
-              </PaginationItem>
-
-              <PaginationItem>
-                <Button
-                  size='icon'
-                  variant='outline'
-                  className='disabled:pointer-events-none disabled:opacity-50'
-                  onClick={() => table.nextPage()}
-                  disabled={!table.getCanNextPage()}
-                  aria-label='Go to next page'
-                >
-                  <ChevronRightIcon aria-hidden='true' />
-                </Button>
-              </PaginationItem>
-
-              <PaginationItem>
-                <Button
-                  size='icon'
-                  variant='outline'
-                  className='disabled:pointer-events-none disabled:opacity-50'
-                  onClick={() => table.lastPage()}
-                  disabled={!table.getCanNextPage()}
-                  aria-label='Go to last page'
-                >
-                  <ChevronLastIcon aria-hidden='true' />
-                </Button>
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        </div>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>Paginated data table </p>
-    </div>
-  )
-}
-
-const DataTableWithPaginationDemo = () => {
-  const pageSize = 5
-
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize
-  })
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      id: 'product_name',
-      desc: false
-    }
-  ])
-
-  const [data, setData] = useState<Item[]>([])
-
-  useEffect(() => {
-    async function fetchPosts() {
-      const res = await fetch('https://cdn.jsdelivr.net/gh/themeselection/fy-assets/assets/json/mobile-stock.json')
-
-      if (!res.ok) {
-        throw new Error('Failed to fetch data')
-      }
-
-      const items = await res.json()
-
-      const data = await items.data
-
-      setData([...data, ...data])
-    }
-
-    fetchPosts()
-  }, [])
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    enableSortingRemoval: false,
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    state: {
-      sorting,
-      pagination
-    }
-  })
-
-  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({
-    currentPage: table.getState().pagination.pageIndex + 1,
-    totalPages: table.getPageCount(),
-    paginationItemsToDisplay: 5
-  })
-
-  return (
-    <div className='w-full space-y-4'>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id} className='hover:bg-transparent'>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id} style={{ width: `${header.getSize()}px` }} className='h-11'>
-                      {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                        <div
-                          className={cn(
-                            header.column.getCanSort() &&
-                              'flex h-full cursor-pointer items-center justify-between gap-2 select-none'
-                          )}
-                          onClick={header.column.getToggleSortingHandler()}
-                          onKeyDown={e => {
-                            if (header.column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {
-                              e.preventDefault()
-                              header.column.getToggleSortingHandler()?.(e)
-                            }
-                          }}
-                          tabIndex={header.column.getCanSort() ? 0 : undefined}
-                        >
-                          {flexRender(header.column.columnDef.header, header.getContext())}
-                          {{
-                            asc: <ChevronUpIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />,
-                            desc: <ChevronDownIcon className='shrink-0 opacity-60' size={16} aria-hidden='true' />
-                          }[header.column.getIsSorted() as string] ?? null}
-                        </div>
-                      ) : (
-                        flexRender(header.column.columnDef.header, header.getContext())
-                      )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      <div className='flex items-center justify-between gap-3 max-sm:flex-col'>
-        <p className='text-muted-foreground flex-1 text-sm whitespace-nowrap' aria-live='polite'>
-          Page <span className='text-foreground'>{table.getState().pagination.pageIndex + 1}</span> of{' '}
-          <span className='text-foreground'>{table.getPageCount()}</span>
-        </p>
-
-        <div className='grow'>
-          <Pagination>
-            <PaginationContent>
-              <PaginationItem>
-                <Button
-                  size='icon'
-                  variant='outline'
-                  className='disabled:pointer-events-none disabled:opacity-50'
-                  onClick={() => table.previousPage()}
-                  disabled={!table.getCanPreviousPage()}
-                  aria-label='Go to previous page'
-                >
-                  <ChevronLeftIcon aria-hidden='true' />
-                </Button>
-              </PaginationItem>
-
-              {showLeftEllipsis && (
-                <PaginationItem>
-                  <PaginationEllipsis />
-                </PaginationItem>
-              )}
-
-              {pages.map(page => {
-                const isActive = page === table.getState().pagination.pageIndex + 1
-
-                return (
-                  <PaginationItem key={page}>
-                    <Button
-                      size='icon'
-                      variant={`${isActive ? 'outline' : 'ghost'}`}
-                      onClick={() => table.setPageIndex(page - 1)}
-                      aria-current={isActive ? 'page' : undefined}
-                    >
-                      {page}
-                    </Button>
-                  </PaginationItem>
-                )
-              })}
-
-              {showRightEllipsis && (
-                <PaginationItem>
-                  <PaginationEllipsis />
-                </PaginationItem>
-              )}
-
-              <PaginationItem>
-                <Button
-                  size='icon'
-                  variant='outline'
-                  className='disabled:pointer-events-none disabled:opacity-50'
-                  onClick={() => table.nextPage()}
-                  disabled={!table.getCanNextPage()}
-                  aria-label='Go to next page'
-                >
-                  <ChevronRightIcon aria-hidden='true' />
-                </Button>
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        </div>
-
-        <div className='flex flex-1 justify-end'>
-          <Select
-            value={table.getState().pagination.pageSize.toString()}
-            onValueChange={value => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger id='results-per-page' className='w-fit whitespace-nowrap' aria-label='Results per page'>
-              <SelectValue placeholder='Select number of results' />
-            </SelectTrigger>
-            <SelectContent>
-              {[5, 10, 25, 50].map(pageSize => (
-                <SelectItem key={pageSize} value={pageSize.toString()}>
-                  {pageSize} / page
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>
-        Data table with pagination{' '}
-        <a href='https://originui.com/table' className='hover:text-primary underline' target='_blank'>
-          Origin UI
-        </a>
-      </p>
-    </div>
-  )
-}
-
-const DataTableWithExportDemo = () => {
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = useState({})
-  const [globalFilter, setGlobalFilter] = useState('')
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onGlobalFilterChange: setGlobalFilter,
-    globalFilterFn: 'includesString',
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      globalFilter
-    }
-  })
-
-  const exportToCSV = () => {
-    const selectedRows = table.getSelectedRowModel().rows
-
-    const dataToExport =
-      selectedRows.length > 0
-        ? selectedRows.map(row => row.original)
-        : table.getFilteredRowModel().rows.map(row => row.original)
-
-    const csv = Papa.unparse(dataToExport, {
-      header: true
-    })
-
-    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
-
-    link.setAttribute('href', url)
-    link.setAttribute('download', `payments-export-${new Date().toISOString().split('T')[0]}.csv`)
-    link.style.visibility = 'hidden'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
-
-  const exportToExcel = () => {
-    const selectedRows = table.getSelectedRowModel().rows
-
-    const dataToExport =
-      selectedRows.length > 0
-        ? selectedRows.map(row => row.original)
-        : table.getFilteredRowModel().rows.map(row => row.original)
-
-    const worksheet = XLSX.utils.json_to_sheet(dataToExport)
-    const workbook = XLSX.utils.book_new()
-
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Payments')
-
-    const cols = [{ wch: 10 }, { wch: 20 }, { wch: 15 }, { wch: 25 }, { wch: 15 }]
-
-    worksheet['!cols'] = cols
-
-    XLSX.writeFile(workbook, `payments-export-${new Date().toISOString().split('T')[0]}.xlsx`)
-  }
-
-  const exportToJSON = () => {
-    const selectedRows = table.getSelectedRowModel().rows
-
-    const dataToExport =
-      selectedRows.length > 0
-        ? selectedRows.map(row => row.original)
-        : table.getFilteredRowModel().rows.map(row => row.original)
-
-    const json = JSON.stringify(dataToExport, null, 2)
-    const blob = new Blob([json], { type: 'application/json' })
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
-
-    link.setAttribute('href', url)
-    link.setAttribute('download', `payments-export-${new Date().toISOString().split('T')[0]}.json`)
-    link.style.visibility = 'hidden'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
-
-  return (
-    <div className='w-full'>
-      <div className='flex justify-between gap-2 pb-4 max-sm:flex-col sm:items-center'>
-        <div className='flex items-center space-x-2'>
-          <Input
-            placeholder='Search all columns...'
-            value={globalFilter ?? ''}
-            onChange={event => setGlobalFilter(String(event.target.value))}
-            className='max-w-sm'
-          />
-        </div>
-        <div className='flex items-center space-x-2'>
-          <div className='text-muted-foreground text-sm'>
-            {table.getSelectedRowModel().rows.length > 0 && (
-              <span className='mr-2'>
-                {table.getSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected
-              </span>
-            )}
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant='outline' size='sm'>
-                <DownloadIcon className='mr-2' />
-                Export
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align='end'>
-              <DropdownMenuItem onClick={exportToCSV}>
-                <FileTextIcon className='mr-2 size-4' />
-                Export as CSV
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={exportToExcel}>
-                <FileSpreadsheetIcon className='mr-2 size-4' />
-                Export as Excel
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={exportToJSON}>
-                <FileTextIcon className='mr-2 size-4' />
-                Export as JSON
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </div>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <p className='text-muted-foreground mt-4 text-center text-sm'>
-        Data table with export functionality (CSV, Excel, JSON)
-      </p>
-    </div>
-  )
-}
-
-const EditableTextCell = ({ getValue, row: { index }, column: { id }, table }: CellContext<Person, unknown>) => {
-  const initialValue = getValue() as string
-  const [value, setValue] = useState(initialValue)
-
-  const onBlur = () => {
-    table.options.meta?.updateData(index, id, value)
-  }
-
-  useEffect(() => {
-    setValue(initialValue)
-  }, [initialValue])
-
-  return (
-    <Input
-      value={value}
-      onChange={e => setValue(e.target.value)}
-      onBlur={onBlur}
-      className='focus-visible:ring-ring h-8 w-full border-0 bg-transparent p-1 focus-visible:ring-1'
-      aria-label='editable-text-input'
-    />
-  )
-}
-
-const EditableSelectCell = ({ getValue, row: { index }, column: { id }, table }: CellContext<Person, unknown>) => {
-  const initialValue = getValue() as string
-
-  const handleValueChange = (newValue: string) => {
-    table.options.meta?.updateData(index, id, newValue)
-  }
-
-  return (
-    <Select value={initialValue} onValueChange={handleValueChange}>
-      <SelectTrigger
-        className='focus:ring-ring h-8 w-full border-0 bg-transparent p-1 focus:ring-1'
-        aria-label={`select-status-${id}`}
-      >
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value='active'>Active</SelectItem>
-        <SelectItem value='inactive'>Inactive</SelectItem>
-        <SelectItem value='pending'>Pending</SelectItem>
-      </SelectContent>
-    </Select>
-  )
-}
-
-const EditableProgressCell = ({ getValue, row: { index }, column: { id }, table }: CellContext<Person, unknown>) => {
-  const initialValue = getValue() as number
-  const [value, setValue] = useState(initialValue.toString())
-
-  const onBlur = () => {
-    const numValue = parseFloat(value)
-    const clampedValue = Math.max(0, Math.min(100, isNaN(numValue) ? initialValue : numValue))
-
-    table.options.meta?.updateData(index, id, clampedValue)
-  }
-
-  useEffect(() => {
-    setValue(initialValue.toString())
-  }, [initialValue])
-
-  return (
-    <div className='flex items-center space-x-2'>
-      <Input
-        type='number'
-        min='0'
-        max='100'
-        value={value}
-        onChange={e => setValue(e.target.value)}
-        onBlur={onBlur}
-        className='focus-visible:ring-ring h-8 w-20 border-0 bg-transparent p-1 focus-visible:ring-1'
-        aria-label='editable-progress-input'
-      />
-      <span className='text-muted-foreground text-sm'>%</span>
-    </div>
-  )
-}
-
-const EditableDataTableDemo = () => {
-  const [data, setData] = useState(() => [...initialData])
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = useState({})
-
-  const refreshData = () => setData(() => [...initialData])
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    meta: {
-      updateData: (rowIndex, columnId, value) => {
-        setData(old =>
-          old.map((row, index) => {
-            if (index === rowIndex) {
-              return {
-                ...old[rowIndex]!,
-                [columnId]: value
-              }
-            }
-
-            return row
-          })
-        )
-      }
-    },
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection
-    }
-  })
-
-  return (
-    <div className='w-full space-y-4'>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id} colSpan={header.colSpan}>
-                      {header.isPlaceholder ? null : (
-                        <div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
-                      )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      <div className='text-muted-foreground flex items-center justify-between gap-2 text-sm max-md:flex-col'>
-        <div>{table.getRowModel().rows.length} rows total</div>
-        <div className='flex items-center space-x-2'>
-          <Button variant='outline' size='sm' onClick={refreshData}>
-            Refresh Data
-          </Button>
-        </div>
-      </div>
-
-      <p className='text-muted-foreground mt-4 text-center text-sm'>
-        Editable data table - Click on cells to edit values
-      </p>
-    </div>
-  )
-} */