✨ display hardcoded grid

Author: anaisberg

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -10,6 +10,7 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
@@ -29,6 +30,8 @@ import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
 import { CalloutBlock, DatabaseBlock, DividerBlock } from './custom-blocks';
 
+ModuleRegistry.registerModules([AllCommunityModule]);
+
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
     blockSpecs: {

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

@@ -2,7 +2,10 @@
 import { insertOrUpdateBlock } from '@blocknote/core';
 import { createReactBlockSpec } from '@blocknote/react';
 import { Button } from '@openfun/cunningham-react';
+import { ColDef } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
 import { TFunction } from 'i18next';
+import React, { useRef } from 'react';
 
 import { Box, Icon, Text } from '@/components';
 
@@ -27,13 +30,34 @@ export const DatabaseBlock = createReactBlockSpec(
   },
   {
     render: ({ block, editor }) => {
+      const gridRef = useRef(null);
+
+      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: ColDef[] = [
+        { field: 'make' } as const,
+        { field: 'model' } as const,
+        { field: 'price' } as const,
+        { field: 'electric' } as const,
+      ];
+
+      const defaultColDef = {
+        flex: 1,
+      };
       return (
         <Box
           $padding="1rem"
           $gap="0.625rem"
           style={{
             flexGrow: 1,
             flexDirection: 'row',
+            height: '500px',
+            width: '100%',
           }}
         >
           <Box as="div" />
@@ -43,6 +67,14 @@ export const DatabaseBlock = createReactBlockSpec(
                 documentId={block.props.documentId}
                 tableId={block.props.tableId}
               />
+              <Box style={{ height: '100%', width: '100%' }}>
+                <AgGridReact
+                  ref={gridRef}
+                  rowData={rowData}
+                  columnDefs={colDefs}
+                  defaultColDef={defaultColDef}
+                />
+              </Box>
             </Box>
           ) : (
             <Box