A Griddy AI prototype

src/Griddy/rendering/TableCell.tsx

@@ -0,0 +1,48 @@
+import { Checkbox } from '@mantine/core'
+import { type Cell, flexRender } from '@tanstack/react-table'
+
+import { CSS, SELECTION_COLUMN_ID } from '../core/constants'
+import styles from '../styles/griddy.module.css'
+
+interface TableCellProps<T> {
+  cell: Cell<T, unknown>
+}
+
+export function TableCell<T>({ cell }: TableCellProps<T>) {
+  const isSelectionCol = cell.column.id === SELECTION_COLUMN_ID
+
+  if (isSelectionCol) {
+    return <RowCheckbox cell={cell} />
+  }
+
+  return (
+    <div
+      className={styles[CSS.cell]}
+      role="gridcell"
+      style={{ width: cell.column.getSize() }}
+    >
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </div>
+  )
+}
+
+function RowCheckbox<T>({ cell }: TableCellProps<T>) {
+  const row = cell.row
+
+  return (
+    <div
+      className={styles[CSS.cell]}
+      role="gridcell"
+      style={{ width: cell.column.getSize() }}
+    >
+      <Checkbox
+        aria-label={`Select row ${row.index + 1}`}
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onChange={row.getToggleSelectedHandler()}
+        onClick={(e) => e.stopPropagation()}
+        size="xs"
+      />
+    </div>
+  )
+}