Table

Tables display sets of raw data.

Import Syntax

xxxxxxxxxx
 
import Table, {
  TableHeader,
  TableHeaderRow,
  TableHeaderCell,
  TableBody,
  TableRow,
  TableCell
} from 'calcite-react/Table'

Basic Usage

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

 
<Table>
  <TableHeader>
    <TableHeaderRow>
      <TableHeaderCell>Thing 1</TableHeaderCell>
      <TableHeaderCell>Thing 2</TableHeaderCell>
      <TableHeaderCell>Thing 3</TableHeaderCell>
    </TableHeaderRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>a</TableCell>
      <TableCell>b</TableCell>
      <TableCell>c</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>x</TableCell>
      <TableCell>y</TableCell>
      <TableCell>z</TableCell>
    </TableRow>
  </TableBody>
</Table>

Alternate Styles

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

blue

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

striped

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

plain

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

blue striped

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

noTable

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

plain justified

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

noCol

Thing 1	Thing 2	Thing 3
a	b	c
x	y	z

noRow

 
<div>
  <GuideExample label="blue">
    <Table blue>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
  <GuideExample label="striped">
    <Table striped>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
​
  <GuideExample label="plain">
    <Table plain>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
​
  <GuideExample label="blue striped">
    <Table blue striped>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
​
  <GuideExample label="noTable">
    <Table noTable>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
​
  <GuideExample label="plain justified">
    <Table plain justified>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
​
  <GuideExample label="noCol">
    <Table noCol>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
​
  <GuideExample label="noRow">
    <Table noRow>
      <TableHeader>
        <TableHeaderRow>
          <TableHeaderCell>Thing 1</TableHeaderCell>
          <TableHeaderCell>Thing 2</TableHeaderCell>
          <TableHeaderCell>Thing 3</TableHeaderCell>
        </TableHeaderRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>a</TableCell>
          <TableCell>b</TableCell>
          <TableCell>c</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>x</TableCell>
          <TableCell>y</TableCell>
          <TableCell>z</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </GuideExample>
</div>

Props

Table `default`

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.
blue	Bool	false	-	A style prop to render a blue Table.
striped	Bool	false	-	A style prop to render a Table with striped rows.
plain	Bool	false	-	A style prop to render Table with no borders or background color.
noTable	Bool	false	-	A style prop to render Table with no styling.
justified	Bool	false	-	A style prop to remove leading and trailing padding on a Table.
noCol	Bool	false	-	A style prop to render a Table with no column borders.
noRow	Bool	false	-	A style prop to render a Table with no row borders.

TableBody

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.
noCol	Bool	false	-	A style prop to render a TableBody with no column borders.
noRow	Bool	false	-	A style prop to render a TableBody with no row borders.

TableRow

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.
blue	Bool	false	-	A style prop to render a blue Table.
striped	Bool	false	-	A style prop to render a Table with striped rows.
plain	Bool	false	-	A style prop to render Table with no borders or background color.
noTable	Bool	false	-	A style prop to render Table with no styling.
noCol	Bool	false	-	A style prop to render a Table with no column borders.
noRow	Bool	false	-	A style prop to render a Table with no row borders.

TableCell

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.

TableHeader

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.
noCol	Bool	false	-	A style prop to render a Table with no column borders.
noRow	Bool	false	-	A style prop to render a Table with no row borders.

TableHeaderRow

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.
blue	Bool	false	-	A style prop to render a blue Table.
plain	Bool	false	-	A style prop to render Table with no borders or background color.
noCol	Bool	false	-	A style prop to render a Table with no column borders.
noRow	Bool	false	-	A style prop to render a Table with no row borders.

TableHeaderCell

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.

Calcite React

Table

Import Syntax

Basic Usage

Alternate Styles

Props

Table default

TableBody

TableRow

TableCell

TableHeader

TableHeaderRow

TableHeaderCell

Table `default`