DATA · COMPONENT

Table

Readable records with a sortable project column.

@raydenui/ui 0.10.1React + TypeScript

Loading the real component…

"use client";
import { useState } from "react";
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@raydenui/ui";
import "@raydenui/ui/styles.css";

export default function Example({ state = "default" }: { state?: string }) {
  const [ascending, setAscending] = useState(true);
  const rows = state === "empty" ? [] : [{ name: "Design system", owner: "Avery", status: "In progress" }, { name: "Marketing site", owner: "Sam", status: "In review" }, { name: "Customer portal", owner: "Jordan", status: "Planned" }].sort((a, b) => ascending ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name));
  return <div style={{ width: "100%", overflowX: "auto" }}><Table aria-label="Projects">
    <TableHeader><TableRow><TableHead sortable sortDirection={ascending ? "asc" : "desc"} onSort={() => setAscending(!ascending)}>Project</TableHead><TableHead>Owner</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
    <TableBody>{rows.map(row => <TableRow key={row.name}><TableCell>{row.name}</TableCell><TableCell>{row.owner}</TableCell><TableCell>{row.status}</TableCell></TableRow>)}{!rows.length && <TableRow><TableCell colSpan={3}>No projects yet. Create one to get started.</TableCell></TableRow>}</TableBody>
  </Table></div>;
}

Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.

Made for real interfaces.

Table, header, row, and cell primitives provide the structure while your application owns the data and sorting. The Project header toggles the order of a small local collection.

Try it

Activate the Project column heading twice to reverse the order. Use the empty state to inspect the custom empty row.

Table

Made for real interfaces.

Try it

A few more possibilities.