NativeTable

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

使い方

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分
タイトル	公開日	上映時間

<NativeTable.Root>
  <NativeTable.Thead>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Thead>

  <NativeTable.Tbody>
    <NativeTable.Tr>
      <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
      <NativeTable.Td>1993年7月24日</NativeTable.Td>
      <NativeTable.Td numeric>93分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
      <NativeTable.Td>1994年4月23日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
      <NativeTable.Td>1995年4月15日</NativeTable.Td>
      <NativeTable.Td numeric>94分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
      <NativeTable.Td>1996年4月13日</NativeTable.Td>
      <NativeTable.Td numeric>97分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
      <NativeTable.Td>1997年4月19日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
  </NativeTable.Tbody>

  <NativeTable.Tfoot>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Tfoot>
</NativeTable.Root>

バリアントを変更する

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<VStack>
  <For each={["line", "outline"]}>
    {(variant, index) => (
      <NativeTable.Root key={index} variant={variant}>
        <NativeTable.Thead>
          <NativeTable.Tr>
            <NativeTable.Th>タイトル</NativeTable.Th>
            <NativeTable.Th>公開日</NativeTable.Th>
            <NativeTable.Th numeric>上映時間</NativeTable.Th>
          </NativeTable.Tr>
        </NativeTable.Thead>

        <NativeTable.Tbody>
          <NativeTable.Tr>
            <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
            <NativeTable.Td>1993年7月24日</NativeTable.Td>
            <NativeTable.Td numeric>93分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
            <NativeTable.Td>1994年4月23日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
            <NativeTable.Td>1995年4月15日</NativeTable.Td>
            <NativeTable.Td numeric>94分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
            <NativeTable.Td>1996年4月13日</NativeTable.Td>
            <NativeTable.Td numeric>97分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
            <NativeTable.Td>1997年4月19日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
        </NativeTable.Tbody>
      </NativeTable.Root>
    )}
  </For>
</VStack>

サイズを変更する

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <NativeTable.Root key={index} size={size}>
        <NativeTable.Thead>
          <NativeTable.Tr>
            <NativeTable.Th>タイトル</NativeTable.Th>
            <NativeTable.Th>公開日</NativeTable.Th>
            <NativeTable.Th numeric>上映時間</NativeTable.Th>
          </NativeTable.Tr>
        </NativeTable.Thead>

        <NativeTable.Tbody>
          <NativeTable.Tr>
            <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
            <NativeTable.Td>1993年7月24日</NativeTable.Td>
            <NativeTable.Td numeric>93分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
            <NativeTable.Td>1994年4月23日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
            <NativeTable.Td>1995年4月15日</NativeTable.Td>
            <NativeTable.Td numeric>94分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
            <NativeTable.Td>1996年4月13日</NativeTable.Td>
            <NativeTable.Td numeric>97分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
            <NativeTable.Td>1997年4月19日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
        </NativeTable.Tbody>
      </NativeTable.Root>
    )}
  </For>
</VStack>

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

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<VStack>
  <For each={["green", "orange"]}>
    {(colorScheme, index) => (
      <NativeTable.Root key={index} colorScheme={colorScheme} variant="outline">
        <NativeTable.Thead>
          <NativeTable.Tr>
            <NativeTable.Th>タイトル</NativeTable.Th>
            <NativeTable.Th>公開日</NativeTable.Th>
            <NativeTable.Th numeric>上映時間</NativeTable.Th>
          </NativeTable.Tr>
        </NativeTable.Thead>

        <NativeTable.Tbody>
          <NativeTable.Tr>
            <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
            <NativeTable.Td>1993年7月24日</NativeTable.Td>
            <NativeTable.Td numeric>93分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
            <NativeTable.Td>1994年4月23日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
            <NativeTable.Td>1995年4月15日</NativeTable.Td>
            <NativeTable.Td numeric>94分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
            <NativeTable.Td>1996年4月13日</NativeTable.Td>
            <NativeTable.Td numeric>97分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
            <NativeTable.Td>1997年4月19日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
        </NativeTable.Tbody>
      </NativeTable.Root>
    )}
  </For>
</VStack>

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

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

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<NativeTable.Root withBorder>
  <NativeTable.Thead>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Thead>

  <NativeTable.Tbody>
    <NativeTable.Tr>
      <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
      <NativeTable.Td>1993年7月24日</NativeTable.Td>
      <NativeTable.Td numeric>93分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
      <NativeTable.Td>1994年4月23日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
      <NativeTable.Td>1995年4月15日</NativeTable.Td>
      <NativeTable.Td numeric>94分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
      <NativeTable.Td>1996年4月13日</NativeTable.Td>
      <NativeTable.Td numeric>97分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
      <NativeTable.Td>1997年4月19日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
  </NativeTable.Tbody>
</NativeTable.Root>

列の区切り線を追加する

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

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<NativeTable.Root withColumnBorders>
  <NativeTable.Thead>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Thead>

  <NativeTable.Tbody>
    <NativeTable.Tr>
      <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
      <NativeTable.Td>1993年7月24日</NativeTable.Td>
      <NativeTable.Td numeric>93分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
      <NativeTable.Td>1994年4月23日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
      <NativeTable.Td>1995年4月15日</NativeTable.Td>
      <NativeTable.Td numeric>94分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
      <NativeTable.Td>1996年4月13日</NativeTable.Td>
      <NativeTable.Td numeric>97分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
      <NativeTable.Td>1997年4月19日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
  </NativeTable.Tbody>
</NativeTable.Root>

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

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

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<NativeTable.Root highlightOnHover>
  <NativeTable.Thead>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Thead>

  <NativeTable.Tbody>
    <NativeTable.Tr>
      <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
      <NativeTable.Td>1993年7月24日</NativeTable.Td>
      <NativeTable.Td numeric>93分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
      <NativeTable.Td>1994年4月23日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
      <NativeTable.Td>1995年4月15日</NativeTable.Td>
      <NativeTable.Td numeric>94分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
      <NativeTable.Td>1996年4月13日</NativeTable.Td>
      <NativeTable.Td numeric>97分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
      <NativeTable.Td>1997年4月19日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
  </NativeTable.Tbody>
</NativeTable.Root>

ストライプを使う

ストライプを使う場合は、stripedをtrueにします。

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<VStack>
  <For each={["line", "outline"]}>
    {(variant, index) => (
      <NativeTable.Root key={index} variant={variant} striped>
        <NativeTable.Thead>
          <NativeTable.Tr>
            <NativeTable.Th>タイトル</NativeTable.Th>
            <NativeTable.Th>公開日</NativeTable.Th>
            <NativeTable.Th numeric>上映時間</NativeTable.Th>
          </NativeTable.Tr>
        </NativeTable.Thead>

        <NativeTable.Tbody>
          <NativeTable.Tr>
            <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
            <NativeTable.Td>1993年7月24日</NativeTable.Td>
            <NativeTable.Td numeric>93分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
            <NativeTable.Td>1994年4月23日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
            <NativeTable.Td>1995年4月15日</NativeTable.Td>
            <NativeTable.Td numeric>94分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
            <NativeTable.Td>1996年4月13日</NativeTable.Td>
            <NativeTable.Td numeric>97分</NativeTable.Td>
          </NativeTable.Tr>
          <NativeTable.Tr>
            <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
            <NativeTable.Td>1997年4月19日</NativeTable.Td>
            <NativeTable.Td numeric>96分</NativeTable.Td>
          </NativeTable.Tr>
        </NativeTable.Tbody>
      </NativeTable.Root>
    )}
  </For>
</VStack>

スクロールエリアを使う

スクロールエリアを使う場合は、withScrollAreaをtrueにします。

タイトル	公開日	オープニングテーマ	エンディングテーマ	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	「オラはにんきもの」	「僕は永遠のお子様」	93分
ブリブリ王国の秘宝	1994年4月23日	「オラはにんきもの」	「約束SEE YOU!」	96分
雲黒斎の野望	1995年4月15日	「オラはにんきもの」	「たすけてケスタ」	94分
ヘンダーランドの大冒険	1996年4月13日	「パカッポでGO!」	「SIX COLORS BOY」	97分
暗黒タマタマ大追跡	1997年4月19日	「年中夢中"I WANT YOU"」	「ひまわりの家」	96分

<NativeTable.Root withScrollArea>
  <NativeTable.Thead>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th>オープニングテーマ</NativeTable.Th>
      <NativeTable.Th>エンディングテーマ</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Thead>

  <NativeTable.Tbody>
    <NativeTable.Tr>
      <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
      <NativeTable.Td>1993年7月24日</NativeTable.Td>
      <NativeTable.Td>「オラはにんきもの」</NativeTable.Td>
      <NativeTable.Td>「僕は永遠のお子様」</NativeTable.Td>
      <NativeTable.Td numeric>93分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
      <NativeTable.Td>1994年4月23日</NativeTable.Td>
      <NativeTable.Td>「オラはにんきもの」</NativeTable.Td>
      <NativeTable.Td>「約束SEE YOU!」</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
      <NativeTable.Td>1995年4月15日</NativeTable.Td>
      <NativeTable.Td>「オラはにんきもの」</NativeTable.Td>
      <NativeTable.Td>「たすけてケスタ」</NativeTable.Td>
      <NativeTable.Td numeric>94分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
      <NativeTable.Td>1996年4月13日</NativeTable.Td>
      <NativeTable.Td>「パカッポでGO!」</NativeTable.Td>
      <NativeTable.Td>「SIX COLORS BOY」</NativeTable.Td>
      <NativeTable.Td numeric>97分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
      <NativeTable.Td>1997年4月19日</NativeTable.Td>
      <NativeTable.Td>「年中夢中"I WANT YOU"」</NativeTable.Td>
      <NativeTable.Td>「ひまわりの家」</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
  </NativeTable.Tbody>
</NativeTable.Root>

ヘッダーを固定する場合は、stickyHeaderをtrueにします。

タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分
電撃!ブタのヒヅメ大作戦	1998年4月18日	99分
爆発!温泉わくわく大決戦	1999年4月17日	99分
嵐を呼ぶジャングル	2000年4月22日	88分
嵐を呼ぶモーレツ!オトナ帝国の逆襲	2001年4月21日	89分
嵐を呼ぶアッパレ!戦国大合戦	2002年4月20日	95分

<NativeTable.Root withScrollArea scrollAreaProps={{ maxH: "xs" }} stickyHeader>
  <NativeTable.Thead>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Thead>

  <NativeTable.Tbody>
    <NativeTable.Tr>
      <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
      <NativeTable.Td>1993年7月24日</NativeTable.Td>
      <NativeTable.Td numeric>93分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
      <NativeTable.Td>1994年4月23日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
      <NativeTable.Td>1995年4月15日</NativeTable.Td>
      <NativeTable.Td numeric>94分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
      <NativeTable.Td>1996年4月13日</NativeTable.Td>
      <NativeTable.Td numeric>97分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
      <NativeTable.Td>1997年4月19日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>電撃!ブタのヒヅメ大作戦</NativeTable.Td>
      <NativeTable.Td>1998年4月18日</NativeTable.Td>
      <NativeTable.Td numeric>99分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>爆発!温泉わくわく大決戦</NativeTable.Td>
      <NativeTable.Td>1999年4月17日</NativeTable.Td>
      <NativeTable.Td numeric>99分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>嵐を呼ぶジャングル</NativeTable.Td>
      <NativeTable.Td>2000年4月22日</NativeTable.Td>
      <NativeTable.Td numeric>88分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>嵐を呼ぶ モーレツ!オトナ帝国の逆襲</NativeTable.Td>
      <NativeTable.Td>2001年4月21日</NativeTable.Td>
      <NativeTable.Td numeric>89分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>嵐を呼ぶ アッパレ!戦国大合戦</NativeTable.Td>
      <NativeTable.Td>2002年4月20日</NativeTable.Td>
      <NativeTable.Td numeric>95分</NativeTable.Td>
    </NativeTable.Tr>
  </NativeTable.Tbody>
</NativeTable.Root>

キャプションを追加する

©臼井儀人／双葉社
タイトル	公開日	上映時間
アクション仮面VSハイグレ魔王	1993年7月24日	93分
ブリブリ王国の秘宝	1994年4月23日	96分
雲黒斎の野望	1995年4月15日	94分
ヘンダーランドの大冒険	1996年4月13日	97分
暗黒タマタマ大追跡	1997年4月19日	96分

<NativeTable.Root>
  <NativeTable.Caption placement="end">©臼井儀人／双葉社</NativeTable.Caption>

  <NativeTable.Thead>
    <NativeTable.Tr>
      <NativeTable.Th>タイトル</NativeTable.Th>
      <NativeTable.Th>公開日</NativeTable.Th>
      <NativeTable.Th numeric>上映時間</NativeTable.Th>
    </NativeTable.Tr>
  </NativeTable.Thead>

  <NativeTable.Tbody>
    <NativeTable.Tr>
      <NativeTable.Td>アクション仮面VSハイグレ魔王</NativeTable.Td>
      <NativeTable.Td>1993年7月24日</NativeTable.Td>
      <NativeTable.Td numeric>93分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ブリブリ王国の秘宝</NativeTable.Td>
      <NativeTable.Td>1994年4月23日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>雲黒斎の野望</NativeTable.Td>
      <NativeTable.Td>1995年4月15日</NativeTable.Td>
      <NativeTable.Td numeric>94分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>ヘンダーランドの大冒険</NativeTable.Td>
      <NativeTable.Td>1996年4月13日</NativeTable.Td>
      <NativeTable.Td numeric>97分</NativeTable.Td>
    </NativeTable.Tr>
    <NativeTable.Tr>
      <NativeTable.Td>暗黒タマタマ大追跡</NativeTable.Td>
      <NativeTable.Td>1997年4月19日</NativeTable.Td>
      <NativeTable.Td numeric>96分</NativeTable.Td>
    </NativeTable.Tr>
  </NativeTable.Tbody>
</NativeTable.Root>

Props

NativeTable.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	`"line"`	`"line" \| "outline"` The variant of the component.
`layout`	-	`"-moz-initial" \| "auto" \| "fixed" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" ...` The CSS `table-layout` property.
`scrollAreaProps`	-	`NativeTableAreaProps` The props for the scroll area.
`withScrollArea`	`false`	`boolean` Whether to enable the scroll area.

NativeTable.Caption

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`placement`	`"end"`	`SimpleDirection` The placement of the table caption.

NativeTable.Col

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

NativeTable.Colgroup

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

NativeTable.Tbody

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

NativeTable.Td

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`numeric`	`false`	`boolean` Aligns the cell content to the right.

NativeTable.Tfoot

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

NativeTable.Th

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`numeric`	`false`	`boolean` Aligns the cell content to the right.

NativeTable.Thead

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

NativeTable.Tr

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

類似のコンポーネント

Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。

Statは、数値やデータをボックス内に表示するために使用されます。

PieChartは、複数のデータを比較するためのパイチャートを描画するコンポーネントです。

RadialChartは、複数のデータを比較するための放射状チャートを描画するコンポーネントです。

RadarChartは、複数のデータを比較するためのレーダーチャートを描画するコンポーネントです。

DonutChartは、複数のデータを比較するためのドーナツチャートを描画するコンポーネントです。

AreaChartは、複数のデータを比較するためのエリアチャートを描画するコンポーネントです。

ComposedChartは、複数のデータを比較するための複合チャートを描画するコンポーネントです。

使用されているコンポーネント・フック

Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。