TableViewのbooleanの設定

Author: sakastudio

apps/mooreseditor/src/components/TableView/components/TableRow.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Table, Button, Group, ActionIcon } from "@mantine/core";
+import { Table, Button, Group, ActionIcon, Checkbox } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { ForeignKeyDisplayCell } from "../cells/ForeignKeyDisplayCell";
 import { EditableCell } from "../cells/EditableCell";
@@ -94,6 +94,37 @@ export const TableRow: React.FC<TableRowProps> = ({
           );
         }
 
+        // Handle boolean display with direct editing
+        if (columnSchema.type === 'boolean') {
+          return (
+            <Table.Td
+              key={column.key}
+              onClick={(e: React.MouseEvent) => {
+                e.stopPropagation();
+              }}
+            >
+              <Checkbox
+                checked={value ?? false}
+                onChange={(e) => {
+                  if (onDataChange) {
+                    const newData = [...arrayData];
+                    newData[index] = {
+                      ...newData[index],
+                      [column.key]: e.currentTarget.checked
+                    };
+                    onDataChange(newData);
+                  }
+                }}
+                aria-label={`${column.key} ${value ? 'true' : 'false'}`}
+                styles={{
+                  input: { cursor: 'pointer' },
+                  root: { padding: '8px' }
+                }}
+              />
+            </Table.Td>
+          );
+        }
+
         // Regular display for other types
         const displayValue = columnSchema.type === 'uuid' && value
           ? `${String(value).slice(0, 4)}..`

apps/mooreseditor/src/components/TableView/index.tsx

@@ -62,7 +62,7 @@ export const TableView = ({ schema, data, jsonData, onDataChange, onRowSelect }:
     return objectSchema.properties.filter(prop => {
       if (!('type' in prop)) return false;
       const propSchema = prop as any;
-      const primitiveTypes = ['string', 'uuid', 'enum', 'integer', 'number'];
+      const primitiveTypes = ['string', 'uuid', 'enum', 'integer', 'number', 'boolean'];
       return primitiveTypes.includes(propSchema.type);
     });
   }, [schema]);