Table

1. 1
   Install the following dependencies

   npmpnpmyarn

   npm install react-aria-components @tanstack/react-table
2. 2
   Create atable.tsxfile and paste the following into it.

   table.tsx

   // components/base/table/table.tsx"use client"; import { Table as AriaTable, TableHeader as AriaTableHeader, Column as AriaColumn, TableBody as AriaTableBody, Row as AriaRow, Cell as AriaCell,} from "react-aria-components";import { cx } from "@/utils/cx"; // Built on React Aria for semantic markup, keyboard navigation, row// selection and sortable columns. Pair with @tanstack/react-table for// sorting / filtering / pagination logic (see the example above). export function Table({ className, ...props }) { return ( <div className="w-full overflow-x-auto"> <AriaTable className={cx("w-full border-collapse text-left", className)} {...props} /> </div> );} // Styling is applied via scoped CSS on '.bui-table' (see styles/globals.css):// thead bg-neutral-100, border-y// th px-3 py-2.5 text-body-medium text-text-tertiary// td px-3 py-2.5 text-body-medium text-neutral-800// tbody tr border-b border-neutral-200// so the collection components can be re-exported without wrappers. export function TableColumn({ className, ...props }) { return <AriaColumn className={cx(className)} {...props} />;} export function TableRow({ className, ...props }) { return <AriaRow className={cx(className)} {...props} />;} export function TableCell({ className, ...props }) { return <AriaCell className={cx(className)} {...props} />;} export { AriaTableHeader as TableHeader, AriaTableBody as TableBody };
3. 3
   Update the import paths to match your project setup.

Sizes

Table of Contents