Skip to main content

Components

Table

Data tables display sets of data across rows and columns.

banner-Table

Anatomy

Tables are used to organize and display data efficiently. The data table component allows for customization with additional functionality, as needed by your product’s users

table anatomy guideline
  1. Header cell : input field for header text is the first row across all columns.
  2. Body text : content related to its corresponding column header.
  3. Header text : title or concise description of the content within its column.
  4. Body cell : input field for body text can contain alphanumeric text or links.

Usage

Tables are great at presenting a clear structure that can be scanned to get just the right information. Make sure to use all of the benefits this structure offers. When using tables you need to consider the structure of the data you want to display and organize that information into columns. Columns will typically have column headers. Every row within a table must have a consistent format. If the table row includes actions, they should always be placed in the rightmost column.

Common places buttons appear : Content area ,Data Table etc.

When to use

  • To present tabular information with a clear, repeating structure.
  • To help users scan structured data to make informed decisions.
  • Display tabular data for comparison.

When not to use

  • When you have fewer sections and want to emphasize each more
  • For simple, non-tabular information
  • Create page layout or design structure.

Accessibility

When using tables you need to consider the structure of the data you want to display and organize that information into columns. Columns will typically have column headers. Every row within a table must have a consistent format. If the table row includes actions, they should always be placed in the rightmost column(s).Tables are great for presenting information with a clear, repeating structure. Breaking structured data into tables helps users scan it for what they need.

Alt text

DO

Similar to a paragraph of text, textual data is always left-aligned, numerical data should generally be right-aligned

Alt text

DON'T

Not used left-aligned for text, textual data and not be right-aligned for numerical data inside the column

Content

When creating tabel :

  • The table title should make it clear to the user what this the data has in common and what purpose it serves in the UI
  • A data table’s title and description should use sentence-case capitalization.
  • A description can be added under the title to provide more information about the data or its source.
  • Column titles should stick to one or two words that describe the data in that column
  • Column titles should use sentence-case capitalization.