grommet
components

Table

a table of data organized in cells

Storybook
CodeSandbox
Github

Props

a11yTitle

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

string
"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.

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

caption

One line description.

string
"caption"

gridArea

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

string
"a parent grid area name"

margin

The amount of margin around the component.

string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

React/DOM Properties

At its core, the Table component is a regular <table> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for table elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.edgeSize.responsiveBreakpoint

The actual breakpoint to trigger changes in Table.

string
"small"

global.size

The size that impacts max-width and width.

object
{
  xxsmall: '48px',
  xsmall: '96px',
  small: '192px',
  medium: '384px',
  large: '768px',
  xlarge: '1152px',
  xxlarge: '1536px',
  full: '100%',
}

table.extend

Any additional style for Table.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

TableCell

a cell of data in a table

Props

align

How to align the body inside the Table.

string
"left"
"right"
"center"
"justify"
"inherit"
"start"
"end"
"string"

plain

Whether default styling context should be removed.

boolean
true
false
string
"noPad"

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.

string
"col"
"row"

size

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

string
"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.

string
"top"
"middle"
"bottom"

React/DOM Properties

At its core, the TableCell component is a regular <td> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for td elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

table.body.align

How to align the body inside the Table.

string
"start"

table.body.border

The border side of the body.

string
"top"

table.body.extend

Any additional style for Table body.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

table.body.pad

The padding of the body.

string
"small"
object
{ horizontal: "small", vertical: "xsmall" }

table.footer.align

How to align the footer inside the Table.

string
"start"

table.footer.border

The border side of the footer.

string
"top"

table.footer.extend

Any additional style for Table footer.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

table.footer.fill

Whether the height should fill the footer.

string
"vertical"

table.footer.pad

The padding of the footer.

string
"small"
object
{ horizontal: "small", vertical: "xsmall" }

table.footer.verticalAlign

How to align the content vertically.

string
"top"

table.header.align

How to align the header inside the Table.

string
"start"

table.header.background

The background color of the header.

string

A color or image url.

"neutral-1"
"url(//my.com/assets/img.png)"
object

{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}
where opacity could be:
"weak"
"medium"
"strong"
boolean
number
where position could be:
any CSS for background-position
where repeat could be:
"no-repeat"
"repeat"
"string"
where size could be:
"cover"
"contain"
"string"

table.header.border

The border side of the header.

string
"bottom"

table.header.fill

Whether the height should fill the header.

string
"vertical"

table.header.extend

Any additional style for Table header.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

table.header.pad

The padding of the header.

string
"small"
object
{ horizontal: "small", vertical: "xsmall" }

table.header.verticalAlign

How to align the content vertically.

string
"bottom"

TableRow

a row of cells in a table

React/DOM Properties

At its core, the TableRow component is a regular <tr> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for tr elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

TableHeader

the header of a table

React/DOM Properties

At its core, the TableHeader component is a regular <thead> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for thead elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

TableBody

the body of a table

React/DOM Properties

At its core, the TableBody component is a regular <tbody> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for tbody elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

TableFooter

the footer of a table

React/DOM Properties

At its core, the TableFooter component is a regular <tfoot> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for tfoot elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.