@catalystsoftware/ui 1.0.4 → 1.0.5

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

@@ -0,0 +1,1753 @@
+/**
+
+
+
+
+
+
+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>
+  )
+} */