--- title: NativeTable description: "`NativeTable`は、データを効率的に整理して表示するコンポーネントです。" links: - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/native-table/native-table.style.ts - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/native-table - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-nativetable--basic --- ## 使い方 ```tsx タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分タイトル公開日上映時間 ``` ### バリアントを変更する ```tsx {(variant, index) => ( タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 )} ``` ### サイズを変更する ```tsx {(size, index) => ( タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 )} ``` ### カラースキーマを変更する ```tsx {(colorScheme, index) => ( タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 )} ``` ### 外枠の区切り線を追加する外枠の区切り線を追加する場合は、`withBorder`を`true`にします。 ```tsx タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 ``` ### 列の区切り線を追加する列の区切り線を追加する場合は、`withColumnBorders`を`true`にします。 ```tsx タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 ``` ### 行がホバーされたときにハイライトする行がホバーされたときにハイライトする場合は、`highlightOnHover`を`true`にします。 ```tsx タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 ``` ### ストライプを使うストライプを使う場合は、`striped`を`true`にします。 ```tsx {(variant, index) => ( タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 )} ``` ### スクロールエリアを使うスクロールエリアを使う場合は、`withScrollArea`を`true`にします。 ```tsx タイトル公開日オープニングテーマエンディングテーマ上映時間アクション仮面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分 ``` ### ヘッダーを固定するヘッダーを固定する場合は、`stickyHeader`を`true`にします。 ```tsx タイトル公開日上映時間アクション仮面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分 ``` ### キャプションを追加する ```tsx ©臼井儀人／双葉社タイトル公開日上映時間アクション仮面VSハイグレ魔王 1993年7月24日 93分ブリブリ王国の秘宝 1994年4月23日 96分雲黒斎の野望 1995年4月15日 94分ヘンダーランドの大冒険 1996年4月13日 97分暗黒タマタマ大追跡 1997年4月19日 96分 ``` ## 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. |