Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

NativeTable

NativeTableは、データを効率的に整理して表示するコンポーネントです。

ソース@yamada-ui/native-table

インポート

import {
  TableContainer,
  NativeTable,
  Thead,
  Tbody,
  Tfoot,
  Tr,
  Th,
  Td,
  TableCaption,
} from "@yamada-ui/react"
Copied!
  • TableContainer: テーブルが親コンテナからオーバーフローしないように、データが改行されないように水平スクロールを可能にするコンポーネントです。
  • NativeTable: データの表を表すのコンポーネントです。
  • Thead: 表の列の見出しのコンポーネントです。
  • Tbody: 表の一連の行(Tr)を内砲し、表の本体部分を構成するコンポーネントです。
  • Tfoot: 表の一連の列を統括するコンポーネントです。
  • Tr: 表のセルの行を表示するコンポーネントです。
  • Th: 表の見出しのセルのコンポーネントです。
  • Td: 表のデータのセルのコンポーネントです。
  • TableCaption: 表のキャプションまたはタイトルを表示するコンポーネントです。

使い方

編集可能な例

<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!

バリアントを変更する

編集可能な例

<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!

サイズを変更する

編集可能な例

<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!

カラースキームを変更する

編集可能な例

<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!

列の区切り線を追加する

列の区切り線を追加する場合は、withColumnBordersをtrueに設定します。

編集可能な例

<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!

外枠の区切り線を追加する

外枠の区切り線を追加する場合は、withBorderをtrueに設定します。

編集可能な例

<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!

行がホバーされたときにハイライトする

行がホバーされたときにハイライトする場合は、highlightOnHoverをtrueに設定します。

編集可能な例

<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!

キャプションを追加する

キャプションを追加する場合は、TableCaptionを使用します。placementにtopまたはbottomを設定することで、キャプションの位置が変更できます。デフォルトでは、 bottomが設定されています。

編集可能な例

<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!

GitHubでこのページを編集する

前PagingTable次Calendar