diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a6181ed0ec..82f606357e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,7 @@
         "@seafile/sdoc-editor": "1.0.29",
         "@seafile/seafile-calendar": "0.0.12",
         "@seafile/seafile-editor": "1.0.105",
-        "@seafile/sf-metadata-ui-component": "0.0.11",
+        "@seafile/sf-metadata-ui-component": "0.0.12",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
         "@uiw/react-codemirror": "^4.19.4",
         "chart.js": "2.9.4",
@@ -4971,9 +4971,9 @@
       }
     },
     "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.11.tgz",
-      "integrity": "sha512-9mZEusTyIuUiLkkQVRCdIt9/SIZSIUqU64WHgWz31kKgFjEi59Q5pgRGYCxynq1D8/G3SAZ4/pYULoj9A3MbLQ==",
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.12.tgz",
+      "integrity": "sha512-GJrOSBNWJyimy/Kj/H35hwAPh2FmiJ0nsCEuqDFPtih8lbp65DrRjYx/FE/RzIyCdqIVk3xtnubprNoT9PKEiw==",
       "dependencies": {
         "@seafile/seafile-calendar": "0.0.24",
         "classnames": "2.3.2",
@@ -32200,9 +32200,9 @@
       }
     },
     "@seafile/sf-metadata-ui-component": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.11.tgz",
-      "integrity": "sha512-9mZEusTyIuUiLkkQVRCdIt9/SIZSIUqU64WHgWz31kKgFjEi59Q5pgRGYCxynq1D8/G3SAZ4/pYULoj9A3MbLQ==",
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.12.tgz",
+      "integrity": "sha512-GJrOSBNWJyimy/Kj/H35hwAPh2FmiJ0nsCEuqDFPtih8lbp65DrRjYx/FE/RzIyCdqIVk3xtnubprNoT9PKEiw==",
       "requires": {
         "@seafile/seafile-calendar": "0.0.24",
         "classnames": "2.3.2",
diff --git a/frontend/package.json b/frontend/package.json
index f6508ecc49..56d089f89e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.29",
     "@seafile/seafile-calendar": "0.0.12",
     "@seafile/seafile-editor": "1.0.105",
-    "@seafile/sf-metadata-ui-component": "0.0.11",
+    "@seafile/sf-metadata-ui-component": "0.0.12",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/react-codemirror": "^4.19.4",
     "chart.js": "2.9.4",
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/index.js
index 412abbcb17..ee1c432677 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import NormalEditorContainer from './normal';
 import PopupEditorContainer from './popup';
+import PreviewEditorContainer from './preview';
 import { CellType } from '../../../_basic';
 
 const POPUP_EDITOR_COLUMN_TYPES = [
@@ -11,12 +12,20 @@ const POPUP_EDITOR_COLUMN_TYPES = [
   CellType.LONG_TEXT,
 ];
 
+const PREVIEW_EDITOR_COLUMN_TYPES = [
+  CellType.FILE_NAME,
+];
+
 const EditorContainer = (props) => {
   const { column } = props;
   if (!column) return null;
   if (POPUP_EDITOR_COLUMN_TYPES.includes(column.type)) {
     return (<PopupEditorContainer { ...props } />);
   }
+
+  if (PREVIEW_EDITOR_COLUMN_TYPES.includes(column.type)) {
+    return (<PreviewEditorContainer { ...props } />);
+  }
   return (<NormalEditorContainer { ...props } />);
 };
 
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/preview.js b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/preview.js
new file mode 100644
index 0000000000..96b2ce7d36
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/preview.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Editor from '../editor';
+
+const PreviewEditorContainer = (props) => {
+  return (<Editor { ...props } />);
+};
+
+export default PreviewEditorContainer;
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/editor.js b/frontend/src/metadata/metadata-view/components/cell-editor/editor.js
index 8953c27718..96ee8bc347 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/editor.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/editor.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Calendar } from '@seafile/sf-metadata-ui-component';
+import { SfCalendar } from '@seafile/sf-metadata-ui-component';
 import { CellType } from '../../_basic';
 import FileNameEditor from './file-name-editor';
 import TextEditor from './text-editor';
@@ -15,8 +15,12 @@ const Editor = React.forwardRef((props, ref) => {
     case CellType.TEXT: {
       return (<TextEditor ref={ref} {...props} />);
     }
+    case CellType.DATE: {
+      const lang = window.sfMetadataContext.getSetting('lang');
+      return (<SfCalendar ref={ref} {...props} lang={lang} />);
+    }
     default: {
-      return (<Calendar ref={ref} {...props} />);
+      return null;
     }
   }
 });
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-calendar.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-calendar.js
index 55560ea11b..b3e8c4349d 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-calendar.js
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-calendar.js
@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Calendar } from '@seafile/sf-metadata-ui-component';
+import { SfFilterCalendar } from '@seafile/sf-metadata-ui-component';
 import { getDateColumnFormat } from '../../../../utils/column-utils';
 
 const FilterCalendar = ({ value, filterColumn, isReadOnly, onChange }) => {
   const format = getDateColumnFormat(filterColumn).trim();
   const lang = window.sfMetadataContext.getSetting('lang');
   return (
-    <Calendar
+    <SfFilterCalendar
       isReadOnly={isReadOnly}
       format={format}
       lang={lang}
       value={value}
       onChange={onChange}
+      zIndex={1061}
     />
   );
 };
diff --git a/frontend/src/metadata/metadata-view/store/index.js b/frontend/src/metadata/metadata-view/store/index.js
index 632a9a7609..c147e753a6 100644
--- a/frontend/src/metadata/metadata-view/store/index.js
+++ b/frontend/src/metadata/metadata-view/store/index.js
@@ -7,7 +7,7 @@ import { Operation, LOCAL_APPLY_OPERATION_TYPE, NEED_APPLY_AFTER_SERVER_OPERATIO
 import { EVENT_BUS_TYPE, PER_LOAD_NUMBER } from '../constants';
 import DataProcessor from './data-processor';
 import ServerOperator from './server-operator';
-import { getColumns } from '../utils/column-utils';
+import { normalizeColumns } from '../utils/column-utils';
 import { Metadata, User } from '../model';
 
 class Store {
@@ -41,7 +41,7 @@ class Store {
     const res = await this.context.getMetadata({ start: this.startIndex, limit });
     const view = this.context.localStorage.getItem('view');
     const rows = res?.data?.results || [];
-    const columns = getColumns(res?.data?.metadata);
+    const columns = normalizeColumns(res?.data?.metadata);
     let data = new Metadata({ rows, columns, view });
     data.view.rows = data.row_ids;
     const loadedCount = rows.length;
diff --git a/frontend/src/metadata/metadata-view/utils/column-utils.js b/frontend/src/metadata/metadata-view/utils/column-utils.js
index eb736501f8..4877c2796a 100644
--- a/frontend/src/metadata/metadata-view/utils/column-utils.js
+++ b/frontend/src/metadata/metadata-view/utils/column-utils.js
@@ -3,6 +3,7 @@ import {
   DEFAULT_DATE_FORMAT,
   PRIVATE_COLUMN_KEY,
   NOT_DISPLAY_COLUMN_KEYS,
+  PRIVATE_COLUMN_KEYS,
 } from '../_basic';
 import {
   SEQUENCE_COLUMN_WIDTH
@@ -240,7 +241,8 @@ const getColumnType = (key, type) => {
   }
 };
 
-const getFileTypeColumnData = (data) => {
+const getFileTypeColumnData = (column) => {
+  const { data } = column;
   const _OPTIONS = {
     '_picture': { name: gettext('Picture'), color: '#FFFCB5', textColor: '#202428', id: '_picture' },
     '_document': { name: gettext('Document'), color: '#B7CEF9', textColor: '#202428', id: '_document' },
@@ -251,15 +253,45 @@ const getFileTypeColumnData = (data) => {
   let newData = { ...data };
   newData.options = Array.isArray(newData.options) ? newData.options.map(o => {
     return { ..._OPTIONS[o.name] };
-  }) : [];
+  }) : Object.keys(_OPTIONS);
   return newData;
 };
 
-export const getColumns = (columns) => {
+const getFileStatusColumnData = (column) => {
+  const { data } = column;
+  const _OPTIONS = {
+    '_draft': { name: gettext('Draft'), color: '#EED5FF', textColor: '#202428', id: '_draft' },
+    '_in_review': { name: gettext('In review'), color: '#FFFDCF', textColor: '#202428', id: '_in_review' },
+    '_done': { name: gettext('Done'), color: '#59CB74', textColor: '#FFFFFF', borderColor: '#844BD2', id: '_done' },
+  };
+
+  let newData = { ...data };
+  newData.options = Array.isArray(newData.options) ? newData.options.map(o => {
+    return { ..._OPTIONS[o.name] };
+  }) : Object.keys(_OPTIONS);
+  return newData;
+};
+
+const normalizeColumnData = (column) => {
+  const { key, data } = column;
+  if (PRIVATE_COLUMN_KEYS.includes(key)) {
+    if (key === PRIVATE_COLUMN_KEY.FILE_TYPE) return getFileTypeColumnData(column);
+    if (key === PRIVATE_COLUMN_KEY.FILE_STATUS) return getFileStatusColumnData(column);
+  }
+  if (column.type === CellType.SINGLE_SELECT) {
+    return { ...data, options: data?.options || [] };
+  }
+  if (column.type === CellType.DATE) {
+    return { ...data, format: data?.format || DEFAULT_DATE_FORMAT };
+  }
+  return data;
+};
+
+export const normalizeColumns = (columns) => {
   if (!Array.isArray(columns) || columns.length === 0) return [];
   const columnsWidth = window.sfMetadataContext.localStorage.getItem('columns_width') || {};
   const validColumns = columns.map((column) => {
-    const { type, key, name, data, ...params } = column;
+    const { type, key, name, ...params } = column;
     return {
       ...params,
       key,
@@ -267,7 +299,7 @@ export const getColumns = (columns) => {
       name: getColumnName(key, name),
       width: columnsWidth[key] || 200,
       editable: !key.startsWith('_'),
-      data: key === PRIVATE_COLUMN_KEY.FILE_TYPE ? getFileTypeColumnData(data) : data,
+      data: normalizeColumnData(column)
     };
   }).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));
   let displayColumns = [];