diff --git a/media/css/dtable-font.css b/media/css/dtable-font.css
new file mode 100644
index 0000000000..cabab8d44e
--- /dev/null
+++ b/media/css/dtable-font.css
@@ -0,0 +1,189 @@
+@font-face {font-family: "dtable-font";
+ src: url('./font-dtable/dtable-font.eot?t=1565575243283'); /* IE9 */
+ src: url('./font-dtable/dtable-font.eot?t=1565575243283#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+ url('./font-dtable/dtable-font.woff?t=1565575243283') format('woff'),
+ url('./font-dtable/dtable-font.ttf?t=1565575243283') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+ url('./font-dtable/dtable-font.svg?t=1565575243283#dtable-font') format('svg'); /* iOS 4.1- */
+}
+
+.dtable-font {
+ font-family: "dtable-font" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.dtable-icon-rich-text:before {
+ content: "\e61a";
+}
+
+.dtable-icon-dollar-sign-solid:before {
+ content: "\e61c";
+}
+
+.dtable-icon-number:before {
+ content: "\e61d";
+}
+
+.dtable-icon-file-alt-solid:before {
+ content: "\e620";
+}
+
+.dtable-icon-calendar-alt-solid:before {
+ content: "\e622";
+}
+
+.dtable-icon-drop-down:before {
+ content: "\e624";
+}
+
+.dtable-icon-check-square-solid:before {
+ content: "\e625";
+}
+
+.dtable-icon-rename:before {
+ content: "\e626";
+}
+
+.dtable-icon-delete:before {
+ content: "\e627";
+}
+
+.dtable-icon-single-line-text:before {
+ content: "\e62a";
+}
+
+.dtable-icon-picture:before {
+ content: "\e637";
+}
+
+.dtable-icon-right-slide:before {
+ content: "\e639";
+}
+
+.dtable-icon-left-slide:before {
+ content: "\e63a";
+}
+
+.dtable-icon-open:before {
+ content: "\e63b";
+}
+
+.dtable-icon-download:before {
+ content: "\e63c";
+}
+
+.dtable-icon-drag:before {
+ content: "\e63e";
+}
+
+.dtable-icon-add-files:before {
+ content: "\e640";
+}
+
+.dtable-icon-fork-number:before {
+ content: "\e642";
+}
+
+.dtable-icon-check-mark:before {
+ content: "\e645";
+}
+
+.dtable-icon-return:before {
+ content: "\e646";
+}
+
+.dtable-icon-main-view:before {
+ content: "\e647";
+}
+
+.dtable-icon-sort:before {
+ content: "\e648";
+}
+
+.dtable-icon-single-election:before {
+ content: "\e649";
+}
+
+.dtable-icon-multiple-selection:before {
+ content: "\e64b";
+}
+
+.dtable-icon-long-text:before {
+ content: "\e64c";
+}
+
+.dtable-icon-attachments:before {
+ content: "\e64d";
+}
+
+.dtable-icon-dtable-logo:before {
+ content: "\e652";
+}
+
+.dtable-icon-filter:before {
+ content: "\e655";
+}
+
+.dtable-icon-folder:before {
+ content: "\e658";
+}
+
+.dtable-icon-file:before {
+ content: "\e659";
+}
+
+.dtable-icon-url:before {
+ content: "\e65a";
+}
+
+.dtable-icon-delete-table:before {
+ content: "\e65b";
+}
+
+.dtable-icon-search:before {
+ content: "\e65c";
+}
+
+.dtable-icon-card-view:before {
+ content: "\e65d";
+}
+
+.dtable-icon-more-vertical:before {
+ content: "\e663";
+}
+
+.dtable-icon-more-level:before {
+ content: "\e664";
+}
+
+.dtable-icon-add-square:before {
+ content: "\e667";
+}
+
+.dtable-icon-add-table:before {
+ content: "\e668";
+}
+
+.dtable-icon-add:before {
+ content: "\e669";
+}
+
+.dtable-icon-hide:before {
+ content: "\e66a";
+}
+
+.dtable-icon-switch:before {
+ content: "\e66b";
+}
+
+.dtable-icon-default-avatar:before {
+ content: "\e66c";
+}
+
+.dtable-icon-collaborator:before {
+ content: "\e66d";
+}
+
diff --git a/media/css/font-dtable/dtable-font.eot b/media/css/font-dtable/dtable-font.eot
new file mode 100644
index 0000000000..758abb0186
Binary files /dev/null and b/media/css/font-dtable/dtable-font.eot differ
diff --git a/media/css/font-dtable/dtable-font.svg b/media/css/font-dtable/dtable-font.svg
new file mode 100644
index 0000000000..0d88cfbaa6
--- /dev/null
+++ b/media/css/font-dtable/dtable-font.svg
@@ -0,0 +1,155 @@
+
+
+
+
diff --git a/media/css/font-dtable/dtable-font.ttf b/media/css/font-dtable/dtable-font.ttf
new file mode 100644
index 0000000000..934132c731
Binary files /dev/null and b/media/css/font-dtable/dtable-font.ttf differ
diff --git a/media/css/font-dtable/dtable-font.woff b/media/css/font-dtable/dtable-font.woff
new file mode 100644
index 0000000000..43bd39785b
Binary files /dev/null and b/media/css/font-dtable/dtable-font.woff differ
diff --git a/media/css/font-dtable/dtable-font.woff2 b/media/css/font-dtable/dtable-font.woff2
new file mode 100644
index 0000000000..d51feca8b5
Binary files /dev/null and b/media/css/font-dtable/dtable-font.woff2 differ
diff --git a/seahub/templates/dtable_file_view_react.html b/seahub/templates/dtable_file_view_react.html
index bbe91e1bf9..b5faa97dfe 100644
--- a/seahub/templates/dtable_file_view_react.html
+++ b/seahub/templates/dtable_file_view_react.html
@@ -3,6 +3,7 @@
{% load seahub_tags %}
{% block extra_style %}
+
{% render_bundle 'viewDataGrid' 'css' %}
{% endblock %}