refactor: hoist mini-table columns and simplify callbacks

app/components/form/fields/DisksTableField.tsx

@@ -23,6 +23,26 @@ export type DiskTableItem =
   | (DiskCreate & { action: 'create' })
   | { name: string; action: 'attach'; size: number; diskType: DiskType }
 
+const diskTableColumns = [
+  {
+    header: 'Name',
+    cell: (item: DiskTableItem) => <Truncate text={item.name} maxLength={35} />,
+  },
+  {
+    header: 'Action',
+    cell: (item: DiskTableItem) => <Badge color="neutral">{item.action}</Badge>,
+  },
+  {
+    header: 'Type',
+    cell: (item: DiskTableItem) => (
+      <Badge color="neutral">
+        {item.action === 'create' ? item.diskBackend.type : item.diskType}
+      </Badge>
+    ),
+  },
+  { header: 'Size', cell: (item: DiskTableItem) => <Size bytes={item.size} /> },
+]
+
 /**
  * Designed less for reuse, more to encapsulate logic that would otherwise
  * clutter the instance create form.
@@ -49,28 +69,7 @@ export function DisksTableField({
         <MiniTable
           ariaLabel="Disks"
           items={items}
-          columns={[
-            {
-              header: 'Name',
-              cell: (item) => <Truncate text={item.name} maxLength={35} />,
-            },
-            {
-              header: 'Action',
-              cell: (item) => <Badge color="neutral">{item.action}</Badge>,
-            },
-            {
-              header: 'Type',
-              cell: (item) => (
-                <Badge color="neutral">
-                  {item.action === 'create' ? item.diskBackend.type : item.diskType}
-                </Badge>
-              ),
-            },
-            {
-              header: 'Size',
-              cell: (item) => <Size bytes={item.size} />,
-            },
-          ]}
+          columns={diskTableColumns}
           rowKey={(item) => item.name}
           onRemoveItem={(item) => onChange(items.filter((i) => i.name !== item.name))}
           removeLabel={(item) => `Remove disk ${item.name}`}

app/components/form/fields/NetworkInterfaceField.tsx

@@ -18,6 +18,12 @@ import { Listbox } from '~/ui/lib/Listbox'
 import { MiniTable } from '~/ui/lib/MiniTable'
 import { Radio } from '~/ui/lib/Radio'
 
+const networkInterfaceTableColumns = [
+  { header: 'Name', cell: (item: InstanceNetworkInterfaceCreate) => item.name },
+  { header: 'VPC', cell: (item: InstanceNetworkInterfaceCreate) => item.vpcName },
+  { header: 'Subnet', cell: (item: InstanceNetworkInterfaceCreate) => item.subnetName },
+]
+
 /**
  * Designed less for reuse, more to encapsulate logic that would otherwise
  * clutter the instance create form.
@@ -115,11 +121,7 @@ export function NetworkInterfaceField({
                   <MiniTable
                     ariaLabel="Network Interfaces"
                     items={value.params}
-                    columns={[
-                      { header: 'Name', cell: (item) => item.name },
-                      { header: 'VPC', cell: (item) => item.vpcName },
-                      { header: 'Subnet', cell: (item) => item.subnetName },
-                    ]}
+                    columns={networkInterfaceTableColumns}
                     rowKey={(item) => item.name}
                     onRemoveItem={(item) =>
                       onChange({

app/components/form/fields/TlsCertsField.tsx

@@ -22,6 +22,10 @@ import { ErrorMessage } from './ErrorMessage'
 import { FileField } from './FileField'
 import { NameField } from './NameField'
 
+const tlsCertTableColumns = [
+  { header: 'Name', cell: (item: CertificateCreate) => item.name },
+]
+
 export function TlsCertsField({ control }: { control: Control<SiloCreateFormValues> }) {
   const [showAddCert, setShowAddCert] = useState(false)
 
@@ -49,7 +53,7 @@ export function TlsCertsField({ control }: { control: Control<SiloCreateFormValu
           className="mb-4"
           ariaLabel="TLS Certificates"
           items={items}
-          columns={[{ header: 'Name', cell: (item) => item.name }]}
+          columns={tlsCertTableColumns}
           rowKey={(item) => item.name}
           onRemoveItem={(item) => onChange(items.filter((i) => i.name !== item.name))}
           removeLabel={(item) => `remove cert ${item.name}`}

app/forms/instance-create.tsx

@@ -93,6 +93,11 @@ import { GiB } from '~/util/units'
 // for referential stability
 const EMPTY_NAME_OR_ID_LIST: NameOrId[] = []
 
+const floatingIpTableColumns = [
+  { header: 'Name', cell: (item: FloatingIp) => item.name },
+  { header: 'IP', cell: (item: FloatingIp) => item.ip },
+]
+
 const getBootDiskAttachment = (
   values: InstanceCreateInput,
   images: Array<Image>
@@ -1016,10 +1021,7 @@ const NetworkingSection = ({
             <MiniTable
               ariaLabel="Floating IPs"
               items={attachedFloatingIps}
-              columns={[
-                { header: 'Name', cell: (item) => item.name },
-                { header: 'IP', cell: (item) => item.ip },
-              ]}
+              columns={floatingIpTableColumns}
               rowKey={(item) => item.name}
               onRemoveItem={(item) => detachFloatingIp(item.name)}
               removeLabel={(item) => `remove floating IP ${item.name}`}

app/forms/network-interface-edit.tsx

@@ -34,6 +34,8 @@ import { KEYS } from '~/ui/util/keys'
 import { parseIpNet, validateIpNet } from '~/util/ip'
 import { docLinks, links } from '~/util/links'
 
+const transitIpTableColumns = [{ header: 'Transit IPs', cell: (ip: string) => ip }]
+
 type EditNetworkInterfaceFormProps = {
   editing: InstanceNetworkInterface
   onDismiss: () => void
@@ -164,7 +166,7 @@ export function EditNetworkInterfaceForm({
         className="mb-4"
         ariaLabel="Transit IPs"
         items={transitIps}
-        columns={[{ header: 'Transit IPs', cell: (ip) => ip }]}
+        columns={transitIpTableColumns}
         rowKey={(ip) => ip}
         onRemoveItem={(ip) => {
           form.setValue(

app/ui/lib/MiniTable.tsx

@@ -108,7 +108,7 @@ export const ClearAndAddButtons = ({
 
 type Column<T> = {
   header: string
-  cell: (item: T, index: number) => React.ReactNode
+  cell: (item: T) => React.ReactNode
 }
 
 type MiniTableProps<T> = {
@@ -154,7 +154,7 @@ export function MiniTable<T>({
           items.map((item, index) => (
             <Row tabIndex={0} aria-rowindex={index + 1} key={rowKey(item, index)}>
               {columns.map((column, colIndex) => (
-                <Cell key={colIndex}>{column.cell(item, index)}</Cell>
+                <Cell key={colIndex}>{column.cell(item)}</Cell>
               ))}
 
               <RemoveCell