diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index 9715d4fc6c..a30260b89d 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -27,6 +27,9 @@ const propTypes = {
   isDirentSelected: PropTypes.bool.isRequired,
   isAllDirentSelected: PropTypes.bool.isRequired,
   direntList: PropTypes.array.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortItems: PropTypes.func.isRequired,
   selectedDirentList: PropTypes.array.isRequired,
   onItemClick: PropTypes.func.isRequired,
   onAddFile: PropTypes.func.isRequired,
@@ -193,6 +196,9 @@ class DirPanel extends React.Component {
                           path={this.props.path}
                           repoID={this.props.repoID}
                           direntList={this.props.direntList}
+                          sortBy={this.props.sortBy}
+                          sortOrder={this.props.sortOrder}
+                          sortItems={this.props.sortItems}
                           currentRepoInfo={this.props.currentRepoInfo}
                           isDirentListLoading={this.props.isDirentListLoading}
                           isAllItemSelected={this.props.isAllDirentSelected}
diff --git a/frontend/src/components/dir-view/dir-view.js b/frontend/src/components/dir-view/dir-view.js
index 34ff9fbc59..4dcb7e632e 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -34,6 +34,8 @@ class DirView extends React.Component {
       isAllDirentSelected: false,
       isDirentListLoading: true,
       currentRepoInfo: null,
+      sortBy: 'name', // 'name' or 'time'
+      sortOrder: 'asc', // 'asc' or 'desc'
       direntList: [],
       selectedDirentList: [],
       dirID: '',
@@ -148,7 +150,7 @@ class DirView extends React.Component {
       this.setState({
         isDirentListLoading: false,
         pathExist: true,
-        direntList: direntList,
+        direntList: Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder),
         dirID: res.headers.oid,
       });
     }).catch(() => {
@@ -538,6 +540,14 @@ class DirView extends React.Component {
     this.updateDirentList(this.state.path);
   }
 
+  sortItems = (sortBy, sortOrder) => {
+    this.setState({
+      sortBy: sortBy,
+      sortOrder: sortOrder,
+      items: Utils.sortDirents(this.state.direntList, sortBy, sortOrder)
+    })
+  }
+
   render() {
     return (
       <DirPanel 
@@ -553,6 +563,9 @@ class DirView extends React.Component {
         isDirentSelected={this.state.isDirentSelected}
         isAllDirentSelected={this.state.isAllDirentSelected}
         direntList={this.state.direntList}
+        sortBy={this.state.sortBy}
+        sortOrder={this.state.sortOrder}
+        sortItems={this.sortItems}
         selectedDirentList={this.state.selectedDirentList}
         onItemClick={this.onItemClick}
         onAddFile={this.onAddFile}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index 292f081875..82cdb464fc 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -16,6 +16,9 @@ const propTypes = {
   isAllItemSelected: PropTypes.bool.isRequired,
   isDirentListLoading: PropTypes.bool.isRequired,
   direntList: PropTypes.array.isRequired,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  sortItems: PropTypes.func,
   onAddFile: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
   onAllItemSelected: PropTypes.func.isRequired,
@@ -74,8 +77,22 @@ class DirentListView extends React.Component {
     this.props.onAddFile(filePath, isDraft);
   }
 
+  sortByName = (e) => {
+    e.preventDefault();
+    const sortBy = 'name';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
+  sortByTime = (e) => {
+    e.preventDefault();
+    const sortBy = 'time';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
   render() {
-    const { direntList } = this.props;
+    const { direntList, sortBy, sortOrder } = this.props;
 
     if (this.props.isDirentListLoading) {
       return (<Loading />);
@@ -102,6 +119,11 @@ class DirentListView extends React.Component {
       );
     }
 
+    // sort
+    const sortByName = sortBy == 'name';
+    const sortByTime = sortBy == 'time';
+    const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+
     return (
       <table>
         <thead>
@@ -111,11 +133,11 @@ class DirentListView extends React.Component {
             </th>
             <th width="3%">{/*icon */}</th>
             <th width="5%">{/*star */}</th>
-            <th width="39%">{gettext('Name')}</th>
+            <th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
             <th width="6%">{/*tag */}</th>
             <th width="20%">{/*operation */}</th>
             <th width="11%">{gettext('Size')}</th>
-            <th width="13%">{gettext('Last Update')}</th>
+            <th width="13%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
           </tr>
         </thead>
         <tbody>
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index dd5449051c..d95605114e 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -31,6 +31,9 @@ const propTypes = {
   isDirentSelected: PropTypes.bool.isRequired,
   isAllDirentSelected: PropTypes.bool.isRequired,
   direntList: PropTypes.array.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortItems: PropTypes.func.isRequired,
   selectedDirentList: PropTypes.array.isRequired,
   updateDirent: PropTypes.func.isRequired,
   onSideNavMenuClick: PropTypes.func.isRequired,
@@ -265,6 +268,9 @@ class MainPanel extends Component {
                         path={this.props.path}
                         repoID={repoID}
                         direntList={this.props.direntList}
+                        sortBy={this.props.sortBy}
+                        sortOrder={this.props.sortOrder}
+                        sortItems={this.props.sortItems}
                         onItemClick={this.onItemClick}
                         onItemDelete={this.props.onItemDelete}
                         onItemRename={this.props.onItemRename}
diff --git a/frontend/src/repo-wiki-mode.js b/frontend/src/repo-wiki-mode.js
index 4b6f99e12d..7ad1363758 100644
--- a/frontend/src/repo-wiki-mode.js
+++ b/frontend/src/repo-wiki-mode.js
@@ -35,6 +35,8 @@ class Wiki extends Component {
       currentNode: null,
       isDirentListLoading: true,
       isViewFile: false,
+      sortBy: 'name', // 'name' or 'time'
+      sortOrder: 'asc', // 'asc' or 'desc'
       direntList: [],
       isFileLoading: true,
       content: '',
@@ -318,7 +320,7 @@ class Wiki extends Component {
         direntList.push(dirent);
       });
       this.setState({
-        direntList: direntList,
+        direntList: Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder),
         isDirentListLoading: false,
         dirID: res.headers.oid,
       });
@@ -865,6 +867,14 @@ class Wiki extends Component {
     window.location.href = siteRoot + 'lib/' + repoID + '/file' + this.state.draftFilePath + '?mode=edit';
   }
 
+  sortItems = (sortBy, sortOrder) => {
+    this.setState({
+      sortBy: sortBy,
+      sortOrder: sortOrder,
+      items: Utils.sortDirents(this.state.direntList, sortBy, sortOrder)
+    })
+  }
+
   render() {
     let { libNeedDecrypt } = this.state;
     if (libNeedDecrypt) {
@@ -903,6 +913,9 @@ class Wiki extends Component {
           lastModified={this.state.lastModified}
           latestContributor={this.state.latestContributor}
           direntList={this.state.direntList}
+          sortBy={this.state.sortBy}
+          sortOrder={this.state.sortOrder}
+          sortItems={this.sortItems}
           selectedDirentList={this.state.selectedDirentList}
           updateDirent={this.updateDirent}
           onSideNavMenuClick={this.onSideNavMenuClick}
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index d21933c003..1d66a1cf8c 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -479,5 +479,47 @@ export const Utils = {
 
     repos.sort(comparator);
     return repos;
+  },
+
+  sortDirents: function(items, sortBy, sortOrder) {
+    const _this = this;
+    let comparator;
+
+    switch (`${sortBy}-${sortOrder}`) {
+      case 'name-asc':
+        comparator = function(a, b) {
+          var result = _this.compareTwoWord(a.name, b.name);
+          return result;
+        };
+        break;
+      case 'name-desc':
+        comparator = function(a, b) {
+          var result = _this.compareTwoWord(a.name, b.name);
+          return -result;
+        };
+        break;
+      case 'time-asc':
+        comparator = function(a, b) {
+          return a.mtime < b.mtime ? -1 : 1;
+        };
+        break;
+      case 'time-desc':
+        comparator = function(a, b) {
+          return a.mtime < b.mtime ? 1 : -1;
+        };
+        break;
+    }
+
+    items.sort((a, b) => {
+      if (a.type == 'dir' && b.type == 'file') {
+        return -1;
+      } else if (a.type == 'file' && b.type == 'dir') {
+        return 1;
+      } else {
+        return comparator(a, b);
+      }
+    });
+    return items;
   }
+
 };