Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

table

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
4,061
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
23 KB
A table of data organized in cells.
1 contributor
Use table in your project ?
Copied
npm i @bit/grommet.grommet.table
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right

Table

A table of data organized in cells.

Usage

import { Table, TableHeader, TableFooter, TableBody, TableRow } from 'grommet';
<Table />

Properties

a11yTitle

Custom title to be used by screen readers.

string

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

gridArea

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

string

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.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

caption

One line description.

string

Intrinsic element

table

Theme

global.edgeSize.responsiveBreakpoint

The actual breakpoint to trigger changes in Table. Expects string.

Defaults to

small

global.size

The size that impacts max-width and width. Expects undefined.

Defaults to

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

table.extend

Any additional style for Table. Expects string | (props) => {}.

Defaults to

undefined