Table
Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Joy | Powlowski | 50 | Ruben90@gmail.com |
| 1 | Christian | Corwin | 43 | Delpha.Wiza9@yahoo.com |
| 2 | Maye | Conn | 19 | Chelsea.Farrell@gmail.com |
| 3 | Billie | Stanton | 58 | Broderick_Carroll8@yahoo.com |
| 4 | Alison | Champlin | 62 | Titus_Hartmann@gmail.com |
| 5 | Darin | Towne | 38 | Brennan69@gmail.com |
| 6 | Jayce | Schneider | 46 | Rick_Kertzmann75@gmail.com |
| 7 | Pamela | Zemlak | 21 | Amber_Feest@hotmail.com |
| 8 | Kendall | Ruecker | 59 | Jennifer.Kirlin65@yahoo.com |
| 9 | Kristina | Windler | 63 | Durward.Wisoky@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 | Fredrick | Pacocha | 62 | Aida.Emmerich65@yahoo.com |
| 1 | Terrance | Ryan | 19 | Justine45@gmail.com |
| 2 | Whitney | White | 54 | Corey.Gleason@hotmail.com |
| 3 | Rachelle | Johnston | 26 | Jean43@hotmail.com |
| 4 | Aryanna | Emmerich | 53 | Warren.Senger@yahoo.com |
| 5 | Alexandra | Herman-Wisozk | 20 | Queenie22@yahoo.com |
| 6 | Cecilia | Mertz | 19 | Orlando34@gmail.com |
| 7 | Theresia | Beahan | 27 | Hilario_Stracke60@gmail.com |
| 8 | Edward | Howell | 40 | Randall.Dooley@hotmail.com |
| 9 | Ashlee | Hamill | 52 | Jonathan46@yahoo.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Fredrick | Pacocha | 62 | Aida.Emmerich65@yahoo.com |
| 1 | Terrance | Ryan | 19 | Justine45@gmail.com |
| 2 | Whitney | White | 54 | Corey.Gleason@hotmail.com |
| 3 | Rachelle | Johnston | 26 | Jean43@hotmail.com |
| 4 | Aryanna | Emmerich | 53 | Warren.Senger@yahoo.com |
| 5 | Alexandra | Herman-Wisozk | 20 | Queenie22@yahoo.com |
| 6 | Cecilia | Mertz | 19 | Orlando34@gmail.com |
| 7 | Theresia | Beahan | 27 | Hilario_Stracke60@gmail.com |
| 8 | Edward | Howell | 40 | Randall.Dooley@hotmail.com |
| 9 | Ashlee | Hamill | 52 | Jonathan46@yahoo.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 | Sheri | Douglas | 31 | Bailee.Metz21@yahoo.com |
| 1 | Leah | Wisoky | 54 | Elroy_Ondricka11@yahoo.com |
| 2 | Bryana | Paucek | 18 | Karson_Stanton-Becker92@yahoo.com |
| 3 | Wava | Hickle | 56 | Cleve_Hoeger@yahoo.com |
| 4 | Leif | Brakus | 23 | Ricardo_Smitham@gmail.com |
| 5 | Edwin | Fisher | 19 | Dewey.Pfeffer@gmail.com |
| 6 | Daphney | Rath | 60 | Laurie.Bruen@yahoo.com |
| 7 | Rex | Jacobi | 27 | Alma.Monahan8@yahoo.com |
| 8 | Tate | Marquardt-Ankunding | 22 | Florencio91@hotmail.com |
| 9 | Bertha | Langosh | 59 | Daphney.Russel@gmail.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Sheri | Douglas | 31 | Bailee.Metz21@yahoo.com |
| 1 | Leah | Wisoky | 54 | Elroy_Ondricka11@yahoo.com |
| 2 | Bryana | Paucek | 18 | Karson_Stanton-Becker92@yahoo.com |
| 3 | Wava | Hickle | 56 | Cleve_Hoeger@yahoo.com |
| 4 | Leif | Brakus | 23 | Ricardo_Smitham@gmail.com |
| 5 | Edwin | Fisher | 19 | Dewey.Pfeffer@gmail.com |
| 6 | Daphney | Rath | 60 | Laurie.Bruen@yahoo.com |
| 7 | Rex | Jacobi | 27 | Alma.Monahan8@yahoo.com |
| 8 | Tate | Marquardt-Ankunding | 22 | Florencio91@hotmail.com |
| 9 | Bertha | Langosh | 59 | Daphney.Russel@gmail.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Sheri | Douglas | 31 | Bailee.Metz21@yahoo.com |
| 1 | Leah | Wisoky | 54 | Elroy_Ondricka11@yahoo.com |
| 2 | Bryana | Paucek | 18 | Karson_Stanton-Becker92@yahoo.com |
| 3 | Wava | Hickle | 56 | Cleve_Hoeger@yahoo.com |
| 4 | Leif | Brakus | 23 | Ricardo_Smitham@gmail.com |
| 5 | Edwin | Fisher | 19 | Dewey.Pfeffer@gmail.com |
| 6 | Daphney | Rath | 60 | Laurie.Bruen@yahoo.com |
| 7 | Rex | Jacobi | 27 | Alma.Monahan8@yahoo.com |
| 8 | Tate | Marquardt-Ankunding | 22 | Florencio91@hotmail.com |
| 9 | Bertha | Langosh | 59 | Daphney.Russel@gmail.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 | Deborah | Maggio | 47 | Teagan_Lakin13@hotmail.com |
| 1 | Gerard | Dach-Bahringer | 54 | Angela79@yahoo.com |
| 2 | Aniyah | Kuhlman | 19 | Martine.Kilback9@gmail.com |
| 3 | Rafael | Quigley | 47 | Camila.Bechtelar94@yahoo.com |
| 4 | Shanna | Braun | 53 | Katelin.Morar80@yahoo.com |
| 5 | Ena | Harris | 19 | Vicky.Lakin-Considine@hotmail.com |
| 6 | Gerard | Gusikowski | 60 | Amanda.Gislason1@hotmail.com |
| 7 | Fredrick | Koepp | 65 | Derek_Carroll-Jones@yahoo.com |
| 8 | Demarco | Lebsack | 34 | Annette31@yahoo.com |
| 9 | Lenny | Stracke | 57 | Ernestina16@yahoo.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Deborah | Maggio | 47 | Teagan_Lakin13@hotmail.com |
| 1 | Gerard | Dach-Bahringer | 54 | Angela79@yahoo.com |
| 2 | Aniyah | Kuhlman | 19 | Martine.Kilback9@gmail.com |
| 3 | Rafael | Quigley | 47 | Camila.Bechtelar94@yahoo.com |
| 4 | Shanna | Braun | 53 | Katelin.Morar80@yahoo.com |
| 5 | Ena | Harris | 19 | Vicky.Lakin-Considine@hotmail.com |
| 6 | Gerard | Gusikowski | 60 | Amanda.Gislason1@hotmail.com |
| 7 | Fredrick | Koepp | 65 | Derek_Carroll-Jones@yahoo.com |
| 8 | Demarco | Lebsack | 34 | Annette31@yahoo.com |
| 9 | Lenny | Stracke | 57 | Ernestina16@yahoo.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 | Esther | Nikolaus | 57 | Randolph_Moen51@hotmail.com |
| 1 | Damien | Jakubowski | 28 | Dewey.Walker15@gmail.com |
| 2 | Ashton | Berge | 53 | Isom66@hotmail.com |
| 3 | Edwin | Beier | 62 | Loretta.Littel@hotmail.com |
| 4 | Lynda | Kassulke | 40 | Jo_Rohan@hotmail.com |
| 5 | Margarete | Schaden | 63 | Julie88@gmail.com |
| 6 | Carroll | Lesch | 65 | Glen.Miller@gmail.com |
| 7 | Allison | Mayert | 27 | Amir.Grimes@hotmail.com |
| 8 | Olivia | O'Keefe | 41 | Rosalia_Nader@hotmail.com |
| 9 | Mallory | Kautzer | 22 | Jazlyn_Kautzer92@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} withBorder withScrollArea />
列の区切り線を追加する
列の区切り線を追加する場合は、withColumnBordersをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Adriana | Wilderman | 31 | Monroe.Oberbrunner28@yahoo.com |
| 1 | Connie | Beatty | 33 | Kristi_Fahey-Lang20@yahoo.com |
| 2 | Ted | Runolfsson | 31 | Dixie69@yahoo.com |
| 3 | Raheem | Bergnaum | 57 | Melinda.Klocko20@gmail.com |
| 4 | Nettie | Howell | 44 | Bo.Jacobs@hotmail.com |
| 5 | Emerson | Metz | 35 | Martin_Klocko@yahoo.com |
| 6 | Sincere | O'Conner | 50 | Delphia34@gmail.com |
| 7 | Russell | Hegmann | 40 | Enoch_Williamson85@gmail.com |
| 8 | Theodore | Hodkiewicz | 30 | Chanel52@yahoo.com |
| 9 | Bobby | Heathcote | 34 | Leticia_Marks59@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} withColumnBorders withScrollArea />
行がホバーされたときにハイライトする
行がホバーされたときにハイライトする場合は、highlightOnHoverをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Carolyn | Waelchi | 65 | Maggie_Gislason@yahoo.com |
| 1 | River | Monahan | 63 | Earline.Cummerata@yahoo.com |
| 2 | Manuel | Anderson | 21 | Melba78@hotmail.com |
| 3 | Nicholas | Streich | 27 | Theresa.Kertzmann21@gmail.com |
| 4 | Gilda | Boehm | 52 | Krista89@gmail.com |
| 5 | Natasha | Trantow | 51 | Emmie54@yahoo.com |
| 6 | Stacy | Weissnat | 29 | Garry.Welch@gmail.com |
| 7 | Kenneth | Kuhic | 40 | Gerardo29@hotmail.com |
| 8 | Agnes | Goyette | 46 | Shirley.Emmerich@yahoo.com |
| 9 | Angelina | Johnson | 49 | Libbie.Bogisich@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} highlightOnHover withScrollArea />
ストライプを使う
ストライプを使う場合は、stripedをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Rosemarie | Parker | 27 | Bernadette.Fahey75@gmail.com |
| 1 | Lula | Bergnaum | 58 | Jazmin_Franecki55@yahoo.com |
| 2 | Debbie | Ortiz | 49 | Karine62@gmail.com |
| 3 | Jamel | Gutmann | 23 | Audreanne_Prohaska70@gmail.com |
| 4 | Chauncey | Stroman | 36 | Sandy_Crona34@hotmail.com |
| 5 | Martin | Tremblay | 56 | Alexandre.Okuneva@gmail.com |
| 6 | Ernestine | Kassulke | 34 | Sherry44@yahoo.com |
| 7 | Ervin | Gottlieb | 23 | Angelica.Sipes83@gmail.com |
| 8 | Noah | Schaefer | 28 | Dovie90@hotmail.com |
| 9 | Bryant | Waters | 33 | Latoya.Prosacco@hotmail.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 | Edwardo | Huels | 59 | Tito_Brown@gmail.com | 559.207.3064 x490 | admin | active | 10/25/2025 | 6/25/2025 |
| 1 | Emelie | Graham | 26 | Delmer.Kozey@gmail.com | 723.886.1686 | admin | active | 1/30/2026 | 11/6/2025 |
| 2 | Conor | Rolfson | 35 | Evelyn54@gmail.com | (464) 267-8404 x380 | admin | inactive | 6/30/2025 | 12/6/2025 |
| 3 | Stuart | Dooley | 60 | Melvin69@yahoo.com | 988.325.4776 x412 | user | active | 12/6/2025 | 5/21/2025 |
| 4 | Floy | Hessel | 51 | Isaac.Wolff@gmail.com | 787.487.6388 x09363 | admin | active | 10/2/2025 | 12/2/2025 |
| 5 | Caleb | Stehr | 29 | Carroll54@yahoo.com | 539-887-1286 x420 | user | inactive | 2/13/2026 | 10/6/2025 |
| 6 | Chad | Dibbert | 51 | Constance_Smith94@yahoo.com | (702) 747-3571 | admin | inactive | 12/15/2025 | 1/29/2026 |
| 7 | Roy | Pollich | 47 | Roma_Nicolas56@gmail.com | (461) 526-9970 | user | active | 10/4/2025 | 3/17/2026 |
| 8 | Alfonso | Turner | 64 | Phyllis76@yahoo.com | 223-652-0608 x598 | user | active | 7/5/2025 | 8/28/2025 |
| 9 | Gregg | Lebsack | 49 | Johnny64@yahoo.com | 290-587-3854 x133 | user | active | 1/11/2026 | 6/3/2025 |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columnsFull} data={data} withScrollArea />
ヘッダーグループ
| id | user | |||
|---|---|---|---|---|
| name | age | |||
| firstName | lastName | |||
| 0 | Elinor | Lesch | 61 | Woodrow_Boyle@gmail.com |
| 1 | Margret | Hilpert | 51 | Sheldon_Murray30@gmail.com |
| 2 | Mathew | Kilback | 18 | Alverta_Labadie0@yahoo.com |
| 3 | Preston | Roberts | 59 | Trever.McLaughlin@gmail.com |
| 4 | Darlene | Dooley | 49 | Jill86@yahoo.com |
| 5 | Kristoffer | Casper | 42 | Cheyenne_Jakubowski9@yahoo.com |
| 6 | Cornelius | Boehm | 38 | Macey48@hotmail.com |
| 7 | Kathleen | O'Connell | 31 | Wiley_Bode@gmail.com |
| 8 | Carlos | Romaguera | 24 | Frederick.Metz-Kovacek@yahoo.com |
| 9 | Zechariah | Hyatt | 54 | Willis.Kshlerin48@hotmail.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 | Merritt | Hamill | 19 | Montana_Feil24@gmail.com |
| 1 | Anita | Legros | 58 | Santa72@hotmail.com |
| 2 | Maurine | Tillman | 57 | Tammy39@yahoo.com |
| 3 | Beth | Schiller | 55 | Caroline90@yahoo.com |
| 4 | Phil | Friesen | 19 | Dennis5@hotmail.com |
| 5 | Adella | Johns | 62 | Christy_Schneider99@hotmail.com |
| 6 | Jeanette | Marks | 61 | Angela_Pouros@hotmail.com |
| 7 | Elton | Williamson | 57 | Ahmad_Connelly@gmail.com |
| 8 | Silas | Hettinger | 63 | Susie_Ledner@yahoo.com |
| 9 | Jed | Lemke | 26 | Sonja.Mohr28@gmail.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 | Jazmin | Effertz | 59 | Jana.Bailey35@yahoo.com |
| 1 | Emmanuelle | Torphy | 40 | Domingo_Kovacek@yahoo.com |
| 2 | Jewell | Koelpin | 25 | Kasandra5@hotmail.com |
| 3 | Ben | Ankunding | 36 | Elyse_Senger@hotmail.com |
| 4 | Antoinette | Feeney | 23 | Enola_Funk@yahoo.com |
| 5 | Lorraine | Hyatt | 54 | Carla.Purdy82@gmail.com |
| 6 | Leona | VonRueden | 30 | Jacey77@hotmail.com |
| 7 | Claude | Wilderman | 42 | Maxine69@gmail.com |
| 8 | Victoria | Emmerich | 52 | Makenna.Wintheiser51@hotmail.com |
| 9 | Yasmine | Turcotte | 34 | Adonis.Russel56@hotmail.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 | Adrain | Lowe | 28 | Francisca_OReilly@hotmail.com |
| 1 | Vivian | Brekke | 43 | Garry_Bayer61@yahoo.com |
| 2 | Madaline | Emard | 43 | Lue87@yahoo.com |
| 3 | Schuyler | Koelpin | 43 | Demario29@hotmail.com |
| 4 | Jay | Hagenes | 56 | Lois.Bashirian-Hodkiewicz80@hotmail.com |
| 5 | Michelle | Mohr | 64 | Winona93@yahoo.com |
| 6 | Lorena | Schmeler | 56 | Abraham_Romaguera@yahoo.com |
| 7 | Davion | Orn | 28 | Trevion89@gmail.com |
| 8 | Korey | Kub | 19 | Kathryn.Lang49@hotmail.com |
| 9 | Effie | Considine | 44 | Hannah_Cronin36@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
initialFocusableCell={{ colIndex: 1, rowIndex: 0 }}
withScrollArea
/>
)
行のクリックイベントをハンドルする
行のクリックイベントをハンドルする場合は、onRowClickを使用します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Danielle | Parker | 36 | Trevor97@gmail.com |
| 1 | Ines | Von | 27 | Sheldon98@yahoo.com |
| 2 | Tyler | Stoltenberg | 22 | Lucius18@hotmail.com |
| 3 | Ryder | Littel | 18 | Marian.Botsford68@gmail.com |
| 4 | Ray | Botsford | 42 | Ann.Luettgen17@hotmail.com |
| 5 | Freda | White | 65 | Lana_Labadie@yahoo.com |
| 6 | Lorraine | Altenwerth | 63 | Rose.Medhurst@hotmail.com |
| 7 | Destini | Reynolds | 65 | Maynard.McClure24@yahoo.com |
| 8 | Bridgette | Beier | 52 | Gene.Ernser@hotmail.com |
| 9 | Matilda | Ledner | 50 | Lucinda_OKon73@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 | Jermaine | Batz | 61 | Greg.Herman28@hotmail.com |
| 1 | Kane | Reynolds | 31 | Neva40@hotmail.com |
| 2 | Esther | Padberg | 36 | Kraig22@gmail.com |
| 3 | Edna | Konopelski | 58 | Carlie_Trantow@yahoo.com |
| 4 | Karla | Harris | 54 | Nelda_Bashirian74@hotmail.com |
| 5 | Kristi | Pollich | 49 | Wendell.Mosciski22@yahoo.com |
| 6 | Aglae | Grant-Kihn | 26 | Makayla_West29@gmail.com |
| 7 | Edgar | Frami | 41 | Liliane.DAmore8@hotmail.com |
| 8 | Gertrude | Jast | 26 | Rachael76@hotmail.com |
| 9 | Genevieve | Lubowitz-Jacobson | 30 | Carmela48@gmail.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 | |
|---|---|---|---|---|
| 9 | Lori | Harber | 57 | Duane_Gleason@gmail.com |
| 0 | Martin | Labadie | 56 | Donavon.Pfannerstill@yahoo.com |
| 6 | Michele | Haag | 50 | Silvia2@hotmail.com |
| 8 | Loraine | Towne | 46 | Micaela.West49@gmail.com |
| 4 | Corey | O'Hara | 37 | Elias_Heathcote@hotmail.com |
| 3 | Tom | Schaefer | 32 | Cheryl80@yahoo.com |
| 2 | Darlene | Streich | 30 | Greg33@gmail.com |
| 1 | Elwin | Grant | 29 | Travis97@gmail.com |
| 7 | August | Rohan | 29 | Brennan.Hintz@gmail.com |
| 5 | Owen | Swaniawski | 20 | Brock.Rath50@gmail.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 | Tricia | Lesch | 46 | Teresa_Daugherty-Medhurst94@hotmail.com |
| 1 | Anne | Hickle | 54 | Cheryl89@gmail.com |
| 2 | Jo | Jerde | 60 | Cecelia_Waters96@yahoo.com |
| 3 | Enrique | Pagac | 38 | Ana_Ward@gmail.com |
| 4 | Samantha | Welch | 45 | Clara98@gmail.com |
| 5 | Marcia | Towne | 56 | Marlon.DuBuque36@hotmail.com |
| 6 | Dustin | West | 18 | Ellis_Cronin@yahoo.com |
| 7 | Ann | VonRueden | 45 | Name_Grimes@hotmail.com |
| 8 | Joesph | Pacocha | 44 | Garry_Konopelski@yahoo.com |
| 9 | Dakota | Bednar | 18 | Dallin42@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table columns={columns} data={data} enableSorting={false} withScrollArea />
)
複数列のソートを無効にする
複数列のソートを無効にする場合は、enableMultiSortをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Alice | Hammes | 28 | Kacey.Wiegand30@yahoo.com |
| 1 | Leroy | Labadie | 64 | Alessia23@yahoo.com |
| 2 | Priscilla | O'Reilly-Schmitt | 26 | Carissa_Oberbrunner29@yahoo.com |
| 3 | Jessy | Breitenberg | 50 | Darrell_Witting@yahoo.com |
| 4 | Ramiro | Lynch | 44 | Aaron.Reichert89@yahoo.com |
| 5 | Margarita | Stehr | 45 | Charles46@hotmail.com |
| 6 | Tammy | Koepp | 55 | Wilfredo.Kutch@hotmail.com |
| 7 | Tatum | Goldner | 54 | Erin.Davis@hotmail.com |
| 8 | Mercedes | Reinger | 55 | Ella_Witting@gmail.com |
| 9 | Harrison | Hammes | 19 | Anita.OConnell79@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table columns={columns} data={data} enableMultiSort={false} withScrollArea />
)
最大のソート可能な列数を設定する
最大のソート可能な列数を設定する場合は、maxMultiSortColCountに数値を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Donnell | Kutch | 52 | Colt_Lockman@yahoo.com |
| 1 | Brady | Sporer | 64 | Jacinto.Howell@yahoo.com |
| 2 | Holden | Wiza | 63 | Jacquelyn_Balistreri@gmail.com |
| 3 | Tyler | White | 48 | Lorna_Osinski35@gmail.com |
| 4 | Frank | Cassin | 51 | Aniyah_Hauck@gmail.com |
| 5 | Alba | Raynor | 34 | Danial_Klein14@gmail.com |
| 6 | Leopold | Little | 27 | Vern.Harber-OReilly@yahoo.com |
| 7 | Ginger | Muller | 34 | Delores.Schmitt@yahoo.com |
| 8 | Katarina | Luettgen-Gutkowski | 22 | Shelly96@hotmail.com |
| 9 | Manuel | Jones | 61 | Bridget.Goldner@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
maxMultiSortColCount={2}
withScrollArea
/>
)
手動のソートを使う
手動のソートを使う場合は、manualSortingをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | William | Parker | 29 | Mckayla.Carter56@gmail.com |
| 1 | Jeanette | Harber | 26 | Nellie_Walsh@gmail.com |
| 2 | Robyn | Kiehn | 54 | Dianne_Johnston@yahoo.com |
| 3 | Anthony | Pollich | 54 | Gary0@yahoo.com |
| 4 | Jennifer | Dicki | 31 | Demarcus.Nader78@yahoo.com |
| 5 | Jacquelyn | Conn | 39 | Olen.Prosacco@gmail.com |
| 6 | Emerald | Wilkinson-O'Hara | 38 | General.Waelchi68@gmail.com |
| 7 | Floy | Morar | 34 | Viva_Russel@hotmail.com |
| 8 | Robin | Carter | 46 | Jeff.Konopelski59@gmail.com |
| 9 | Gregg | Romaguera-Vandervort | 51 | Terrill.Hills@hotmail.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 | Tremaine | Reinger | 36 | Colleen38@yahoo.com |
| 1 | Russell | Bins | 43 | Bryana46@yahoo.com |
| 2 | Randall | Luettgen | 44 | Rickey96@yahoo.com |
| 3 | Brandt | Bailey | 37 | Furman34@gmail.com |
| 4 | Tod | Schroeder | 62 | Calvin66@gmail.com |
| 5 | Ayla | Rolfson | 52 | Noel.Reinger@gmail.com |
| 6 | Tyrone | Block | 56 | Lindsey.Jacobs@gmail.com |
| 7 | Bethel | Abbott | 63 | Gennaro.Heidenreich50@gmail.com |
| 8 | Estella | Kemmer | 47 | Bryana.Gottlieb@hotmail.com |
| 9 | Stacey | Prohaska | 58 | Isaac_OConnell@gmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} sortDescFirst withScrollArea />
ソートを制御する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Regan | Stroman | 46 | Yasmine_Strosin36@hotmail.com |
| 1 | Dean | Thompson | 24 | Judge.Dibbert@hotmail.com |
| 2 | Lorraine | Towne | 32 | Lorene_Bailey63@yahoo.com |
| 3 | Leanne | Bode | 60 | Minerva46@gmail.com |
| 4 | Bobby | Watsica | 31 | Mittie33@yahoo.com |
| 5 | Louis | Macejkovic | 48 | Miles_Mraz@yahoo.com |
| 6 | Marcia | Klein | 21 | Logan26@hotmail.com |
| 7 | Hunter | Lindgren | 52 | Rufus_Sawayn@gmail.com |
| 8 | Freda | Volkman | 60 | Urban37@hotmail.com |
| 9 | Garry | Reichel | 48 | Karl9@gmail.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 | Kimberly | Kuvalis | 19 | Brice_Hills@gmail.com |
| 1 | Andy | Baumbach | 36 | Mamie.Collier-Gleason96@yahoo.com |
| 2 | Celia | Romaguera | 65 | Antoinette_Kuphal@yahoo.com |
| 3 | Maurine | Hettinger | 37 | Van_Hackett54@gmail.com |
| 4 | Adeline | Kuhn | 31 | Myriam40@hotmail.com |
| 5 | Eva | Kilback | 20 | Peggy.Dibbert@hotmail.com |
| 6 | Edith | Pfannerstill | 62 | Orrin_Metz@hotmail.com |
| 7 | Troy | Reinger | 63 | Beatrice.Jast@gmail.com |
| 8 | Morris | Blick | 63 | Craig_Muller@yahoo.com |
| 9 | Roberto | Lubowitz | 33 | Herman21@gmail.com |
| 10 | Ebony | Larson | 52 | Jermaine.Dooley-Collins5@gmail.com |
| 11 | Emilio | Glover | 52 | Skylar_Green@hotmail.com |
| 12 | Madeline | Terry | 22 | Graham88@yahoo.com |
| 13 | Ricky | Veum | 28 | Joel53@yahoo.com |
| 14 | Emma | Nicolas | 27 | Eulah.Hermann29@yahoo.com |
| 15 | Guiseppe | Schuster | 29 | Efren3@hotmail.com |
| 16 | Byron | Runte | 63 | Iris_Kessler-Turner@gmail.com |
| 17 | Warren | Von | 20 | Millie_Gerhold@gmail.com |
| 18 | Mikayla | Sporer | 61 | Anika72@hotmail.com |
| 19 | Pinkie | Abernathy | 42 | Van_Morissette@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 | Marcelina | Gibson | 39 | Dewey62@gmail.com |
| 11 | Cecil | Kunde | 20 | Gaston_Douglas@yahoo.com |
| 12 | Larry | Glover | 41 | Kevin.Fritsch6@hotmail.com |
| 13 | Geovanni | Price | 21 | Verna66@gmail.com |
| 14 | Liliane | Toy | 28 | Bailey.Abbott24@hotmail.com |
| 15 | Clifford | Kemmer | 39 | Regan.Friesen@hotmail.com |
| 16 | Rico | Schiller | 19 | Myah30@gmail.com |
| 17 | Maria | Wolff-Boyer | 63 | Octavia.Batz56@hotmail.com |
| 18 | Jeanie | Becker | 46 | Dawn61@yahoo.com |
| 19 | Ollie | Pacocha | 53 | Katelin98@yahoo.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 | Shawn | Schaefer | 31 | Jaida_Stark40@yahoo.com |
| 1 | Lester | Keebler | 51 | Rickey_Sauer@gmail.com |
| 2 | Ginger | Mante | 41 | Jedidiah_Paucek37@hotmail.com |
| 3 | Laurence | Ziemann-Feeney | 21 | Gwendolyn.Kilback@hotmail.com |
| 4 | Leone | Carter | 26 | Wendy.Dietrich@yahoo.com |
| 5 | Alisa | Wiegand | 49 | Deven.Torphy@hotmail.com |
| 6 | Bernadette | Walsh | 33 | Clara.Gerlach29@hotmail.com |
| 7 | Madison | Tromp | 42 | Damon.Schroeder@hotmail.com |
| 8 | Hassan | Farrell | 26 | Fernando_Berge@gmail.com |
| 9 | Ezekiel | Lehner | 47 | Horace.Smith52@yahoo.com |
| 10 | Denise | Goldner | 38 | Lauren.Davis1@gmail.com |
| 11 | Maud | Gusikowski | 42 | Jerry81@hotmail.com |
| 12 | Ellie | O'Kon | 50 | Lucas.Hartmann@hotmail.com |
| 13 | Ronnie | Bashirian | 27 | Rico.Runolfsson88@yahoo.com |
| 14 | Leigh | Bosco | 43 | Magnolia77@gmail.com |
| 15 | Gilbert | Stark | 19 | Steven.Feeney71@hotmail.com |
| 16 | Pam | Morissette | 27 | Karen_Sauer44@gmail.com |
| 17 | Shirley | Wisozk | 62 | Bertha10@gmail.com |
| 18 | Deondre | Block | 51 | Bernita_OHara@hotmail.com |
| 19 | Otto | Oberbrunner | 64 | Antonia10@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 | Ivan | Turner | 46 | Cassandra_Gusikowski@gmail.com |
| 1 | Rosalie | Kessler | 33 | Theresia_Wuckert@gmail.com |
| 2 | Jana | Schmitt | 43 | Geneva.Stanton@yahoo.com |
| 3 | Merritt | Parker | 49 | Keagan17@yahoo.com |
| 4 | Sonya | Bauch | 62 | Peter83@yahoo.com |
| 5 | Mable | Flatley | 60 | Isom4@gmail.com |
| 6 | Chad | Auer | 61 | Ike50@gmail.com |
| 7 | Sonja | Dare | 40 | Rex_Murray@hotmail.com |
| 8 | Summer | Larkin | 59 | Tyreek_Homenick34@hotmail.com |
| 9 | Wilhelmine | Kuvalis | 63 | Arlie.Breitenberg@gmail.com |
| 10 | Vinnie | Kessler | 37 | Angelita88@hotmail.com |
| 11 | Adriana | Davis | 34 | Alex.Sanford@yahoo.com |
| 12 | Tamara | Considine | 52 | Ramiro.Von57@yahoo.com |
| 13 | Cesar | Dach | 28 | Tanya.Beatty88@hotmail.com |
| 14 | Roslyn | Hilll | 39 | Guy47@yahoo.com |
| 15 | Brandyn | Baumbach | 32 | Sim.Wolf18@yahoo.com |
| 16 | Max | Schumm | 64 | Devyn_Lakin@yahoo.com |
| 17 | Jenna | Erdman | 50 | Ward_Quigley55@yahoo.com |
| 18 | Vera | Kuhlman | 53 | Sonia96@yahoo.com |
| 19 | Tabitha | Glover | 33 | Clay.Ward12@hotmail.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 | Sonja | Runte | 29 | Brad49@yahoo.com | |
| 1 | Jalyn | Beatty | 58 | Alexandra_Waters8@hotmail.com | |
| 2 | Mitchell | Heidenreich | 51 | Daniella61@gmail.com | |
| 3 | Eduardo | Willms | 61 | Lonny6@gmail.com | |
| 4 | Hanna | Borer | 42 | Eliza.Frami@yahoo.com | |
| 5 | Estelle | Farrell | 26 | Sylvester.Bartoletti39@gmail.com | |
| 6 | Orlando | VonRueden | 43 | Meggie_Prosacco@yahoo.com | |
| 7 | Vicente | Koelpin | 51 | Erik_Pfannerstill@yahoo.com | |
| 8 | Shelley | Swift | 26 | Anthony38@yahoo.com | |
| 9 | Georgia | Hahn | 35 | Chris_Gerhold34@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return <Table columns={columns} data={data} enableRowSelection withScrollArea />
デフォルトの選択された行を設定する
デフォルトの選択された行を設定する場合は、defaultRowSelectionにdataのインデックスをキーとしたオブジェクトを設定します。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Kristin | Jacobson | 57 | Allan.Smith@yahoo.com | |
| 1 | Dakota | Spinka | 36 | Joseph89@yahoo.com | |
| 2 | Harmony | Zemlak | 50 | Kurt.Hessel@yahoo.com | |
| 3 | Meggie | Toy | 63 | Shaina8@yahoo.com | |
| 4 | Georgette | Morissette | 55 | Sharon59@gmail.com | |
| 5 | Darrel | Heller | 49 | Gene56@gmail.com | |
| 6 | Jesus | Schmitt | 20 | Cassandra6@hotmail.com | |
| 7 | Ray | Russel | 45 | Penny.Quitzon@yahoo.com | |
| 8 | Laurel | Reichel-Carroll | 47 | Margie.Lehner98@hotmail.com | |
| 9 | Helen | Wisozk | 52 | Garrett_Hudson9@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 | Winston | Marquardt | 56 | Amelia_Metz15@hotmail.com | |
| 1 | Jim | Fadel | 21 | Terrance22@hotmail.com | |
| 2 | Elvis | Mann | 42 | Jazmyne.MacGyver43@gmail.com | |
| 3 | Alan | Beatty | 52 | Linda.Welch29@hotmail.com | |
| 4 | Kelli | Hackett | 55 | Alexandro_Kunze-Dicki@gmail.com | |
| 5 | Allan | Skiles | 48 | Lavina.Stracke-Heidenreich@hotmail.com | |
| 6 | Noah | Boyle | 28 | Melinda_Kemmer@hotmail.com | |
| 7 | Sabrina | Koss | 34 | Bo98@gmail.com | |
| 8 | Bud | Walker | 32 | Mitchel90@gmail.com | |
| 9 | Marcelo | Hyatt | 40 | Constance_Hegmann21@yahoo.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
selectOnClickRow
withScrollArea
/>
)
チェックボックスを非表示にする
チェックボックスを非表示にする場合は、withCheckboxをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Chauncey | Shanahan | 34 | Jess72@gmail.com |
| 1 | Allan | Kozey | 61 | Karli_Bruen33@yahoo.com |
| 2 | Maybelle | Bauch | 61 | Jensen.Krajcik94@gmail.com |
| 3 | Alex | Fritsch-Bruen | 30 | Jerry42@yahoo.com |
| 4 | Judy | Carroll-Howe | 51 | Alfred.Hahn84@gmail.com |
| 5 | Brianne | Parisian | 51 | Kenna.Padberg@hotmail.com |
| 6 | Hope | Larkin | 21 | Nicolette_Jerde46@gmail.com |
| 7 | Norene | Berge | 47 | Payton72@hotmail.com |
| 8 | Albert | Ward | 53 | Gabe_Swaniawski86@gmail.com |
| 9 | Lera | Quitzon | 50 | Lela_Greenfelder14@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
selectOnClickRow
withCheckbox={false}
withScrollArea
/>
)
行を無効にする
行を無効にする場合は、enableRowSelectionに条件の関数を設定します。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Kory | Bahringer | 40 | Leo30@hotmail.com | |
| 1 | Amos | Flatley | 42 | Gerardo13@gmail.com | |
| 2 | Cristopher | Nader | 54 | Charlotte.Padberg35@hotmail.com | |
| 3 | Durward | Boyle | 36 | Isobel_Howell@gmail.com | |
| 4 | Virginia | Treutel | 31 | Celine.Ankunding@yahoo.com | |
| 5 | Mina | Glover | 19 | Lavonne97@hotmail.com | |
| 6 | Bessie | Mayert | 50 | Carlos87@yahoo.com | |
| 7 | Beaulah | Spinka | 49 | Irene.Cronin22@yahoo.com | |
| 8 | Roderick | Stamm | 49 | Jovanny53@gmail.com | |
| 9 | Eddie | Nicolas | 42 | Jeffery66@gmail.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 | Jessica | Waelchi | 44 | Ryan52@gmail.com | |
| 1 | Vincenza | Stark | 48 | Troy.Gorczany29@yahoo.com | |
| 2 | Marlee | Jast | 18 | Gretchen.Dooley68@gmail.com | |
| 3 | Marcelle | Mraz | 36 | Tricia.Kertzmann81@gmail.com | |
| 4 | Isaac | Nicolas | 49 | Mary_Roberts@yahoo.com | |
| 5 | Gayle | Mayert | 36 | Arnold0@hotmail.com | |
| 6 | Lena | Gleason | 39 | Earnest_Zboncak@hotmail.com | |
| 7 | Lucius | Donnelly | 55 | Garfield.Hauck@hotmail.com | |
| 8 | Frederique | Macejkovic-Sauer | 65 | Mohamed_Walsh90@gmail.com | |
| 9 | Pablo | Hahn-Jacobson | 41 | Saul2@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 | Rosa | Cronin | 53 | Shelia_Hudson@gmail.com |
| 1 | Gilbert | Stamm | 61 | Destini30@gmail.com |
| 2 | Judd | Dooley | 19 | Liam_Kris-Von63@yahoo.com |
| 3 | Danny | Ullrich | 54 | Billy.Kessler@yahoo.com |
| 4 | Mamie | Monahan | 50 | Dax.Pfannerstill@gmail.com |
| 5 | Chaya | Conn | 54 | Gianni.Johnston36@yahoo.com |
| 6 | Dominick | Lakin | 46 | Brennan77@hotmail.com |
| 7 | Ada | Ullrich | 42 | Amir_Klein81@gmail.com |
| 8 | Waldo | Padberg | 22 | Ronnie.Reinger52@gmail.com |
| 9 | Erika | Satterfield | 34 | Maximus56@gmail.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 | |
|---|---|---|---|---|
| 6 | Marietta | Casper | 57 | Terry_Braun@gmail.com |
| 8 | Sophie | Smitham | 62 | Wendell.Rogahn@gmail.com |
| 9 | Travon | Cruickshank | 22 | Jeanette_Heaney@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 | Keegan | Abbott | 34 | Keyshawn3@hotmail.com |
| 1 | Pearl | Marks | 20 | Alexane79@hotmail.com |
| 2 | Cecile | Lehner | 54 | Abdul_Bode74@yahoo.com |
| 3 | Amara | Waters | 22 | Nick3@gmail.com |
| 4 | Kaylah | Bogisich | 30 | Adele26@hotmail.com |
| 5 | Johan | Oberbrunner | 55 | Claudia_Ferry@gmail.com |
| 6 | Catherine | Howe | 47 | Ashton56@hotmail.com |
| 7 | Nora | Murray | 47 | Eve12@yahoo.com |
| 8 | Ines | Weber | 23 | Clay.Dibbert19@yahoo.com |
| 9 | Elisha | Schneider | 31 | Tyrell38@gmail.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 | Adrienne | Miller | 45 | Augusta_Davis@yahoo.com |
| 1 | Kris | Rutherford | 54 | Angelica.Lueilwitz@gmail.com |
| 2 | Pedro | Ullrich | 58 | Homer_Schumm13@yahoo.com |
| 3 | Khalil | Witting | 48 | Litzy64@hotmail.com |
| 4 | Cecilia | D'Amore | 49 | Abner.Stoltenberg@hotmail.com |
| 5 | Dandre | MacGyver | 59 | Kaitlin_Beer@yahoo.com |
| 6 | Jillian | Simonis | 46 | Joshua.Braun@gmail.com |
| 7 | Phyllis | Ziemann | 34 | Winifred60@gmail.com |
| 8 | Yasmine | Bechtelar | 31 | Candice.Gleichner@yahoo.com |
| 9 | Jordy | Waters | 61 | Alexzander_Murphy@hotmail.com |
const data = useMemo<TableData[]>(() => createTableData(), [])
return (
<Table
columns={columns}
data={data}
enableColumnResizing
withBorder
withColumnBorders
/>
)
列のサイズ変更の方法を変更する
デフォルトでは、列のサイズ変更のタイミングは、ドラッグしている間に変更されます。ドラッグが終わったときに変更する場合は、columnResizeModeに"onEnd"を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Shaun | Homenick | 60 | Adela18@hotmail.com |
| 1 | Terrance | Nolan | 21 | Andreane_Borer@gmail.com |
| 2 | Wesley | Ledner | 38 | Heaven.McGlynn@gmail.com |
| 3 | Myrtie | Pacocha | 26 | Amber90@hotmail.com |
| 4 | Trevor | Labadie | 23 | Ricardo_Tillman@gmail.com |
| 5 | Antonio | Lang | 64 | Emmett.Kreiger8@hotmail.com |
| 6 | Don | Stamm | 45 | Sandra48@gmail.com |
| 7 | Freddie | Herman | 57 | Viviane40@hotmail.com |
| 8 | Josephine | Bauch | 48 | Julian_Macejkovic48@gmail.com |
| 9 | Malcolm | Schmitt | 55 | Dereck42@hotmail.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は、データ項目のリストを表示するために使用されます。