Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Table

Tables are used to display collections of data in organised rows and columns.

GitHubGitHub logocomponents/table
StorybookStorybook logocomponents/table
DesignUsageAccessibilityUpdates

Purpose

Compare data across rows

Tables are built for information that has a consistent structure across many entries — users can scan columns to compare values at a glance.

Handles dense information well

When there are many attributes and many records, a table gives each one a fixed position — making even complex datasets navigable.

Supports further interaction

Tables can incorporate sorting, filtering, selection, and actions per row, turning a static display into an operational interface.

Anatomy

1

Table container

2

Header cells

3

Data cells

Configuration

Structured data

Tables present repeated values across rows and columns in a layout optimised for comparison and scanning.

Renders a bordered data table with column headers and data rows. Use when users need to compare multiple values across many records in a structured layout.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-md under sgds/table means sgds/table/padding-md.

sgds/table
CategoryComponent tokenSemantic tokenValuePaddingpadding-mdsgds/padding/md16pxpadding-smsgds/padding/sm—Borderborder-color-emphasissgds/border-color-emphasis—border-color-mutedsgds/border-color-muted#DFDFDFborder-width-0sgds/border-width/0—border-width-1sgds/border-width/11pxTypographyfont-weight-semiboldsgds/font-weight/semibold—Coloursurface-raisedsgds/surface-raised—Sizedimension-56sgds/dimension/56—

Usage

When to use

  • Use table when users need to compare values across rows and columns.
  • Use it for structured data where alignment helps users spot patterns or differences quickly.

When not to use

  • Do not use table for simple content that reads better as a list or card.
  • Do not crowd the table with columns that users do not need for the decision at hand.

Best practices

Keep the table easy to compare

Relevant columns and clear row content help users scan and compare results quickly.

Do not overload the table

Too many columns or repeated details make comparison slower and more error-prone.

Accessibility considerations

Built-in accessibility

  • Tables render table, row, header, and cell components for structured data.
  • Responsive tables can receive focus so users can scroll the table area.

Labels and content

  • Use clear column and row headers.
  • Keep cell content concise and avoid using tables for layout.

Focus and interaction

  • Interactive elements inside cells should follow the table reading order.
  • Do not remove table headers when switching to responsive layouts.

Keyboard interaction

KeyInteractionTabMoves focus from the responsive table or cell control to the next focusable element.Shift+TabMoves focus to the previous interactive element.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for tablePlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/table

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.