All components

Table

Table is a React and Tailwind CSS navigation component from HextaUI, licensed MIT. Copy it and paste it into your project.

HextaUI MIT navigation

What it is

Table is a React and Tailwind CSS navigation component from HextaUI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

No packages beyond the project baseline

Licence

This component comes from HextaUI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Table

registry/new-york/ui/table.tsx
"use client";

import * as React from "react";

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

const Table = React.forwardRef<HTMLTableElement, React.ComponentProps<"table">>(
  function Table({ className, ...props }, ref) {
    return (
      <div
        className="relative w-full touch-manipulation overflow-auto"
        data-slot="table-wrapper"
      >
        <table
          className={cn("w-full caption-bottom text-sm", className)}
          data-slot="table"
          ref={ref}
          {...props}
        />
      </div>
    );
  }
);

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.ComponentProps<"thead">
>(function TableHeader({ className, ...props }, ref) {
  return (
    <thead
      className={cn("tabular-nums [&_tr]:border-b", className)}
      data-slot="table-header"
      ref={ref}
      {...props}
    />
  );
});

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.ComponentProps<"tbody">
>(function TableBody({ className, ...props }, ref) {
  return (
    <tbody
      className={cn("[&_tr:last-child]:border-0", className)}
      data-slot="table-body"
      ref={ref}
      {...props}
    />
  );
});

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.ComponentProps<"tfoot">
>(function TableFooter({ className, ...props }, ref) {
  return (
    <tfoot
      className={cn(
        "bg-muted/50 font-medium text-foreground tabular-nums",
        className
      )}
      data-slot="table-footer"
      ref={ref}
      {...props}
    />
  );
});

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.ComponentProps<"tr">
>(function TableRow({ className, ...props }, ref) {
  return (
    <tr
      className={cn(
        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted motion-safe:duration-200",
        className
      )}
      data-slot="table-row"
      ref={ref}
      {...props}
    />
  );
});

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ComponentProps<"th">
>(function TableHead({ className, ...props }, ref) {
  return (
    <th
      className={cn(
        "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
        className
      )}
      data-slot="table-head"
      ref={ref}
      scope={(props as any).scope ?? "col"}
      {...props}
    />
  );
});

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.ComponentProps<"td">
>(function TableCell({ className, ...props }, ref) {
  return (
    <td
      className={cn("p-4 align-middle tabular-nums", className)}
      data-slot="table-cell"
      ref={ref}
      {...props}
    />
  );
});

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.ComponentProps<"caption">
>(function TableCaption({ className, ...props }, ref) {
  return (
    <caption
      aria-atomic="true"
      aria-live="polite"
      className={cn("mt-4 text-muted-foreground text-sm", className)}
      data-slot="table-caption"
      ref={ref}
      {...props}
    />
  );
});

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
};

Similar components