From 7867f0366e8db0879c7b7fa34322c3ac0460169b Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Mon, 13 Nov 2023 14:16:32 +0800
Subject: [PATCH] feat: support the operations of field in the grid of tauri
 (#3906)

* feat: support the operations of field in the grid of tauri

* fix: performance optimizate
---
 .../src/appflowy_app/assets/board.svg         | 16 ++++
 .../src/appflowy_app/assets/document.svg      | 14 +++
 .../src/appflowy_app/assets/grid.svg          |  6 ++
 .../components/database/Database.hooks.ts     | 18 +++-
 .../components/database/Database.tsx          |  9 +-
 .../application/field/field_listeners.ts      | 11 +++
 .../application/field/field_service.ts        | 95 +++++++++++++++----
 .../database/application/field/field_types.ts | 11 +--
 .../database/application/field/index.ts       |  1 +
 .../database/components/cell/TextCell.tsx     | 11 ++-
 .../database/components/field/FieldSelect.tsx | 25 ++---
 .../database/components/field/FieldsMenu.tsx  |  4 +-
 .../components/tab_bar/DatabaseTabBar.tsx     | 39 +++++---
 .../grid/GridCalculate/GridCalculate.tsx      | 30 ++++++
 .../database/grid/GridCalculate/index.ts      |  1 +
 .../database/grid/GridField/GridField.tsx     | 18 +++-
 .../database/grid/GridField/GridFieldMenu.tsx | 47 +++++----
 .../grid/GridField/GridFieldMenuActions.tsx   | 72 ++++++++++++--
 .../database/grid/GridField/GridResizer.tsx   | 92 ++++++++++++++++++
 .../grid/GridRow/GridCalculateRow.tsx         | 20 +++-
 .../GridRow/GridCellRow/GridCellRow.hooks.ts  |  7 ++
 .../grid/GridRow/GridCellRow/GridCellRow.tsx  | 27 +++---
 .../database/grid/GridRow/GridFieldRow.tsx    | 29 +++---
 .../database/grid/GridRow/GridRow.tsx         | 10 +-
 .../database/grid/GridRow/constants.ts        | 16 ++--
 .../database/grid/GridTable/GridTable.tsx     | 12 ++-
 .../components/document/CodeBlock/index.tsx   |  4 +-
 .../document/EquationBlock/index.tsx          |  2 +-
 .../components/document/GridBlock/index.tsx   |  2 +-
 .../components/document/ImageBlock/index.tsx  |  2 +-
 .../components/document/Node/NodeChildren.tsx |  2 +-
 .../components/document/Node/index.tsx        |  4 +-
 .../components/document/Root/index.tsx        |  4 +-
 .../appflowy_app/hooks/notification.hooks.ts  |  2 +
 34 files changed, 512 insertions(+), 151 deletions(-)
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/assets/board.svg
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/assets/document.svg
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/assets/grid.svg
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_listeners.ts
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/GridCalculate.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/index.ts
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridResizer.tsx

diff --git a/frontend/appflowy_tauri/src/appflowy_app/assets/board.svg b/frontend/appflowy_tauri/src/appflowy_app/assets/board.svg
new file mode 100644
index 0000000000..0bb0e3fabe
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/assets/board.svg
@@ -0,0 +1,16 @@
+<svg width='100%' height='100%' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+            d='M12.8 2H3.2C2.53726 2 2 2.55964 2 3.25V5.75C2 6.44036 2.53726 7 3.2 7H12.8C13.4627 7 14 6.44036 14 5.75V3.25C14 2.55964 13.4627 2 12.8 2Z'
+            stroke='currentColor'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+    />
+    <path
+            d='M12.8 9H3.2C2.53726 9 2 9.55964 2 10.25V12.75C2 13.4404 2.53726 14 3.2 14H12.8C13.4627 14 14 13.4404 14 12.75V10.25C14 9.55964 13.4627 9 12.8 9Z'
+            stroke='currentColor'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+    />
+    <circle cx='4.5' cy='4.5' r='0.5' fill='currentColor' />
+    <circle cx='4.5' cy='11.5' r='0.5' fill='currentColor' />
+</svg>
\ No newline at end of file
diff --git a/frontend/appflowy_tauri/src/appflowy_app/assets/document.svg b/frontend/appflowy_tauri/src/appflowy_app/assets/document.svg
new file mode 100644
index 0000000000..b00e1cfb38
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/assets/document.svg
@@ -0,0 +1,14 @@
+<svg width='100%' height='100%' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+            d='M10.5 3H11.5C11.8315 3 12.1495 3.12877 12.3839 3.35798C12.6183 3.58719 12.75 3.89807 12.75 4.22222V12.7778C12.75 13.1019 12.6183 13.4128 12.3839 13.642C12.1495 13.8712 11.8315 14 11.5 14H4.5C4.16848 14 3.85054 13.8712 3.61612 13.642C3.3817 13.4128 3.25 13.1019 3.25 12.7778V4.22222C3.25 3.89807 3.3817 3.58719 3.61612 3.35798C3.85054 3.12877 4.16848 3 4.5 3H5.5'
+            stroke='currentColor'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+    />
+    <path
+            d='M9.5 2H6.5C6.22386 2 6 2.22386 6 2.5V3.5C6 3.77614 6.22386 4 6.5 4H9.5C9.77614 4 10 3.77614 10 3.5V2.5C10 2.22386 9.77614 2 9.5 2Z'
+            stroke='currentColor'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+    />
+</svg>
\ No newline at end of file
diff --git a/frontend/appflowy_tauri/src/appflowy_app/assets/grid.svg b/frontend/appflowy_tauri/src/appflowy_app/assets/grid.svg
new file mode 100644
index 0000000000..c397af8130
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/assets/grid.svg
@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 1.75H2.625C2.14175 1.75 1.75 2.14175 1.75 2.625V5.25C1.75 5.73325 2.14175 6.125 2.625 6.125H5.25C5.73325 6.125 6.125 5.73325 6.125 5.25V2.625C6.125 2.14175 5.73325 1.75 5.25 1.75Z" stroke="#333333" stroke-width="0.875" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.375 1.75H8.75C8.26675 1.75 7.875 2.14175 7.875 2.625V5.25C7.875 5.73325 8.26675 6.125 8.75 6.125H11.375C11.8582 6.125 12.25 5.73325 12.25 5.25V2.625C12.25 2.14175 11.8582 1.75 11.375 1.75Z" stroke="#333333" stroke-width="0.875" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.375 7.875H8.75C8.26675 7.875 7.875 8.26675 7.875 8.75V11.375C7.875 11.8582 8.26675 12.25 8.75 12.25H11.375C11.8582 12.25 12.25 11.8582 12.25 11.375V8.75C12.25 8.26675 11.8582 7.875 11.375 7.875Z" stroke="#333333" stroke-width="0.875" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 7.875H2.625C2.14175 7.875 1.75 8.26675 1.75 8.75V11.375C1.75 11.8582 2.14175 12.25 2.625 12.25H5.25C5.73325 12.25 6.125 11.8582 6.125 11.375V8.75C6.125 8.26675 5.73325 7.875 5.25 7.875Z" stroke="#333333" stroke-width="0.875" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.hooks.ts
index 847d5aa03b..a69942e716 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.hooks.ts
@@ -1,9 +1,9 @@
-import { createContext, useContext, useCallback, useMemo, useEffect, useState, useRef } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { proxy, useSnapshot } from 'valtio';
-import { DatabaseLayoutPB, DatabaseNotification } from '@/services/backend';
+import { DatabaseLayoutPB, DatabaseNotification, FieldVisibility } from '@/services/backend';
 import { subscribeNotifications } from '$app/hooks';
-import { Database, databaseService, fieldService, rowListeners, sortListeners } from './application';
+import { Database, databaseService, fieldListeners, fieldService, rowListeners, sortListeners } from './application';
 
 export function useSelectDatabaseView({ viewId }: { viewId?: string }) {
   const key = 'v';
@@ -40,6 +40,15 @@ export const DatabaseProvider = DatabaseContext.Provider;
 
 export const useDatabase = () => useSnapshot(useContext(DatabaseContext));
 
+export const useDatabaseVisibilityFields = () => {
+  const database = useDatabase();
+
+  return useMemo(
+    () => database.fields.filter((field) => field.visibility !== FieldVisibility.AlwaysHidden),
+    [database.fields]
+  );
+};
+
 export const useConnectDatabase = (viewId: string) => {
   const database = useMemo(() => {
     const proxyDatabase = proxy<Database>({
@@ -65,6 +74,9 @@ export const useConnectDatabase = (viewId: string) => {
         [DatabaseNotification.DidUpdateFields]: async () => {
           database.fields = await fieldService.getFields(viewId);
         },
+        [DatabaseNotification.DidUpdateFieldSettings]: async (changeset) => {
+          fieldListeners.didUpdateFieldSettings(database, changeset);
+        },
         [DatabaseNotification.DidUpdateViewRows]: (changeset) => {
           rowListeners.didUpdateViewRows(database, changeset);
         },
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.tsx
index 997b05ab10..e8e348cd10 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/Database.tsx
@@ -52,7 +52,14 @@ export const Database = ({ selectedViewId, setSelectedViewId }: Props) => {
         selectedViewId={selectedViewId}
         childViewIds={childViewIds}
       />
-      <SwipeableViews className={'flex-1 overflow-hidden'} axis={'x'} index={index}>
+      <SwipeableViews
+        slideStyle={{
+          overflow: 'hidden',
+        }}
+        className={'flex-1 overflow-hidden'}
+        axis={'x'}
+        index={index}
+      >
         {childViewIds.map((id) => (
           <TabPanel key={id} index={index} value={index}>
             <DatabaseLoader viewId={id}>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_listeners.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_listeners.ts
new file mode 100644
index 0000000000..b000ce5edc
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_listeners.ts
@@ -0,0 +1,11 @@
+import { FieldSettingsPB } from '@/services/backend';
+import { Database } from '$app/components/database/application';
+
+export function didUpdateFieldSettings(database: Database, settings: FieldSettingsPB) {
+  const { field_id: fieldId, visibility, width } = settings;
+  const field = database.fields.find((field) => field.id === fieldId);
+
+  if (!field) return;
+  field.visibility = visibility;
+  field.width = width;
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_service.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_service.ts
index abb0c53f99..d7317db3a6 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_service.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_service.ts
@@ -8,6 +8,9 @@ import {
   MoveFieldPayloadPB,
   RepeatedFieldIdPB,
   UpdateFieldTypePayloadPB,
+  FieldSettingsChangesetPB,
+  FieldVisibility,
+  DatabaseViewIdPB,
 } from '@/services/backend';
 import {
   DatabaseEventDuplicateField,
@@ -17,6 +20,8 @@ import {
   DatabaseEventGetFields,
   DatabaseEventDeleteField,
   DatabaseEventCreateTypeOption,
+  DatabaseEventUpdateFieldSettings,
+  DatabaseEventGetAllFieldSettings,
 } from '@/services/backend/events/flowy-database2';
 import { Field, pbToField } from './field_types';
 import { bytesToTypeOption, getTypeOption } from './type_option';
@@ -24,20 +29,39 @@ import { bytesToTypeOption, getTypeOption } from './type_option';
 export async function getFields(viewId: string, fieldIds?: string[]): Promise<Field[]> {
   const payload = GetFieldPayloadPB.fromObject({
     view_id: viewId,
-    field_ids: fieldIds ? RepeatedFieldIdPB.fromObject({
-      items: fieldIds.map(fieldId => ({ field_id: fieldId })),
-    }) : undefined,
+    field_ids: fieldIds
+      ? RepeatedFieldIdPB.fromObject({
+          items: fieldIds.map((fieldId) => ({ field_id: fieldId })),
+        })
+      : undefined,
   });
 
   const result = await DatabaseEventGetFields(payload);
 
-  const fields = result.map((value) => value.items.map(pbToField)).unwrap();
+  const getSettingsPayload = DatabaseViewIdPB.fromObject({
+    value: viewId,
+  });
 
-  await Promise.all(fields.map(async field => {
-    const typeOption = await getTypeOption(viewId, field.id, field.type);
+  const settings = await DatabaseEventGetAllFieldSettings(getSettingsPayload);
 
-    field.typeOption = typeOption;
-  }));
+  if (settings.ok === false || result.ok === false) {
+    return Promise.reject('Failed to get fields');
+  }
+
+  const fields = await Promise.all(
+    result.val.items.map(async (item) => {
+      const setting = settings.val.items.find((setting) => setting.field_id === item.id);
+      const field = pbToField(item);
+      const typeOption = await getTypeOption(viewId, field.id, field.type);
+
+      return {
+        ...field,
+        visibility: setting?.visibility,
+        width: setting?.width,
+        typeOption,
+      };
+    })
+  );
 
   return fields;
 }
@@ -51,13 +75,14 @@ export async function createField(viewId: string, fieldType?: FieldType, data?:
 
   const result = await DatabaseEventCreateTypeOption(payload);
 
-  return result.map(value => {
-    const field = pbToField(value.field);
+  if (result.ok === false) {
+    return Promise.reject('Failed to create field');
+  }
 
-    field.typeOption = bytesToTypeOption(value.type_option_data, field.type);
+  const field = pbToField(result.val.field);
 
-    return field;
-  }).unwrap();
+  field.typeOption = bytesToTypeOption(result.val.type_option_data, field.type);
+  return field;
 }
 
 export async function duplicateField(viewId: string, fieldId: string): Promise<void> {
@@ -68,16 +93,21 @@ export async function duplicateField(viewId: string, fieldId: string): Promise<v
 
   const result = await DatabaseEventDuplicateField(payload);
 
-  return result.unwrap();
+  if (result.ok === false) {
+    return Promise.reject('Failed to duplicate field');
+  }
+
+  return result.val;
 }
 
-export async function updateField(viewId: string, fieldId: string, data: {
-  name?: string;
-  desc?: string;
-  frozen?: boolean;
-  visibility?: boolean;
-  width?: number;
-}): Promise<void> {
+export async function updateField(
+  viewId: string,
+  fieldId: string,
+  data: {
+    name?: string;
+    desc?: string;
+  }
+): Promise<void> {
   const payload = FieldChangesetPB.fromObject({
     view_id: viewId,
     field_id: fieldId,
@@ -124,3 +154,26 @@ export async function deleteField(viewId: string, fieldId: string): Promise<void
 
   return result.unwrap();
 }
+
+export async function updateFieldSetting(
+  viewId: string,
+  fieldId: string,
+  settings: {
+    visibility?: FieldVisibility;
+    width?: number;
+  }
+): Promise<void> {
+  const payload = FieldSettingsChangesetPB.fromObject({
+    view_id: viewId,
+    field_id: fieldId,
+    ...settings,
+  });
+
+  const result = await DatabaseEventUpdateFieldSettings(payload);
+
+  if (result.ok === false) {
+    return Promise.reject('Failed to update field settings');
+  }
+
+  return result.val;
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_types.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_types.ts
index c685e478be..5c6a4f01fd 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_types.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/field_types.ts
@@ -1,7 +1,4 @@
-import {
-  FieldPB,
-  FieldType,
-} from '@/services/backend';
+import { FieldPB, FieldType, FieldVisibility } from '@/services/backend';
 import { DateTimeTypeOption, NumberTypeOption, SelectTypeOption } from './type_option/type_option_types';
 
 export interface Field {
@@ -9,8 +6,8 @@ export interface Field {
   name: string;
   type: FieldType;
   typeOption?: unknown;
-  visibility: boolean;
-  width: number;
+  visibility?: FieldVisibility;
+  width?: number;
   isPrimary: boolean;
 }
 
@@ -35,7 +32,5 @@ export const pbToField = (pb: FieldPB): Field => ({
   id: pb.id,
   name: pb.name,
   type: pb.field_type,
-  visibility: pb.visibility,
-  width: pb.width,
   isPrimary: pb.is_primary,
 });
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/index.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/index.ts
index 2cb812dc0d..fa993023e1 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/index.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/application/field/index.ts
@@ -2,3 +2,4 @@ export * from './select_option';
 export * from './type_option';
 export * from './field_types';
 export * as fieldService from './field_service';
+export * as fieldListeners from './field_listeners';
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/cell/TextCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/cell/TextCell.tsx
index d4e9d5a535..48445c91ef 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/cell/TextCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/cell/TextCell.tsx
@@ -1,8 +1,9 @@
 import { Popover, TextareaAutosize } from '@mui/material';
-import { FC, FormEventHandler, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { FC, FormEventHandler, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useViewId } from '$app/hooks';
 import { cellService, Field, TextCell as TextCellType } from '../../application';
 import { CellText } from '../../_shared';
+import { useGridUIStateDispatcher } from '$app/components/database/proxy/grid/ui_state/actions';
 
 export const TextCell: FC<{
   field: Field;
@@ -13,7 +14,7 @@ export const TextCell: FC<{
   const [editing, setEditing] = useState(false);
   const [text, setText] = useState('');
   const [width, setWidth] = useState<number | undefined>(undefined);
-
+  const { setRowHover } = useGridUIStateDispatcher();
   const handleClose = () => {
     if (!cell) return;
     if (editing) {
@@ -41,6 +42,12 @@ export const TextCell: FC<{
     }
   }, [editing]);
 
+  useEffect(() => {
+    if (editing) {
+      setRowHover(null);
+    }
+  }, [editing, setRowHover]);
+
   return (
     <>
       <CellText ref={cellRef} className='w-full' onClick={handleClick}>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldSelect.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldSelect.tsx
index 7ad17a5a21..bb6c899a00 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldSelect.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldSelect.tsx
@@ -1,28 +1,31 @@
 import { MenuItem, Select, SelectChangeEvent, SelectProps } from '@mui/material';
 import { FC, useCallback } from 'react';
 import { Field as FieldType } from '../../application';
-import { useDatabase } from '../../Database.hooks';
+import { useDatabaseVisibilityFields } from '../../Database.hooks';
 import { Field } from './Field';
 
 export interface FieldSelectProps extends Omit<SelectProps, 'onChange'> {
   onChange?: (event: SelectChangeEvent<unknown>, field: FieldType | undefined) => void;
 }
 
-export const FieldSelect: FC<FieldSelectProps> = ({
-  onChange,
-  ...props
-}) => {
-  const { fields } = useDatabase();
+export const FieldSelect: FC<FieldSelectProps> = ({ onChange, ...props }) => {
+  const fields = useDatabaseVisibilityFields();
 
-  const handleChange = useCallback((event: SelectChangeEvent<unknown>) => {
-    const selectedId = event.target.value;
+  const handleChange = useCallback(
+    (event: SelectChangeEvent<unknown>) => {
+      const selectedId = event.target.value;
 
-    onChange?.(event, fields.find(field => field.id === selectedId));
-  }, [onChange, fields]);
+      onChange?.(
+        event,
+        fields.find((field) => field.id === selectedId)
+      );
+    },
+    [onChange, fields]
+  );
 
   return (
     <Select onChange={handleChange} {...props}>
-      {fields.map(field => (
+      {fields.map((field) => (
         <MenuItem key={field.id} value={field.id}>
           <Field field={field} />
         </MenuItem>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldsMenu.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldsMenu.tsx
index a35b0cf087..3407292633 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldsMenu.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/field/FieldsMenu.tsx
@@ -1,7 +1,7 @@
 import { Menu, MenuItem, MenuProps } from '@mui/material';
 import { FC, MouseEvent } from 'react';
 import { Field as FieldType } from '../../application';
-import { useDatabase } from '../../Database.hooks';
+import { useDatabaseVisibilityFields } from '../../Database.hooks';
 import { Field } from './Field';
 
 export interface FieldsMenuProps extends MenuProps {
@@ -9,7 +9,7 @@ export interface FieldsMenuProps extends MenuProps {
 }
 
 export const FieldsMenu: FC<FieldsMenuProps> = ({ onMenuItemClick, ...props }) => {
-  const { fields } = useDatabase();
+  const fields = useDatabaseVisibilityFields();
 
   return (
     <Menu {...props}>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/DatabaseTabBar.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/DatabaseTabBar.tsx
index 24846633af..ef2020bfcf 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/DatabaseTabBar.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/tab_bar/DatabaseTabBar.tsx
@@ -1,8 +1,12 @@
-import { FC, useEffect } from 'react';
+import { FC, FunctionComponent, SVGProps, useEffect } from 'react';
 import { ViewTabs, ViewTab } from './ViewTabs';
 import { useAppSelector } from '$app/stores/store';
 import { useTranslation } from 'react-i18next';
 import AddViewBtn from '$app/components/database/components/tab_bar/AddViewBtn';
+import { ViewLayoutPB } from '@/services/backend';
+import { ReactComponent as GridSvg } from '$app/assets/grid.svg';
+import { ReactComponent as BoardSvg } from '$app/assets/board.svg';
+import { ReactComponent as DocumentSvg } from '$app/assets/document.svg';
 
 export interface DatabaseTabBarProps {
   childViewIds: string[];
@@ -11,6 +15,15 @@ export interface DatabaseTabBarProps {
   pageId: string;
 }
 
+const DatabaseIcons: {
+  [key in ViewLayoutPB]: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>;
+} = {
+  [ViewLayoutPB.Document]: DocumentSvg,
+  [ViewLayoutPB.Grid]: GridSvg,
+  [ViewLayoutPB.Board]: BoardSvg,
+  [ViewLayoutPB.Calendar]: GridSvg,
+};
+
 export const DatabaseTabBar: FC<DatabaseTabBarProps> = ({ pageId, childViewIds, selectedViewId, setSelectedViewId }) => {
   const { t } = useTranslation();
   const views = useAppSelector((state) => {
@@ -33,16 +46,20 @@ export const DatabaseTabBar: FC<DatabaseTabBarProps> = ({ pageId, childViewIds,
     <div className='-mb-px flex items-center border-b border-line-divider'>
       <div className='flex flex-1 items-center'>
         <ViewTabs value={selectedViewId} onChange={handleChange}>
-          {views.map((view) => (
-            <ViewTab
-              key={view.id}
-              icon={undefined}
-              iconPosition='start'
-              color='inherit'
-              label={view.name || t('grid.title.placeholder')}
-              value={view.id}
-            />
-          ))}
+          {views.map((view) => {
+            const Icon = DatabaseIcons[view.layout];
+
+            return (
+              <ViewTab
+                key={view.id}
+                icon={<Icon />}
+                iconPosition='start'
+                color='inherit'
+                label={view.name || t('grid.title.placeholder')}
+                value={view.id}
+              />
+            );
+          })}
         </ViewTabs>
         <AddViewBtn pageId={pageId} />
       </div>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/GridCalculate.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/GridCalculate.tsx
new file mode 100644
index 0000000000..ecb591955f
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/GridCalculate.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useDatabase } from '$app/components/database';
+import { Field } from '$app/components/database/application';
+import { DEFAULT_FIELD_WIDTH } from '$app/components/database/grid/GridRow';
+
+interface Props {
+  field: Field;
+  index: number;
+}
+
+function GridCalculate({ field, index }: Props) {
+  const { rowMetas } = useDatabase();
+  const count = rowMetas.length;
+  const width = field.width ?? DEFAULT_FIELD_WIDTH;
+
+  return (
+    <div
+      style={{
+        width,
+        visibility: index === 0 ? 'visible' : 'hidden',
+      }}
+      className={'flex justify-end'}
+    >
+      <span className={'mr-2 text-text-caption'}>Count</span>
+      <span>{count}</span>
+    </div>
+  );
+}
+
+export default GridCalculate;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/index.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/index.ts
new file mode 100644
index 0000000000..2bd3b71b1e
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridCalculate/index.ts
@@ -0,0 +1 @@
+export * from './GridCalculate';
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridField.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridField.tsx
index a63061b87c..c60cccc95c 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridField.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridField.tsx
@@ -7,6 +7,8 @@ import { fieldService, Field } from '../../application';
 import { useDatabase } from '../../Database.hooks';
 import { FieldTypeSvg } from './FieldTypeSvg';
 import { GridFieldMenu } from './GridFieldMenu';
+import GridResizer from '$app/components/database/grid/GridField/GridResizer';
+import { DEFAULT_FIELD_WIDTH } from '$app/components/database/grid/GridRow';
 
 export interface GridFieldProps {
   field: Field;
@@ -18,6 +20,7 @@ export const GridField: FC<GridFieldProps> = ({ field }) => {
   const [openMenu, setOpenMenu] = useState(false);
   const [openTooltip, setOpenTooltip] = useState(false);
   const [dropPosition, setDropPosition] = useState<DropPosition>(DropPosition.Before);
+  const [fieldWidth, setFieldWidth] = useState(field.width || DEFAULT_FIELD_WIDTH);
 
   const handleClick = useCallback(() => {
     setOpenMenu(true);
@@ -89,7 +92,12 @@ export const GridField: FC<GridFieldProps> = ({ field }) => {
   });
 
   return (
-    <>
+    <div
+      className={'flex border-r border-line-divider'}
+      style={{
+        width: fieldWidth,
+      }}
+    >
       <Tooltip
         open={openTooltip && !isDragging}
         title={field.name}
@@ -104,6 +112,11 @@ export const GridField: FC<GridFieldProps> = ({ field }) => {
           ref={setPreviewRef}
           className='relative flex w-full items-center px-2'
           disableRipple
+          onContextMenu={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            handleClick();
+          }}
           onClick={handleClick}
           {...attributes}
           {...listeners}
@@ -118,11 +131,12 @@ export const GridField: FC<GridFieldProps> = ({ field }) => {
               }`}
             />
           )}
+          <GridResizer field={field} onWidthChange={(width) => setFieldWidth(width)} />
         </Button>
       </Tooltip>
       {openMenu && (
         <GridFieldMenu field={field} open={openMenu} anchorEl={previewRef.current} onClose={handleMenuClose} />
       )}
-    </>
+    </div>
   );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenu.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenu.tsx
index 1d7202fc3b..e531d7a8e0 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenu.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenu.tsx
@@ -7,20 +7,14 @@ import { FieldTypeSvg } from './FieldTypeSvg';
 import { FieldTypeText } from './FieldTypeText';
 import { GridFieldMenuActions } from './GridFieldMenuActions';
 
-
 export interface GridFieldMenuProps {
   field: Field;
   anchorEl: MenuProps['anchorEl'];
   open: boolean;
-  onClose: MenuProps['onClose'];
+  onClose: () => void;
 }
 
-export const GridFieldMenu: FC<GridFieldMenuProps> = ({
-  field,
-  anchorEl,
-  open,
-  onClose,
-}) => {
+export const GridFieldMenu: FC<GridFieldMenuProps> = ({ field, anchorEl, open, onClose }) => {
   const viewId = useViewId();
   const [inputtingName, setInputtingName] = useState(field.name);
 
@@ -43,8 +37,8 @@ export const GridFieldMenu: FC<GridFieldMenuProps> = ({
 
   const fieldNameInput = (
     <OutlinedInput
-      className="mx-3 mt-1 mb-5 !rounded-[10px]"
-      size="small"
+      className='mx-3 mb-5 mt-1 !rounded-[10px]'
+      size='small'
       value={inputtingName}
       onChange={handleInput}
       onBlur={handleBlur}
@@ -53,24 +47,27 @@ export const GridFieldMenu: FC<GridFieldMenuProps> = ({
 
   const fieldTypeSelect = (
     <MenuItem dense>
-      <FieldTypeSvg type={field.type} className="text-base mr-2" />
-      <span className="flex-1 text-xs font-medium">
-        {FieldTypeText(field.type)}
-      </span>
-      <MoreSvg className="text-base" />
+      <FieldTypeSvg type={field.type} className='mr-2 text-base' />
+      <span className='flex-1 text-xs font-medium'>{FieldTypeText(field.type)}</span>
+      <MoreSvg className='text-base' />
     </MenuItem>
   );
 
+  const isPrimary = field.isPrimary;
+
   return (
-    <Menu
-      anchorEl={anchorEl}
-      open={open}
-      onClose={onClose}
-    >
-      {fieldNameInput}
-      {fieldTypeSelect}
-      <Divider />
-      <GridFieldMenuActions />
-    </Menu>
+    <>
+      <Menu anchorEl={anchorEl} open={open} onClose={onClose}>
+        {fieldNameInput}
+        {!isPrimary && (
+          <>
+            {fieldTypeSelect}
+            <Divider />
+          </>
+        )}
+
+        <GridFieldMenuActions isPrimary={isPrimary} onMenuItemClick={() => onClose()} fieldId={field.id} />
+      </Menu>
+    </>
   );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenuActions.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenuActions.tsx
index 26a4f27c15..85c29b668b 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenuActions.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridFieldMenuActions.tsx
@@ -6,6 +6,11 @@ import { ReactComponent as CopySvg } from '$app/assets/copy.svg';
 import { ReactComponent as DeleteSvg } from '$app/assets/delete.svg';
 import { ReactComponent as LeftSvg } from '$app/assets/left.svg';
 import { ReactComponent as RightSvg } from '$app/assets/right.svg';
+import { fieldService } from '$app/components/database/application';
+import { FieldVisibility } from '@/services/backend';
+import { useViewId } from '$app/hooks';
+import ConfirmDialog from '$app/components/_shared/app-dialog/ConfirmDialog';
+import { useState } from 'react';
 
 enum FieldAction {
   Hide = 'hide',
@@ -25,26 +30,79 @@ const FieldActionSvgMap = {
 
 const TwoColumnActions: FieldAction[][] = [
   [FieldAction.Hide, FieldAction.Duplicate, FieldAction.Delete],
-  [FieldAction.InsertLeft, FieldAction.InsertRight],
+  // [FieldAction.InsertLeft, FieldAction.InsertRight],
 ];
 
-export const GridFieldMenuActions = () => {
+// prevent default actions for primary fields
+const primaryPreventDefaultActions = [FieldAction.Delete, FieldAction.Duplicate];
+
+interface GridFieldMenuActionsProps {
+  fieldId: string;
+  isPrimary?: boolean;
+  onMenuItemClick?: (action: FieldAction) => void;
+}
+
+export const GridFieldMenuActions = ({ fieldId, onMenuItemClick, isPrimary }: GridFieldMenuActionsProps) => {
+  const viewId = useViewId();
+  const [openConfirm, setOpenConfirm] = useState(false);
+
+  const handleOpenConfirm = () => {
+    setOpenConfirm(true);
+  };
+
+  const handleMenuItemClick = async (action: FieldAction) => {
+    const preventDefault = isPrimary && primaryPreventDefaultActions.includes(action);
+
+    if (preventDefault) {
+      return;
+    }
+
+    switch (action) {
+      case FieldAction.Hide:
+        await fieldService.updateFieldSetting(viewId, fieldId, {
+          visibility: FieldVisibility.AlwaysHidden,
+        });
+        break;
+      case FieldAction.Duplicate:
+        await fieldService.duplicateField(viewId, fieldId);
+        break;
+      case FieldAction.Delete:
+        handleOpenConfirm();
+        return;
+    }
+
+    onMenuItemClick?.(action);
+  };
+
   return (
-    <Grid container spacing={2}>
+    <Grid container columns={TwoColumnActions.length} spacing={2}>
       {TwoColumnActions.map((column, index) => (
         <Grid key={index} item xs={6}>
-          {column.map(action => {
+          {column.map((action) => {
             const ActionSvg = FieldActionSvgMap[action];
+            const disabled = isPrimary && primaryPreventDefaultActions.includes(action);
 
             return (
-              <MenuItem key={action} dense>
-                <ActionSvg className="mr-2 text-base" />
+              <MenuItem disabled={disabled} onClick={() => handleMenuItemClick(action)} key={action} dense>
+                <ActionSvg className='mr-2 text-base' />
                 {t(`grid.field.${action}`)}
               </MenuItem>
             );
           })}
         </Grid>
       ))}
+      <ConfirmDialog
+        open={openConfirm}
+        subtitle={''}
+        title={t('grid.field.deleteFieldPromptMessage')}
+        onOk={async () => {
+          await fieldService.deleteField(viewId, fieldId);
+        }}
+        onClose={() => {
+          setOpenConfirm(false);
+          onMenuItemClick?.(FieldAction.Delete);
+        }}
+      />
     </Grid>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridResizer.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridResizer.tsx
new file mode 100644
index 0000000000..6a834b6fab
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridResizer.tsx
@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Field, fieldService } from '$app/components/database/application';
+import { useViewId } from '$app/hooks';
+
+interface GridResizerProps {
+  field: Field;
+  onWidthChange?: (width: number) => void;
+}
+
+const minWidth = 100;
+
+function GridResizer({ field, onWidthChange }: GridResizerProps) {
+  const viewId = useViewId();
+  const fieldId = field.id;
+  const width = field.width || 0;
+  const [isResizing, setIsResizing] = useState(false);
+  const [newWidth, setNewWidth] = useState(width);
+  const [hover, setHover] = useState(false);
+  const startX = useRef(0);
+
+  const onResize = useCallback(
+    (e: MouseEvent) => {
+      const diff = e.clientX - startX.current;
+      const newWidth = width + diff;
+
+      if (newWidth < minWidth) {
+        return;
+      }
+
+      setNewWidth(newWidth);
+    },
+    [width]
+  );
+
+  useEffect(() => {
+    onWidthChange?.(newWidth);
+  }, [newWidth, onWidthChange]);
+
+  useEffect(() => {
+    if (!isResizing && width !== newWidth) {
+      void fieldService.updateFieldSetting(viewId, fieldId, {
+        width: newWidth,
+      });
+    }
+  }, [fieldId, isResizing, newWidth, viewId, width]);
+
+  const onResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    document.removeEventListener('mousemove', onResize);
+    document.removeEventListener('mouseup', onResizeEnd);
+  }, [onResize]);
+
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      startX.current = e.clientX;
+      setIsResizing(true);
+      document.addEventListener('mousemove', onResize);
+      document.addEventListener('mouseup', onResizeEnd);
+    },
+    [onResize, onResizeEnd]
+  );
+
+  return (
+    <div
+      onMouseDown={onResizeStart}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      onMouseEnter={() => {
+        setHover(true);
+      }}
+      onMouseLeave={() => {
+        setHover(false);
+      }}
+      style={{
+        right: `-3px`,
+      }}
+      className={'absolute top-0 z-10 h-full cursor-col-resize'}
+    >
+      <div
+        className={'h-full w-[6px] select-none bg-transparent'}
+        style={{
+          backgroundColor: hover || isResizing ? 'var(--content-on-fill-hover)' : 'transparent',
+        }}
+      ></div>
+    </div>
+  );
+}
+
+export default GridResizer;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCalculateRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCalculateRow.tsx
index 871958e74e..cd4c5a53f9 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCalculateRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCalculateRow.tsx
@@ -1,3 +1,17 @@
-export const GridCalculateRow = () => {
-  return null;
-};
+import React from 'react';
+import { useDatabaseVisibilityFields } from '$app/components/database';
+import GridCalculate from '$app/components/database/grid/GridCalculate/GridCalculate';
+
+function GridCalculateRow() {
+  const fields = useDatabaseVisibilityFields();
+
+  return (
+    <div className='flex grow items-center'>
+      {fields.map((field, index) => {
+        return <GridCalculate index={index} key={field.id} field={field} />;
+      })}
+    </div>
+  );
+}
+
+export default GridCalculateRow;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.hooks.ts
index 87d65ba0eb..0b564e703d 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.hooks.ts
@@ -14,6 +14,12 @@ export function useGridRowActionsDisplay(rowId: string, ref: React.RefObject<HTM
     setRowHover(rowId);
   }, [setRowHover, rowId]);
 
+  const onMouseLeave = useCallback(() => {
+    if (hover) {
+      setRowHover(null);
+    }
+  }, [setRowHover, hover]);
+
   useEffect(() => {
     // Next frame to avoid layout thrashing
     requestAnimationFrame(() => {
@@ -37,6 +43,7 @@ export function useGridRowActionsDisplay(rowId: string, ref: React.RefObject<HTM
   return {
     actionsStyle,
     onMouseEnter,
+    onMouseLeave,
     hover,
   };
 }
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.tsx
index cc9e913a96..04da0dcf51 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridCellRow/GridCellRow.tsx
@@ -3,7 +3,7 @@ import { Portal } from '@mui/material';
 import { DragEventHandler, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { throttle } from '$app/utils/tool';
 import { useViewId } from '$app/hooks';
-import { useDatabase } from '../../../Database.hooks';
+import { useDatabaseVisibilityFields } from '../../../Database.hooks';
 import { rowService, RowMeta } from '../../../application';
 import {
   DragItem,
@@ -21,6 +21,7 @@ import {
   useGridRowContextMenu,
 } from '$app/components/database/grid/GridRow/GridCellRow/GridCellRow.hooks';
 import GridCellRowContextMenu from '$app/components/database/grid/GridRow/GridCellRow/GridCellRowContextMenu';
+import { DEFAULT_FIELD_WIDTH } from '$app/components/database/grid/GridRow';
 
 export interface GridCellRowProps {
   rowMeta: RowMeta;
@@ -32,14 +33,14 @@ export const GridCellRow: FC<GridCellRowProps> = ({ rowMeta, virtualizer, getPre
   const rowId = rowMeta.id;
   const viewId = useViewId();
   const ref = useRef<HTMLDivElement | null>(null);
-  const { onMouseEnter, actionsStyle, hover } = useGridRowActionsDisplay(rowId, ref);
+  const { onMouseLeave, onMouseEnter, actionsStyle, hover } = useGridRowActionsDisplay(rowId, ref);
   const {
     isContextMenuOpen,
     closeContextMenu,
     openContextMenu,
     position: contextMenuPosition,
   } = useGridRowContextMenu();
-  const { fields } = useDatabase();
+  const fields = useDatabaseVisibilityFields();
 
   const [dropPosition, setDropPosition] = useState<DropPosition>(DropPosition.Before);
   const dragData = useMemo(
@@ -106,7 +107,7 @@ export const GridCellRow: FC<GridCellRowProps> = ({ rowMeta, virtualizer, getPre
   }, [openContextMenu]);
 
   return (
-    <div ref={ref} className='flex grow' onMouseEnter={onMouseEnter} {...dropListeners}>
+    <div ref={ref} className='flex grow' onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} {...dropListeners}>
       <div
         ref={setPreviewRef}
         className={`relative flex grow border-b border-line-divider ${isDragging ? 'bg-blue-50' : ''}`}
@@ -117,7 +118,7 @@ export const GridCellRow: FC<GridCellRowProps> = ({ rowMeta, virtualizer, getPre
           virtualizer={virtualizer}
           renderItem={(index) => <GridCell rowId={rowMeta.id} field={fields[index]} />}
         />
-        <div className='min-w-20 grow' />
+        <div className={`w-[${DEFAULT_FIELD_WIDTH}px]`} />
         {isOver && (
           <div
             className={`absolute left-0 right-0 z-10 h-0.5 bg-blue-500 ${
@@ -137,13 +138,15 @@ export const GridCellRow: FC<GridCellRowProps> = ({ rowMeta, virtualizer, getPre
           rowId={rowMeta.id}
           getPrevRowId={getPrevRowId}
         />
-        <GridCellRowContextMenu
-          open={isContextMenuOpen}
-          onClose={closeContextMenu}
-          anchorPosition={contextMenuPosition}
-          rowId={rowId}
-          getPrevRowId={getPrevRowId}
-        />
+        {isContextMenuOpen && (
+          <GridCellRowContextMenu
+            open={isContextMenuOpen}
+            onClose={closeContextMenu}
+            anchorPosition={contextMenuPosition}
+            rowId={rowId}
+            getPrevRowId={getPrevRowId}
+          />
+        )}
       </Portal>
     </div>
   );
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridFieldRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridFieldRow.tsx
index dc819e4ab8..a64de4a15e 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridFieldRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridFieldRow.tsx
@@ -1,36 +1,31 @@
-import { Virtualizer } from '@tanstack/react-virtual';
-import { FC } from 'react';
 import { Button } from '@mui/material';
 import { FieldType } from '@/services/backend';
 import { ReactComponent as AddSvg } from '$app/assets/add.svg';
 import { fieldService } from '../../application';
-import { useDatabase } from '../../Database.hooks';
-import { VirtualizedList } from '../../_shared';
+import { useDatabaseVisibilityFields } from '../../Database.hooks';
 import { GridField } from '../GridField';
 import { useViewId } from '@/appflowy_app/hooks';
 import { useTranslation } from 'react-i18next';
+import { DEFAULT_FIELD_WIDTH } from '$app/components/database/grid/GridRow/constants';
 
-export interface GridFieldRowProps {
-  virtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
-}
-
-export const GridFieldRow: FC<GridFieldRowProps> = ({ virtualizer }) => {
+export const GridFieldRow = () => {
   const { t } = useTranslation();
   const viewId = useViewId();
-  const { fields } = useDatabase();
+  const fields = useDatabaseVisibilityFields();
+
   const handleClick = async () => {
     await fieldService.createField(viewId, FieldType.RichText);
   };
 
   return (
     <div className='z-10 flex border-b border-line-divider'>
-      <VirtualizedList
-        className='flex'
-        virtualizer={virtualizer}
-        itemClassName='flex border-r border-line-divider'
-        renderItem={(index) => <GridField field={fields[index]} />}
-      />
-      <div className='min-w-20 grow'>
+      <div className={'flex'}>
+        {fields.map((field) => {
+          return <GridField key={field.id} field={field} />;
+        })}
+      </div>
+
+      <div className={`w-[${DEFAULT_FIELD_WIDTH}px]`}>
         <Button
           color={'inherit'}
           className='flex h-full w-full items-center justify-start whitespace-nowrap text-left'
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridRow.tsx
index b3e53076e3..b34fe5f2b1 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/GridRow.tsx
@@ -2,9 +2,9 @@ import { Virtualizer } from '@tanstack/react-virtual';
 import { FC } from 'react';
 import { RenderRow, RenderRowType } from './constants';
 import { GridCellRow } from './GridCellRow';
-import { GridFieldRow } from './GridFieldRow';
 import { GridNewRow } from './GridNewRow';
-import { GridCalculateRow } from './GridCalculateRow';
+import { GridFieldRow } from '$app/components/database/grid/GridRow/GridFieldRow';
+import GridCalculateRow from '$app/components/database/grid/GridRow/GridCalculateRow';
 
 export interface GridRowProps {
   row: RenderRow;
@@ -14,13 +14,13 @@ export interface GridRowProps {
 
 export const GridRow: FC<GridRowProps> = ({ row, virtualizer, getPrevRowId }) => {
   switch (row.type) {
+    case RenderRowType.Fields:
+      return <GridFieldRow />;
     case RenderRowType.Row:
       return <GridCellRow rowMeta={row.data.meta} virtualizer={virtualizer} getPrevRowId={getPrevRowId} />;
-    case RenderRowType.Fields:
-      return <GridFieldRow virtualizer={virtualizer} />;
     case RenderRowType.NewRow:
       return <GridNewRow startRowId={row.data.startRowId} groupId={row.data.groupId} />;
-    case RenderRowType.Calculate:
+    case RenderRowType.CalculateRow:
       return <GridCalculateRow />;
     default:
       return null;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/constants.ts b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/constants.ts
index 2bb6137d1d..ba0b0ea966 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/constants.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridRow/constants.ts
@@ -1,10 +1,18 @@
 import { RowMeta } from '../../application';
 
+export const GridCalculateCountHeight = 40;
+
+export const DEFAULT_FIELD_WIDTH = 150;
+
 export enum RenderRowType {
   Fields = 'fields',
   Row = 'row',
   NewRow = 'new-row',
-  Calculate = 'calculate',
+  CalculateRow = 'calculate-row',
+}
+
+export interface CalculateRenderRow {
+  type: RenderRowType.CalculateRow;
 }
 
 export interface FieldRenderRow {
@@ -26,10 +34,6 @@ export interface NewRenderRow {
   };
 }
 
-export interface CalculateRenderRow {
-  type: RenderRowType.Calculate;
-}
-
 export type RenderRow = FieldRenderRow | CellRenderRow | NewRenderRow | CalculateRenderRow;
 
 export const rowMetasToRenderRow = (rowMetas: RowMeta[]): RenderRow[] => {
@@ -50,7 +54,7 @@ export const rowMetasToRenderRow = (rowMetas: RowMeta[]): RenderRow[] => {
       },
     },
     {
-      type: RenderRowType.Calculate,
+      type: RenderRowType.CalculateRow,
     },
   ];
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridTable/GridTable.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridTable/GridTable.tsx
index 84b8dcd513..5a5d7cfeb6 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridTable/GridTable.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridTable/GridTable.tsx
@@ -1,9 +1,9 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { FC, useMemo, useRef } from 'react';
 import { RowMeta } from '../../application';
-import { useDatabase } from '../../Database.hooks';
+import { useDatabase, useDatabaseVisibilityFields } from '../../Database.hooks';
 import { VirtualizedList } from '../../_shared';
-import { GridRow, RenderRow, RenderRowType, rowMetasToRenderRow } from '../GridRow';
+import { DEFAULT_FIELD_WIDTH, GridRow, RenderRow, RenderRowType, rowMetasToRenderRow } from '../GridRow';
 
 const getRenderRowKey = (row: RenderRow) => {
   if (row.type === RenderRowType.Row) {
@@ -16,9 +16,9 @@ const getRenderRowKey = (row: RenderRow) => {
 export const GridTable: FC<{ tableHeight: number }> = ({ tableHeight }) => {
   const verticalScrollElementRef = useRef<HTMLDivElement | null>(null);
   const horizontalScrollElementRef = useRef<HTMLDivElement | null>(null);
-  const { rowMetas, fields } = useDatabase();
+  const { rowMetas } = useDatabase();
   const renderRows = useMemo<RenderRow[]>(() => rowMetasToRenderRow(rowMetas as RowMeta[]), [rowMetas]);
-
+  const fields = useDatabaseVisibilityFields();
   const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLDivElement>({
     count: renderRows.length,
     overscan: 20,
@@ -33,7 +33,9 @@ export const GridTable: FC<{ tableHeight: number }> = ({ tableHeight }) => {
     overscan: 5,
     getItemKey: (i) => fields[i].id,
     getScrollElement: () => horizontalScrollElementRef.current,
-    estimateSize: (i) => fields[i].width ?? 201,
+    estimateSize: (i) => {
+      return fields[i].width ?? DEFAULT_FIELD_WIDTH;
+    },
   });
 
   const getPrevRowId = (id: string) => {
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/index.tsx
index eea05bb50c..907c671c7b 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/index.tsx
@@ -8,7 +8,7 @@ import { useSelection } from '$app/components/document/_shared/EditorHooks/useSe
 import { useAppSelector } from '$app/stores/store';
 import { ThemeMode } from '$app/interfaces';
 
-export default function CodeBlock({
+export default React.memo(function CodeBlock({
   node,
   placeholder,
   ...props
@@ -40,4 +40,4 @@ export default function CodeBlock({
       />
     </div>
   );
-}
+});
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/EquationBlock/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/EquationBlock/index.tsx
index 8532aaa511..489a7aa641 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/EquationBlock/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/EquationBlock/index.tsx
@@ -84,4 +84,4 @@ function EquationBlock({ node }: { node: NestedBlock<BlockType.EquationBlock> })
   );
 }
 
-export default EquationBlock;
+export default React.memo(EquationBlock);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/GridBlock/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/GridBlock/index.tsx
index 1f689943b5..d3c9d10dc1 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/GridBlock/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/GridBlock/index.tsx
@@ -33,4 +33,4 @@ function GridBlock({ node }: { node: NestedBlock<BlockType.GridBlock> }) {
   );
 }
 
-export default GridBlock;
+export default React.memo(GridBlock);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/ImageBlock/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/ImageBlock/index.tsx
index b497989eb3..aff3cf4bc6 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/ImageBlock/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/ImageBlock/index.tsx
@@ -77,4 +77,4 @@ function ImageBlock({ node }: { node: NestedBlock<BlockType.ImageBlock> }) {
   );
 }
 
-export default ImageBlock;
+export default React.memo(ImageBlock);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/NodeChildren.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/NodeChildren.tsx
index 7b9978cda7..c134058dba 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/NodeChildren.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/NodeChildren.tsx
@@ -11,4 +11,4 @@ function NodeChildren({ childIds, ...props }: { childIds?: string[] } & React.HT
   ) : null;
 }
 
-export default NodeChildren;
+export default React.memo(NodeChildren);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx
index 46f394a6be..3dc5f6c50b 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx
@@ -96,7 +96,7 @@ function NodeComponent({ id, ...props }: { id: string } & React.HTMLAttributes<H
   );
 }
 
-const NodeWithErrorBoundary = withErrorBoundary(NodeComponent, {
+const NodeWithErrorBoundary = withErrorBoundary(React.memo(NodeComponent), {
   FallbackComponent: ErrorBoundaryFallbackComponent,
 });
 
@@ -110,4 +110,4 @@ const UnSupportedBlock = () => {
   );
 };
 
-export default React.memo(NodeWithErrorBoundary);
+export default NodeWithErrorBoundary;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/Root/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/Root/index.tsx
index 23b9e6720c..d8683e4d55 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/Root/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/Root/index.tsx
@@ -27,8 +27,8 @@ function Root({ documentData }: { documentData: DocumentData }) {
   );
 }
 
-const RootWithErrorBoundary = withErrorBoundary(Root, {
+const RootWithErrorBoundary = withErrorBoundary(React.memo(Root), {
   FallbackComponent: ErrorBoundaryFallbackComponent,
 });
 
-export default React.memo(RootWithErrorBoundary);
+export default RootWithErrorBoundary;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/hooks/notification.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/hooks/notification.hooks.ts
index 5c1efe43db..73edd70594 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/hooks/notification.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/hooks/notification.hooks.ts
@@ -14,6 +14,7 @@ import {
   RowsChangePB,
   RowsVisibilityChangePB,
   SortChangesetNotificationPB,
+  FieldSettingsPB,
 } from '@/services/backend';
 
 const NotificationPBMap = {
@@ -28,6 +29,7 @@ const NotificationPBMap = {
   [DatabaseNotification.DidUpdateField]: FieldPB,
   [DatabaseNotification.DidUpdateCell]: null,
   [DatabaseNotification.DidUpdateSort]: SortChangesetNotificationPB,
+  [DatabaseNotification.DidUpdateFieldSettings]: FieldSettingsPB,
 };
 
 type NotificationMap = typeof NotificationPBMap;