Table

A table is a component that organizes and displays large sets of structured data in a grid of rows and columns. It's designed to make complex information easy to scan, compare, sort, and analyze.

When to use

Displaying dense data

Ideal for user lists, product inventories, financial reports, or any dataset with clear attributes.

Displaying dense data

Ideal for user lists, product inventories, financial reports, or any dataset with clear attributes.

Displaying dense data

Ideal for user lists, product inventories, financial reports, or any dataset with clear attributes.

Comparing information

Use when users need to compare items by viewing their corresponding values in each column.

Comparing information

Use when users need to compare items by viewing their corresponding values in each column.

Comparing information

Use when users need to compare items by viewing their corresponding values in each column.

Data manipulation

When functionalities like sorting, filtering, and row selection are necessary for the user to work with the data.

Data manipulation

When functionalities like sorting, filtering, and row selection are necessary for the user to work with the data.

Data manipulation

When functionalities like sorting, filtering, and row selection are necessary for the user to work with the data.

When to avoid

Unstructured content

For simple, non-tabular data, create a list or use a menu component.

Unstructured content

For simple, non-tabular data, create a list or use a menu component.

Unstructured content

For simple, non-tabular data, create a list or use a menu component.

Visually rich content

When presenting a collection of heterogeneous items with a strong visual focus (like images and long descriptions), cards are a better choice.

Visually rich content

When presenting a collection of heterogeneous items with a strong visual focus (like images and long descriptions), cards are a better choice.

Visually rich content

When presenting a collection of heterogeneous items with a strong visual focus (like images and long descriptions), cards are a better choice.

Small screens

Complex tables can be difficult to use on mobile devices. Consider a responsive approach that refactors the table into a list or card view on smaller screens.

Small screens

Complex tables can be difficult to use on mobile devices. Consider a responsive approach that refactors the table into a list or card view on smaller screens.

Small screens

Complex tables can be difficult to use on mobile devices. Consider a responsive approach that refactors the table into a list or card view on smaller screens.

Specifications

Table properties

Header

The header contains the table title, a search bar, and primary action buttons, all of which are optional.

Pagination

Use for navigating large data sets or to minimize a long scrolling data set. Pagination is optional.

Border

The border around the table is also optional. For UIs that utilize borders to separate sections or layers on a page.

Header

The header contains the table title, a search bar, and primary action buttons, all of which are optional.

Pagination

Use for navigating large data sets or to minimize a long scrolling data set. Pagination is optional.

Border

The border around the table is also optional. For UIs that utilize borders to separate sections or layers on a page.

Header

The header contains the table title, a search bar, and primary action buttons, all of which are optional.

Pagination

Use for navigating large data sets or to minimize a long scrolling data set. Pagination is optional.

Border

The border around the table is also optional. For UIs that utilize borders to separate sections or layers on a page.

Column header properties

Sort

Controls the sorting state and corresponding icon for a column (Not sortable, Is sortable, Ascending, Descending).

Alignment

Sets the horizontal alignment of the header text (Left, Center, Right).

Sort

Controls the sorting state and corresponding icon for a column (Not sortable, Is sortable, Ascending, Descending).

Alignment

Sets the horizontal alignment of the header text (Left, Center, Right).

Sort

Controls the sorting state and corresponding icon for a column (Not sortable, Is sortable, Ascending, Descending).

Alignment

Sets the horizontal alignment of the header text (Left, Center, Right).

Cell properties

Text, text strong, supporting text

Link

Icon, badge, button

Checkbox, radio, chevron

Action icons

Slot

Text, text strong, supporting text

Link

Icon, badge, button

Checkbox, radio, chevron

Action icons

Slot

Text, text strong, supporting text

Link

Icon, badge, button

Checkbox, radio, chevron

Action icons

Slot

Text, text strong, supporting text

Link

Icon, badge, button

Checkbox, radio, chevron

Action icons

Slot

Row properties

Zebra stripe

Applies alternating background colors to rows to improve readability.

Default, hover, selected, focus

Zebra stripe

Applies alternating background colors to rows to improve readability.

Default, hover, selected, focus

Zebra stripe

Applies alternating background colors to rows to improve readability.

Default, hover, selected, focus

Anatomy

Table header (Optional)

The top-level section above the table, containing the title, a search field, and primary action buttons.

Column headers

The row at the top of the table that labels each data column and often includes sorting controls.

Cell

The individual container for a piece of data at the intersection of a row and column.

Pagination (Optional)

The section at the bottom of the table that allows users to navigate through pages of data.

Border (Optional)

The outer border that frames the entire table. Fo UIs that utilize borders for sections or layers on pages.

Caption (Optional)

A brief title or description of the table's content, positioned below the table.

Value

Table

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing