From 36bfd6136b92ac224e8c9fcffb4a676573893b39 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 30 Oct 2026 11:13:42 +0700
Subject: [PATCH] EditableTable: use ReUI ui/table instead of a raw table

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/ui/EditableTable.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/ui/EditableTable.tsx b/src/ui/EditableTable.tsx
index d12beb4..45f7afd 100644
--- a/src/ui/EditableTable.tsx
+++ b/src/ui/EditableTable.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { Table, TableBody, TableHeader } from '@/components/ui/table'
 import styles from './EditableTable.module.css'
 
 /*
@@ -24,12 +25,16 @@ export function EditableTable({
   children: ReactNode
   className?: string
 }) {
+  /* The table is ReUI's `ui/table` (its container scrolls sideways on a narrow
+     screen). Not a `data-grid`: the rows are inputs and selects edited in place,
+     which the grid's sorting, paging and selection have nothing to do with. The
+     cells stay native `th`/`td` that the callers lay out. */
   return (
-    <table className={[styles.table, className].filter(Boolean).join(' ')}>
-      <thead>
+    <Table className={[styles.table, className].filter(Boolean).join(' ')}>
+      <TableHeader>
         <tr>{header}</tr>
-      </thead>
-      <tbody>{children}</tbody>
-    </table>
+      </TableHeader>
+      <TableBody>{children}</TableBody>
+    </Table>
   )
 }