"use client"

import * as React from "react"
import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react"

import { cn } from "@/lib/utils"

type SortDirection = "asc" | "desc"

export interface DataTableSimpleColumn<T> {
  key: keyof T
  header: string
  sortable?: boolean
  align?: "left" | "center" | "right"
  className?: string
  cell?: (value: T[keyof T], row: T) => React.ReactNode
}

export interface DataTableSimpleProps<T>
  extends React.HTMLAttributes<HTMLDivElement> {
  data: T[]
  columns: DataTableSimpleColumn<T>[]
  onRowClick?: (row: T) => void
  initialSort?: { key: keyof T; direction?: SortDirection }
  emptyMessage?: string
  getRowId?: (row: T, index: number) => string
}

function resolveAlignment(align?: "left" | "center" | "right") {
  if (align === "center") return "text-center"
  if (align === "right") return "text-right"
  return "text-left"
}

function compareValues(a: unknown, b: unknown) {
  if (typeof a === "number" && typeof b === "number") {
    return a - b
  }

  return String(a ?? "").localeCompare(String(b ?? ""))
}

function DataTableSimple<T>({
  data,
  columns,
  onRowClick,
  initialSort,
  emptyMessage = "No data available",
  getRowId,
  className,
  ...props
}: DataTableSimpleProps<T>) {
  const [sortConfig, setSortConfig] = React.useState<{
    key: keyof T
    direction: SortDirection
  } | null>(
    initialSort
      ? {
          key: initialSort.key,
          direction: initialSort.direction ?? "asc",
        }
      : null
  )

  const sortedData = React.useMemo(() => {
    if (!sortConfig) return data

    const { key, direction } = sortConfig
    const sorted = [...data].sort((a, b) =>
      compareValues(a[key], b[key])
    )

    return direction === "asc" ? sorted : sorted.reverse()
  }, [data, sortConfig])

  const handleSort = (column: DataTableSimpleColumn<T>) => {
    if (column.sortable === false) return

    setSortConfig((current) => {
      if (current?.key === column.key) {
        return {
          key: column.key,
          direction: current.direction === "asc" ? "desc" : "asc",
        }
      }

      return { key: column.key, direction: "asc" }
    })
  }

  const rowHandler = (row: T) => {
    onRowClick?.(row)
  }

  return (
    <div
      className={cn(
        "w-full overflow-hidden rounded-xl border border-border bg-card",
        className
      )}
      {...props}
    >
      <table className="w-full border-collapse text-sm">
        <thead className="bg-muted text-xs uppercase tracking-[0.15em] text-muted-foreground">
          <tr>
            {columns.map((column) => {
              const isSortable = column.sortable !== false
              const isActive = sortConfig?.key === column.key
              const sortIcon = !isSortable ? null : isActive ? (
                sortConfig?.direction === "asc" ? (
                  <ArrowUp className="h-3.5 w-3.5" />
                ) : (
                  <ArrowDown className="h-3.5 w-3.5" />
                )
              ) : (
                <ArrowUpDown className="h-3.5 w-3.5" />
              )

              return (
                <th
                  key={String(column.key)}
                  className={cn(
                    "px-4 py-3 font-semibold",
                    resolveAlignment(column.align)
                  )}
                >
                  <button
                    type="button"
                    onClick={() => handleSort(column)}
                    className={cn(
                      "inline-flex items-center gap-2",
                      isSortable
                        ? "cursor-pointer text-foreground"
                        : "cursor-default text-muted-foreground"
                    )}
                    aria-sort={
                      isActive
                        ? sortConfig?.direction === "asc"
                          ? "ascending"
                          : "descending"
                        : "none"
                    }
                  >
                    {column.header}
                    {sortIcon ? (
                      <span
                        className={cn(
                          "text-muted-foreground",
                          isActive ? "text-foreground" : ""
                        )}
                      >
                        {sortIcon}
                      </span>
                    ) : null}
                  </button>
                </th>
              )
            })}
          </tr>
        </thead>
        <tbody>
          {sortedData.length ? (
            sortedData.map((row, index) => {
              const rowId = getRowId
                ? getRowId(row, index)
                : `row-${index}`
              const clickable = Boolean(onRowClick)

              return (
                <tr
                  key={rowId}
                  onClick={clickable ? () => rowHandler(row) : undefined}
                  onKeyDown={
                    clickable
                      ? (event) => {
                          if (event.key === "Enter" || event.key === " ") {
                            event.preventDefault()
                            rowHandler(row)
                          }
                        }
                      : undefined
                  }
                  tabIndex={clickable ? 0 : undefined}
                  role={clickable ? "button" : undefined}
                  className={cn(
                    "border-b border-border transition last:border-b-0",
                    clickable
                      ? "cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                      : ""
                  )}
                >
                  {columns.map((column) => {
                    const value = row[column.key]

                    return (
                      <td
                        key={`${rowId}-${String(column.key)}`}
                        className={cn(
                          "px-4 py-3 text-foreground",
                          resolveAlignment(column.align),
                          column.className
                        )}
                      >
                        {column.cell ? column.cell(value, row) : String(value)}
                      </td>
                    )
                  })}
                </tr>
              )
            })
          ) : (
            <tr>
              <td
                colSpan={columns.length}
                className="px-4 py-8 text-center text-sm text-muted-foreground"
              >
                {emptyMessage}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  )
}

export { DataTableSimple }

Acme Corp	Active	$12,400
Globex Inc	Pending	$8,200
Initech	Active	$24,100
Umbrella	Inactive	$3,500
Data Table Simple

Dependencies

Files

Installation
