Table
Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Camden | Larkin | 24 | Uriel88@gmail.com |
| 1 | Bradley | Terry | 55 | Carlee.Padberg61@hotmail.com |
| 2 | Bessie | D'Amore | 57 | Adele.Nader@hotmail.com |
| 3 | Alexandro | Senger | 34 | Anika56@gmail.com |
| 4 | Ian | Hessel | 56 | Jordane.Rempel78@hotmail.com |
| 5 | Marley | Altenwerth | 49 | Jaren34@yahoo.com |
| 6 | Marcella | Cartwright | 21 | Elsie.Schneider@hotmail.com |
| 7 | Josefa | Altenwerth | 19 | Joanny59@hotmail.com |
| 8 | Nelson | Frami | 57 | Meredith20@yahoo.com |
| 9 | Makenzie | Hand | 35 | Lexus22@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 | Ottis | Veum | 59 | Ransom.Daugherty16@gmail.com |
| 1 | Raphaelle | Keeling | 52 | Clyde18@hotmail.com |
| 2 | Madilyn | Zieme | 52 | Rick80@hotmail.com |
| 3 | Tanya | Stehr | 28 | Dayton_Bayer@hotmail.com |
| 4 | Itzel | Schroeder | 33 | Eladio32@yahoo.com |
| 5 | Abel | Hackett | 55 | Axel88@hotmail.com |
| 6 | Veronica | Swaniawski | 34 | Isac_Tromp@gmail.com |
| 7 | Paul | Robel | 33 | Chasity.Skiles@yahoo.com |
| 8 | Lisandro | Littel | 52 | Lucious.Kuhic26@gmail.com |
| 9 | Nicola | Mayer | 55 | Carroll_Bernhard51@gmail.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Ottis | Veum | 59 | Ransom.Daugherty16@gmail.com |
| 1 | Raphaelle | Keeling | 52 | Clyde18@hotmail.com |
| 2 | Madilyn | Zieme | 52 | Rick80@hotmail.com |
| 3 | Tanya | Stehr | 28 | Dayton_Bayer@hotmail.com |
| 4 | Itzel | Schroeder | 33 | Eladio32@yahoo.com |
| 5 | Abel | Hackett | 55 | Axel88@hotmail.com |
| 6 | Veronica | Swaniawski | 34 | Isac_Tromp@gmail.com |
| 7 | Paul | Robel | 33 | Chasity.Skiles@yahoo.com |
| 8 | Lisandro | Littel | 52 | Lucious.Kuhic26@gmail.com |
| 9 | Nicola | Mayer | 55 | Carroll_Bernhard51@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
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 | Camden | Murphy | 60 | Samara_Flatley@hotmail.com |
| 1 | Kaley | Mann | 49 | Mae.OReilly29@yahoo.com |
| 2 | Domenick | Olson | 60 | Rubie2@yahoo.com |
| 3 | Cielo | DuBuque | 19 | Tom2@yahoo.com |
| 4 | Harrison | Watsica | 36 | Colton96@gmail.com |
| 5 | Verdie | Heaney | 49 | Stephanie.Leannon@yahoo.com |
| 6 | Fleta | Marquardt | 25 | Carleton.Tromp35@yahoo.com |
| 7 | Cyril | Champlin | 65 | Orpha13@hotmail.com |
| 8 | Waylon | Kunze | 37 | Colt_Herzog@hotmail.com |
| 9 | Dasia | Kertzmann | 43 | Wilson.Becker@yahoo.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Camden | Murphy | 60 | Samara_Flatley@hotmail.com |
| 1 | Kaley | Mann | 49 | Mae.OReilly29@yahoo.com |
| 2 | Domenick | Olson | 60 | Rubie2@yahoo.com |
| 3 | Cielo | DuBuque | 19 | Tom2@yahoo.com |
| 4 | Harrison | Watsica | 36 | Colton96@gmail.com |
| 5 | Verdie | Heaney | 49 | Stephanie.Leannon@yahoo.com |
| 6 | Fleta | Marquardt | 25 | Carleton.Tromp35@yahoo.com |
| 7 | Cyril | Champlin | 65 | Orpha13@hotmail.com |
| 8 | Waylon | Kunze | 37 | Colt_Herzog@hotmail.com |
| 9 | Dasia | Kertzmann | 43 | Wilson.Becker@yahoo.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Camden | Murphy | 60 | Samara_Flatley@hotmail.com |
| 1 | Kaley | Mann | 49 | Mae.OReilly29@yahoo.com |
| 2 | Domenick | Olson | 60 | Rubie2@yahoo.com |
| 3 | Cielo | DuBuque | 19 | Tom2@yahoo.com |
| 4 | Harrison | Watsica | 36 | Colton96@gmail.com |
| 5 | Verdie | Heaney | 49 | Stephanie.Leannon@yahoo.com |
| 6 | Fleta | Marquardt | 25 | Carleton.Tromp35@yahoo.com |
| 7 | Cyril | Champlin | 65 | Orpha13@hotmail.com |
| 8 | Waylon | Kunze | 37 | Colt_Herzog@hotmail.com |
| 9 | Dasia | Kertzmann | 43 | Wilson.Becker@yahoo.com |
const data = useMemo<Data[]>(() => createData(), [])
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 | Dock | Leannon | 51 | Ethelyn23@gmail.com |
| 1 | Brent | Altenwerth | 43 | Darien44@hotmail.com |
| 2 | Dylan | Heidenreich | 60 | Sarina.Goldner@gmail.com |
| 3 | Felicity | Marvin | 32 | Trystan43@hotmail.com |
| 4 | Dawn | Denesik | 39 | Marisol28@yahoo.com |
| 5 | Kay | Armstrong | 26 | Korey49@yahoo.com |
| 6 | Thalia | Denesik | 21 | Norene.Padberg43@gmail.com |
| 7 | Reginald | Cassin | 28 | Alvis_Murazik@hotmail.com |
| 8 | Stephania | Satterfield | 18 | Audie.Ritchie@yahoo.com |
| 9 | Dayna | Terry | 65 | Alvena_Orn84@gmail.com |
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Dock | Leannon | 51 | Ethelyn23@gmail.com |
| 1 | Brent | Altenwerth | 43 | Darien44@hotmail.com |
| 2 | Dylan | Heidenreich | 60 | Sarina.Goldner@gmail.com |
| 3 | Felicity | Marvin | 32 | Trystan43@hotmail.com |
| 4 | Dawn | Denesik | 39 | Marisol28@yahoo.com |
| 5 | Kay | Armstrong | 26 | Korey49@yahoo.com |
| 6 | Thalia | Denesik | 21 | Norene.Padberg43@gmail.com |
| 7 | Reginald | Cassin | 28 | Alvis_Murazik@hotmail.com |
| 8 | Stephania | Satterfield | 18 | Audie.Ritchie@yahoo.com |
| 9 | Dayna | Terry | 65 | Alvena_Orn84@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
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 | Camille | Schaden | 32 | Ally59@yahoo.com |
| 1 | Rasheed | Rempel | 31 | Jaylon.Aufderhar@yahoo.com |
| 2 | Warren | Rogahn | 56 | Demond86@gmail.com |
| 3 | Gwen | Barton | 58 | Emanuel12@gmail.com |
| 4 | Marcelle | Kassulke-Romaguera | 44 | Brycen.Casper58@yahoo.com |
| 5 | Lucinda | Wolf | 26 | Vickie_Considine@hotmail.com |
| 6 | Nolan | Kessler | 65 | Cole28@gmail.com |
| 7 | Khalid | Crona | 31 | Aryanna.Schuster@hotmail.com |
| 8 | Kieran | Lowe | 26 | Kristina_Walsh96@gmail.com |
| 9 | Stephon | Sanford | 30 | Thora.Becker43@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columns} data={data} withBorder withScrollArea />
列の区切り線を追加する
列の区切り線を追加する場合は、withColumnBordersをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Riley | Swift | 29 | Boyd.Deckow@yahoo.com |
| 1 | Britney | Roberts | 59 | Wellington_Kuphal74@yahoo.com |
| 2 | Carrie | Jenkins | 33 | Matilda.Kassulke74@hotmail.com |
| 3 | Charley | Gusikowski | 62 | Lucius.Weimann16@hotmail.com |
| 4 | Skye | Funk | 63 | Bud87@hotmail.com |
| 5 | Odie | Mann | 65 | Javon53@hotmail.com |
| 6 | Celia | Dach | 32 | Amari67@hotmail.com |
| 7 | Hilda | Dicki | 20 | Bailey_Funk10@gmail.com |
| 8 | Stefanie | Toy | 53 | Russ_Emard86@hotmail.com |
| 9 | Peyton | Bernier | 62 | Clay.Ernser86@hotmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columns} data={data} withColumnBorders withScrollArea />
行がホバーされたときにハイライトする
行がホバーされたときにハイライトする場合は、highlightOnHoverをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Elian | Crooks | 60 | Bridget.Cassin-Pfannerstill3@yahoo.com |
| 1 | Zetta | Borer | 56 | Libby.Heidenreich23@gmail.com |
| 2 | Melany | Lindgren | 35 | Bridie_Koss@hotmail.com |
| 3 | Rozella | Marvin | 60 | Emmet.Stanton@gmail.com |
| 4 | Judah | Feeney | 64 | Tressie23@yahoo.com |
| 5 | Francis | Renner | 23 | Ricardo_Haag37@yahoo.com |
| 6 | Evalyn | Price | 33 | Royce.Bahringer98@yahoo.com |
| 7 | Jensen | Tillman | 65 | Roy_Maggio@hotmail.com |
| 8 | Rosalind | Hilll | 53 | Maurice_Franey71@yahoo.com |
| 9 | Amani | Torp | 32 | Margarette.Witting@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columns} data={data} highlightOnHover withScrollArea />
ストライプを使う
ストライプを使う場合は、stripedをtrueにします。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Al | Kshlerin | 31 | Theron.Schaden64@gmail.com |
| 1 | Haylie | Greenfelder | 40 | Jammie.Yost@yahoo.com |
| 2 | Dalton | Breitenberg | 61 | Rolando22@yahoo.com |
| 3 | Alexis | Halvorson | 39 | Lila.Abbott81@yahoo.com |
| 4 | Oswald | Senger | 23 | Gianni98@gmail.com |
| 5 | Karli | Quitzon | 30 | Karelle_Schmitt@yahoo.com |
| 6 | Suzanne | Padberg | 48 | Nina.Parker@hotmail.com |
| 7 | Phyllis | Nicolas | 44 | Spencer_Heaney@gmail.com |
| 8 | Cora | Altenwerth | 53 | Mabel_Kilback@yahoo.com |
| 9 | Lucie | Hirthe | 54 | Astrid.Spinka@hotmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columns} data={data} striped withScrollArea />
スクロールエリアを使う
スクロールエリアを使う場合は、withScrollAreaをtrueにします。
| id | firstName | lastName | age | phone | role | status | createdAt | updatedAt | |
|---|---|---|---|---|---|---|---|---|---|
| 0 | Quinton | Skiles | 35 | Anderson28@hotmail.com | (688) 311-3380 x185 | user | active | 9/11/2025 | 1/11/2025 |
| 1 | Henriette | Schmitt | 22 | Guiseppe.Rogahn@hotmail.com | 611-674-0266 | admin | inactive | 7/7/2025 | 4/28/2025 |
| 2 | Llewellyn | O'Reilly | 18 | Mabelle14@yahoo.com | 1-794-596-1317 x2372 | user | active | 11/8/2024 | 9/2/2025 |
| 3 | Jamey | Considine | 44 | Enola.Farrell@yahoo.com | 430-498-1922 x742 | user | inactive | 12/29/2024 | 6/6/2025 |
| 4 | Eladio | Dibbert | 42 | Eldora14@gmail.com | (503) 493-5026 x976 | user | inactive | 4/5/2025 | 5/7/2025 |
| 5 | Damion | Kohler | 64 | Maida_Lemke21@gmail.com | 739.664.7308 x53311 | user | active | 10/10/2025 | 9/28/2025 |
| 6 | Isadore | Lubowitz-Torphy | 51 | Jettie26@yahoo.com | 776-427-9187 x8032 | user | inactive | 4/3/2025 | 6/3/2025 |
| 7 | Dave | McCullough | 63 | Moses3@yahoo.com | 838-230-4672 x27437 | admin | active | 10/3/2025 | 10/19/2025 |
| 8 | Lemuel | Cole | 23 | Elta_Kovacek20@gmail.com | 863.237.5969 x75697 | user | inactive | 11/28/2024 | 2/26/2025 |
| 9 | Paris | Murphy | 43 | Ward.Torphy20@gmail.com | 551.356.1047 x933 | admin | inactive | 4/6/2025 | 4/30/2025 |
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columnsFull} data={data} withScrollArea />
ヘッダーグループ
| id | user | |||
|---|---|---|---|---|
| name | age | |||
| firstName | lastName | |||
| 0 | Eldon | Wyman | 23 | Furman.Barrows63@gmail.com |
| 1 | Trent | Bailey | 34 | Julianne.Stehr43@hotmail.com |
| 2 | Preston | Balistreri | 61 | Melissa.Mraz@gmail.com |
| 3 | Donny | Powlowski | 47 | Antonetta.Rice@yahoo.com |
| 4 | Filomena | Kertzmann | 63 | Onie89@gmail.com |
| 5 | Jarret | Kohler | 57 | Lura14@gmail.com |
| 6 | Austen | Wunsch | 64 | Alberto41@yahoo.com |
| 7 | Mathias | Connelly | 30 | Allie.Goodwin2@gmail.com |
| 8 | Dejah | Lowe | 59 | Danyka26@hotmail.com |
| 9 | Rosemarie | Kuphal | 25 | Princess27@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<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
withBorder
withColumnBorders
withScrollArea
/>
)
フッターグループ
| id | user | |||
|---|---|---|---|---|
| name | age | |||
| firstName | lastName | |||
| 0 | Brad | Lynch | 26 | Ambrose.Stanton94@gmail.com |
| 1 | Jeffry | Corwin | 45 | Ransom.Crist50@hotmail.com |
| 2 | Americo | Reichert | 59 | Efren_Blick61@hotmail.com |
| 3 | Mollie | Upton | 55 | Wilfredo41@gmail.com |
| 4 | Salvador | Zulauf | 61 | Nelle_Ortiz9@gmail.com |
| 5 | Woodrow | Wilderman | 52 | Kareem66@gmail.com |
| 6 | Eldora | Kemmer | 64 | Neoma77@yahoo.com |
| 7 | Frank | Muller | 24 | Ceasar24@hotmail.com |
| 8 | Cecile | Rogahn | 52 | Arch.Hickle23@hotmail.com |
| 9 | Theo | Collins | 56 | Emil.McKenzie-Robel@hotmail.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<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
withBorder
withColumnBorders
withFooterGroups
withScrollArea
/>
)
キーボードナビゲーションを無効にする
キーボードナビゲーションを無効にする場合は、enableKeyboardNavigationをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Alvina | Green | 55 | Lexus44@yahoo.com |
| 1 | Ramona | Rolfson | 34 | Ava_Langosh@hotmail.com |
| 2 | Quinn | Simonis | 24 | Salvatore_Bernhard77@yahoo.com |
| 3 | Naomi | Sporer | 44 | Bennie_DuBuque47@gmail.com |
| 4 | Arnold | D'Amore | 26 | Cale.Quigley@gmail.com |
| 5 | Isobel | Kassulke | 20 | Daryl2@gmail.com |
| 6 | Laverna | Robel | 26 | Giovanni90@gmail.com |
| 7 | Cordie | Stark | 23 | Federico.Tromp46@yahoo.com |
| 8 | Susanna | Hackett | 40 | Alexandro_Vandervort96@hotmail.com |
| 9 | Maverick | Schaden | 46 | Arnold_Price@yahoo.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableKeyboardNavigation={false}
withScrollArea
/>
)
初回のフォーカス可能なセルを設定する
初回のフォーカス可能なセルを設定する場合は、initialFocusableCellにセルの列と行を指定したオブジェクト({ colIndex: number, rowIndex: number })を設定します。デフォルトは、{ colIndex: 0, rowIndex: 0 }です。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Jeramie | Hansen | 61 | Andres_Quigley@hotmail.com |
| 1 | Monique | Kshlerin | 52 | Ewald.Rosenbaum@hotmail.com |
| 2 | Anais | Marvin | 33 | Alejandra.Herzog@yahoo.com |
| 3 | Bell | Wehner | 57 | Name.Lockman79@hotmail.com |
| 4 | Zoey | Osinski | 43 | Nelson.Rutherford@hotmail.com |
| 5 | Chelsey | Ledner-Hane | 51 | Mable.Bechtelar@yahoo.com |
| 6 | Walter | Homenick | 52 | Michele_Schmitt77@gmail.com |
| 7 | Alene | McLaughlin | 21 | Erna60@yahoo.com |
| 8 | Geo | Rice | 65 | Brennan36@yahoo.com |
| 9 | Parker | Huel | 37 | Antwon.Rath@hotmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
initialFocusableCell={{ colIndex: 1, rowIndex: 0 }}
withScrollArea
/>
)
行のクリックイベントをハンドルする
行のクリックイベントをハンドルする場合は、onRowClickを使用します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Eleanora | Batz | 58 | Hope94@yahoo.com |
| 1 | America | Tillman | 42 | Luna95@yahoo.com |
| 2 | Jaleel | Stamm | 48 | Roberta_Cassin@yahoo.com |
| 3 | Rosella | Rutherford | 44 | Wilfred.Effertz24@gmail.com |
| 4 | Deon | Koepp | 22 | Jadon_Reinger80@gmail.com |
| 5 | Mitchel | Brekke | 18 | Alfonzo64@gmail.com |
| 6 | Jensen | Hills | 53 | Devante56@gmail.com |
| 7 | Mireille | Crona | 33 | Tara.Kerluke87@yahoo.com |
| 8 | Mozelle | Johnson | 46 | Easter.Sawayn95@hotmail.com |
| 9 | Ahmad | Runte | 55 | Anibal.Mosciski@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
onRowClick={(row) => console.log(row)}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。行のダブルクリックイベントをハンドルする
行のダブルクリックイベントをハンドルする場合は、onRowDoubleClickを使用します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Santiago | Heaney | 48 | Della.Sanford@hotmail.com |
| 1 | Xander | Feil-Johnston | 45 | Stewart.Weimann@gmail.com |
| 2 | Dan | Tremblay | 36 | Mack85@gmail.com |
| 3 | Zakary | Wolf | 51 | Nina27@gmail.com |
| 4 | Shirley | Schmitt-Schaefer | 40 | Alek38@yahoo.com |
| 5 | Sandra | Rath | 40 | Ashley_Cruickshank@gmail.com |
| 6 | Lionel | Schuster | 56 | Lacey_Herzog78@yahoo.com |
| 7 | Joshua | Champlin | 63 | Bryana.Hettinger98@hotmail.com |
| 8 | Lawrence | Baumbach | 54 | Rocky_Aufderhar29@gmail.com |
| 9 | Madisen | Schulist | 36 | Thurman.Kunde66@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
onRowDoubleClick={(row) => console.log(row)}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。デフォルトのソートを設定する
デフォルトのソートを設定する場合は、defaultSortingに配列を設定します。配列のオブジェクトには、ソートをする列のidと方向を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Reilly | Gerlach | 62 | Guido_Kuhlman5@yahoo.com |
| 5 | Vivian | Treutel-McLaughlin | 52 | Roy.Fahey95@yahoo.com |
| 6 | Raymundo | Mueller | 52 | Mac.Crona@gmail.com |
| 3 | Kiana | Shields | 49 | Bret.Tremblay@yahoo.com |
| 2 | Monte | Huels | 36 | Krista_Stoltenberg@gmail.com |
| 9 | Norris | Ratke | 32 | Adriana_Dickinson@hotmail.com |
| 8 | Ferne | Parker | 26 | Brannon_Connelly74@hotmail.com |
| 7 | Odell | Towne | 24 | Floyd_Pagac@yahoo.com |
| 4 | Jaden | Monahan-Hills | 21 | Vida.Runte@yahoo.com |
| 1 | Alexandra | Walter | 18 | Rahul_McGlynn@hotmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
defaultSorting={[{ id: "age", desc: true }]}
withScrollArea
/>
)
ソートを無効にする
ソートを無効にする場合は、enableSortingをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Rudy | Koch | 53 | Angela_Weber@hotmail.com |
| 1 | Evie | Dietrich | 41 | Elmore_Crooks@yahoo.com |
| 2 | Lyric | Doyle | 64 | Sammy_Little@yahoo.com |
| 3 | Patsy | Luettgen | 47 | Jordan_Konopelski@gmail.com |
| 4 | Elsa | Buckridge | 61 | Ransom22@yahoo.com |
| 5 | Evert | Crona | 20 | Dangelo.Hoppe-Smitham@hotmail.com |
| 6 | Monte | Metz | 29 | Arlene.Heaney-Koepp73@gmail.com |
| 7 | Sister | Hyatt-Haley | 20 | Vanessa_Considine6@yahoo.com |
| 8 | Aliya | VonRueden | 21 | Loma58@yahoo.com |
| 9 | Wilmer | Schowalter | 20 | Destinee48@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table columns={columns} data={data} enableSorting={false} withScrollArea />
)
複数列のソートを無効にする
複数列のソートを無効にする場合は、enableMultiSortをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Madge | Greenfelder | 49 | Abbey.Borer55@hotmail.com |
| 1 | Myrtle | Wiza | 30 | Geovany.Lemke80@yahoo.com |
| 2 | Luisa | Reynolds | 65 | Rolando_Hegmann28@yahoo.com |
| 3 | Maeve | Gutmann | 58 | Lowell.Medhurst95@gmail.com |
| 4 | Bo | Christiansen | 46 | Shayne.Rempel80@yahoo.com |
| 5 | Trycia | Zboncak | 29 | Green94@yahoo.com |
| 6 | Sophia | Thompson | 26 | Kristopher65@gmail.com |
| 7 | Samson | Bogisich | 54 | Manley.Rath@yahoo.com |
| 8 | Pasquale | Waelchi | 36 | Antonia.Orn47@hotmail.com |
| 9 | Patsy | Klocko | 33 | Norwood_Wuckert@yahoo.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table columns={columns} data={data} enableMultiSort={false} withScrollArea />
)
最大のソート可能な列数を設定する
最大のソート可能な列数を設定する場合は、maxMultiSortColCountに数値を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Keyshawn | Johnson | 21 | Kenna47@gmail.com |
| 1 | Darryl | Runolfsdottir | 38 | Benny26@gmail.com |
| 2 | Marjory | Rowe | 23 | Paolo.Rodriguez@gmail.com |
| 3 | Cara | West | 63 | Ernesto27@yahoo.com |
| 4 | Mark | Smitham | 41 | Abdiel.Carter@hotmail.com |
| 5 | Zakary | Kreiger | 55 | Pattie5@hotmail.com |
| 6 | Destiny | Stroman | 31 | Joanne_Romaguera@hotmail.com |
| 7 | Ashly | Littel | 19 | Herta_Littel91@hotmail.com |
| 8 | Jonathan | Rogahn | 37 | Liza_Auer@yahoo.com |
| 9 | Isobel | Ritchie | 31 | Felipa_Torp47@hotmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
maxMultiSortColCount={2}
withScrollArea
/>
)
手動のソートを使う
手動のソートを使う場合は、manualSortingをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Joany | Konopelski-Schowalter | 48 | Grayson29@gmail.com |
| 1 | Hertha | Hettinger | 18 | Frida.Mraz@hotmail.com |
| 2 | Eulah | Ward | 27 | Garth70@yahoo.com |
| 3 | Garfield | Will | 22 | Jada55@yahoo.com |
| 4 | Brielle | Murazik | 45 | Kira.Schmitt32@gmail.com |
| 5 | Maximillian | Franey | 51 | Verna.Sporer81@hotmail.com |
| 6 | Lempi | Harber | 42 | Laura28@hotmail.com |
| 7 | Ines | Collier | 51 | Mikel_Keebler27@hotmail.com |
| 8 | Monroe | Schmidt | 36 | Osbaldo_Schowalter@hotmail.com |
| 9 | Joany | Considine | 48 | Rupert.Murazik-Klein54@hotmail.com |
const defaultData = useMemo<Data[]>(() => createData(), [])
const [data, setData] = useState<Data[]>(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 | Marquis | Cormier | 39 | Ike_Tremblay@yahoo.com |
| 1 | Mittie | Padberg | 45 | Antonio.Fay@hotmail.com |
| 2 | Lisa | Corkery | 54 | Aileen.Schneider73@yahoo.com |
| 3 | Tania | Metz | 43 | Lonzo37@gmail.com |
| 4 | Jed | Blick | 40 | Chadrick.Balistreri@hotmail.com |
| 5 | Isidro | Dietrich | 54 | Aimee81@hotmail.com |
| 6 | Andrew | Greenholt | 28 | Fermin_Simonis6@yahoo.com |
| 7 | Gregorio | Huel | 44 | Tod1@gmail.com |
| 8 | Mohamed | Luettgen | 48 | Sophia73@hotmail.com |
| 9 | Jude | Ledner | 60 | Jarod26@yahoo.com |
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columns} data={data} sortDescFirst withScrollArea />
ソートを制御する
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Gavin | Runte | 56 | Norwood_Bruen@gmail.com |
| 1 | Minerva | Hegmann | 26 | Rupert32@yahoo.com |
| 2 | Angie | Ziemann | 48 | Chloe69@yahoo.com |
| 3 | Lewis | Ziemann | 60 | Quinton42@yahoo.com |
| 4 | Brandy | Langosh | 35 | Glen1@hotmail.com |
| 5 | Darion | Johns | 32 | Eugene_Witting27@yahoo.com |
| 6 | Zachery | MacGyver | 41 | Rhett94@gmail.com |
| 7 | Cassidy | Bednar | 33 | Walton50@yahoo.com |
| 8 | Buck | Cummings | 26 | Kristian_Gerhold@hotmail.com |
| 9 | Marge | Boyer | 63 | Kelvin.Bernhard8@gmail.com |
const [sorting, setSorting] = useState<SortingState<Data>>([
{ id: "age", desc: true },
])
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columns} data={data} withScrollArea />
"use client"をファイルの上部に追加する必要があります。ページネーションを有効にする
ページネーションを有効にする場合は、enablePaginationをtrueに設定し、ページネーションをコントロールするコンポーネントをheaderまたはfooterに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Jeff | Keebler | 40 | Pearline83@yahoo.com |
| 1 | Amari | Upton-Little | 38 | Jaycee69@gmail.com |
| 2 | Jaquan | Strosin-Labadie | 58 | Johanna.Hilll@gmail.com |
| 3 | Bret | Bechtelar | 23 | Sandrine.Mayert@gmail.com |
| 4 | Alexis | Wolf | 51 | Travon.Koss@yahoo.com |
| 5 | Marisa | Jacobson | 23 | Lance49@hotmail.com |
| 6 | Mark | Romaguera | 30 | Oral_Renner75@yahoo.com |
| 7 | Darren | Goyette | 62 | Berta.Jakubowski@yahoo.com |
| 8 | Maureen | Hermiston | 18 | Sasha_Howell@yahoo.com |
| 9 | Fred | Zboncak | 36 | Chandler_Hansen@hotmail.com |
| 10 | Evert | Windler | 38 | Nathen35@yahoo.com |
| 11 | Ford | Kuhn | 53 | Callie.Klocko17@hotmail.com |
| 12 | Bria | Bruen | 39 | Amara8@gmail.com |
| 13 | Abraham | Bernier | 31 | Caroline.Bednar43@hotmail.com |
| 14 | Jermain | Stroman | 50 | Alayna_Goodwin13@hotmail.com |
| 15 | Ari | Buckridge | 46 | Cathryn.Runte-Bauch@gmail.com |
| 16 | Alvena | Crona | 60 | Summer.Volkman@gmail.com |
| 17 | Syble | Crona | 31 | Orlando.Hickle@gmail.com |
| 18 | Jeremy | Blick | 49 | Dena.Aufderhar51@yahoo.com |
| 19 | Adonis | Stoltenberg | 51 | Ronny_Stroman@yahoo.com |
const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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 | Kendrick | Hammes | 39 | Louisa.Fadel@gmail.com |
| 11 | Colt | Nikolaus | 63 | Zoe36@yahoo.com |
| 12 | Daisy | Nikolaus | 42 | Gordon.Denesik@hotmail.com |
| 13 | Guiseppe | Tillman | 28 | Harmony69@hotmail.com |
| 14 | Josianne | Johns | 39 | Georgette86@gmail.com |
| 15 | Matilda | Sipes | 49 | Carole.Marquardt@yahoo.com |
| 16 | Eliseo | Upton | 18 | Alejandra_OKon@yahoo.com |
| 17 | Bryana | Greenholt | 33 | Lucie.Greenholt@gmail.com |
| 18 | Nyah | Kihn | 57 | Eleonore_Torp6@yahoo.com |
| 19 | Lucious | Marvin | 46 | Meggie.Schiller@hotmail.com |
const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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 | Claire | Rice | 33 | Darrion.Blick46@yahoo.com |
| 1 | Wellington | Pfannerstill | 32 | Florencio.Koelpin@gmail.com |
| 2 | Berta | Harris | 38 | Francisco.Macejkovic@gmail.com |
| 3 | Cassidy | Breitenberg | 63 | Kaylee_Conn50@hotmail.com |
| 4 | Kelli | Ruecker | 29 | Marco_Sporer@yahoo.com |
| 5 | Monty | Goldner | 29 | Clark.Hackett@gmail.com |
| 6 | Fiona | Wuckert | 38 | Katheryn_Vandervort@gmail.com |
| 7 | Amely | Rogahn | 35 | August.Emard96@gmail.com |
| 8 | Granville | Zemlak | 41 | Roselyn61@hotmail.com |
| 9 | Devante | Glover | 18 | Lessie_Douglas@yahoo.com |
| 10 | Zita | Franey | 42 | Boyd46@gmail.com |
| 11 | Chaz | Bayer | 25 | Mervin.Ziemann53@hotmail.com |
| 12 | Leta | Buckridge | 20 | Maurice_Cruickshank@gmail.com |
| 13 | Marshall | Larson | 41 | Brenda39@hotmail.com |
| 14 | Benedict | Corwin | 18 | Adolfo.Schmidt32@gmail.com |
| 15 | Sonny | Buckridge | 29 | Louie94@yahoo.com |
| 16 | Naomi | Walter | 40 | Uriel_Zboncak@hotmail.com |
| 17 | Retha | Sauer | 19 | Vincenza_Rohan55@yahoo.com |
| 18 | Dejon | Bradtke | 57 | Tyra.Hegmann3@hotmail.com |
| 19 | Craig | Bradtke | 31 | Salvador0@yahoo.com |
const { t } = useI18n("table")
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 20,
})
const rowCount = 40
const defaultData = useMemo<Data[]>(() => createData(rowCount), [])
const data = useMemo<Data[]>(
() =>
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 | Orion | Kunde | 20 | Constance31@yahoo.com |
| 1 | Rhianna | Towne | 65 | Joana_Littel66@gmail.com |
| 2 | Jennifer | Dare | 50 | Brielle.Kassulke@hotmail.com |
| 3 | Leonardo | Carroll | 55 | Felton21@yahoo.com |
| 4 | Cristina | Kassulke | 52 | Sabryna.Reinger87@gmail.com |
| 5 | Destany | Ortiz | 54 | Carley_Schimmel72@yahoo.com |
| 6 | Layne | Quitzon | 52 | Moshe10@gmail.com |
| 7 | Berniece | Padberg | 63 | Gabe.Harvey-Will@gmail.com |
| 8 | Celestine | Schinner | 59 | Justice.Kautzer@gmail.com |
| 9 | Dagmar | Lebsack | 47 | Raegan88@gmail.com |
| 10 | Noemi | Emard | 50 | Elinore.Hessel27@hotmail.com |
| 11 | Kamron | Windler | 30 | Opal98@yahoo.com |
| 12 | Damien | Robel | 65 | Sister88@yahoo.com |
| 13 | Jazlyn | Prohaska | 26 | Julio.Tillman50@gmail.com |
| 14 | Angel | Sauer-Bartell | 31 | Enos34@yahoo.com |
| 15 | Hector | Paucek | 50 | Noemy68@gmail.com |
| 16 | Henriette | Bailey | 35 | Jorge_Leuschke@yahoo.com |
| 17 | Mittie | Bogisich | 45 | Garrett_Connelly43@gmail.com |
| 18 | Harrison | Lemke | 18 | Melyna_Barrows57@hotmail.com |
| 19 | Watson | Maggio | 19 | Leif_Moore14@hotmail.com |
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 20,
})
const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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 | Savanah | Schamberger | 57 | Dion55@yahoo.com | |
| 1 | Ralph | Hessel | 44 | Hortense.Lubowitz@yahoo.com | |
| 2 | Jerrold | Lind | 44 | Earnestine14@yahoo.com | |
| 3 | Johnpaul | Schinner | 54 | Ella_Hammes13@hotmail.com | |
| 4 | Eula | Fritsch | 47 | Domenick.Gleichner@gmail.com | |
| 5 | Justus | Blanda | 43 | Lon_Sanford-Kuhlman53@yahoo.com | |
| 6 | Ethyl | White | 53 | Napoleon.OConnell@yahoo.com | |
| 7 | Linnie | Herzog | 41 | Clemmie_Altenwerth@gmail.com | |
| 8 | Sierra | Zemlak | 38 | Kevin17@yahoo.com | |
| 9 | Brooke | Fisher | 47 | Jarrell.Ward5@hotmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return <Table columns={columns} data={data} enableRowSelection withScrollArea />
デフォルトの選択された行を設定する
デフォルトの選択された行を設定する場合は、defaultRowSelectionにdataのインデックスをキーとしたオブジェクトを設定します。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Lauretta | Ruecker | 23 | Otho99@hotmail.com | |
| 1 | Caterina | Becker | 34 | Norma_Pagac51@hotmail.com | |
| 2 | Zane | Paucek | 22 | Drew22@hotmail.com | |
| 3 | Lew | Kuhic | 54 | Everette.Ziemann@yahoo.com | |
| 4 | Adah | Konopelski | 38 | Jasmin_Steuber85@hotmail.com | |
| 5 | Fatima | Wisoky | 38 | Nyah43@hotmail.com | |
| 6 | Jayne | Stoltenberg | 52 | Orin.Hyatt@hotmail.com | |
| 7 | Kameron | Schroeder | 61 | Antonetta.Konopelski13@yahoo.com | |
| 8 | Audrey | Ruecker | 38 | Emile.McCullough34@yahoo.com | |
| 9 | Timmy | Hand | 27 | Carley_Bashirian@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
defaultRowSelection={{ 0: true }}
withScrollArea
/>
)
行のクリックで選択を有効にする
行のクリックで選択を有効にする場合は、selectOnClickRowをtrueに設定します。デフォルトは、falseです。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Bianka | Bahringer | 36 | Burdette32@hotmail.com | |
| 1 | Bethany | Schmitt | 32 | Emmie_Kiehn19@gmail.com | |
| 2 | Christiana | Kirlin | 61 | Meghan_Grady@yahoo.com | |
| 3 | Ethan | Ankunding-Tillman | 31 | Landen_Runte41@hotmail.com | |
| 4 | Susanna | Wolf | 60 | Louie93@hotmail.com | |
| 5 | Kory | Bashirian | 35 | Neil.Aufderhar48@yahoo.com | |
| 6 | Niko | Bauch | 56 | Ana40@yahoo.com | |
| 7 | Kayley | Borer | 26 | Isom_Wiegand@hotmail.com | |
| 8 | Lavon | Pouros | 32 | Ottis_Lakin-Kiehn34@gmail.com | |
| 9 | Trudie | Moen | 23 | Velva.Langosh-Williamson58@hotmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
selectOnClickRow
withScrollArea
/>
)
チェックボックスを非表示にする
チェックボックスを非表示にする場合は、withCheckboxをfalseに設定します。デフォルトは、trueです。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Salvador | Borer | 27 | Jeffery.Franecki86@gmail.com |
| 1 | Kole | Yost | 20 | Malika_Monahan@hotmail.com |
| 2 | Dave | Haag | 52 | Callie_Abbott@gmail.com |
| 3 | Shaina | Zulauf | 48 | Carroll8@yahoo.com |
| 4 | Alvina | Schiller | 24 | Aiden_Skiles@hotmail.com |
| 5 | Ewald | Lemke | 44 | Mozelle_Buckridge62@gmail.com |
| 6 | Kole | Feil | 26 | Richmond.Borer@hotmail.com |
| 7 | Selina | Williamson | 31 | Christophe_Hermiston@yahoo.com |
| 8 | Mohamed | Rolfson | 23 | Tracey_Morar@gmail.com |
| 9 | Ellsworth | Collier | 55 | Andreane26@yahoo.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
selectOnClickRow
withCheckbox={false}
withScrollArea
/>
)
行を無効にする
行を無効にする場合は、enableRowSelectionに条件の関数を設定します。
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Vidal | Murazik | 52 | Maximilian.Greenfelder@yahoo.com | |
| 1 | Boris | Weber | 56 | Verner.Von10@gmail.com | |
| 2 | Noelia | Farrell | 44 | Eldon_Koepp32@yahoo.com | |
| 3 | Clint | Beer | 63 | Camden.Hettinger@hotmail.com | |
| 4 | Adaline | Goldner | 30 | Colleen_Lockman49@hotmail.com | |
| 5 | Philip | Batz | 41 | Ashley.Kirlin@gmail.com | |
| 6 | Chloe | Carter | 34 | Everardo63@hotmail.com | |
| 7 | Cyrus | Ullrich | 23 | Miracle32@yahoo.com | |
| 8 | Kasey | Johns-Larkin | 34 | Valentin.Welch@yahoo.com | |
| 9 | Joe | Price | 48 | Brennon.Wiza5@yahoo.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection={(row) => row.id !== "1"}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。行の選択を制御する
| id | firstName | lastName | age | ||
|---|---|---|---|---|---|
| 0 | Marlen | Lynch | 36 | Mia_Rau@hotmail.com | |
| 1 | Parker | King | 55 | Lewis.Harris@yahoo.com | |
| 2 | Mozelle | Greenfelder | 19 | Zachariah_Effertz92@gmail.com | |
| 3 | Ashleigh | Ritchie | 60 | Nils.Hickle@gmail.com | |
| 4 | Alysson | Botsford | 22 | Einar_Feil51@hotmail.com | |
| 5 | Nyasia | Will | 55 | Bill_Deckow@yahoo.com | |
| 6 | Dominic | Witting | 62 | Kevin.Hahn34@gmail.com | |
| 7 | Elyse | Torphy | 56 | Alfonzo_Spinka@yahoo.com | |
| 8 | Stefan | Kassulke | 26 | Domenico_Muller6@yahoo.com | |
| 9 | Elliott | Feil | 55 | Zelma79@gmail.com |
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableRowSelection
rowSelection={rowSelection}
onRowSelectionChange={setRowSelection}
withScrollArea
/>
)
"use client"をファイルの上部に追加する必要があります。フィルターを使う
フィルターを使う場合は、フィルターをコントロールするコンポーネントをheaderまたはfooterに設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Reese | Schroeder | 23 | Salvatore.Osinski36@hotmail.com |
| 1 | Carolina | Oberbrunner | 49 | Zackary97@gmail.com |
| 2 | Isaac | McDermott | 62 | Shakira_Harber-Mohr@yahoo.com |
| 3 | Sheldon | Schaefer | 43 | Archibald_Jones@hotmail.com |
| 4 | Jovany | Marks | 55 | Lela.Langworth56@hotmail.com |
| 5 | Amani | Greenfelder | 23 | Luther_Franecki@gmail.com |
| 6 | Garry | Roob | 20 | Katelynn.Weissnat-Kuphal61@yahoo.com |
| 7 | Friedrich | Weimann | 63 | Sydnee.Fahey20@gmail.com |
| 8 | Wilhelm | Olson | 60 | Keon.Hegmann@yahoo.com |
| 9 | Johathan | Harber | 53 | Skylar.Kulas@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
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 | |
|---|---|---|---|---|
| 1 | Joy | Klocko | 54 | Joshuah_Kessler@gmail.com |
| 6 | Omer | Marquardt | 43 | Aileen_Bahringer@gmail.com |
| 7 | Brenda | Kuphal | 25 | Lew45@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
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 | Rodger | Cummings | 36 | Ron95@hotmail.com |
| 1 | Melba | Goyette | 22 | Cecil54@gmail.com |
| 2 | Broderick | Cremin | 34 | Theodora_Stracke71@hotmail.com |
| 3 | Damion | Kuhn | 20 | Brennon72@yahoo.com |
| 4 | Destiney | Murazik | 55 | Shanel68@yahoo.com |
| 5 | Lucienne | Wiegand | 51 | Caesar_Kautzer68@hotmail.com |
| 6 | King | Wunsch | 58 | Alexzander.Howell66@gmail.com |
| 7 | Dario | Baumbach | 62 | Danika79@gmail.com |
| 8 | Ocie | Witting | 45 | Tabitha95@gmail.com |
| 9 | Jaqueline | Homenick | 58 | Timmy_Gleason49@hotmail.com |
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([
{ id: "email", value: "" },
])
const data = useMemo<Data[]>(() => createData(), [])
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 | Marcelino | Ruecker | 18 | Abdullah_Abshire58@gmail.com |
| 1 | Tom | Bahringer | 54 | Wilhelmine.Powlowski63@gmail.com |
| 2 | Miracle | Mraz | 57 | Kira.Wiegand15@yahoo.com |
| 3 | Astrid | Sipes | 22 | Dorthy12@yahoo.com |
| 4 | Julien | Waters | 22 | Fabian96@yahoo.com |
| 5 | Fabiola | Greenfelder | 38 | Leonora8@gmail.com |
| 6 | Jalon | Koss | 49 | Wendy.Kassulke@yahoo.com |
| 7 | Delilah | McDermott | 51 | Gianni2@yahoo.com |
| 8 | Carson | Powlowski | 50 | Merle_Ryan29@hotmail.com |
| 9 | Noe | Koss | 33 | Keara.Schultz-Stroman@yahoo.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableColumnResizing
withBorder
withColumnBorders
/>
)
列のサイズ変更の方法を変更する
デフォルトでは、列のサイズ変更のタイミングは、ドラッグしている間に変更されます。ドラッグが終わったときに変更する場合は、columnResizeModeに"onEnd"を設定します。
| id | firstName | lastName | age | |
|---|---|---|---|---|
| 0 | Brooke | Rohan | 57 | Velda42@gmail.com |
| 1 | Alanna | Treutel | 18 | Alysson_Runte96@hotmail.com |
| 2 | Lorna | Hahn | 39 | Chelsey_Bergstrom8@gmail.com |
| 3 | Quinton | Lueilwitz | 28 | Faustino_Franecki@gmail.com |
| 4 | Fred | Kuvalis | 19 | Rhianna_Douglas87@hotmail.com |
| 5 | Michel | Harvey | 51 | Amya69@yahoo.com |
| 6 | Jamil | Klocko | 18 | Kaylin_Cruickshank62@gmail.com |
| 7 | Chadd | Lesch | 64 | Colleen_Legros@hotmail.com |
| 8 | Nathan | Gutkowski-Reichel | 29 | Chadd4@hotmail.com |
| 9 | Dennis | Breitenberg | 51 | Kali_Conroy@gmail.com |
const data = useMemo<Data[]>(() => createData(), [])
return (
<Table
columns={columns}
data={data}
enableColumnResizing
columnResizeMode="onEnd"
withBorder
withColumnBorders
/>
)
Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。