@instructure/ui-table

---

category: packages

ui-table

A UI component library made by Instructure Inc.

Installation

yarn add @instructure/ui-table

Components

The ui-table package contains the following:

• TableControlled

---
example: true
---
<TableControlled
  caption='Top rated movies'
>
  <TableControlled.Head>
    <TableControlled.Row>
      <TableControlled.ColHeader>Rank</TableControlled.ColHeader>
      <TableControlled.ColHeader>Title</TableControlled.ColHeader>
      <TableControlled.ColHeader>Year</TableControlled.ColHeader>
      <TableControlled.ColHeader>Rating</TableControlled.ColHeader>
    </TableControlled.Row>
  </TableControlled.Head>
  <TableControlled.Body>
    <TableControlled.Row>
      <TableControlled.RowHeader>1</TableControlled.RowHeader>
      <TableControlled.Cell>The Shawshank Redemption</TableControlled.Cell>
      <TableControlled.Cell>1994</TableControlled.Cell>
      <TableControlled.Cell>9.3</TableControlled.Cell>
    </TableControlled.Row>
    <TableControlled.Row>
      <TableControlled.RowHeader>2</TableControlled.RowHeader>
      <TableControlled.Cell>The Godfather</TableControlled.Cell>
      <TableControlled.Cell>1972</TableControlled.Cell>
      <TableControlled.Cell>9.2</TableControlled.Cell>
    </TableControlled.Row>
    <TableControlled.Row>
      <TableControlled.RowHeader>3</TableControlled.RowHeader>
      <TableControlled.Cell>The Godfather: Part II</TableControlled.Cell>
      <TableControlled.Cell>1974</TableControlled.Cell>
      <TableControlled.Cell>9.0</TableControlled.Cell>
    </TableControlled.Row>
  </TableControlled.Body>
</TableControlled>