Table

A component for displaying data in rows and columns, providing a structured layout for tabular information. Supports various cell types and semantic structure for improved accessibility.

Semantic table structure

Support for header cells and row headers

Responsive container handling

Architecture

so-table-container
Slot: default
so-table
Slot: default
so-table-head
Slot: default
so-table-row
Slot: default
so-table-header-cell
Slot: default
so-table-body
Slot: default
so-table-row
Slot: default
so-table-row-header-cell
Slot: default
so-table-cell
Slot: default

Reference

  • Table Container

    The outer wrapper that manages the table's responsive behavior and horizontal scrolling when necessary. Ensures proper table display across different viewport sizes.

  • Table

    The root table element that establishes the overall structure and layout for tabular data. Manages the relationship between header and data cells.

  • Head

    The container for header rows that define the structure and labels for table columns. Typically contains header cells that describe the data in each column.

  • Body

    The container for the main content rows of the table. Houses the data cells that correspond to the column headers defined in the table head.

  • Row

    A horizontal group of cells that represents a single data entry or header row. Maintains proper alignment and spacing of cells within the table structure.

  • Header Cell

    A cell within the table head that provides labels and descriptions for the data in its corresponding column. Implements proper semantic markup for accessibility.

  • Row Header Cell

    A header cell that labels the content of its row, typically placed as the first cell in a row. Provides context for the data cells that follow it.

  • Cell

    A standard data cell that contains the table's content. Aligns with its corresponding column and row headers to present information in a structured format.

made for toddle