🐛 add column button outside table

Author: anaisberg

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -1,4 +1,5 @@
 import {
+  CSSProperties,
   PropsWithChildren,
   ReactNode,
   useEffect,
@@ -38,6 +39,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 export interface DropButtonProps {
   button: ReactNode;
   buttonCss?: BoxProps['$css'];
+  buttonStyle?: CSSProperties;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
@@ -46,6 +48,7 @@ export interface DropButtonProps {
 export const DropButton = ({
   button,
   buttonCss,
+  buttonStyle,
   isOpen = false,
   onOpenChange,
   children,
@@ -77,6 +80,7 @@ export const DropButton = ({
           ${buttonCss};
         `}
         className="--docs--drop-button"
+        style={buttonStyle}
       >
         {button}
       </StyledButton>

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

@@ -37,7 +37,13 @@ export const DatabaseBlock = createReactBlockSpec(
           }}
         >
           {block.props.documentId && block.props.tableId ? (
-            <Box style={{ height: '100%', width: '100%' }}>
+            <Box
+              style={{
+                height: '100%',
+                width: '100%',
+                flexDirection: 'row',
+              }}
+            >
               <DatabaseGrid
                 documentId={block.props.documentId}
                 tableId={block.props.tableId}

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

@@ -19,8 +19,17 @@ export const AddButtonComponent = ({
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       label="add column"
+      buttonStyle={{ marginBottom: 'auto' }}
       button={
-        <Box style={{ padding: '0.25rem', gap: '16px' }} color="tertiary">
+        <Box
+          style={{
+            padding: '0.25rem',
+            gap: '16px',
+            display: 'flex',
+            marginTop: '8px',
+          }}
+          color="tertiary"
+        >
           <span className="material-icons">add</span>
         </Box>
       }

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

@@ -1,6 +1,6 @@
 import { ColDef, ColSpanParams, ICellRendererParams } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 
 import { Box } from '@/components';
 import {
@@ -12,7 +12,7 @@ import {
 import { AddButtonComponent } from './AddColumnButton';
 import { useColumns, useRows } from './hooks';
 import { DatabaseRow } from './types';
-import { addRowCellRenderer, autoSizeStrategy, createNewRow } from './utils';
+import { addRowCellRenderer, createNewRow } from './utils';
 
 export const DatabaseGrid = ({
   documentId,
@@ -21,8 +21,6 @@ export const DatabaseGrid = ({
   documentId: string;
   tableId: string;
 }) => {
-  const gridRef = useRef(null);
-
   const { tableData } = useGristTableData({
     documentId,
     tableId,
@@ -43,20 +41,6 @@ export const DatabaseGrid = ({
     return 1;
   };
 
-  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',
@@ -86,7 +70,8 @@ export const DatabaseGrid = ({
       ) => addRowCellRenderer(params, columnNames, setRowData),
     }));
 
-    setColDefs(columns.concat(addColumnColDef));
+    setColDefs(columns);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableData]);
 
@@ -96,14 +81,13 @@ export const DatabaseGrid = ({
       .filter((col) => col !== undefined);
     const addNewRow = createNewRow({ value: '+ new  row', columnNames });
     setRowData((prev) => [...(prev ? prev : []), addNewRow]);
-  }, [colDefs, gridRef, setRowData]);
+  }, [colDefs, setRowData]);
 
   const defaultColDef = {
     flex: 1,
     filter: true,
     editable: true,
     unSortIcon: true,
-    suppressSizeToFit: true,
     minWidth: 200,
   };
 
@@ -134,16 +118,17 @@ export const DatabaseGrid = ({
   };
 
   return (
-    <Box style={{ height: '100%', width: '100%' }}>
-      <AgGridReact
-        ref={gridRef}
-        rowData={rowData}
-        columnDefs={colDefs}
-        defaultColDef={defaultColDef}
-        domLayout="autoHeight"
-        enableCellSpan={true}
-        autoSizeStrategy={autoSizeStrategy}
-      />
-    </Box>
+    <>
+      <Box style={{ height: '100%', width: '100%' }}>
+        <AgGridReact
+          rowData={rowData}
+          columnDefs={colDefs}
+          defaultColDef={defaultColDef}
+          domLayout="autoHeight"
+          enableCellSpan={true}
+        />
+      </Box>
+      <AddButtonComponent addColumn={addColumn} />
+    </>
   );
 };