✨ format grist data for grid

Author: anaisberg

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

@@ -1,6 +1,6 @@
 import { ColDef } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Box } from '@/components';
 import { useGristTableData } from '@/features/grist';
@@ -21,34 +21,51 @@ export const DatabaseGrid = ({
     tableId,
   });
 
-  const rowData = [
-    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
-    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
-    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
-  ];
-
-  // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<ColDef[]>([
-    { field: 'make', sort: 'desc' },
-    {
-      field: 'model',
-    },
-    { field: 'price' },
-    { field: 'electric' },
-    {
-      headerComponentParams: {
-        innerHeaderComponent: () =>
-          AddButtonComponent({
-            addColumn,
-          }),
-      },
-      unSortIcon: false,
-      editable: false,
-      sortable: false,
-      spanRows: true,
-      filter: false,
+  const [rowData, setRowData] =
+    useState<Record<string, string | number | boolean>[]>();
+  const [colDefs, setColDefs] = useState<ColDef[]>();
+
+  const addColumnColDef: ColDef = {
+    headerComponentParams: {
+      innerHeaderComponent: () =>
+        AddButtonComponent({
+          addColumn,
+        }),
     },
-  ]);
+    unSortIcon: false,
+    editable: false,
+    sortable: false,
+    spanRows: true,
+    filter: false,
+  };
+
+  useEffect(() => {
+    const filteredEntries = Object.entries(tableData).filter(
+      ([key]) => key !== 'id' && key !== 'manualSort',
+    );
+
+    const rowData1: Record<string, string | number | boolean>[] = [];
+
+    const numRows = filteredEntries[0]?.[1].length;
+
+    for (let i = 0; i < numRows; i++) {
+      const row: Record<string, string | boolean | number> = {};
+      for (const [key, values] of filteredEntries) {
+        row[key] = values[i] ?? '';
+      }
+      rowData1.push(row);
+    }
+
+    setRowData(rowData1);
+
+    const columnNames = Object.keys(Object.fromEntries(filteredEntries));
+    const columns: ColDef[] = columnNames.map((key) => ({
+      field: key,
+    }));
+
+    setColDefs(columns.concat(addColumnColDef));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableData]);
 
   const defaultColDef = {
     flex: 1,

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

@@ -11,7 +11,9 @@ export const useGristTableData = ({
   documentId,
   tableId,
 }: UseGristTableDataArguments) => {
-  const [tableData, setTableData] = useState<Record<string, unknown>>({});
+  const [tableData, setTableData] = useState<
+    Record<string, (string | number | boolean)[]>
+  >({});
 
   useEffect(() => {
     const fetchData = async () => {
@@ -28,7 +30,7 @@ export const useGristTableData = ({
 
     fetchData()
       .then((res) => {
-        setTableData(res as Record<string, unknown>);
+        setTableData(res as Record<string, (string | number | boolean)[]>);
       })
       .catch((error) => {
         console.error('Error fetching Grist table data:', error);