Table

Table primitives support semantic structure and loading skeleton state.

Quick Preview

Name	Email	Role
Lukman	lukman@example.com	Admin
Hana	hana@example.com	Editor

Preset Examples

Code

<Table variant="default" density="md">...</Table>
<Table variant="striped" density="md">...</Table>
<Table variant="bordered" density="sm">...</Table>
<Table variant="minimal" density="lg">...</Table>
<TableBody isLoading loadingRows={4} loadingColumns={3} />

Interactive Playground

Name	Email	Role
Lukman	user1@example.com	Admin
Hana	user2@example.com	Editor
Ari	user3@example.com	Admin

isLoadingRows (3)Radius (10px)

Code

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@altech-ui/react";

export function Example() {
  return (
    <div style={{ "--altech-radius": "10px" } as React.CSSProperties}>
      <Table variant="default" density="md">
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
            <TableHead>Role</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody >
          <TableRow>
            <TableCell>Lukman</TableCell>
            <TableCell>lukman@example.com</TableCell>
            <TableCell>Admin</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Hana</TableCell>
            <TableCell>hana@example.com</TableCell>
            <TableCell>Editor</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

Striped Users Table

Name	Email	Role	Status
Lukman	lukman@example.com	Admin	Active
Hana	hana@example.com	Editor	Invited
Ari	ari@example.com	Viewer	Active

Code

<Table variant="striped" density="md">
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Lukman</TableCell>
      <TableCell>lukman@example.com</TableCell>
      <TableCell>Admin</TableCell>
      <TableCell><Badge variant="success">Active</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Bordered Pricing Table

Plan	Projects	Storage	Price
Starter	3	10 GB	$12/mo
Pro	Unlimited	100 GB	$24/mo
Enterprise	Unlimited	1 TB	$99/mo

Code

<Table variant="bordered" density="sm">
  <TableHeader>
    <TableRow>
      <TableHead>Plan</TableHead>
      <TableHead>Projects</TableHead>
      <TableHead>Storage</TableHead>
      <TableHead>Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>Starter</TableCell><TableCell>3</TableCell><TableCell>10 GB</TableCell><TableCell>$12/mo</TableCell></TableRow>
    <TableRow><TableCell>Pro</TableCell><TableCell>Unlimited</TableCell><TableCell>100 GB</TableCell><TableCell>$24/mo</TableCell></TableRow>
  </TableBody>
</Table>

Loading Skeleton Table

Invoice	Date	Amount	Status

Code

<Table variant="default" density="md">
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Date</TableHead>
      <TableHead>Amount</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody isLoading loadingRows={4} loadingColumns={4} />
</Table>

Minimal Activity Table

Event	User	When
Created API key	Lukman	2 min ago
Updated billing email	Hana	10 min ago
Invited teammate	Ari	1 hour ago

Code

<Table variant="minimal" density="lg">
  <TableHeader>
    <TableRow>
      <TableHead>Event</TableHead>
      <TableHead>User</TableHead>
      <TableHead>When</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>Created API key</TableCell><TableCell>Lukman</TableCell><TableCell>2 min ago</TableCell></TableRow>
  </TableBody>
</Table>

Table With Pagination Pattern

Invoice	Customer	Total
INV-3021	Acme Co	$1,240.00
INV-3022	Nexa Studio	$340.00
INV-3023	Orbit Labs	$2,980.00

Showing 1-3 of 42 invoices

Code

<Table variant="default" density="md">...</Table>
<div className="flex items-center justify-between rounded-xl border px-3 py-2 text-sm">
  <p>Showing 1-10 of 120 rows</p>
  <div className="flex items-center gap-2">
    <Button variant="outline" size="sm">Previous</Button>
    <Button variant="outline" size="sm">Next</Button>
  </div>
</div>

Selectable Rows Pattern

Select	Name	Email
	Lukman	lukman@example.com
	Hana	hana@example.com
	Ari	ari@example.com

Code

const [selected, setSelected] = useState<string[]>([])
 
<Table>
  <TableHeader>...</TableHeader>
  <TableBody>
    <TableRow>
      <TableCell><Checkbox /></TableCell>
      <TableCell>Lukman</TableCell>
      <TableCell>lukman@example.com</TableCell>
    </TableRow>
  </TableBody>
</Table>

Usage

Code

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  Badge,
  Button,
  Checkbox
} from "@altech-ui/react"

Use TableBody with isLoading for loading placeholders.

Table supports:

variant: default | striped | bordered | minimal
density: sm | md | lg