@moloodev/ui 0.0.0-stage → 0.2.0

package/src/components/ui/data-table.tsx

@@ -0,0 +1,919 @@
+"use client"
+
+import * as React from "react"
+import {
+  IconArrowsSort,
+  IconCheck,
+  IconCopy,
+  IconDots,
+  IconFilter,
+  IconMinus,
+  IconSearch,
+  IconSortAscending,
+  IconSortDescending,
+} from "@tabler/icons-react"
+import {
+  columnFilteringFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  createTableHook,
+  filterFn_arrHas,
+  metaHelper,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_datetime,
+  sortFn_text,
+  Subscribe,
+  tableFeatures,
+  type ColumnFiltersState,
+  type PaginationState,
+  type RowData,
+  type RowSelectionState,
+  type SortingState,
+  type TableState,
+} from "@tanstack/react-table"
+
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Checkbox } from "./checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "./input-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover"
+import { Skeleton as UiSkeleton } from "./skeleton"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table"
+import { toast } from "./toast"
+import { cn } from "../../lib/utils"
+
+export type EnumFilterOption = {
+  value: string
+  label: string
+}
+
+export type EnumFilterMeta = {
+  options: readonly EnumFilterOption[]
+}
+
+export type ColumnMetaWithEnumFilter = {
+  enumFilter?: EnumFilterMeta
+}
+
+export type ColumnMetaWithCopyable = {
+  copyable?: boolean
+}
+
+type DataTableColumnMeta = ColumnMetaWithEnumFilter & ColumnMetaWithCopyable
+
+export function compareValues(av: unknown, bv: unknown): number {
+  if (av == null && bv == null) return 0
+  if (av == null) return -1
+  if (bv == null) return 1
+
+  if (typeof av === "number" && typeof bv === "number") {
+    return av - bv
+  }
+
+  if (av instanceof Date || bv instanceof Date) {
+    const at = av instanceof Date ? av.getTime() : new Date(String(av)).getTime()
+    const bt = bv instanceof Date ? bv.getTime() : new Date(String(bv)).getTime()
+    if (!Number.isNaN(at) && !Number.isNaN(bt)) return at - bt
+  }
+
+  return String(av).localeCompare(String(bv), undefined, {
+    sensitivity: "base",
+    numeric: true,
+  })
+}
+
+type AccessorMap<TItem> = Record<string, (item: TItem) => unknown>
+
+export function compareBySorting<TItem>(
+  sorting: SortingState,
+  accessors: AccessorMap<TItem>,
+): (a: TItem, b: TItem) => number {
+  return (a, b) => {
+    for (const sort of sorting) {
+      const get = accessors[sort.id]
+      if (!get) continue
+      const cmp = compareValues(get(a), get(b))
+      if (cmp !== 0) return sort.desc ? -cmp : cmp
+    }
+    return 0
+  }
+}
+
+export function sortBySortingState<TItem>(
+  items: readonly TItem[],
+  sorting: SortingState,
+  getValue: (item: TItem, columnId: string) => unknown,
+): TItem[] {
+  if (!sorting.length || items.length < 2) {
+    return items.slice()
+  }
+
+  return items.slice().sort((a, b) => {
+    for (const sort of sorting) {
+      const cmp = compareValues(getValue(a, sort.id), getValue(b, sort.id))
+      if (cmp !== 0) return sort.desc ? -cmp : cmp
+    }
+    return 0
+  })
+}
+
+export function isEnumFilterNarrowed(
+  selected: readonly string[] | undefined,
+  options: readonly EnumFilterOption[],
+) {
+  if (!selected) return false
+  if (selected.length === 0) return true
+  return selected.length < options.length
+}
+
+export function allEnumFilterValues(options: readonly EnumFilterOption[]) {
+  return options.map((option) => option.value)
+}
+
+export function toggleEnumFilterValue(
+  selected: readonly string[],
+  value: string,
+  checked: boolean,
+) {
+  if (checked) {
+    return selected.includes(value) ? [...selected] : [...selected, value]
+  }
+  return selected.filter((entry) => entry !== value)
+}
+
+export type SearchAcrossFieldsInput<TItem, TField extends string> = {
+  query: string
+  fields: readonly TField[]
+  fetchField: (args: { field: TField; query: string }) => Promise<TItem[]>
+  getId: (item: TItem) => string
+  pagination: PaginationState
+  compare?: (a: TItem, b: TItem) => number
+}
+
+export type SearchAcrossFieldsResult<TItem> = {
+  items: TItem[]
+  total: number
+}
+
+export async function searchAcrossFields<TItem, TField extends string>(
+  input: SearchAcrossFieldsInput<TItem, TField>,
+): Promise<SearchAcrossFieldsResult<TItem>> {
+  const query = input.query.trim()
+  if (!query) {
+    throw new Error("searchAcrossFields requires a non-empty query")
+  }
+
+  const batches = await Promise.all(
+    input.fields.map((field) => input.fetchField({ field, query })),
+  )
+
+  const byId = new Map<string, TItem>()
+  for (const batch of batches) {
+    for (const item of batch) {
+      byId.set(input.getId(item), item)
+    }
+  }
+
+  const items = [...byId.values()]
+  if (input.compare) {
+    items.sort(input.compare)
+  }
+
+  const total = items.length
+  const start = input.pagination.pageIndex * input.pagination.pageSize
+
+  return {
+    items: items.slice(start, start + input.pagination.pageSize),
+    total,
+  }
+}
+
+function useCopy(copiedLabel: string, copyErrorLabel: string) {
+  const [copied, setCopied] = React.useState(false)
+  const timer = React.useRef<number | null>(null)
+
+  React.useEffect(
+    () => () => {
+      if (timer.current != null) window.clearTimeout(timer.current)
+    },
+    [],
+  )
+
+  async function copy(text: string) {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      if (timer.current != null) window.clearTimeout(timer.current)
+      timer.current = window.setTimeout(() => setCopied(false), 2000)
+      toast.add({ title: copiedLabel, type: "success" })
+    } catch {
+      toast.add({ title: copyErrorLabel, type: "error" })
+    }
+  }
+
+  return { copy, copied }
+}
+
+function Text({
+  copyable,
+  copyLabel = "Copy",
+  copiedLabel = "Copied to the clipboard.",
+  copyErrorLabel = "Could not copy.",
+}: {
+  copyable?: boolean
+  copyLabel?: string
+  copiedLabel?: string
+  copyErrorLabel?: string
+} = {}) {
+  const cell = useCellContext()
+  const enabled = copyable ?? cell.column.columnDef.meta?.copyable ?? false
+  const raw = cell.getValue()
+  const text = raw == null ? "" : String(raw)
+  const empty = raw == null || text.trim() === ""
+  const { copy, copied } = useCopy(copiedLabel, copyErrorLabel)
+
+  if (!enabled) {
+    return <span>{empty ? "—" : text}</span>
+  }
+
+  return (
+    <div className="flex min-w-0 items-center gap-0.5">
+      <span className="min-w-0 truncate">{empty ? "—" : text}</span>
+      {empty ? null : (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-xs"
+          className="shrink-0 text-muted-foreground hover:text-foreground"
+          aria-label={copyLabel}
+          onClick={(event) => {
+            event.stopPropagation()
+            void copy(text)
+          }}
+        >
+          {copied ? (
+            <IconCheck className="size-3" aria-hidden />
+          ) : (
+            <IconCopy className="size-3" aria-hidden />
+          )}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+function BadgeCell({
+  variant = "secondary",
+}: {
+  variant?: React.ComponentProps<typeof Badge>["variant"]
+} = {}) {
+  const cell = useCellContext()
+  const value = cell.getValue()
+  if (value == null || value === "") return <span>—</span>
+  return <Badge variant={variant}>{String(value)}</Badge>
+}
+
+function formatDate(value: unknown, locale?: string) {
+  if (value == null || value === "") return "—"
+  const date = value instanceof Date ? value : new Date(String(value))
+  if (Number.isNaN(date.getTime())) return "—"
+  return date.toLocaleString(locale)
+}
+
+function DateTime({ locale }: { locale?: string } = {}) {
+  const cell = useCellContext()
+  return (
+    <span className="text-muted-foreground tabular-nums">
+      {formatDate(cell.getValue(), locale)}
+    </span>
+  )
+}
+
+function RowActions({
+  children,
+  label = "Row actions",
+}: {
+  children: (row: unknown) => React.ReactNode
+  label?: string
+}) {
+  const cell = useCellContext()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label={label}
+          />
+        }
+      >
+        <IconDots className="size-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-40">
+        {children(cell.row.original)}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function SelectCheckbox({
+  checked,
+  indeterminate = false,
+  label,
+  onCheckedChange,
+}: {
+  checked: boolean
+  indeterminate?: boolean
+  label: string
+  onCheckedChange: () => void
+}) {
+  return (
+    <span className="relative inline-flex">
+      <Checkbox
+        checked={checked}
+        indeterminate={indeterminate}
+        aria-label={label}
+        onCheckedChange={onCheckedChange}
+        className="data-indeterminate:[&_svg]:invisible"
+      />
+      {indeterminate ? (
+        <IconMinus
+          aria-hidden
+          className="pointer-events-none absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-primary-foreground"
+        />
+      ) : null}
+    </span>
+  )
+}
+
+function SelectCell({
+  label = "Select row",
+}: {
+  label?: string
+} = {}) {
+  const cell = useCellContext()
+  const { row, table } = cell
+
+  return (
+    <Subscribe
+      source={table.atoms.rowSelection}
+      selector={(selection: RowSelectionState) => Boolean(selection[row.id])}
+    >
+      {(checked) => (
+        <SelectCheckbox
+          checked={checked}
+          label={label}
+          onCheckedChange={() => {
+            row.toggleSelected()
+          }}
+        />
+      )}
+    </Subscribe>
+  )
+}
+
+function Sortable() {
+  const header = useHeaderContext()
+  const { column, table } = header
+
+  return (
+    <Subscribe
+      source={table.atoms.sorting}
+      selector={(sorting: SortingState) => {
+        const columnSort = sorting.find((entry) => entry.id === column.id)
+        if (!columnSort) return false as const
+        return columnSort.desc ? ("desc" as const) : ("asc" as const)
+      }}
+    >
+      {(sorted) => {
+        if (sorted === "asc") {
+          return (
+            <IconSortAscending className="size-3.5 text-foreground" aria-hidden />
+          )
+        }
+        if (sorted === "desc") {
+          return (
+            <IconSortDescending className="size-3.5 text-foreground" aria-hidden />
+          )
+        }
+        return (
+          <IconArrowsSort
+            className="size-3.5 text-muted-foreground opacity-50"
+            aria-hidden
+          />
+        )
+      }}
+    </Subscribe>
+  )
+}
+
+function readEnumOptions(column: {
+  columnDef: { meta?: ColumnMetaWithEnumFilter }
+}): readonly EnumFilterOption[] {
+  return column.columnDef.meta?.enumFilter?.options ?? []
+}
+
+function EnumFilter({ label = "Filter" }: { label?: string } = {}) {
+  const header = useHeaderContext()
+  const { column, table } = header
+  const options = readEnumOptions(column)
+
+  if (options.length === 0) return null
+
+  return (
+    <Subscribe
+      source={table.atoms.columnFilters}
+      selector={(filters: ColumnFiltersState) => {
+        const entry = filters.find((filter) => filter.id === column.id)
+        const value = entry?.value
+        if (!Array.isArray(value)) return undefined
+        return value.filter((item): item is string => typeof item === "string")
+      }}
+    >
+      {(selected) => {
+        const values = selected ?? options.map((option) => option.value)
+        const narrowed = isEnumFilterNarrowed(values, options)
+
+        return (
+          <Popover>
+            <PopoverTrigger
+              render={
+                <button
+                  type="button"
+                  className="moloo-focus inline-flex size-5 items-center justify-center rounded-sm hover:text-foreground"
+                  aria-label={label}
+                />
+              }
+            >
+              <IconFilter
+                className={cn(
+                  "size-3.5",
+                  narrowed
+                    ? "text-foreground"
+                    : "text-muted-foreground opacity-50",
+                )}
+                aria-hidden
+              />
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-36 gap-0.5 p-1.5">
+              <ul className="flex flex-col gap-0.5">
+                {options.map((option) => {
+                  const checked = values.includes(option.value)
+                  const id = `enum-filter-${column.id}-${option.value}`
+                  return (
+                    <li key={option.value}>
+                      <label
+                        htmlFor={id}
+                        className="flex cursor-pointer items-center gap-1.5 rounded-sm px-1 py-1 hover:bg-muted/60"
+                      >
+                        <Checkbox
+                          id={id}
+                          checked={checked}
+                          className="size-3 rounded-[3px] [&_svg]:size-2.5"
+                          onCheckedChange={(next) => {
+                            column.setFilterValue(
+                              toggleEnumFilterValue(values, option.value, next === true),
+                            )
+                          }}
+                        />
+                        <span className="text-xs leading-none font-medium">
+                          {option.label}
+                        </span>
+                      </label>
+                    </li>
+                  )
+                })}
+              </ul>
+            </PopoverContent>
+          </Popover>
+        )
+      }}
+    </Subscribe>
+  )
+}
+
+function SelectHeader({
+  label = "Select all rows on this page",
+}: {
+  label?: string
+} = {}) {
+  const header = useHeaderContext()
+  const { table } = header
+
+  return (
+    <Subscribe
+      source={table.atoms.rowSelection}
+      selector={() => ({
+        all: table.getIsAllPageRowsSelected(),
+        some: table.getIsSomePageRowsSelected(),
+      })}
+    >
+      {({ all, some }) => (
+        <SelectCheckbox
+          checked={all}
+          indeterminate={some && !all}
+          label={label}
+          onCheckedChange={() => {
+            table.toggleAllPageRowsSelected(!all)
+          }}
+        />
+      )}
+    </Subscribe>
+  )
+}
+
+const features = tableFeatures({
+  columnMeta: metaHelper<DataTableColumnMeta>(),
+  columnFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  filterFns: {
+    arrHas: filterFn_arrHas,
+  },
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    datetime: sortFn_datetime,
+    text: sortFn_text,
+  },
+})
+
+const {
+  useAppTable,
+  createAppColumnHelper,
+  useTableContext,
+  useCellContext,
+  useHeaderContext,
+  appFeatures,
+} = createTableHook({
+  features,
+  enableSortingRemoval: false,
+  cellComponents: {
+    Text,
+    Badge: BadgeCell,
+    DateTime,
+    RowActions,
+    Select: SelectCell,
+  },
+  headerComponents: {
+    Sortable,
+    EnumFilter,
+    Select: SelectHeader,
+  },
+})
+
+export const useTable = useAppTable
+export const createColumnHelper = createAppColumnHelper
+export { useTableContext, useCellContext, useHeaderContext, appFeatures, features }
+
+export type Table<
+  TData extends RowData,
+  TSelected = TableState<typeof features>,
+> = ReturnType<typeof useTable<TData, TSelected>>
+
+type ViewState = { sorting?: SortingState }
+
+type RootProps<TData extends RowData, TSelected> = {
+  table: Table<TData, TSelected>
+  toolbar?: React.ReactNode
+  footer?: React.ReactNode
+  loading?: boolean
+  loadingFallback?: React.ReactNode
+  empty?: React.ReactNode
+  selector?: (state: TableState<typeof features>) => ViewState
+}
+
+function reorderManualSortPage<TData extends RowData, TSelected>(
+  table: Table<TData, TSelected>,
+  sorting: SortingState | undefined,
+) {
+  const rows = table.getRowModel().rows
+  if (!table.options.manualSorting || !sorting?.length) {
+    return rows
+  }
+
+  return sortBySortingState(rows, sorting, (row, columnId) => {
+    try {
+      return row.getValue(columnId)
+    } catch {
+      return undefined
+    }
+  })
+}
+
+function columnAriaSort(
+  sorting: SortingState | undefined,
+  columnId: string,
+): "ascending" | "descending" | "none" | undefined {
+  if (!sorting) return undefined
+  const entry = sorting.find((item) => item.id === columnId)
+  if (!entry) return "none"
+  return entry.desc ? "descending" : "ascending"
+}
+
+export function Root<TData extends RowData, TSelected>({
+  table,
+  toolbar,
+  footer,
+  loading,
+  loadingFallback,
+  empty = "No results.",
+  selector = (state) => state,
+}: RootProps<TData, TSelected>) {
+  return (
+    <table.AppTable selector={selector}>
+      {(state) => {
+        const rows = reorderManualSortPage(table, state.sorting)
+        const showEmpty = !loading && rows.length === 0
+
+        return (
+          <div data-slot="data-table" className="flex w-full flex-col gap-3">
+            {toolbar}
+            <div className="overflow-hidden rounded-md border-2 border-border">
+              <Table>
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <table.AppHeader key={header.id} header={header}>
+                          {(bound) => (
+                            <TableHead
+                              aria-sort={
+                                header.column.getCanSort()
+                                  ? columnAriaSort(state.sorting, header.column.id)
+                                  : undefined
+                              }
+                            >
+                              {header.isPlaceholder ? null : <bound.FlexRender />}
+                            </TableHead>
+                          )}
+                        </table.AppHeader>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {loading && loadingFallback ? (
+                    loadingFallback
+                  ) : showEmpty ? (
+                    <TableRow>
+                      <TableCell
+                        colSpan={table.getAllColumns().length}
+                        className="h-24 text-center text-muted-foreground"
+                        data-slot="data-table-empty"
+                      >
+                        {empty}
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() ? "selected" : undefined}
+                      >
+                        {row.getAllCells().map((cell) => (
+                          <table.AppCell key={cell.id} cell={cell}>
+                            {(bound) => (
+                              <TableCell>
+                                <bound.FlexRender />
+                              </TableCell>
+                            )}
+                          </table.AppCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+            {footer}
+          </div>
+        )
+      }}
+    </table.AppTable>
+  )
+}
+
+type ToolbarBulk = {
+  count: number
+  actions?: React.ReactNode
+  label?: (count: number) => string
+}
+
+type ToolbarProps = {
+  search?: string
+  onSearchChange?: (value: string) => void
+  searchPlaceholder?: string
+  primaryAction?: React.ReactNode
+  children?: React.ReactNode
+  bulk?: ToolbarBulk
+}
+
+export function Toolbar({
+  search = "",
+  onSearchChange,
+  searchPlaceholder = "Search",
+  primaryAction,
+  children,
+  bulk,
+}: ToolbarProps) {
+  if (bulk && bulk.count > 0) {
+    return (
+      <BulkBar count={bulk.count} actions={bulk.actions} label={bulk.label} />
+    )
+  }
+
+  return (
+    <div
+      data-slot="data-table-toolbar"
+      className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        {onSearchChange ? (
+          <InputGroup className="max-w-sm">
+            <InputGroupAddon>
+              <IconSearch className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              value={search}
+              onChange={(event) => onSearchChange(event.target.value)}
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
+            />
+          </InputGroup>
+        ) : null}
+        {children}
+      </div>
+      {primaryAction ? (
+        <div className="flex shrink-0 items-center gap-2">{primaryAction}</div>
+      ) : null}
+    </div>
+  )
+}
+
+type BulkBarProps = {
+  count: number
+  actions?: React.ReactNode
+  label?: (count: number) => string
+}
+
+export function BulkBar({
+  count,
+  actions,
+  label = (n) => `${n} selected`,
+}: BulkBarProps) {
+  if (count <= 0) return null
+
+  return (
+    <div
+      data-slot="data-table-bulk-bar"
+      className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <p className="label">{label(count)}</p>
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>
+      ) : null}
+    </div>
+  )
+}
+
+const paginationLabels = {
+  empty: "No results",
+  range: (from: number, to: number, count: number) => `${from}–${to} / ${count}`,
+  first: "First",
+  previous: "Previous",
+  next: "Next",
+  page: (page: number, pages: number) => `${page} / ${pages}`,
+}
+
+type PaginationLabels = typeof paginationLabels
+
+type PaginationProps<
+  TData extends RowData,
+  TSelected extends { pagination: PaginationState },
+> = {
+  table: Table<TData, TSelected>
+  labels?: Partial<PaginationLabels>
+}
+
+export function Pagination<
+  TData extends RowData,
+  TSelected extends { pagination: PaginationState },
+>({ table, labels }: PaginationProps<TData, TSelected>) {
+  const copy = { ...paginationLabels, ...labels }
+  const pagination = table.state.pagination ?? table.atoms.pagination.get()
+  const { pageIndex, pageSize } = pagination
+  const pageCount = table.getPageCount()
+  const rowCount = table.getRowCount()
+  const from = rowCount === 0 ? 0 : pageIndex * pageSize + 1
+  const to = Math.min(rowCount, (pageIndex + 1) * pageSize)
+
+  return (
+    <div
+      data-slot="data-table-pagination"
+      className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <p className="label text-muted-foreground">
+        {rowCount === 0 ? copy.empty : copy.range(from, to, rowCount)}
+      </p>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => table.firstPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {copy.first}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {copy.previous}
+        </Button>
+        <span className="label text-muted-foreground tabular-nums">
+          {copy.page(pageCount === 0 ? 0 : pageIndex + 1, Math.max(pageCount, 1))}
+        </span>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {copy.next}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function Skeleton({
+  columns,
+  rows = 3,
+}: {
+  columns: number
+  rows?: number
+}) {
+  return (
+    <>
+      {Array.from({ length: rows }, (_, row) => (
+        <TableRow key={row} aria-hidden>
+          {Array.from({ length: columns }, (_, col) => (
+            <TableCell
+              key={col}
+              className={col === columns - 1 ? "text-right" : undefined}
+            >
+              <UiSkeleton
+                className={cn(
+                  "h-4",
+                  col === columns - 1 ? "ml-auto w-14" : "w-[70%] max-w-40",
+                )}
+              />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  )
+}
+
+export type {
+  ColumnFiltersState,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+}