Data Table

import type { ColumnDef } from "@tanstack/react-table"

import { DataTable } from "@/components/uqudo/blocks/data-table/datatable"
import { DataTableColumnHeader } from "@/components/uqudo/blocks/data-table/datatable-column-header"

type User = { id: string; name: string; email: string; status: string }

const columns: ColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Name" />
    ),
  },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "status", header: "Status" },
]

<DataTable
  columns={columns}
  data={users}
  searchByCol="email"
  filters={[{ column: "status", options: ["active", "invited"] }]}
/>

<DataTable columns={columns} data={rows} initialColumnVisibility={{ role: false }} />

{
  id: "index",
  header: "#",
  enableSorting: false,
  enableHiding: false,
  cell: ({ row, table }) => <RowNumberCell row={row} table={table} />,
}

"use client"

import * as React from "react"
import {
  type ColumnDef,
  type ColumnFiltersState,
  type FilterFn,
  type RowData,
  type SortingState,
  type VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
import { Search, X } from "lucide-react"

import { Button } from "@/components/uqudo/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/uqudo/ui/table"

import { DataTableEmptyState } from "./datatable-empty-state"
import { MultiSelectFilters } from "./datatable-multi-select"
import { DataTablePagination } from "./datatable-pagination"
import { SearchBy } from "./datatable-search-by"
import { DataTableViewOptions } from "./datatable-view-options"

declare module "@tanstack/react-table" {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface ColumnMeta<TData extends RowData, TValue> {
    /** Human-readable name shown in the view-options menu. Set by DataTableColumnHeader. */
    label?: string
  }
}

export type DataTableFilter<TData> = {
  /** Column id (the accessor key) the filter applies to. */
  column: keyof TData
  /** Trigger label. Defaults to the column id. */
  label?: string
  /** Values offered in the dropdown. Rows match when their cell equals one of the checked values. */
  options?: string[]
  /** Pre-checked value on first render. */
  defaultValue?: string
}

export interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  /**
   * Column the search input filters on. Without it no search input is rendered,
   * even when `searchInput` is true.
   */
  searchByCol?: keyof TData
  rowSelection?: Record<string, boolean>
  onRowSelectionChange?: (value: Record<string, boolean>) => void
  withPagination?: boolean
  viewOption?: boolean
  searchInput?: boolean
  filters?: DataTableFilter<TData>[]
  /** Rendered at the end of the toolbar, e.g. a "Create" button. */
  actionButton?: React.ReactNode
  /**
   * Columns to start hidden, keyed by column id, e.g. `{ caseId: false }`. The
   * user can still turn them back on from the view options menu, so use this for
   * detail that's useful on demand rather than by default.
   */
  initialColumnVisibility?: VisibilityState
  /**
   * Rendered when the dataset is genuinely empty (no rows at all). Pass a
   * tailored <DataTableEmptyState/> here. When the dataset has rows but the
   * active search/filters match nothing, a generic "no matching results" state
   * is shown instead. Falls back to a generic empty state when omitted.
   */
  emptyState?: React.ReactNode
  /**
   * When provided, the whole row becomes clickable (pointer cursor, hover,
   * keyboard-activatable) and this fires with the row's original data. Clicks
   * that originate from an interactive child (button, link, input, menu item,
   * or anything marked `data-no-row-click`) are ignored so the actions column
   * keeps working. Opt-in per table — omit it to keep rows non-interactive.
   */
  onRowClick?: (row: TData) => void
}

const INTERACTIVE_CHILD_SELECTOR =
  'button, a, input, select, textarea, [role="menuitem"], [data-no-row-click]'

/**
 * Exact-match against any of the checked values. TanStack's automatic filter
 * for string columns is a substring test on the stringified filter value, so
 * `["active", "pending"]` would become `"active,pending"` and match nothing.
 */
const multiSelectFilterFn: FilterFn<unknown> = (row, columnId, values) => {
  const selected = values as string[]
  return selected.includes(String(row.getValue(columnId)))
}
multiSelectFilterFn.autoRemove = (value: unknown) =>
  !Array.isArray(value) || value.length === 0

/** Gives every column that has a dropdown filter the multi-select filter, unless it brings its own. */
function withFilterFns<TData, TValue>(
  columns: ColumnDef<TData, TValue>[],
  filters: DataTableFilter<TData>[] | undefined
) {
  if (!filters?.length) return columns

  const filtered = new Set(filters.map((filter) => String(filter.column)))

  return columns.map((column) => {
    const id =
      column.id ??
      ("accessorKey" in column ? String(column.accessorKey) : undefined)

    if (!id || !filtered.has(id) || column.filterFn) return column

    return { ...column, filterFn: multiSelectFilterFn as FilterFn<TData> }
  })
}

export function DataTable<TData, TValue>({
  columns,
  data,
  searchByCol,
  filters,
  withPagination = true,
  viewOption = true,
  searchInput = true,
  rowSelection,
  onRowSelectionChange,
  actionButton,
  initialColumnVisibility,
  emptyState,
  onRowClick,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = React.useState<SortingState>([])
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    () =>
      filters?.reduce<ColumnFiltersState>((acc, filter) => {
        if (filter.defaultValue) {
          acc.push({ id: String(filter.column), value: [filter.defaultValue] })
        }
        return acc
      }, []) ?? []
  )
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>(initialColumnVisibility ?? {})
  const [rowSelectionState, setRowSelectionState] = React.useState<
    Record<string, boolean>
  >(rowSelection ?? {})
  const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
  const mobileSearchRef = React.useRef<HTMLInputElement>(null)

  const openMobileSearch = () => {
    setIsMobileSearchOpen(true)
    requestAnimationFrame(() => mobileSearchRef.current?.focus())
  }

  const closeMobileSearch = () => {
    setIsMobileSearchOpen(false)
    requestAnimationFrame(() => mobileSearchRef.current?.blur())
  }

  const resolvedColumns = React.useMemo(
    () => withFilterFns(columns, filters),
    [columns, filters]
  )

  const table = useReactTable({
    data,
    columns: resolvedColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: (updater) => {
      const next =
        typeof updater === "function" ? updater(rowSelectionState) : updater
      setRowSelectionState(next)
      onRowSelectionChange?.(next)
    },
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection: rowSelectionState,
    },
  })

  const rows = table.getRowModel().rows
  const hasFilters = Boolean(filters && filters.length > 0)

  return (
    <div className="w-full max-w-full">
      {/* Mobile toolbar: icon buttons, search expands in place. */}
      <div className="mb-4 space-y-2 sm:hidden">
        {isMobileSearchOpen && searchInput ? (
          <div className="flex items-center gap-2">
            <SearchBy
              table={table}
              searchByCol={searchByCol}
              wrapperClassName="flex-1"
              inputClassName="h-12 rounded-xl"
              inputRef={mobileSearchRef}
            />
            <Button
              variant="ghost"
              size="icon"
              className="size-10 rounded-full"
              onClick={closeMobileSearch}
              aria-label="Close search"
            >
              <X className="size-5" />
            </Button>
          </div>
        ) : (
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-2">
              {searchInput && searchByCol && (
                <Button
                  variant="outline"
                  size="icon"
                  className="size-10 rounded-full"
                  onClick={openMobileSearch}
                  aria-label="Search"
                >
                  <Search className="size-4" />
                </Button>
              )}
              {hasFilters && (
                <MultiSelectFilters
                  filters={filters!}
                  table={table}
                  triggerClassName="rounded-full px-4 py-2"
                />
              )}
            </div>
            <div className="flex items-center gap-2">
              {viewOption && (
                <DataTableViewOptions
                  table={table}
                  hideLabel
                  className="size-10 rounded-full"
                />
              )}
              {actionButton}
            </div>
          </div>
        )}
      </div>

      {/* Desktop toolbar. */}
      <div className="mb-4 hidden flex-col gap-y-4 sm:flex sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-1 flex-col gap-y-2 sm:flex-row sm:items-center sm:gap-x-4">
          {searchInput && searchByCol && (
            <SearchBy table={table} searchByCol={searchByCol} />
          )}
          {hasFilters && (
            <MultiSelectFilters filters={filters!} table={table} />
          )}
        </div>
        <div className="flex items-center gap-x-4">
          {viewOption && <DataTableViewOptions table={table} />}
          {actionButton}
        </div>
      </div>

      <div className="mb-4 overflow-x-auto rounded-md border">
        <Table className="w-full min-w-[600px]">
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id} className="px-4 py-2 text-sm">
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {rows.length ? (
              rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  className={onRowClick ? "cursor-pointer" : undefined}
                  role={onRowClick ? "button" : undefined}
                  tabIndex={onRowClick ? 0 : undefined}
                  onClick={
                    onRowClick
                      ? (event) => {
                          if (
                            (event.target as HTMLElement).closest(
                              INTERACTIVE_CHILD_SELECTOR
                            )
                          ) {
                            return
                          }
                          onRowClick(row.original)
                        }
                      : undefined
                  }
                  onKeyDown={
                    onRowClick
                      ? (event) => {
                          if (event.key === "Enter" || event.key === " ") {
                            event.preventDefault()
                            onRowClick(row.original)
                          }
                        }
                      : undefined
                  }
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell
                      key={cell.id}
                      className="relative px-4 py-2 text-sm"
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow className="hover:bg-transparent">
                <TableCell colSpan={columns.length} className="p-0">
                  {data.length === 0 ? (
                    (emptyState ?? (
                      <DataTableEmptyState
                        compact
                        title="Nothing here yet"
                        description="There's no data to display right now."
                      />
                    ))
                  ) : (
                    <DataTableEmptyState
                      compact
                      title="No matching results"
                      description="Try adjusting your search or filters to find what you're looking for."
                    />
                  )}
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      {withPagination && <DataTablePagination table={table} />}
    </div>
  )
}