Table

BillingLast 30 days

Invoices

Recent payments and outstanding balances.

Four invoices in this period.

Invoice	Customer	Status	Method	Amount
INV-001	Acme Studio	Paid	Card	$1,250.00
INV-002	Northwind	Pending	Transfer	$890.00
INV-003	Contoso	Paid	Card	$420.50
INV-004	Fabrikam	Failed	Invoice	$64.00
Total				$2,624.50

Contract

Overview

Machine-readable contract from Component Spec.

component: tableexport: Tableversion: 1attributes: data-refineui=table

Anatomy

Part	data-refineui
root	table
row	table-row

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption
} from "@refineui/react";

<Table>
  <TableCaption>Product inventory</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Product</TableHead>
      <TableHead>Price</TableHead>
      <TableHead>Stock</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Widget A</TableCell>
      <TableCell>$19.99</TableCell>
      <TableCell>52</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Widget B</TableCell>
      <TableCell>$29.99</TableCell>
      <TableCell>12</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total Items</TableCell>
      <TableCell>64</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Scroll

Table does not own overflow. Compose with ScrollArea when width is constrained (docs column, panel) or height is constrained (dialog, fixed layout). Specimen previews that fit the stage usually skip ScrollArea.

import {
  ScrollArea,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@refineui/react";

<ScrollArea type="hover" className="w-full min-w-0">
  <ScrollAreaViewport>
    <Table>
      <TableHeader>{/* … */}</TableHeader>
      <TableBody>{/* … */}</TableBody>
    </Table>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

API Reference

Table

Root table element.

TableHeader

Table header section (<thead>).

TableBody

Table body section (<tbody>).

TableFooter

Table footer section (<tfoot>).

TableRow

Table row (<tr>).

TableHead

Header cell (<th>).

TableCell

Data cell (<td>).

TableCaption

Table caption for accessibility.