NativeTable

NativeTable is a component for efficiently organizing and displaying data.

Usage

タイトル	公開日	上映時間
アクション仮面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>

Change Variants

タイトル	公開日	上映時間
アクション仮面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>

Change Size

タイトル	公開日	上映時間
アクション仮面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>

Change Color Scheme

タイトル	公開日	上映時間
アクション仮面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>

Add Outer Border

To add an outer border, set withBorder to 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>

Add Column Separators

To add column separators, set withColumnBorders to 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>

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to 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

To enable striped rows, set striped to 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>

Scroll Area

To enable scroll area, set withScrollArea to 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>

To make the header sticky, set stickyHeader to 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>

Add a Caption

©臼井儀人／双葉社
タイトル	公開日	上映時間
アクション仮面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	Default	Type / Description
`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.
`highlightOnHover`	`false`	`boolean` If `true`, highlight the row when the table row is hovered.
`highlightOnSelected`	`false`	`boolean` If `true`, highlight the row when the table row is selected.
`layout`	-	`"-moz-initial" \| "auto" \| "fixed" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" ...` The CSS `table-layout` property.
`scrollAreaProps`	-	`NativeTableAreaProps` The props for the scroll area.
`stickyFooter`	`false`	`boolean` If `true`, display the sticky footer.
`stickyHeader`	`false`	`boolean` If `true`, display the sticky header.
`striped`	`false`	`boolean` If `true`, display striped rows.
`withBorder`	`false`	`boolean` If `true`, display the outer border of the table.
`withColumnBorders`	`false`	`boolean` If `true`, display line on the columns of the table.
`withScrollArea`	`false`	`boolean` Whether to enable the scroll area.

NativeTable.Caption

Prop	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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.