Skip to content

Commit f01b9fc

Browse files
david-crespodavid-crespo
authored
React Table 8.3 (#1068)
* update Table component, make ColumnMeta work * everything else except QueryTable internals * QueryTable works. omg
1 parent 68adee2 commit f01b9fc

File tree

11 files changed

+141
-157
lines changed

11 files changed

+141
-157
lines changed

‎app/pages/OrgAccessPage.tsx

+26-27
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
1+
import { createColumnHelper } from '@tanstack/react-table'
2+
import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
23
import { useMemo, useState } from 'react'
34

45
import {
@@ -10,7 +11,7 @@ import {
1011
} from '@oxide/api'
1112
import type { OrganizationRole, UserAccessRow } from '@oxide/api'
1213
import { useApiQuery } from '@oxide/api'
13-
import { Table, createTable, getActionsCol } from '@oxide/table'
14+
import { Table, getActionsCol } from '@oxide/table'
1415
import {
1516
Access24Icon,
1617
Badge,
@@ -27,8 +28,6 @@ import { useParams } from 'app/hooks'
2728

2829
type UserRow = UserAccessRow<OrganizationRole>
2930

30-
const table = createTable().setRowType<UserRow>()
31-
3231
const EmptyState = ({ onClick }: { onClick: () => void }) => (
3332
<TableEmptyBox>
3433
<EmptyMessage
@@ -41,6 +40,8 @@ const EmptyState = ({ onClick }: { onClick: () => void }) => (
4140
</TableEmptyBox>
4241
)
4342

43+
const colHelper = createColumnHelper<UserRow>()
44+
4445
export const OrgAccessPage = () => {
4546
const [addModalOpen, setAddModalOpen] = useState(false)
4647
const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
@@ -60,37 +61,35 @@ export const OrgAccessPage = () => {
6061

6162
const columns = useMemo(
6263
() => [
63-
table.createDataColumn('id', { header: 'ID' }),
64-
table.createDataColumn('name', { header: 'Name' }),
65-
table.createDataColumn('roleName', {
64+
colHelper.accessor('id', { header: 'ID' }),
65+
colHelper.accessor('name', { header: 'Name' }),
66+
colHelper.accessor('roleName', {
6667
header: 'Role',
6768
cell: (info) => <Badge color="neutral">{info.getValue()}</Badge>,
6869
}),
69-
table.createDisplayColumn(
70-
getActionsCol((row) => [
71-
{
72-
label: 'Change role',
73-
onActivate: () => setEditingUserRow(row),
74-
},
75-
// TODO: only show if you have permission to do this
76-
{
77-
label: 'Delete',
78-
onActivate() {
79-
// TODO: confirm delete
80-
updatePolicy.mutate({
81-
...orgParams,
82-
// we know policy is there, otherwise there's no row to display
83-
body: setUserRole(row.id, null, policy!),
84-
})
85-
},
70+
getActionsCol((row: UserRow) => [
71+
{
72+
label: 'Change role',
73+
onActivate: () => setEditingUserRow(row),
74+
},
75+
// TODO: only show if you have permission to do this
76+
{
77+
label: 'Delete',
78+
onActivate() {
79+
// TODO: confirm delete
80+
updatePolicy.mutate({
81+
...orgParams,
82+
// we know policy is there, otherwise there's no row to display
83+
body: setUserRole(row.id, null, policy!),
84+
})
8685
},
87-
])
88-
),
86+
},
87+
]),
8988
],
9089
[policy, orgParams, updatePolicy]
9190
)
9291

93-
const tableInstance = useTableInstance(table, {
92+
const tableInstance = useReactTable({
9493
columns,
9594
data: rows,
9695
getCoreRowModel: getCoreRowModel(),

‎app/pages/project/access/ProjectAccessPage.tsx

+25-26
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
1+
import { createColumnHelper } from '@tanstack/react-table'
2+
import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
23
import { useMemo, useState } from 'react'
34

45
import {
@@ -10,7 +11,7 @@ import {
1011
} from '@oxide/api'
1112
import type { ProjectRole, UserAccessRow } from '@oxide/api'
1213
import { useApiQuery } from '@oxide/api'
13-
import { Table, createTable, getActionsCol } from '@oxide/table'
14+
import { Table, getActionsCol } from '@oxide/table'
1415
import {
1516
Access24Icon,
1617
Badge,
@@ -42,7 +43,7 @@ const EmptyState = ({ onClick }: { onClick: () => void }) => (
4243

4344
type UserRow = UserAccessRow<ProjectRole>
4445

45-
const table = createTable().setRowType<UserRow>()
46+
const colHelper = createColumnHelper<UserRow>()
4647

4748
export const ProjectAccessPage = () => {
4849
const [addModalOpen, setAddModalOpen] = useState(false)
@@ -63,37 +64,35 @@ export const ProjectAccessPage = () => {
6364

6465
const columns = useMemo(
6566
() => [
66-
table.createDataColumn('id', { header: 'ID' }),
67-
table.createDataColumn('name', { header: 'Name' }),
68-
table.createDataColumn('roleName', {
67+
colHelper.accessor('id', { header: 'ID' }),
68+
colHelper.accessor('name', { header: 'Name' }),
69+
colHelper.accessor('roleName', {
6970
header: 'Role',
7071
cell: (info) => <Badge color="neutral">{info.getValue()}</Badge>,
7172
}),
72-
table.createDisplayColumn(
73-
getActionsCol((row) => [
74-
{
75-
label: 'Change role',
76-
onActivate: () => setEditingUserRow(row),
73+
getActionsCol((row: UserRow) => [
74+
{
75+
label: 'Change role',
76+
onActivate: () => setEditingUserRow(row),
77+
},
78+
// TODO: only show if you have permission to do this
79+
{
80+
label: 'Delete',
81+
onActivate() {
82+
// TODO: confirm delete
83+
updatePolicy.mutate({
84+
...projectParams,
85+
// we know policy is there, otherwise there's no row to display
86+
body: setUserRole(row.id, null, policy!),
87+
})
7788
},
78-
// TODO: only show if you have permission to do this
79-
{
80-
label: 'Delete',
81-
onActivate() {
82-
// TODO: confirm delete
83-
updatePolicy.mutate({
84-
...projectParams,
85-
// we know policy is there, otherwise there's no row to display
86-
body: setUserRole(row.id, null, policy!),
87-
})
88-
},
89-
},
90-
])
91-
),
89+
},
90+
]),
9291
],
9392
[policy, projectParams, updatePolicy]
9493
)
9594

96-
const tableInstance = useTableInstance(table, {
95+
const tableInstance = useReactTable({
9796
columns,
9897
data: rows,
9998
getCoreRowModel: getCoreRowModel(),

‎app/pages/project/instances/instance/tabs/StorageTab.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
1+
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
22
import { useMemo, useState } from 'react'
33

44
import type { Disk } from '@oxide/api'
55
import { useApiMutation, useApiQueryClient } from '@oxide/api'
66
import { useApiQuery } from '@oxide/api'
77
import type { MenuAction } from '@oxide/table'
8-
import { DateCell, SizeCell, Table, createTable, getActionsCol } from '@oxide/table'
8+
import { DateCell, SizeCell, Table, getActionsCol } from '@oxide/table'
99
import { Button, EmptyMessage, Error16Icon, OpenLink12Icon, TableEmptyBox } from '@oxide/ui'
1010

1111
import { DiskStatusBadge } from 'app/components/StatusBadge'
@@ -22,23 +22,23 @@ const OtherDisksEmpty = () => (
2222
</TableEmptyBox>
2323
)
2424

25-
const table = createTable().setRowType<Disk>()
25+
const colHelper = createColumnHelper<Disk>()
2626

2727
const columns = [
28-
table.createDataColumn('name', {
28+
colHelper.accessor('name', {
2929
header: 'Name',
3030
cell: (info) => <div>{info.getValue()}</div>,
3131
}),
32-
table.createDataColumn('size', {
32+
colHelper.accessor('size', {
3333
header: 'Size',
3434
cell: (info) => <SizeCell value={info.getValue()} />,
3535
}),
36-
table.createDataColumn((d) => d.state.state, {
36+
colHelper.accessor('state.state', {
3737
id: 'status',
3838
header: 'Status',
3939
cell: (info) => <DiskStatusBadge status={info.getValue()} />,
4040
}),
41-
table.createDataColumn('timeCreated', {
41+
colHelper.accessor('timeCreated', {
4242
header: 'Created',
4343
cell: (info) => <DateCell value={info.getValue()} />,
4444
}),
@@ -95,14 +95,14 @@ export function StorageTab() {
9595
const bootDisks = useMemo(() => data?.items.slice(0, 1) || [], [data])
9696
const otherDisks = useMemo(() => data?.items.slice(1) || [], [data])
9797

98-
const bootDiskTable = useTableInstance(table, {
98+
const bootDiskTable = useReactTable({
9999
columns: [...columns, getActionsCol(makeActions)],
100100
data: bootDisks,
101101
getCoreRowModel: getCoreRowModel(),
102102
})
103103
const bootLabelId = 'boot-disk-label'
104104

105-
const otherDisksTable = useTableInstance(table, {
105+
const otherDisksTable = useReactTable({
106106
columns: [...columns, getActionsCol(makeActions)],
107107
data: otherDisks,
108108
getCoreRowModel: getCoreRowModel(),

‎app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
1+
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
22
import { useMemo, useState } from 'react'
33

44
import type { VpcFirewallRule } from '@oxide/api'
@@ -9,7 +9,6 @@ import {
99
FirewallFilterCell,
1010
Table,
1111
TypeValueListCell,
12-
createTable,
1312
getActionsCol,
1413
} from '@oxide/table'
1514
import { Button, EmptyMessage, TableEmptyBox } from '@oxide/ui'
@@ -18,26 +17,25 @@ import { CreateFirewallRuleSideModalForm } from 'app/forms/firewall-rules-create
1817
import { EditFirewallRuleForm } from 'app/forms/firewall-rules-edit'
1918
import { useParams } from 'app/hooks'
2019

21-
const tableHelper = createTable().setRowType<VpcFirewallRule>()
20+
const colHelper = createColumnHelper<VpcFirewallRule>()
2221

2322
/** columns that don't depend on anything in `render` */
2423
const staticColumns = [
25-
tableHelper.createDataColumn('name', { header: 'Name' }),
26-
tableHelper.createDataColumn('action', { header: 'Action' }),
27-
// map() fixes the fact that IpNets aren't strings
28-
tableHelper.createDataColumn('targets', {
24+
colHelper.accessor('name', { header: 'Name' }),
25+
colHelper.accessor('action', { header: 'Action' }),
26+
colHelper.accessor('targets', {
2927
header: 'Targets',
3028
cell: (info) => <TypeValueListCell value={info.getValue()} />,
3129
}),
32-
tableHelper.createDataColumn('filters', {
30+
colHelper.accessor('filters', {
3331
header: 'Filters',
3432
cell: (info) => <FirewallFilterCell value={info.getValue()} />,
3533
}),
36-
tableHelper.createDataColumn('status', {
34+
colHelper.accessor('status', {
3735
header: 'Status',
3836
cell: (info) => <EnabledCell value={info.getValue()} />,
3937
}),
40-
tableHelper.createDataColumn('timeCreated', {
38+
colHelper.accessor('timeCreated', {
4139
id: 'created',
4240
header: 'Created',
4341
cell: (info) => <DateCell value={info.getValue()} />,
@@ -57,15 +55,15 @@ export const VpcFirewallRulesTab = () => {
5755
const columns = useMemo(() => {
5856
return [
5957
...staticColumns,
60-
tableHelper.createDisplayColumn(
61-
getActionsCol((rule) => [{ label: 'Edit', onActivate: () => setEditing(rule) }])
62-
),
58+
getActionsCol((rule: VpcFirewallRule) => [
59+
{ label: 'Edit', onActivate: () => setEditing(rule) },
60+
]),
6361
]
6462
}, [setEditing])
6563

66-
const table = useTableInstance(tableHelper, {
67-
data: rules,
64+
const table = useReactTable({
6865
columns,
66+
data: rules,
6967
getCoreRowModel: getCoreRowModel(),
7068
})
7169

0 commit comments

Comments
 (0)