Table
Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Lynda | Cummerata | 59 | Valerie.Emmerich@yahoo.com |
| 1 | Allen | Rippin | 40 | Robb_Kiehn57@gmail.com |
| 2 | Herminia | Goodwin | 21 | Enos_Cruickshank91@hotmail.com |
| 3 | Era | Walsh | 18 | Cheryl21@gmail.com |
| 4 | Trinity | O'Conner | 39 | Troy_Funk@hotmail.com |
| 5 | Granville | Kozey | 19 | Nichole97@hotmail.com |
| 6 | Marcos | Rice | 29 | John_Cartwright28@gmail.com |
| 7 | Lennie | Zieme | 31 | Eldridge62@gmail.com |
| 8 | Wanda | Quitzon | 29 | Bertha_Kiehn67@gmail.com |
| 9 | Deborah | Weber | 48 | Javier69@hotmail.com |
interface Data {
id: string
age: number
email: string
firstName: string
lastName: string
}
const columnHelper = createColumnHelper<Data>()
const columns = useMemo(
() => [
columnHelper.accessor("id", { cellProps: { numeric: true } }),
columnHelper.accessor("firstName", { lineClamp: 1 }),
columnHelper.accessor("lastName", { lineClamp: 1 }),
columnHelper.accessor("age", { cellProps: { numeric: true } }),
columnHelper.accessor("email", { lineClamp: 1 }),
],
[],
)
const data = useMemo<Data[]>(
() =>
Array.from({ length: 10 }, (_, index) => ({
id: index.toString(),
age: faker.number.int({ max: 65, min: 18 }),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
})),
[],
)
return <Table columns={columns} data={data} withScrollArea />
使い方
import { Table } from "@yamada-ui/react"
import { Table } from "@/components/ui"
import { Table } from "@workspaces/ui"
<Table />
Tableは、内部でtanstack-tableとNativeTableを使用しています。バリアントを変更する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Jeannette | Rosenbaum | 27 | Gudrun_Brown@gmail.com |
| 1 | Kamren | Herzog | 59 | Tim.Lehner21@gmail.com |
| 2 | Dewayne | Strosin | 52 | Marcelo40@yahoo.com |
| 3 | Charlotte | Marks | 52 | Lora47@hotmail.com |
| 4 | Jackson | Kessler | 35 | Clyde67@hotmail.com |
| 5 | Irma | Parker | 19 | Carla_Block37@gmail.com |
| 6 | Kathy | Davis | 60 | Karine97@yahoo.com |
| 7 | Mandy | Fritsch | 60 | Leon56@hotmail.com |
| 8 | Juanita | Gusikowski | 27 | Amelia.Stroman17@hotmail.com |
| 9 | Priscilla | Bogisich | 44 | Jairo65@gmail.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Jeannette | Rosenbaum | 27 | Gudrun_Brown@gmail.com |
| 1 | Kamren | Herzog | 59 | Tim.Lehner21@gmail.com |
| 2 | Dewayne | Strosin | 52 | Marcelo40@yahoo.com |
| 3 | Charlotte | Marks | 52 | Lora47@hotmail.com |
| 4 | Jackson | Kessler | 35 | Clyde67@hotmail.com |
| 5 | Irma | Parker | 19 | Carla_Block37@gmail.com |
| 6 | Kathy | Davis | 60 | Karine97@yahoo.com |
| 7 | Mandy | Fritsch | 60 | Leon56@hotmail.com |
| 8 | Juanita | Gusikowski | 27 | Amelia.Stroman17@hotmail.com |
| 9 | Priscilla | Bogisich | 44 | Jairo65@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<VStack>
<For each={["line", "outline"]}>
{(variant, index) => (
<Table
key={index}
variant={variant}
columns={columns}
data={data}
withScrollArea
/>
)}
</For>
</VStack>
)
サイズを変更する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Genoveva | Gerlach | 23 | Luella48@yahoo.com |
| 1 | Mara | Kihn | 33 | Francisco_Considine@gmail.com |
| 2 | Domenic | Kuvalis | 59 | Candido_Cartwright@hotmail.com |
| 3 | Violet | Thiel-Sanford | 31 | Gerald_Kilback33@yahoo.com |
| 4 | Tomas | Johns | 44 | Tommie44@hotmail.com |
| 5 | Ramiro | Goldner | 37 | Jeff_Farrell14@yahoo.com |
| 6 | Bradley | Welch | 21 | Mathias_OReilly@yahoo.com |
| 7 | Donna | Towne | 21 | Aditya_Borer6@yahoo.com |
| 8 | Harry | Botsford | 65 | Bradley.Kihn92@yahoo.com |
| 9 | Rachael | Waelchi-Hegmann | 52 | Thelma83@yahoo.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Genoveva | Gerlach | 23 | Luella48@yahoo.com |
| 1 | Mara | Kihn | 33 | Francisco_Considine@gmail.com |
| 2 | Domenic | Kuvalis | 59 | Candido_Cartwright@hotmail.com |
| 3 | Violet | Thiel-Sanford | 31 | Gerald_Kilback33@yahoo.com |
| 4 | Tomas | Johns | 44 | Tommie44@hotmail.com |
| 5 | Ramiro | Goldner | 37 | Jeff_Farrell14@yahoo.com |
| 6 | Bradley | Welch | 21 | Mathias_OReilly@yahoo.com |
| 7 | Donna | Towne | 21 | Aditya_Borer6@yahoo.com |
| 8 | Harry | Botsford | 65 | Bradley.Kihn92@yahoo.com |
| 9 | Rachael | Waelchi-Hegmann | 52 | Thelma83@yahoo.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Genoveva | Gerlach | 23 | Luella48@yahoo.com |
| 1 | Mara | Kihn | 33 | Francisco_Considine@gmail.com |
| 2 | Domenic | Kuvalis | 59 | Candido_Cartwright@hotmail.com |
| 3 | Violet | Thiel-Sanford | 31 | Gerald_Kilback33@yahoo.com |
| 4 | Tomas | Johns | 44 | Tommie44@hotmail.com |
| 5 | Ramiro | Goldner | 37 | Jeff_Farrell14@yahoo.com |
| 6 | Bradley | Welch | 21 | Mathias_OReilly@yahoo.com |
| 7 | Donna | Towne | 21 | Aditya_Borer6@yahoo.com |
| 8 | Harry | Botsford | 65 | Bradley.Kihn92@yahoo.com |
| 9 | Rachael | Waelchi-Hegmann | 52 | Thelma83@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<VStack>
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<Table
key={index}
size={size}
columns={columns}
data={data}
withScrollArea
/>
)}
</For>
</VStack>
)
カラースキームを変更する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Kareem | Windler | 59 | Eva79@hotmail.com |
| 1 | Cali | Johnston | 61 | Rudolph.Koch@hotmail.com |
| 2 | Eliane | Champlin | 30 | Latoya6@hotmail.com |
| 3 | Frederic | Schneider | 40 | Clinton96@yahoo.com |
| 4 | Amely | Johnson | 31 | Benjamin.Kulas26@hotmail.com |
| 5 | Carey | Lueilwitz | 46 | Mustafa_Thiel8@yahoo.com |
| 6 | Jake | Murphy-VonRueden | 25 | Verla_Kulas@hotmail.com |
| 7 | Cora | Veum | 26 | Mathew_Legros43@gmail.com |
| 8 | Norene | Price | 50 | Pablo54@hotmail.com |
| 9 | Frank | Huels-Beatty | 61 | Estelle_Homenick1@gmail.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Kareem | Windler | 59 | Eva79@hotmail.com |
| 1 | Cali | Johnston | 61 | Rudolph.Koch@hotmail.com |
| 2 | Eliane | Champlin | 30 | Latoya6@hotmail.com |
| 3 | Frederic | Schneider | 40 | Clinton96@yahoo.com |
| 4 | Amely | Johnson | 31 | Benjamin.Kulas26@hotmail.com |
| 5 | Carey | Lueilwitz | 46 | Mustafa_Thiel8@yahoo.com |
| 6 | Jake | Murphy-VonRueden | 25 | Verla_Kulas@hotmail.com |
| 7 | Cora | Veum | 26 | Mathew_Legros43@gmail.com |
| 8 | Norene | Price | 50 | Pablo54@hotmail.com |
| 9 | Frank | Huels-Beatty | 61 | Estelle_Homenick1@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<VStack>
<For each={["green", "orange"]}>
{(colorScheme, index) => (
<Table
key={index}
colorScheme={colorScheme}
variant="outline"
columns={columns}
data={data}
withScrollArea
/>
)}
</For>
</VStack>
)
外枠の区切り線を追加する
外枠の区切り線を追加する場合は、withBorderをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Robyn | Hessel | 57 | Corrine_Luettgen@gmail.com |
| 1 | Elmer | Schiller | 59 | Brad14@yahoo.com |
| 2 | Lori | Lakin | 61 | Ignacio.Friesen69@yahoo.com |
| 3 | Ulises | Turner | 40 | Jamie6@yahoo.com |
| 4 | Myrtle | Koepp | 22 | Phoebe84@hotmail.com |
| 5 | Deborah | Grady | 33 | Susan90@hotmail.com |
| 6 | Kattie | Kuhic | 44 | Minerva97@hotmail.com |
| 7 | Frances | Effertz | 30 | Roel30@gmail.com |
| 8 | Blanca | Gottlieb-Kiehn | 36 | Arvel_West@yahoo.com |
| 9 | Blake | Heller | 28 | Tasha.Rolfson54@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} withBorder withScrollArea />
列の区切り線を追加する
列の区切り線を追加する場合は、withColumnBordersをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Ashley | Crona | 45 | Furman.Hickle7@hotmail.com |
| 1 | Adrianna | Will-Jacobs | 39 | Tyreek_Legros@yahoo.com |
| 2 | Wm | Cassin | 48 | Bryant94@hotmail.com |
| 3 | Nelson | Schimmel | 25 | Shea_Berge@yahoo.com |
| 4 | Allen | Howell | 51 | Estelle.Parker@hotmail.com |
| 5 | Chadd | Green | 30 | Jennifer_Runolfsdottir21@yahoo.com |
| 6 | Carmen | White | 27 | Jo.Lang35@hotmail.com |
| 7 | Johnny | Schuster | 54 | Muriel.White39@gmail.com |
| 8 | Amanda | Zemlak | 46 | Mozell_Raynor@gmail.com |
| 9 | Madelynn | Fahey | 45 | Van36@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} withColumnBorders withScrollArea />
行がホバーされたときにハイライトする
行がホバーされたときにハイライトする場合は、highlightOnHoverをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Bonnie | Conroy | 43 | Ayla9@hotmail.com |
| 1 | Keely | Bernhard | 65 | Camylle75@yahoo.com |
| 2 | Helena | Rohan | 40 | Clifton_Bode45@hotmail.com |
| 3 | Andrew | Tromp | 33 | Maritza.Rodriguez83@gmail.com |
| 4 | Derek | Padberg | 43 | Sean79@yahoo.com |
| 5 | Sheryl | Mills | 31 | Merle_Cormier70@hotmail.com |
| 6 | Arlie | Berge | 51 | Felicia19@gmail.com |
| 7 | Erin | Wuckert | 46 | Freeman_Hamill6@hotmail.com |
| 8 | Leonard | Abshire | 49 | Muriel.Schneider31@yahoo.com |
| 9 | Jordane | Lindgren | 19 | Lorene69@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} highlightOnHover withScrollArea />
ストライプを使う
ストライプを使う場合は、stripedをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Irma | Abbott | 38 | Zena97@hotmail.com |
| 1 | Pauline | Ruecker | 37 | Bert.Toy90@yahoo.com |
| 2 | Mike | Abshire | 50 | Albert90@hotmail.com |
| 3 | Maud | Orn | 56 | Patsy_Kemmer84@gmail.com |
| 4 | Phil | Flatley | 60 | Wilford.Hamill89@gmail.com |
| 5 | Lisa | MacGyver | 31 | Gretchen.Maggio30@gmail.com |
| 6 | Shania | Grant | 49 | Felix22@gmail.com |
| 7 | Dominique | Turcotte | 54 | Hollie_Krajcik54@yahoo.com |
| 8 | Vivianne | Johnson | 46 | Alejandro_Adams14@yahoo.com |
| 9 | Evelyn | Torp | 36 | Bobby16@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} striped withScrollArea />
スクロールエリアを使う
スクロールエリアを使う場合は、withScrollAreaをtrueにします。
| id | firstName | lastName | age | phone | role | status | createdAt | updatedAt | |
|---|---|---|---|---|---|---|---|---|---|
| 0 | Carroll | Langosh | 36 | Shirley63@yahoo.com | 621-356-5537 x59263 | admin | inactive | 5/17/2025 | 6/27/2025 |
| 1 | Mathilde | Padberg | 18 | Donald.Daugherty98@gmail.com | 537.760.8289 x47113 | user | active | 6/9/2025 | 4/19/2025 |
| 2 | Richmond | Conn | 27 | Leon_Stark56@yahoo.com | 942.771.7178 x6077 | user | active | 1/27/2026 | 4/10/2025 |
| 3 | Jacques | Kuhlman | 50 | Leda_Boehm@yahoo.com | 495.659.0154 x94282 | user | active | 3/13/2026 | 1/13/2026 |
| 4 | Desiree | Gorczany | 54 | Nicklaus90@gmail.com | 1-266-923-5549 x99288 | user | active | 10/19/2025 | 7/3/2025 |
| 5 | Isabel | Miller | 30 | Lela_Farrell79@gmail.com | 415.342.2947 x75293 | user | inactive | 7/8/2025 | 12/17/2025 |
| 6 | Minnie | Breitenberg | 52 | Terrence62@yahoo.com | (504) 586-3815 x4536 | user | active | 7/20/2025 | 8/2/2025 |
| 7 | Samantha | Zieme | 18 | Wilfred_Quigley38@gmail.com | 957-528-7273 x11017 | user | inactive | 7/3/2025 | 10/16/2025 |
| 8 | Jeannie | Quigley | 52 | Bob26@gmail.com | 489-559-9562 x186 | admin | active | 11/16/2025 | 2/15/2026 |
| 9 | Verlie | Barton | 20 | Turner_Halvorson@hotmail.com | 1-330-707-3073 | user | inactive | 2/27/2026 | 9/2/2025 |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columnsFull} data={data} withScrollArea />
ヘッダーグループ
| id | user | |||
|---|---|---|---|---|
| name | age | |||
| firstName | lastName | |||
| 0 | Eldon | Goodwin | 39 | Reggie_Keeling8@gmail.com |
| 1 | Debra | Bosco | 40 | Ernesto34@yahoo.com |
| 2 | Elbert | Strosin | 64 | Lorenzo.Wilderman@hotmail.com |
| 3 | Audrey | Mertz | 32 | Alphonso57@gmail.com |
| 4 | Vincent | Schulist | 45 | Erick.Toy@yahoo.com |
| 5 | Fidel | McDermott | 28 | Fausto21@gmail.com |
| 6 | Lyle | Weber | 56 | Howard31@hotmail.com |
| 7 | Leonel | Schimmel | 40 | Sonya5@gmail.com |
| 8 | Jeffery | Maggio | 63 | Ottilie59@yahoo.com |
| 9 | Lionel | Nolan | 34 | Chelsie11@gmail.com |
const columns = useMemo(
() => [
columnHelper.accessor("id", {
footer: (info) => info.column.id,
cellProps: { numeric: true },
}),
columnHelper.group({
id: "user",
columns: [
columnHelper.group({
id: "name",
columns: [
columnHelper.accessor("firstName", {
footer: (info) => info.column.id,
lineClamp: 1,
}),
columnHelper.accessor("lastName", {
footer: (info) => info.column.id,
lineClamp: 1,
}),
],
footer: (info) => info.column.id,
header: (info) => info.column.id,
}),
columnHelper.accessor("age", {
footer: (info) => info.column.id,
cellProps: { numeric: true },
}),
columnHelper.accessor("email", {
footer: (info) => info.column.id,
lineClamp: 1,
}),
],
footer: (info) => info.column.id,
header: (info) => info.column.id,
}),
],
[],
)
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
withBorder
withColumnBorders
withScrollArea
/>
)
フッターグループ
| id | user | |||
|---|---|---|---|---|
| name | age | |||
| firstName | lastName | |||
| 0 | Charlotte | Altenwerth | 55 | Harry_Fritsch@gmail.com |
| 1 | Dereck | Lindgren | 61 | Tony76@gmail.com |
| 2 | Krista | Prosacco | 20 | Chance_Ruecker@gmail.com |
| 3 | Kaya | Stanton | 25 | Raoul59@yahoo.com |
| 4 | Frances | Kilback | 27 | Jeffery31@hotmail.com |
| 5 | Name | Green | 49 | Alma_Runolfsdottir72@yahoo.com |
| 6 | June | Bradtke | 22 | Karolann_Greenfelder@gmail.com |
| 7 | Elijah | Cole | 42 | Clinton_Kub19@yahoo.com |
| 8 | Graciela | Rolfson | 44 | Jeff.Gorczany12@gmail.com |
| 9 | Shaun | Heller | 19 | Dexter.Fritsch21@yahoo.com |
| id | firstName | lastName | age | |
| name | ||||
| user | ||||
const columns = useMemo(
() => [
columnHelper.accessor("id", {
footer: (info) => info.column.id,
cellProps: { numeric: true },
}),
columnHelper.group({
id: "user",
columns: [
columnHelper.group({
id: "name",
columns: [
columnHelper.accessor("firstName", {
footer: (info) => info.column.id,
lineClamp: 1,
}),
columnHelper.accessor("lastName", {
footer: (info) => info.column.id,
lineClamp: 1,
}),
],
footer: (info) => info.column.id,
header: (info) => info.column.id,
}),
columnHelper.accessor("age", {
footer: (info) => info.column.id,
cellProps: { numeric: true },
}),
columnHelper.accessor("email", {
footer: (info) => info.column.id,
lineClamp: 1,
}),
],
footer: (info) => info.column.id,
header: (info) => info.column.id,
}),
],
[],
)
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
withBorder
withColumnBorders
withFooterGroups
withScrollArea
/>
)
キーボードナビゲーションを無効にする
キーボードナビゲーションを無効にする場合は、enableKeyboardNavigationをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Barrett | Leannon | 39 | Sidney.Beatty90@hotmail.com |
| 1 | Eula | Mohr | 34 | Derick_DuBuque37@hotmail.com |
| 2 | Tommie | MacGyver | 18 | Tony_Bednar31@gmail.com |
| 3 | Felipe | Heathcote | 61 | Guido_Emard@gmail.com |
| 4 | Roger | Okuneva | 25 | Annamae59@yahoo.com |
| 5 | Hettie | Ratke | 26 | Carlos.Gerhold67@hotmail.com |
| 6 | Kari | Cummerata | 64 | Candice18@gmail.com |
| 7 | Arnold | Jones | 36 | Stevie.Koch47@yahoo.com |
| 8 | Brody | Kuhlman | 28 | Lela.Smith@gmail.com |
| 9 | Stuart | Roberts-Reichert | 36 | Shane24@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableKeyboardNavigation={false}
withScrollArea
/>
)
初回のフォーカス可能なセルを設定する
初回のフォーカス可能なセルを設定する場合は、initialFocusableCellにセルの列と行を指定したオブジェクト({ colIndex: number, rowIndex: number })を設定します。デフォルトは、{ colIndex: 0, rowIndex: 0 }です。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Emmie | Zulauf | 28 | Bernita36@yahoo.com |
| 1 | Minnie | Barton | 64 | Gwendolyn_Jast@hotmail.com |
| 2 | Maxine | Hudson | 57 | Arely.Harvey41@gmail.com |
| 3 | Reynold | Casper | 28 | Santos_Cummings-Schinner9@gmail.com |
| 4 | Bernard | Cartwright | 54 | Patricia_Runte79@yahoo.com |
| 5 | Marty | Labadie | 39 | Clyde13@hotmail.com |
| 6 | Beatrice | Zulauf | 47 | Khalid.Mraz75@yahoo.com |
| 7 | Alverta | Konopelski | 40 | Flavio.Bartell94@yahoo.com |
| 8 | Eugene | Dickinson | 63 | Kassandra_Emmerich25@gmail.com |
| 9 | Leo | Hettinger | 60 | Wayne_Barton-Welch70@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
initialFocusableCell={{ colIndex: 1, rowIndex: 0 }}
withScrollArea
/>
)
行のクリックイベントをハンドルする
行のクリックイベントをハンドルする場合は、onRowClickを使用します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Alfonso | Tillman | 45 | Emmett_Kihn-Kuhn40@yahoo.com |
| 1 | Aurelia | Leffler | 22 | Taryn38@yahoo.com |
| 2 | Marlon | Veum | 59 | Julie_Boyer@hotmail.com |
| 3 | Hazel | Kling | 40 | Dwight_Ferry63@hotmail.com |
| 4 | Michelle | Tillman | 30 | Vallie_Hand71@gmail.com |
| 5 | Freda | Johnson | 48 | Dino_Kertzmann-Klein37@yahoo.com |
| 6 | Wilbur | Gleichner | 39 | Hugo_Reilly@hotmail.com |
| 7 | Rory | Schimmel | 54 | Ashlee_Durgan6@gmail.com |
| 8 | Mable | Gleason | 30 | Marcus_Strosin@yahoo.com |
| 9 | Celestino | Monahan | 42 | Tricia.Wehner@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
onRowClick={(row) => console.log(row)}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。行のダブルクリックイベントをハンドルする
行のダブルクリックイベントをハンドルする場合は、onRowDoubleClickを使用します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Micheal | Armstrong | 28 | Spencer.Kemmer@yahoo.com |
| 1 | Clark | Brekke | 58 | Henry_Zboncak18@gmail.com |
| 2 | Alfredo | Schroeder | 53 | Urban71@yahoo.com |
| 3 | Archibald | Emard | 20 | Juan53@hotmail.com |
| 4 | Madie | Nolan | 29 | Vallie54@gmail.com |
| 5 | Ambrose | Durgan | 39 | Sherman13@yahoo.com |
| 6 | Paul | Schumm | 18 | Samara.Cronin91@yahoo.com |
| 7 | Meaghan | Williamson | 47 | Nola26@gmail.com |
| 8 | Zella | Hoppe | 34 | Elias.Yost48@gmail.com |
| 9 | Marguerite | DuBuque | 56 | Frederick82@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
onRowDoubleClick={(row) => console.log(row)}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。デフォルトのソートを設定する
デフォルトのソートを設定する場合は、defaultSortingに配列を設定します。配列のオブジェクトには、ソートをする列のidと方向を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 3 | Mekhi | Hoppe-Tremblay | 59 | Adolph_Torp52@yahoo.com |
| 2 | Thaddeus | Fadel | 55 | Kristy70@gmail.com |
| 5 | Queen | Kovacek | 49 | Sydney7@hotmail.com |
| 6 | Kurt | Koepp | 44 | Cary.Hessel@hotmail.com |
| 8 | Maggie | Wisozk | 43 | Edmund_Kuhlman76@hotmail.com |
| 1 | Emma | Harvey | 38 | Ida61@yahoo.com |
| 9 | Birdie | Langosh | 30 | Kellie_Gutmann47@gmail.com |
| 0 | Desiree | Grimes | 25 | Judah_Kemmer@gmail.com |
| 4 | Emely | Mann | 25 | Angie.Schulist91@hotmail.com |
| 7 | Novella | Ernser | 23 | Louise.Jacobi@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
defaultSorting={[{ id: "age", desc: true }]}
withScrollArea
/>
)
ソートを無効にする
ソートを無効にする場合は、enableSortingをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Orval | Bergstrom | 47 | Brett.Wisoky49@gmail.com |
| 1 | Chad | Lind | 53 | Marco.Bednar@yahoo.com |
| 2 | Laurie | Donnelly-Kuhic | 40 | Glen36@gmail.com |
| 3 | Aron | Farrell | 20 | Gustave64@gmail.com |
| 4 | Alma | Armstrong | 63 | Logan.Boyle@yahoo.com |
| 5 | Joyce | Halvorson | 57 | Everett46@yahoo.com |
| 6 | Leilani | Stanton | 26 | Gordon.Weimann74@yahoo.com |
| 7 | Susie | Kuvalis | 49 | Erma9@hotmail.com |
| 8 | Lindsay | Bode | 40 | Damon_DuBuque51@hotmail.com |
| 9 | Berta | Greenfelder | 31 | Roman_Walter43@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table columns={columns} data={data} enableSorting={false} withScrollArea />
)
複数列のソートを無効にする
複数列のソートを無効にする場合は、enableMultiSortをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Sheri | Turner | 24 | Reyna.DuBuque@yahoo.com |
| 1 | Cordelia | Kessler | 31 | Minnie26@gmail.com |
| 2 | Meredith | Volkman | 21 | Arturo_Brekke@gmail.com |
| 3 | Genoveva | Schimmel | 31 | Hilda18@yahoo.com |
| 4 | Alejandro | Bailey | 23 | Benny_Wilderman75@gmail.com |
| 5 | Jon | Weissnat-Sipes | 51 | Greg87@gmail.com |
| 6 | Ruthie | Kirlin | 41 | Clifton_Jones@yahoo.com |
| 7 | Rashad | Bernier | 51 | Mara_Schiller@hotmail.com |
| 8 | Cheyenne | Gusikowski | 62 | Adelbert.Larkin@yahoo.com |
| 9 | Leigh | Hartmann | 32 | Bradford30@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table columns={columns} data={data} enableMultiSort={false} withScrollArea />
)
最大のソート可能な列数を設定する
最大のソート可能な列数を設定する場合は、maxMultiSortColCountに数値を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Pam | Ward | 54 | Joshua.Dickinson@hotmail.com |
| 1 | Rowan | Dach-Buckridge | 20 | Luther.Lebsack60@hotmail.com |
| 2 | Bryant | Hirthe-Hodkiewicz | 27 | Helen.Cronin61@yahoo.com |
| 3 | Tonya | Aufderhar | 22 | Gus.Smitham@hotmail.com |
| 4 | Kenna | Hammes | 23 | Caroline.Witting22@gmail.com |
| 5 | Eula | Walsh | 47 | Baron_Dibbert96@yahoo.com |
| 6 | Delbert | Sporer | 61 | Diamond.Vandervort70@gmail.com |
| 7 | Rochelle | Schaefer | 30 | Patsy.McLaughlin@yahoo.com |
| 8 | Else | Crooks | 61 | Mazie.Schmidt4@hotmail.com |
| 9 | Montana | Bauch | 54 | Sammy.Tillman@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
maxMultiSortColCount={2}
withScrollArea
/>
)
手動のソートを使う
手動のソートを使う場合は、manualSortingをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Pearl | Stoltenberg | 58 | Toney.Bauch@hotmail.com |
| 1 | Chad | Emmerich | 62 | Sunny.Mohr73@yahoo.com |
| 2 | Malinda | Roob | 50 | Tamara.Herzog@gmail.com |
| 3 | Vicente | Reichert-Barton | 64 | Millie8@yahoo.com |
| 4 | Brenda | Torphy | 60 | Leonard_Spinka@hotmail.com |
| 5 | Marietta | Kshlerin | 41 | Veda2@gmail.com |
| 6 | Duane | Koch | 46 | Georgiana.Runolfsdottir@hotmail.com |
| 7 | Van | Marks | 33 | Wilbur.Stanton@gmail.com |
| 8 | Seamus | Parisian | 60 | Pablo_Ebert58@gmail.com |
| 9 | Alanis | Kling | 35 | Dominic_Franecki@gmail.com |
const defaultData = useMemo<TableData[]>(() => createTableData(), [])
const [data, setData] = useState<TableData[]>(defaultData)
return (
<Table
columns={columns}
data={data}
withScrollArea
enableMultiSort={false}
manualSorting
onSortingChange={(sorting) => {
if (sorting.length) {
const { id, desc } = sorting[0]!
setData((prev) =>
prev.toSorted((a, b) => {
if (isNumber(a[id]) && isNumber(b[id])) {
return desc ? a[id] - b[id] : b[id] - a[id]
} else if (isString(a[id]) && isString(b[id])) {
return desc
? a[id].localeCompare(b[id])
: b[id].localeCompare(a[id])
}
return 0
}),
)
} else {
setData(defaultData)
}
console.log(sorting)
}}
/>
)
"use client"をファイルの上部に追加する必要があります。ソートの切り替えを変更する
デフォルトでは、ソートが有効になったとき、昇順から始まります。もし、降順から始めたい場合は、sortDescFirstをtrueに設定するか、特定の列だけ設定したい場合は、columnsの列ごとにsortDescFirstをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Fabiola | Pollich | 38 | Juliet85@gmail.com |
| 1 | Tremayne | White | 42 | Tara36@hotmail.com |
| 2 | Nancy | Weimann | 18 | Violet.Hamill25@yahoo.com |
| 3 | Maryann | Schaden | 64 | Lionel58@yahoo.com |
| 4 | Ellie | Hudson | 30 | Ricky.Hand93@yahoo.com |
| 5 | Luz | Kirlin | 52 | Max.Wiza@hotmail.com |
| 6 | Raquel | Leffler | 44 | Kristie_Rolfson@hotmail.com |
| 7 | Braulio | Braun | 33 | Hester_Bashirian@hotmail.com |
| 8 | Ruthe | Altenwerth | 47 | Hector.Turcotte95@gmail.com |
| 9 | Spencer | Johnson | 57 | Dorothy.McDermott47@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} sortDescFirst withScrollArea />
ソートを制御する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Kiera | Denesik | 46 | Thelma97@hotmail.com |
| 1 | Morris | Satterfield | 47 | Chaim_Douglas53@gmail.com |
| 2 | Kirk | Berge | 49 | Grady.Doyle30@hotmail.com |
| 3 | Bobby | Keeling | 40 | Magnus.Rath@gmail.com |
| 4 | Jacqueline | Nader | 21 | Tyreek.Metz@hotmail.com |
| 5 | Leora | Macejkovic | 28 | Lauretta.Langosh@yahoo.com |
| 6 | Domenic | Hilpert | 62 | Winifred.Bergnaum12@hotmail.com |
| 7 | Randy | Donnelly | 31 | Wade61@gmail.com |
| 8 | Tony | Ward | 46 | Nick_Krajcik@gmail.com |
| 9 | Brooke | Hudson | 61 | Erna.Fritsch@hotmail.com |
const [sorting, setSorting] = useState<SortingState<TableData>>([
{ id: "age", desc: true },
])
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} withScrollArea />
"use client"をファイルの上部に追加する必要があります。ページネーションを有効にする
ページネーションを有効にする場合は、enablePaginationをtrueに設定し、ページネーションをコントロールするコンポーネントをheaderまたはfooterに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Saul | Bechtelar | 49 | Bernie.Senger@hotmail.com |
| 1 | Dorothea | Okuneva | 45 | Felipe.Heidenreich-Lesch@yahoo.com |
| 2 | Maritza | White | 46 | Patricia.McCullough@yahoo.com |
| 3 | Forrest | Conroy | 37 | Evan_Torp1@gmail.com |
| 4 | Orlando | Veum | 34 | Lynette.Bode@yahoo.com |
| 5 | Horacio | Koelpin | 18 | Shaylee_Leuschke@yahoo.com |
| 6 | Hunter | Borer | 37 | Rosario90@yahoo.com |
| 7 | Carol | Senger | 46 | Darrel80@hotmail.com |
| 8 | Wade | O'Hara | 25 | Astrid98@hotmail.com |
| 9 | Julius | Jacobson | 59 | Sophia_Roberts69@gmail.com |
| 10 | Carolyn | Mraz | 53 | Lucile_Dooley@gmail.com |
| 11 | Ari | Little | 50 | Nayeli92@gmail.com |
| 12 | Latoya | Windler | 60 | Olive80@gmail.com |
| 13 | Antoinette | Gutmann | 27 | Columbus80@yahoo.com |
| 14 | Eric | Bayer | 22 | Olaf41@gmail.com |
| 15 | Ella | Boehm | 59 | Larry_Lang68@hotmail.com |
| 16 | Brendan | Reinger | 41 | Matthew23@yahoo.com |
| 17 | Jimmie | Farrell | 27 | Tom16@gmail.com |
| 18 | Pam | Boehm | 33 | Tracey.Jacobs53@gmail.com |
| 19 | Allan | Brekke | 44 | America_Luettgen@hotmail.com |
const { t } = useI18n("table")
const data = useMemo<TableData[]>(() => createTableData(40), [])
return (
<VStack>
<Table
columns={columns}
data={data}
enablePagination
footer={(table) => {
const page = table.getState().pagination.pageIndex + 1
const pageSize = table.getState().pagination.pageSize
const total = table.getPageCount()
return (
<Grid templateColumns="1fr 1fr 1fr" w="full">
<Pagination.Root
size={{ base: "sm", sm: "xs" }}
gridColumn="2 / 3"
page={page}
total={total}
onChange={(page) => table.setPageIndex(page - 1)}
/>
<Select.Root
size={{ base: "sm", sm: "xs" }}
aria-label={t("Page size")}
items={[
{ label: "10", value: "10" },
{ label: "20", value: "20" },
{ label: "30", value: "30" },
{ label: "40", value: "40" },
{ label: "50", value: "50" },
]}
value={pageSize.toString()}
rootProps={{ justifySelf: "end", w: "5xs" }}
onChange={(value) => table.setPageSize(Number(value))}
/>
</Grid>
)
}}
withScrollArea
/>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。デフォルトのページインデックスとページサイズを設定する
デフォルトのページインデックスとページサイズを設定する場合は、defaultPaginationにオブジェクトを設定します。オブジェクトには、pageIndexとpageSizeを設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 10 | Alia | Jacobs | 59 | Moses75@gmail.com |
| 11 | Darla | Jaskolski | 24 | Taylor.Wisozk@hotmail.com |
| 12 | William | Herman | 35 | Marcus_Stracke@hotmail.com |
| 13 | Marta | Kirlin | 20 | Ann90@yahoo.com |
| 14 | Wilton | Raynor | 62 | Jordyn4@hotmail.com |
| 15 | Tasha | Kilback | 21 | Travon_Hackett24@hotmail.com |
| 16 | Luis | Koepp | 51 | Max83@hotmail.com |
| 17 | Tyreek | Schmidt | 19 | Dillan_Raynor72@hotmail.com |
| 18 | Lindsay | Langosh | 61 | Zaria22@gmail.com |
| 19 | Owen | Feest | 42 | Andrea_Mertz89@gmail.com |
const { t } = useI18n("table")
const data = useMemo<TableData[]>(() => createTableData(20), [])
return (
<VStack>
<Table
columns={columns}
data={data}
enablePagination
defaultPagination={{ pageIndex: 1, pageSize: 10 }}
footer={(table) => {
const page = table.getState().pagination.pageIndex + 1
const pageSize = table.getState().pagination.pageSize
const total = table.getPageCount()
return (
<Grid templateColumns="1fr 1fr 1fr" w="full">
<Pagination.Root
size={{ base: "sm", sm: "xs" }}
gridColumn="2 / 3"
page={page}
total={total}
onChange={(page) => table.setPageIndex(page - 1)}
/>
<Select.Root
size={{ base: "sm", sm: "xs" }}
aria-label={t("Page size")}
items={[
{ label: "10", value: "10" },
{ label: "20", value: "20" },
{ label: "30", value: "30" },
{ label: "40", value: "40" },
{ label: "50", value: "50" },
]}
value={pageSize.toString()}
rootProps={{ justifySelf: "end", w: "5xs" }}
onChange={(value) => table.setPageSize(Number(value))}
/>
</Grid>
)
}}
withScrollArea
/>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。手動のページネーションを使う
手動のページネーションを使う場合は、manualPaginationをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Allie | Schumm | 64 | Ethan60@yahoo.com |
| 1 | Shawn | Graham | 63 | Ericka_Feil@gmail.com |
| 2 | Pearl | Turner | 52 | Ova_Stamm@yahoo.com |
| 3 | Alayna | Ernser | 59 | Joseph9@hotmail.com |
| 4 | Wilfredo | Legros | 19 | Carl_Littel@hotmail.com |
| 5 | Daisha | Zboncak | 57 | Eula_Sporer@yahoo.com |
| 6 | Wendy | Ernser | 20 | Lana_Lynch74@hotmail.com |
| 7 | Jacqueline | Jacobs | 20 | Loraine_Heller@yahoo.com |
| 8 | Rickey | Rath | 59 | Doris32@gmail.com |
| 9 | Olen | Schaden | 48 | Faye_Gerlach@gmail.com |
| 10 | Lois | Stanton | 58 | Gabriel.Bogisich@gmail.com |
| 11 | Jenny | Fadel | 29 | Brian_Beier@hotmail.com |
| 12 | Gregory | Walsh | 56 | Delta.Kuhn@hotmail.com |
| 13 | Verla | Marks | 40 | Olga18@yahoo.com |
| 14 | Vincenza | Kling | 55 | Keith13@gmail.com |
| 15 | Danyka | Rowe | 34 | Missouri.OKon99@hotmail.com |
| 16 | Leigh | Rice | 51 | Yadira_Stanton@hotmail.com |
| 17 | Maureen | Dickinson | 22 | Johnpaul.Dare@yahoo.com |
| 18 | Chad | Ondricka | 58 | Ignacio69@gmail.com |
| 19 | Lola | Christiansen | 49 | Shawna.Ondricka50@yahoo.com |
const { t } = useI18n("table")
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 20,
})
const rowCount = 40
const defaultData = useMemo<TableData[]>(() => createTableData(rowCount), [])
const data = useMemo<TableData[]>(
() =>
defaultData.slice(
pagination.pageIndex * pagination.pageSize,
(pagination.pageIndex + 1) * pagination.pageSize,
),
[defaultData, pagination],
)
return (
<VStack>
<Table
columns={columns}
data={data}
enablePagination
manualPagination
pagination={pagination}
rowCount={rowCount}
onPaginationChange={setPagination}
footer={(table) => {
const page = table.getState().pagination.pageIndex + 1
const pageSize = table.getState().pagination.pageSize
const total = table.getPageCount()
return (
<Grid templateColumns="1fr 1fr 1fr" w="full">
<Pagination.Root
size={{ base: "sm", sm: "xs" }}
gridColumn="2 / 3"
page={page}
total={total}
onChange={(page) => table.setPageIndex(page - 1)}
/>
<Select.Root
size={{ base: "sm", sm: "xs" }}
aria-label={t("Page size")}
items={[
{ label: "10", value: "10" },
{ label: "20", value: "20" },
{ label: "30", value: "30" },
{ label: "40", value: "40" },
{ label: "50", value: "50" },
]}
value={pageSize.toString()}
rootProps={{ justifySelf: "end", w: "5xs" }}
onChange={(value) => table.setPageSize(Number(value))}
/>
</Grid>
)
}}
withScrollArea
/>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。ページネーションを制御する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Gudrun | Bruen | 38 | Daniel.Cummerata@gmail.com |
| 1 | Anne | Aufderhar | 20 | Clovis2@gmail.com |
| 2 | Carolina | Reilly | 60 | Darrel.Schinner@gmail.com |
| 3 | May | Stamm | 28 | Wanda_Schaden31@yahoo.com |
| 4 | Felicia | Schmidt | 18 | Theodore_Douglas@gmail.com |
| 5 | Marcia | Hahn-Nolan | 56 | Ewald19@gmail.com |
| 6 | Gladyce | Wisoky | 26 | Irma75@gmail.com |
| 7 | Della | Jacobi | 29 | Deanna62@gmail.com |
| 8 | Marshall | Willms | 38 | Alena_Bosco98@yahoo.com |
| 9 | Lacy | Effertz | 46 | Floyd_Ryan90@gmail.com |
| 10 | Annie | Simonis | 24 | Tracey93@yahoo.com |
| 11 | Icie | Hills | 25 | Richmond_OKon@gmail.com |
| 12 | Sabryna | Ortiz | 19 | Idell_Bogan@hotmail.com |
| 13 | Pablo | Senger | 44 | Terrence_McKenzie-Borer15@hotmail.com |
| 14 | Ray | Johnson | 29 | Naomi98@gmail.com |
| 15 | Gerardo | Brekke | 24 | Verna_Will@hotmail.com |
| 16 | Herman | Sauer | 63 | German66@yahoo.com |
| 17 | Gerardo | Graham | 20 | Darin9@gmail.com |
| 18 | Jorge | Keeling | 46 | Lolita_Anderson@gmail.com |
| 19 | Salvador | Blanda | 61 | Gerard.Roob36@yahoo.com |
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 20,
})
const { t } = useI18n("table")
const data = useMemo<TableData[]>(() => createTableData(40), [])
return (
<VStack>
<Table
columns={columns}
data={data}
enablePagination
pagination={pagination}
onPaginationChange={setPagination}
footer={(table) => {
const page = table.getState().pagination.pageIndex + 1
const pageSize = table.getState().pagination.pageSize
const total = table.getPageCount()
return (
<Grid templateColumns="1fr 1fr 1fr" w="full">
<Pagination.Root
size={{ base: "sm", sm: "xs" }}
gridColumn="2 / 3"
page={page}
total={total}
onChange={(page) => table.setPageIndex(page - 1)}
/>
<Select.Root
size={{ base: "sm", sm: "xs" }}
aria-label={t("Page size")}
items={[
{ label: "10", value: "10" },
{ label: "20", value: "20" },
{ label: "30", value: "30" },
{ label: "40", value: "40" },
{ label: "50", value: "50" },
]}
value={pageSize.toString()}
rootProps={{ justifySelf: "end", w: "5xs" }}
onChange={(value) => table.setPageSize(Number(value))}
/>
</Grid>
)
}}
withScrollArea
/>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。行の選択を有効にする
行の選択を有効にする場合は、enableRowSelectionをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Autumn | Aufderhar | 19 | Clint_Wyman-Gulgowski@gmail.com | |
| 1 | Edward | Kshlerin | 53 | Pedro_Glover24@gmail.com | |
| 2 | Kaylie | Shields | 33 | Aileen62@gmail.com | |
| 3 | Dave | Breitenberg | 59 | Zane_Haag@hotmail.com | |
| 4 | Darlene | Brakus | 20 | Ivory82@hotmail.com | |
| 5 | Bridgette | Cartwright | 28 | Lisa.Kohler@hotmail.com | |
| 6 | Ross | Parisian | 58 | Paula_Stamm@yahoo.com | |
| 7 | Cullen | Veum | 49 | Lysanne65@hotmail.com | |
| 8 | Anna | Effertz | 35 | Grady_Mueller30@gmail.com | |
| 9 | Heidi | Lind | 49 | Brenna14@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} enableRowSelection withScrollArea />
デフォルトの選択された行を設定する
デフォルトの選択された行を設定する場合は、defaultRowSelectionにdataのインデックスをキーとしたオブジェクトを設定します。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Georgiana | Hintz | 39 | Adam.Bode63@gmail.com | |
| 1 | Yadira | Wehner | 64 | Keanu_Schuppe79@hotmail.com | |
| 2 | Ryan | Kautzer | 61 | Cesar.Kirlin9@yahoo.com | |
| 3 | Clinton | Braun | 52 | Jeremy_Wilkinson74@gmail.com | |
| 4 | Ardella | O'Reilly | 30 | Don49@gmail.com | |
| 5 | Jace | Mosciski | 35 | Sherri11@hotmail.com | |
| 6 | Davonte | Keebler | 21 | Jasmin_Konopelski-Greenholt@yahoo.com | |
| 7 | Henrietta | Shields | 55 | Andrew.Rogahn@gmail.com | |
| 8 | Sally | Lehner | 36 | Darryl_Simonis67@hotmail.com | |
| 9 | Jo | Tillman | 50 | Everett14@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
defaultRowSelection={{ 0: true }}
withScrollArea
/>
)
行のクリックで選択を有効にする
行のクリックで選択を有効にする場合は、selectOnClickRowをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Lawson | Hauck | 60 | Lorraine.Jenkins37@hotmail.com | |
| 1 | Franklin | Koss | 19 | Glen_Sanford19@yahoo.com | |
| 2 | Kaleb | Leffler | 28 | Gino.Ledner82@gmail.com | |
| 3 | Efrain | Johns | 37 | Jayce.Zemlak@gmail.com | |
| 4 | Dorothy | Krajcik | 39 | Dewitt.Brekke70@yahoo.com | |
| 5 | Mabel | Haley | 28 | Dylan_Kulas@hotmail.com | |
| 6 | Braden | Kilback | 33 | Laverne.Koch31@yahoo.com | |
| 7 | Orie | Zulauf | 43 | Alan.Douglas@yahoo.com | |
| 8 | Dayna | White | 32 | Caleb_Nienow@hotmail.com | |
| 9 | Delbert | Zulauf | 55 | Lydia_Brekke30@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
selectOnClickRow
withScrollArea
/>
)
チェックボックスを非表示にする
チェックボックスを非表示にする場合は、withCheckboxをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Essie | Spencer | 59 | Darwin.Torphy@yahoo.com |
| 1 | Paris | Auer | 25 | Sophie.Stiedemann6@yahoo.com |
| 2 | Dee | Ritchie | 39 | Timothy_Kris@hotmail.com |
| 3 | Johan | Doyle | 32 | Helen17@hotmail.com |
| 4 | Ulises | King | 28 | Margarete_Dooley@yahoo.com |
| 5 | Danny | Schuppe | 39 | May85@hotmail.com |
| 6 | Albertha | Mayert | 51 | Evan48@yahoo.com |
| 7 | Joy | Bergnaum | 51 | Madeline.Johnson@gmail.com |
| 8 | Hugo | Robel | 44 | Esteban_Adams24@hotmail.com |
| 9 | Theresa | Quitzon | 39 | Elton.Kertzmann19@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
selectOnClickRow
withCheckbox={false}
withScrollArea
/>
)
行を無効にする
行を無効にする場合は、enableRowSelectionに条件の関数を設定します。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Anahi | Carter | 57 | Nasir.Jerde98@yahoo.com | |
| 1 | Shaun | Runte | 58 | Lynne_Wolf@gmail.com | |
| 2 | Yesenia | Miller | 19 | Israel.Williamson89@gmail.com | |
| 3 | Gloria | Hermann | 27 | Priscilla_Reichel@gmail.com | |
| 4 | Merritt | Breitenberg | 54 | Justine_Wilderman23@gmail.com | |
| 5 | Megan | Christiansen | 53 | Claire_Kub@gmail.com | |
| 6 | Cortney | McKenzie | 55 | Bryant_Hilll0@yahoo.com | |
| 7 | Clarence | VonRueden | 46 | Nathen89@hotmail.com | |
| 8 | Cicero | Kshlerin | 60 | Nicolas.Jacobs@hotmail.com | |
| 9 | Drew | Adams | 33 | Russell_Turner@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection={(row) => row.id !== "1"}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。行の選択を制御する
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Cecilia | Dare | 65 | Matt28@yahoo.com | |
| 1 | Donnie | Quitzon | 24 | Fannie16@gmail.com | |
| 2 | Ollie | Romaguera | 65 | Christopher.Brown44@gmail.com | |
| 3 | Charles | Powlowski | 41 | Herta74@gmail.com | |
| 4 | Jayden | Boyle | 44 | Tammy91@yahoo.com | |
| 5 | Zackary | Corwin-Kertzmann | 33 | Freida87@yahoo.com | |
| 6 | Geraldine | Kling | 64 | Zachery.Dach14@hotmail.com | |
| 7 | Alfredo | Marks | 57 | Ephraim_Miller-Sawayn78@yahoo.com | |
| 8 | Maci | Fadel | 42 | Leanna_Boyer9@gmail.com | |
| 9 | Jesus | Conn | 40 | Rey60@hotmail.com |
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
rowSelection={rowSelection}
onRowSelectionChange={setRowSelection}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。フィルターを使う
フィルターを使う場合は、フィルターをコントロールするコンポーネントをheaderまたはfooterに設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Oswaldo | Morissette | 48 | Lonie.Jacobson60@gmail.com |
| 1 | Nigel | Fay | 18 | Ardella.Rippin7@gmail.com |
| 2 | Carli | Rau | 50 | Tonya_Stehr@hotmail.com |
| 3 | Ozella | Walsh | 48 | Florencio.Batz14@gmail.com |
| 4 | Norene | Bartoletti | 49 | Cindy.King39@yahoo.com |
| 5 | Misty | Leffler | 51 | Amira_Larkin90@gmail.com |
| 6 | Aniya | Casper | 30 | Colleen_Waters@hotmail.com |
| 7 | Gary | Stamm | 59 | Juanita_Heaney56@yahoo.com |
| 8 | Wilber | Kreiger | 26 | Florence.Fahey8@hotmail.com |
| 9 | Raquel | Satterfield | 21 | Isaac_VonRueden35@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<VStack>
<Table
columns={columns}
data={data}
header={(table) => {
const value =
(table.getColumn("email")?.getFilterValue() as string | undefined) ??
""
return (
<InputGroup.Root>
<InputGroup.Element>
<SearchIcon />
</InputGroup.Element>
<Input
placeholder="Filter emails"
value={value}
onChange={(ev) =>
table.getColumn("email")?.setFilterValue(ev.target.value)
}
/>
</InputGroup.Root>
)
}}
withScrollArea
/>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。デフォルトのフィルターを設定する
デフォルトのフィルターを設定する場合は、defaultColumnFiltersに配列を設定します。配列のオブジェクトには、フィルターする列のidと値を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Edmund | Dooley | 37 | Buck49@gmail.com |
| 4 | Kenya | Ortiz | 44 | Thea18@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<VStack>
<Table
columns={columns}
data={data}
defaultColumnFilters={[{ id: "email", value: "gmail" }]}
header={(table) => {
const value =
(table.getColumn("email")?.getFilterValue() as string | undefined) ??
""
return (
<InputGroup.Root>
<InputGroup.Element>
<SearchIcon />
</InputGroup.Element>
<Input
placeholder="Filter emails"
value={value}
onChange={(ev) =>
table.getColumn("email")?.setFilterValue(ev.target.value)
}
/>
</InputGroup.Root>
)
}}
withScrollArea
/>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。フィルターを制御する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Sigrid | Marvin | 22 | James_Denesik66@yahoo.com |
| 1 | Gloria | Nader | 34 | Cecilia.Shields28@hotmail.com |
| 2 | Lukas | Windler-McCullough | 54 | Grady.Cummings38@hotmail.com |
| 3 | Kristy | Ziemann | 46 | Alyssa.Jacobs87@gmail.com |
| 4 | Caleb | Kub | 42 | Thelma82@hotmail.com |
| 5 | Natasha | Lowe-Mohr | 22 | Lillie_Dickinson98@yahoo.com |
| 6 | Jeramie | Huels | 22 | Christa.Johnson31@hotmail.com |
| 7 | Ivory | Metz | 18 | Llewellyn34@yahoo.com |
| 8 | Howard | Fadel | 36 | Willis.Hauck55@hotmail.com |
| 9 | Johnathon | Hyatt | 41 | Chadd77@hotmail.com |
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([
{ id: "email", value: "" },
])
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<VStack>
<Table
columns={columns}
data={data}
columnFilters={columnFilters}
onColumnFiltersChange={setColumnFilters}
header={(table) => {
const value =
(table.getColumn("email")?.getFilterValue() as string | undefined) ??
""
return (
<InputGroup.Root>
<InputGroup.Element>
<SearchIcon />
</InputGroup.Element>
<Input
placeholder="Filter emails"
value={value}
onChange={(ev) =>
table.getColumn("email")?.setFilterValue(ev.target.value)
}
/>
</InputGroup.Root>
)
}}
withScrollArea
/>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。列のサイズ変更を有効にする
列のサイズ変更を有効にする場合は、enableColumnResizingをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Murl | Donnelly | 65 | Otto.Hackett57@hotmail.com |
| 1 | Ryder | Lakin | 35 | Kristopher_Deckow95@yahoo.com |
| 2 | Gladys | Robel | 56 | Juwan_Kemmer-Russel32@yahoo.com |
| 3 | Maryann | Veum | 50 | Sidney12@yahoo.com |
| 4 | Sonya | West | 61 | Hal.Beatty96@hotmail.com |
| 5 | Rodrick | Wisoky | 36 | Jorge_Boehm-Kovacek0@hotmail.com |
| 6 | Maritza | Kuhn | 20 | Julianne53@gmail.com |
| 7 | Homer | Schiller | 32 | Shaun.Kuhn24@gmail.com |
| 8 | Christop | Langworth | 19 | Isaac39@gmail.com |
| 9 | Geovanny | Treutel-Wolf | 64 | Keshaun_Kertzmann76@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableColumnResizing
withBorder
withColumnBorders
/>
)
列のサイズ変更の方法を変更する
デフォルトでは、列のサイズ変更のタイミングは、ドラッグしている間に変更されます。ドラッグが終わったときに変更する場合は、columnResizeModeに"onEnd"を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Carolanne | Hoppe | 64 | Russel_Deckow64@gmail.com |
| 1 | Rey | Breitenberg | 57 | Lora_Jacobi31@gmail.com |
| 2 | Breanne | Auer | 20 | Cynthia.Berge96@gmail.com |
| 3 | Charles | Kozey | 28 | Kristie_Hickle26@hotmail.com |
| 4 | Abbie | Heller | 24 | Michelle_Herman3@yahoo.com |
| 5 | Jennie | Leuschke | 49 | Alvena97@hotmail.com |
| 6 | Fabian | Satterfield | 53 | Kristine.Von15@gmail.com |
| 7 | Patty | Prosacco | 22 | Felipa36@hotmail.com |
| 8 | Gunnar | Veum-Blanda | 24 | Brown_Spencer-Kreiger37@gmail.com |
| 9 | Seth | Paucek | 60 | Elton.Gutmann@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableColumnResizing
columnResizeMode="onEnd"
withBorder
withColumnBorders
/>
)
Props
アクセシビリティ
Tableは、アクセシビリティに関してWAI-ARIA - Table Patternに従います。
tablePropsにaria-labelを設定すると、スクリーンリーダーによって読み上げられます。
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
tableProps={{ "aria-label": "User list" }}
/>
)
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
ArrowLeft | フォーカスを左のセルに1つ移動します。行の一番左のセルにフォーカスがある場合、フォーカスは移動しません。 | - |
ArrowRight | フォーカスを右のセルに1つ移動します。行の一番右のセルにフォーカスがある場合、フォーカスは移動しません。 | - |
ArrowUp | フォーカスを上のセルに1つ移動します。列の一番上のセルにフォーカスがある場合、フォーカスは移動しません。 | - |
ArrowDown | フォーカスを下のセルに1つ移動します。列の一番下のセルにフォーカスがある場合、フォーカスは移動しません。 | - |
Home | フォーカスのある行の最初のセルにフォーカスを移動します。 | - |
End | フォーカスのある行の最後のセルにフォーカスを移動します。 | - |
PageUp | 前のページに移動します。 | enablePagination={true} |
PageDown | 次のページに移動します。 | enablePagination={true} |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
NativeTable.Root | role="grid" | グリッドであることを示します。 |
aria-rowcount | テーブルの行数を示します。 | |
aria-colcount | テーブルの列数を示します。 | |
aria-multiselectable | enableRowSelectionが設定されている場合は"true"を設定します。 | |
NativeTable.Thead | role="rowgroup" | 行グループであることを示します。 |
NativeTable.Tr | role="row" | 行であることを示します。 |
aria-rowindex | 行がテーブルの何行目であるかを示します。 | |
aria-disabled | enableRowSelectionを関数で設定し、falseの行には"true"を設定します。 | |
aria-selected | 行が選択されている場合は"true"を設定し、未選択の場合は"false"を設定します。 | |
NativeTable.Th | role="columnheader" | カラムヘッダーであることを示します。 |
aria-rowindex | 行がテーブルの何行目であるかを示します。 | |
aria-colindex | 列がテーブルの何列目であるかを示します。 | |
aria-sort | 列が昇順の場合は"ascending"を設定し、降順の場合は"descending"を設定、指定がない場合は"none"を設定します。 | |
NativeTable.Tbody | role="rowgroup" | 行グループであることを示します。 |
NativeTable.Td | role="gridcell" | グリッドセルであることを示します。 |
aria-colindex | 列がテーブルの何列目であるかを示します。 | |
aria-rowindex | 行がテーブルの何行目であるかを示します。 | |
NativeTable.Tfoot | role="rowgroup" | 行グループであることを示します。 |
Checkbox | aria-label | ヘッダーの場合は"すべての行を選択する"、それ以外の行の場合は"行を選択する"を設定します。 |
SortingIcon | aria-label | 列が昇順の場合は"昇順でソートする"を設定し、降順の場合は"降順でソートする"を設定、指定がない場合は"ソートを解除する"を設定します。 |
類似のコンポーネント
NativeTable
NativeTableは、データを効率的に整理して表示するコンポーネントです。
Stat
Statは、数値やデータをボックス内に表示するために使用されます。
AreaChart
AreaChartは、複数のデータを比較するためのエリアチャートを描画するコンポーネントです。
Badge
Badgeは、アイテムのステータスを強調表示して、すぐに認識できるようにするコンポーネントです。
BarChart
BarChartは、複数のデータを比較するための棒グラフを描画するコンポーネントです。
Card
Cardは、関連する情報をグループ化して表示するコンポーネントです。デフォルトでは、article要素をレンダリングします。
ComposedChart
ComposedChartは、複数のデータを比較するための複合チャートを描画するコンポーネントです。
DataList
DataListは、データ項目のリストを表示するために使用されます。