✨ create column propagation in grist

Author: Clemsazert

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/DatabaseGrid.tsx

@@ -3,7 +3,11 @@ import { AgGridReact } from 'ag-grid-react';
 import { useEffect, useRef, useState } from 'react';
 
 import { Box } from '@/components';
-import { useGristTableData } from '@/features/grist';
+import {
+  ColumnType,
+  useGristCrudColumns,
+  useGristTableData,
+} from '@/features/grist';
 
 import { AddButtonComponent } from './AddColumnButton';
 
@@ -21,6 +25,8 @@ export const DatabaseGrid = ({
     tableId,
   });
 
+  const { createColumns } = useGristCrudColumns();
+
   const [rowData, setRowData] =
     useState<Record<string, string | number | boolean>[]>();
   const [colDefs, setColDefs] = useState<ColDef[]>();
@@ -88,6 +94,16 @@ export const DatabaseGrid = ({
         ...(addColumn !== undefined ? [addColumn] : []),
       ];
     });
+
+    void createColumns(documentId, tableId, [
+      {
+        id: columnName,
+        fields: {
+          label: columnName,
+          type: ColumnType.TEXT,
+        },
+      },
+    ]);
   };
 
   return (

src/frontend/apps/impress/src/features/grist/useGristCrudColumns.ts

@@ -1,10 +1,21 @@
 import { gristFetchApi } from '@/api';
 
+export enum ColumnType {
+  TEXT = 'Text',
+  NUMBER = 'Numeric',
+  BOOLEAN = 'Bool',
+}
+
+type ColumnInput = {
+  type: ColumnType;
+  label: string;
+};
+
 export const useGristCrudColumns = () => {
   const createColumns = async (
     documentId: string,
     tableId: string,
-    columns: { id: string; fields: unknown }[],
+    columns: { id: string; fields: ColumnInput }[],
   ) => {
     const url = `docs/${documentId}/tables/${tableId}/columns`;
     try {
@@ -13,7 +24,7 @@ export const useGristCrudColumns = () => {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(columns),
+        body: JSON.stringify({ columns }),
       });
 
       if (!response.ok) {