diff --git a/frontend/config/webpack.config.dev.js b/frontend/config/webpack.config.dev.js
index afa1a26b88..ee13de63eb 100644
--- a/frontend/config/webpack.config.dev.js
+++ b/frontend/config/webpack.config.dev.js
@@ -220,7 +220,7 @@ module.exports = {
       paths.appSrc + "/pages/sys-admin",
     ],
     viewDataGrid: [
-      require.resolve('./polyfills'),
+      // require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/view-file-ctable.js",
     ],
diff --git a/frontend/package.json b/frontend/package.json
index 231fad10cc..daf4c78d47 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@reach/router": "^1.2.0",
+    "@seafile/dtable": "0.0.25",
     "@seafile/react-data-grid": "^6.1.5",
     "@seafile/react-data-grid-addons": "^6.1.5",
     "@seafile/resumablejs": "^1.1.9",
@@ -29,15 +30,15 @@
     "prismjs": "^1.15.0",
     "prop-types": "^15.6.2",
     "raf": "3.4.0",
-    "react": "^16.4.2",
+    "react": "^16.8.6",
     "react-codemirror": "^1.0.0",
     "react-cookies": "^0.1.0",
-    "react-dom": "^16.5.2",
+    "react-dom": "^16.8.6",
     "react-image-lightbox": "^5.1.0",
     "react-moment": "^0.7.9",
     "react-responsive": "^6.1.1",
     "react-select": "^2.4.1",
-    "reactstrap": "^6.4.0",
+    "reactstrap": "^8.0.0",
     "seafile-js": "^0.2.91",
     "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
diff --git a/frontend/src/view-file-ctable.js b/frontend/src/view-file-ctable.js
index 0e98a503c1..9f646f0881 100644
--- a/frontend/src/view-file-ctable.js
+++ b/frontend/src/view-file-ctable.js
@@ -1,53 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import AppHeader from './pages/data-grid/app-header';
-import AppMain from './pages/data-grid/app-main';
 import { seafileAPI } from './utils/seafile-api';
-import { Utils } from './utils/utils';
-import { gettext } from './utils/constants';
-import toaster from './components/toast';
-
-import './css/layout.css';
-import './css/file-view-data-grid.css';
-import './css/react-context-menu.css';
-
-const { repoID, fileName, filePath } = window.app.pageOptions;
+import SeafileTable from '@seafile/dtable/lib';
 
 class ViewFileSDB extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      isContentChanged: false,
-    };
-  }
-
-  onContentChanged = () => {
-    this.setState({isContentChanged: true});
-  }
-
-  onSave = () => {
-    this.setState({isContentChanged: false});
-
-    let data = this.refs.data_grid.serializeGridData();
-
-    let dirPath = Utils.getDirName(filePath);
-    seafileAPI.getUpdateLink(repoID, dirPath).then(res => {
-      let updateLink = res.data;
-      seafileAPI.updateFile(updateLink, filePath, fileName, JSON.stringify(data)).then(res => {
-        toaster.success(gettext('File saved.'));
-      }).catch(() => {
-        toaster.success(gettext('File save failed.'));
-      });
-    });
-  }
-
   render() {
     return (
-      <Fragment>
-        <AppHeader onSave={this.onSave} isContentChanged={this.state.isContentChanged} />
-        <AppMain ref="data_grid" onContentChanged={this.onContentChanged} onSave={this.onSave} />
-      </Fragment>
+      <SeafileTable pageOptions={window.app.pageOptions} seafileAPI={seafileAPI}/>
     );
   }
 }