Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

NativeTable

NativeTable is a component for efficiently organizing and displaying data.

Source@yamada-ui/native-table

Import

import {
  TableContainer,
  NativeTable,
  Thead,
  Tbody,
  Tfoot,
  Tr,
  Th,
  Td,
  TableCaption,
} from "@yamada-ui/react"
Copied!
  • TableContainer: A component that enables horizontal scrolling to prevent data from overflowing the parent container and to prevent data from wrapping.
  • NativeTable: A component representing a table of data.
  • Thead: A component for the headings of the table columns.
  • Tbody: A component that encloses a series of rows (Tr) and constitutes the body of the table.
  • Tfoot: A component that summarizes a series of columns in the table.
  • Tr: A component that displays a row of table cells.
  • Th: A component for the header cells of the table.
  • Td: A component for the data cells of the table.
  • TableCaption: A component for displaying the caption or title of the table.

Usage

Editable example

<TableContainer>
  <NativeTable>
    <Thead>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Thead>

    <Tbody>
      <Tr>
        <Td>ドラゴンボール</Td>
        <Td>1986年2月26日 - 1989年4月19日</Td>
        <Td numeric>全153話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールZ</Td>
        <Td>1989年4月26日 - 1996年1月31日</Td>
        <Td numeric>全291話 + スペシャル2話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールGT</Td>
        <Td>1996年2月7日 - 1997年11月19日</Td>
        <Td numeric>全64話 + 番外編1話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール改</Td>
        <Td>2009年4月5日 - 2015年6月28日</Td>
        <Td numeric>全159話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール超</Td>
        <Td>2015年7月5日 - 2018年3月25日</Td>
        <Td numeric>全131話</Td>
      </Tr>
    </Tbody>

    <Tfoot>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Tfoot>
  </NativeTable>
</TableContainer>
Copied!

Change Variants

Editable example

<VStack>
  <TableContainer>
    <NativeTable variant="simple">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>

  <TableContainer>
    <NativeTable variant="striped">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>
</VStack>
Copied!

Change Size

Editable example

<VStack>
  <TableContainer>
    <NativeTable size="sm">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>

  <TableContainer>
    <NativeTable size="md">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>

  <TableContainer>
    <NativeTable size="lg">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>

  <TableContainer>
    <NativeTable size="xl">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>
</VStack>
Copied!

Change Color Scheme

Editable example

<VStack>
  <TableContainer>
    <NativeTable variant="striped" colorScheme="secondary">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>

  <TableContainer>
    <NativeTable variant="striped" colorScheme="green">
      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>
</VStack>
Copied!

Add Column Separators

To add column separators, set withColumnBorders to true.

Editable example

<TableContainer>
  <NativeTable withColumnBorders>
    <Thead>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Thead>

    <Tbody>
      <Tr>
        <Td>ドラゴンボール</Td>
        <Td>1986年2月26日 - 1989年4月19日</Td>
        <Td numeric>全153話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールZ</Td>
        <Td>1989年4月26日 - 1996年1月31日</Td>
        <Td numeric>全291話 + スペシャル2話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールGT</Td>
        <Td>1996年2月7日 - 1997年11月19日</Td>
        <Td numeric>全64話 + 番外編1話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール改</Td>
        <Td>2009年4月5日 - 2015年6月28日</Td>
        <Td numeric>全159話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール超</Td>
        <Td>2015年7月5日 - 2018年3月25日</Td>
        <Td numeric>全131話</Td>
      </Tr>
    </Tbody>

    <Tfoot>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Tfoot>
  </NativeTable>
</TableContainer>
Copied!

Add Outer Border

To add an outer border, set withBorder to true.

Editable example

<TableContainer>
  <NativeTable withBorder>
    <Thead>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Thead>

    <Tbody>
      <Tr>
        <Td>ドラゴンボール</Td>
        <Td>1986年2月26日 - 1989年4月19日</Td>
        <Td numeric>全153話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールZ</Td>
        <Td>1989年4月26日 - 1996年1月31日</Td>
        <Td numeric>全291話 + スペシャル2話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールGT</Td>
        <Td>1996年2月7日 - 1997年11月19日</Td>
        <Td numeric>全64話 + 番外編1話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール改</Td>
        <Td>2009年4月5日 - 2015年6月28日</Td>
        <Td numeric>全159話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール超</Td>
        <Td>2015年7月5日 - 2018年3月25日</Td>
        <Td numeric>全131話</Td>
      </Tr>
    </Tbody>

    <Tfoot>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Tfoot>
  </NativeTable>
</TableContainer>
Copied!

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to true.

Editable example

<TableContainer>
  <NativeTable highlightOnHover>
    <Thead>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Thead>

    <Tbody>
      <Tr>
        <Td>ドラゴンボール</Td>
        <Td>1986年2月26日 - 1989年4月19日</Td>
        <Td numeric>全153話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールZ</Td>
        <Td>1989年4月26日 - 1996年1月31日</Td>
        <Td numeric>全291話 + スペシャル2話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボールGT</Td>
        <Td>1996年2月7日 - 1997年11月19日</Td>
        <Td numeric>全64話 + 番外編1話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール改</Td>
        <Td>2009年4月5日 - 2015年6月28日</Td>
        <Td numeric>全159話</Td>
      </Tr>
      <Tr>
        <Td>ドラゴンボール超</Td>
        <Td>2015年7月5日 - 2018年3月25日</Td>
        <Td numeric>全131話</Td>
      </Tr>
    </Tbody>

    <Tfoot>
      <Tr>
        <Th>作品名</Th>
        <Th>放送期間</Th>
        <Th numeric>話数</Th>
      </Tr>
    </Tfoot>
  </NativeTable>
</TableContainer>
Copied!

Add a Caption

To add a caption, use TableCaption. By setting placement to top or bottom, you can change the position of the caption. By default, bottom is set.

Editable example

<VStack>
  <TableContainer>
    <NativeTable>
      <TableCaption placement="top">
        ©バードスタジオ/集英社・東映アニメーション
      </TableCaption>

      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>

  <TableContainer>
    <NativeTable>
      <TableCaption placement="bottom">
        ©バードスタジオ/集英社・東映アニメーション
      </TableCaption>

      <Thead>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Thead>

      <Tbody>
        <Tr>
          <Td>ドラゴンボール</Td>
          <Td>1986年2月26日 - 1989年4月19日</Td>
          <Td numeric>全153話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールZ</Td>
          <Td>1989年4月26日 - 1996年1月31日</Td>
          <Td numeric>全291話 + スペシャル2話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボールGT</Td>
          <Td>1996年2月7日 - 1997年11月19日</Td>
          <Td numeric>全64話 + 番外編1話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール改</Td>
          <Td>2009年4月5日 - 2015年6月28日</Td>
          <Td numeric>全159話</Td>
        </Tr>
        <Tr>
          <Td>ドラゴンボール超</Td>
          <Td>2015年7月5日 - 2018年3月25日</Td>
          <Td numeric>全131話</Td>
        </Tr>
      </Tbody>

      <Tfoot>
        <Tr>
          <Th>作品名</Th>
          <Th>放送期間</Th>
          <Th numeric>話数</Th>
        </Tr>
      </Tfoot>
    </NativeTable>
  </TableContainer>
</VStack>
Copied!

Edit this page on GitHub

PreviousPagingTableNextCalendar