Table

Search…

Table

A table component.
Usage
import { Table, TableHeader, TableRow, TableCell, Text } from '@aragon/ui'
​
const App = () => (
  <Table
    header={
      <TableRow>
        <TableHeader title="Activity" />
      </TableRow>
    }
  >
    <TableRow>
      <TableCell>
        <Text>January</Text>
      </TableCell>
      <TableCell>
        <Text>February</Text>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        <Text>10 commits</Text>
      </TableCell>
      <TableCell>
        <Text>32 commits</Text>
      </TableCell>
    </TableRow>
  </Table>
)
Demonstration
Props
header
Type: Node
This is a table row containing a header of your choice.
Example:
const MyTable = (props) => (
  <Table
    header={
      <TableRow>
        <TableHeader title="Records" />
      </TableRow>
    }
  >
    {/* Table content */}
  </Table>
)
noSideBorders
Type: Boolean
Default: false
Set this to true to remove the borders on the side of the table. Useful when the table need to take the full width of the screen.

DataView

EmptyStateCard

Last modified 2mo ago

Copy link

On this page

Usage

Demonstration

Props

Usage

Demonstration

Props

`header`

Example:

`noSideBorders`