feat: add row number

Author: dblythy

src/components/BrowserRow/BrowserRow.react.js

@@ -71,6 +71,7 @@ export default class BrowserRow extends Component {
     }
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth }} onMouseOver={() => onMouseOverRow(obj.id)}>
+        <span className={styles.rowNumber}>{row + 1}</span>
         <span
           className={styles.checkCell}
           onMouseUp={onMouseUpRowCheckBox}

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -52,8 +52,9 @@
   height: 30px;
   vertical-align: top;
   text-align: center;
-  width: 30px;
-  background: rgb(114, 111, 133)
+  width: 60px;
+  background: rgb(114, 111, 133);
+  padding-left: 30px;
 }
 
 .handle {

src/dashboard/Data/Browser/Browser.scss

@@ -110,6 +110,22 @@ body:global(.expanded) {
   text-align: center;
 }
 
+.rowNumber {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  line-height: 31px;
+  vertical-align: top;
+  border-right: 1px solid #e3e3ea;
+  text-align: center;
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  border-bottom: 1px solid #e3e3ea;
+  background: white;
+}
+
+
 .addRow {
   height: 30px;
   padding: 8px;

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -124,7 +124,7 @@ export default class BrowserTable extends React.Component {
       const rowWidth = this.props.order.reduce(
         (rowWidth, { visible, width }) => (visible ? rowWidth + width : rowWidth),
         this.props.onAddRow ? 210 : 0
-      );
+      ) + 30;
       let editCloneRows;
       if (this.props.editCloneRows) {
         editCloneRows = (
@@ -540,7 +540,7 @@ export default class BrowserTable extends React.Component {
         id="browser-table"
         style={{
           right: rightValue,
-          'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
+          overflowX: this.props.isResizing ? 'hidden' : 'auto',
         }}
       >
         <DataBrowserHeaderBar

src/dashboard/Data/Browser/BrowserToolbar.react.js

@@ -434,6 +434,7 @@ const BrowserToolbar = ({
           }
           onClick={() => onExecuteScriptRows(selection)}
         />
+        <div/>
       </BrowserMenu>
       <div className={styles.toolbarSeparator} />
       {menu}