grommet
components

Table

a table of data organized in cells

NameFlavor
EricCoconut
ChrisWatermelon
Storybook
CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

caption

One line description.
"string"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

Theme

global.edgeSize.responsiveBreakpoint

The actual breakpoint to trigger changes in Table.
"small"

global.size

The size that impacts max-width and width.
{
  "xxsmall": "48px",
  "xsmall": "96px",
  "small": "192px",
  "medium": "384px",
  "large": "768px",
  "xlarge": "1152px",
  "xxlarge": "1536px",
  "full": "100%"
}

table.extend

Any additional style for Table.
"any CSS"
(props) => {}

TableCell

a cell of data in a table

Props

plain

Whether default styling context should be removed.
truefalse

scope

For header cells, what scope the header is for. Typically, the cells in a TableHeader have 'col' scope and the primary cell in each row in the TableBody has 'row' scope.

"col""row"

size

What size the cell should be. Typically, this is not needed unless you are trying to align multiple tables.

"xxsmall""xsmall""small""medium""large""xlarge""1/2""1/3""2/3""1/4""2/4""3/4""string"

verticalAlign

How to align the contents vertically.
"top""middle""bottom"

Theme

table.body.align

How to align the body inside the Table.
"start"

table.body.border

The border side of the body.
string

table.body.extend

Any additional style for Table body.
"any CSS"
(props) => {}

table.body.pad

The padding of the body.
{
  "horizontal": "small",
  "vertical": "xsmall"
}

table.footer.align

How to align the footer inside the Table.
"start"

table.footer.border

The border side of the footer.
"top"

table.footer.extend

Any additional style for Table footer.
"any CSS"
(props) => {}

table.footer.fill

Whether the height should fill the footer.
string

table.footer.pad

The padding of the footer.
{
  "horizontal": "small",
  "vertical": "xsmall"
}

table.footer.verticalAlign

How to align the content vertically.
string

table.header.align

How to align the header inside the Table.
"start"

table.header.background

The background color of the header.
string | object

table.header.border

The border side of the header.
"bottom"

table.header.fill

Whether the height should fill the header.
string

table.header.extend

Any additional style for Table header.
"any CSS"
(props) => {}

table.header.pad

The padding of the header.
{
  "horizontal": "small",
  "vertical": "xsmall"
}

table.header.verticalAlign

How to align the content vertically.
string

TableRow

a row of cells in a table

TableHeader

the header of a table

TableBody

the body of a table

Table

the footer of a table