add contextmenu style

frontend/src/css/react-context-menu.css

@@ -0,0 +1,78 @@
+.react-contextmenu {
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 16px;
+    color: #373a3c;
+    text-align: left;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: .25rem;
+    outline: none;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 250ms ease !important;
+}
+
+.react-contextmenu.react-contextmenu--visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.react-contextmenu-item {
+    padding: 3px 20px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #373a3c;
+    text-align: inherit;
+    white-space: nowrap;
+    background: 0 0;
+    border: 0;
+	cursor: pointer;
+}
+
+.react-contextmenu-item.react-contextmenu-item--active,
+.react-contextmenu-item.react-contextmenu-item--selected {
+    color: #fff;
+    background-color: #20a0ff;
+    border-color: #20a0ff;
+    text-decoration: none;
+}
+
+.react-contextmenu-item.react-contextmenu-item--disabled,
+.react-contextmenu-item.react-contextmenu-item--disabled:hover {
+    color: #878a8c;
+    background-color: transparent;
+    border-color: rgba(0,0,0,.15);
+}
+
+.react-contextmenu-item--divider {
+    margin-bottom: 3px;
+    padding: 2px 0;
+    border-bottom: 1px solid rgba(0,0,0,.15);
+    cursor: inherit;
+}
+.react-contextmenu-item--divider:hover {
+    background-color: transparent;
+    border-color: rgba(0,0,0,.15);
+}
+
+.react-contextmenu-item.react-contextmenu-submenu {
+	padding: 0;
+}
+
+.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item {
+}
+
+.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item:after {
+    content: "▶";
+    display: inline-block;
+    position: absolute;
+    right: 7px;
+}
+
+.example-multiple-targets::after {
+    content: attr(data-count);
+    display: block;
+}

frontend/src/pages/data-grid/app-main.js

@@ -18,9 +18,10 @@ class AppMain extends React.Component {
     super(props, context);
     this._columns = [
       {
-        key: 'id',
+        key: 'name',
-        name: 'ID',
+        name: 'Name',
         width: 80,
+        editable: true,
         resizable: true
       }
     ];
@@ -48,7 +49,7 @@ class AppMain extends React.Component {
   };
 
   createFakeRowObjectData = (index) => {
-    return {id: 'id_' + index};
+    return {name: 'name_' + index};
   };
 
   getColumns = () => {
@@ -70,7 +71,7 @@ class AppMain extends React.Component {
 
   handleAddRow = ({ newRowIndex }) => {
     const newRow = {
-      id: 'id_' + newRowIndex,
+      name: 'name_' + newRowIndex,
     };
 
     let rows = this.state.rows.slice();

frontend/src/view-file-ctable.js

@@ -9,6 +9,7 @@ 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, err, enableWatermark, userNickName } = window.app.pageOptions;