Intro
Foundations
Components
AvatarBadgeButtonCalloutColorbarDimmerExpanderFilterInputSelectSliderTableTagToggle

Table

A standardized design for tables powered by a simple tabular data structure, with several styling options. This is the default style, which includes a styled index column.

Row 0Row 0 column 1Row 0 column 2
Row 1Row 1 column 1Row 1 column 2

You can add a header with a color, remove the index styling, and turn the top and bottom borders off, which usually looks more elegant unless the borders are especially helpful for dividing content, e.g. in an article.

Header
Row 0Row 0 column 1Row 0 column 2
Row 1Row 1 column 1Row 1 column 2

Some Table properties use arrays to configure grid system columns, others to configure table columns and rows, and some to configure both. Here's a brief explanation of how each property pertains to column definition:

  • columns: how many grid columns the Table spans across four screen breakpoints
  • start: grid column from which each Table column begins; nested arrays can be used to vary start across breakpoints
  • width: number of grid columns each Table column occupies; nested arrays can be used to vary width across breakpoints
  • data: a representation of the tabular data where each array corresponds to a row with elements each corresponding to a td in that row
EMAIL
hello@carbonplan.org
NEWSLETTER
Subscribe
CarbonPlan is a registered nonprofit public benefit corporation in California with 501(c)(3) status.
(c) 2024 CARBONPLAN
READ OUR TERMS
X,Y: 0000,0000
4a30554