# Table A table displays structured data for overview and comparison. ## Overview The table component is used to display structured data in rows and columns. It supports overview, comparison and data-driven tasks where users need to scan or interact with multiple items. Tables should represent meaningful data relationships and must not be used for layout or visual alignment. ### Density The density property allows customizing the table's visual spacing with these options: * **Comfortable** (Default) - Standard spacing for balanced readability * **Compact** - Reduced spacing to maximize information density * **Spacious** - Increased spacing for enhanced readability ### Variants The `variant` property controls the visual style of the table container card. There are three variants available: 1. **Primary** 2. **Secondary** 3. **Tertiary** **Naming will change on the next major release:** Primary - Neutral 01, Secondary - Neutral 02, Tertiary - Neutral 02 (Outlined boolean). ### Striped When the `striped`option is enabled, alternating background colors are applied to even rows. ### Sorting Table head cells can support sorting when enabled. Sorting helps users organise data and compare values within a column. * A sorting indicator is shown on hover when sorting is enabled. * Selecting a column head sorts the table by that column. * The sorting indicator remains visible while the column is sorted. * Selecting the same column head again reverses the sort order. * In right-aligned columns, the sorting indicator is positioned to the left, with the column label placed to the right. * Only one column can be sorted at a time. #### Sorting guidelines * Enable sorting only when it adds clear value for the user. * Use sorting primarily for columns with comparable values, such as numbers, dates or statuses. * Avoid enabling sorting on columns where order is not meaningful. * Ensure the sorting state is clearly communicated visually. #### Sorting accessibility considerations * Sorting must be available using keyboard interaction. * The current sort state should be communicated to assistive technologies. * The sorting indicator should not be the only way to convey sorting state. ### Interactions Tables may support interaction when it helps users complete their task. Only add interaction when it adds clear value and does not reduce clarity. Supported behaviours may include: * Column sorting * Row selection * Bulk actions * Interactive cells such as links or status indicators ### Cell The table supports multiple cell types, each mapped to corresponding Green Design System components and their available properties. Any cell type can be used in the main value, lead or trail slot. 1. **Badge** 2. **Image** 3. **Icon** 4. **Button** 5. **Link** 6. **Context menu** 7. **Formatted text - Number, account, date** ### Actions All the cell content types can be used on actions. Actions accepts an array of cell types such as buttons. When you need to use two buttons align them to the left. If you have more than two buttons use the context menu. Actions will always show in the end of the row. ### Formatting **Column justification** Columns are left-aligned by default, with options for right alignment and space-between layouts. This is useful for columns where values and actions need clear separation and consistent alignment across rows. **Column width and wrapping** Columns can have custom width. When width is set, content will wrap within the cell. **Cell vertical alignment** Cells are vertically centered by default and can be aligned to the start. Start alignment is recommended when content wraps, ensuring consistent top alignment across rows. **Sortable columns** Columns are left-aligned by default, with the label on the left and the sorting indicator on the right. For right-aligned columns, the sorting indicator is placed on the left and the label on the right. ### Responsive When the responsive option is enabled, the table adapts its layout for smaller screens. Horizontal scrolling is used until the viewport is smaller than 760px, at which point rows are restructured into a card-like format with column names on the left and corresponding values on the right. ### Headline and summery The table supports optional **headline** and **summary** properties to ensure a consistent presentation. Use headline and summary to describe the data, not interactions or controls. Keep both short and descriptive * **Headline** An optional title that describes the content of the table. * **Summary** An optional short description that provides additional context about the table content. ### Searchable If the table is searchable (set by a boolean), the header shows a search field. ### Settings If you enable the settings, a dropdown for choosing columns is visable. ### Pagination The pagination is placed in the footer, ([read more about the pagination here](https://seb.io/component/pagination)), and displays an item range indicating the currently visible rows and the total number of items, for example “1–10 of 100”. ### Plain When the `plain` option is enabled, the table is rendered without a header or footer, displaying only the data table. ### Slots The table supports state slots for error, empty and no results states. The table header includes dedicated slots for other Green Design System components, such as dropdowns or buttons, used for filtering and exporting data. ### Guidelines * Use clear and descriptive column labels. * Keep the structure predictable and consistent. * Text content should be left-aligned for readability. * Numeric values should be right-aligned, preferably aligned by decimal, to support comparison. * Avoid repeating information in table cells when it can be communicated through the column header. ### Do's and Don'ts ## UX Guidelines ### Writing UX text for table