Semantic UI React  2.0.3
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v2
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmPaginationPortalRadioRefSelectText AreaTransitionable Portal

Table
A table displays a collections of data grouped into rows.

src/collections/Table/Table.js
Semantic UI Table Docs
TableTable.BodyTable.CellTable.FooterTable.HeaderTable.HeaderCellTable.Row

Types

Types

A standard table.

Definition

A table may be formatted to emphasize a first column that defines a row content.

Structured

A table can be formatted to display complex structured data.

States

Positive / Negative

A cell or row may let a user know whether a value is good or bad.

Error

A cell or row may call attention to an error or a negative value.

Warning

A cell or row may warn a user.

You can do the same using shorthands.

Active

A cell or row can be active or selected by a user.

Disabled

A cell can be disabled.

Variations

Single Line

A table can specify that its cell contents should remain on a single line, and not wrap.

Attached

A table can be attached to other content on a page.

Fixed

A table can use fixed a special faster form of table rendering that does not resize table cells based on content.

Fixed single line tables will automatically ensure content that does not fit in a single line will receive "..." ellipsis.

Stacking

A table can specify how it stacks table content responsively.

Selectable Row

A table can have its rows appear selectable.

Selectable Cell

A table cell can be selectable.

Using an a link inside a selectable cell will automatically make the hit box the entire cell area. By default links will inherit their cell color.

Vertical Alignment

A table, header, row or cell can adjust its vertical alignment.

Text Alignment

A table, header, row, or cell can adjust its text alignment.

Striped

A table can stripe alternate rows of content with a darker color to increase contrast.

Celled

A table may be divided each row into separate cells.

Basic

A table can reduce its complexity to increase readability.

Collapsing Cell

A cell can be collapsing so that it only uses as much space as required.

Column Count

A table can specify its column count to divide its content evenly.

Column Width

A table can specify the width of individual columns independently.

Collapsing

A table can be collapsing, taking up only as much space as its rows.

Colored

A table can be given a color to distinguish it from other table.

Inverted

A table's colors can be inverted.

Sortable

A table can appear to sort its data by column in ascending or descending order.

Full-Width Header / Footer

A definition table can have a full width header or footer, filling in the gap left by the first column.

Padded

A table may sometimes need to be more padded for legibility.

Compact

A table may sometimes need to be more compact to make more rows visible at a time.

Size

A table can also be small or large.

TableData

A table can receive a JSON object to create body rows.

Using the tableData attribute requires also to define the TablesrenderBodyRow attribute.
This is the bottom
Blazing deployments by Vercel.