"use client"

import * as React from "react"

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

type SortDirection = "asc" | "desc"

export interface DataTableMiniColumn<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 DataTableMiniProps<T>
  extends React.HTMLAttributes<HTMLDivElement> {
  data: T[]
  columns: DataTableMiniColumn<T>[]
  striped?: boolean
  initialSort?: { key: keyof T; direction?: SortDirection }
  emptyMessage?: string
  getRowId?: (row: T, index: number) => string
}

const SortAscIcon = ({ className }: { className?: string }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 16 16"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.6"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M4 10l4-4 4 4" />
  </svg>
)

const SortDescIcon = ({ className }: { className?: string }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 16 16"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.6"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M4 6l4 4 4-4" />
  </svg>
)

const SortNeutralIcon = ({ className }: { className?: string }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 16 16"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.6"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M4 6l4-4 4 4" />
    <path d="M4 10l4 4 4-4" />
  </svg>
)

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 DataTableMini<T>({
  data,
  columns,
  striped = true,
  initialSort,
  emptyMessage = "No data yet",
  getRowId,
  className,
  ...props
}: DataTableMiniProps<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: DataTableMiniColumn<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" }
    })
  }

  return (
    <div
      className={cn(
        "w-full overflow-hidden rounded-xl border border-border bg-card",
        className
      )}
      {...props}
    >
      <table className="w-full border-collapse text-xs">
        <thead className="bg-muted text-[0.65rem] uppercase tracking-[0.2em] 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" ? (
                  <SortAscIcon className="h-3 w-3" />
                ) : (
                  <SortDescIcon className="h-3 w-3" />
                )
              ) : (
                <SortNeutralIcon className="h-3 w-3" />
              )

              return (
                <th
                  key={String(column.key)}
                  className={cn(
                    "px-3 py-2 font-semibold",
                    resolveAlignment(column.align)
                  )}
                >
                  <button
                    type="button"
                    onClick={() => handleSort(column)}
                    className={cn(
                      "inline-flex items-center gap-1.5",
                      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 isStriped = striped && index % 2 === 1

              return (
                <tr
                  key={rowId}
                  className={cn(
                    "border-b border-border text-foreground last:border-b-0",
                    isStriped ? "bg-muted" : ""
                  )}
                >
                  {columns.map((column) => {
                    const value = row[column.key]

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

export { DataTableMini }

Churn	12	-0.4%
Signups	1,204	+6%
Trials	418	+2%
Upgrades	96	-1%
Data Table Mini

Dependencies

Files

Installation
