Table

Patterns

Pricing Or Comparison Table

When to use:

• A small set of rows and clear columns should stay semantically tabular.

Composition notes:

• Keep column labels explicit in TableHead.
• Prefer fullWidth when the table should read as a primary content block.

Trade-offs:

• Strong semantic clarity.
• Requires a consumer-owned overflow strategy on small screens.

import { Check, Minus } from '@vega-ui/icons';
import {
  Icon,
  Table,
  TableBody,
  TableData,
  TableHead,
  TableHeading,
  TableRow,
  VisuallyHidden,
} from '@vega-ui/react';

Summary Table With Footer Totals

When to use:

• The table needs aggregated totals or summary values.

Composition notes:

• Keep summaries in TableFoot rather than inventing ad-hoc footer rows.
• Align numeric columns consistently between body and footer.

Trade-offs:

• Keeps totals semantically tied to the table.
• Can feel heavy if the table contains only one or two rows.

import {
  Table,
  TableBody,
  TableData,
  TableFoot,
  TableHead,
  TableHeading,
  TableRow,
} from '@vega-ui/react';

const lines = [
  { item: 'Team plan · 12 seats', quantity: 12, unitPrice: 29 },

Table Inside Review Overlays

When to use:

• A dialog or drawer needs a compact tabular summary.

Composition notes:

• Keep the table narrow and scannable.
• Do not let the overlay become dependent on horizontal scrolling unless the layout is designed for it.

Trade-offs:

• Good for summaries and invoice breakdowns.
• Less robust for wide multi-column datasets.

import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
  Heading,
  Icon,
  IconButton,
  Table,
  TableBody,
  TableData,

Comparison

Quick Decision Rule

Use Table when native semantic table structure is enough and grid-like interaction is unnecessary.

Table vs DataGrid

Use Table when:

• the data is mostly read-only
• native table semantics are the main requirement
• cell-level keyboard navigation is unnecessary

Use DataGrid when:

• the feature needs richer keyboard interaction, selection, or grid behavior

Main trade-off: Table stays simpler and more semantic, while DataGrid handles heavier interaction models.

Table vs DataGridSelectable

Use Table when:

• row selection is not part of the main interaction model

Use DataGridSelectable when:

• users need explicit row selection behavior

Main trade-off: Table avoids grid complexity, while DataGridSelectable adds selection semantics and controls.

Choose This Component When

• The data is tabular and mostly read-only.
• Native semantic structure matters more than advanced interaction.
• The table should stay simple and predictable.

Do Not Choose This Component When

• The feature needs grid-like keyboard behavior.
• Selection, inline editing, or richer row interaction is central.
• The UI is really a data grid rather than a semantic table.

Troubleshooting

Table Should Probably Be A DataGrid

Symptom

The feature keeps accumulating selection, inline editing, or cell-level interaction requirements.

Likely Cause

Table is being used for a richer interaction model than it was designed for.

How To Verify

• List the required interactions for rows and cells.
• Compare them with existing DataGrid family behavior.

Fix

• Switch to DataGrid when grid-like interaction becomes central.
• Keep Table for semantic, mostly read-only layouts.

Columns Clip On Small Screens

Symptom

The table becomes hard to read or columns disappear on narrower layouts.

Likely Cause

The consumer layout does not provide an explicit overflow or responsive strategy.

How To Verify

• Test the real production container at smaller widths.
• Check whether the table has a scroll wrapper or alternate mobile layout.

Fix

• Add a consumer-owned overflow wrapper or responsive fallback.
• Reduce unnecessary column count for narrow contexts.

Alignment Looks Wrong Across Cells

Symptom

Heading and data cells do not line up or numeric values feel visually inconsistent.

Likely Cause

dataAlign and edge-padding choices do not match the intended content model.

How To Verify

• Compare heading and data alignment in the same column.
• Check first and last cell padding with edgePadded on and off.

Fix

• Use one consistent dataAlign strategy for the table.
• Adjust edge padding only when the surrounding layout already provides the needed spacing.