feat: Add row number to data browser

src/components/BrowserRow/BrowserRow.react.js

@@ -33,6 +33,7 @@ export default class BrowserRow extends Component {
       row,
       rowValue,
       rowWidth,
+      headerWidth,
       selection,
       selectRow,
       setCopyableValue,
@@ -70,7 +71,8 @@ export default class BrowserRow extends Component {
       requiredCols = ['authData'];
     }
     return (
-      <div className={styles.tableRow} style={{ minWidth: rowWidth }} onMouseOver={() => onMouseOverRow(obj.id)}>
+      <div className={styles.tableRow} style={{ width: rowWidth }} onMouseOver={() => onMouseOverRow(obj.id)}>
+        <span className={styles.rowNumber} style={{width: headerWidth}}>{row + 1}</span>
         <span
           className={styles.checkCell}
           onMouseUp={onMouseUpRowCheckBox}

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -26,9 +26,10 @@ export default class DataBrowserHeaderBar extends React.Component {
       isDataLoaded,
       setSelectedObjectId,
       setCurrent,
+      headerWidth
     } = this.props;
     const elements = [
-      <div key="check" className={[styles.wrap, styles.check].join(' ')}>
+      <div key="check" className={[styles.wrap, styles.check].join(' ')} style={{ paddingLeft: headerWidth, width: headerWidth + 30 }}>
         {readonly ? null : (
           <input type="checkbox" checked={selected} onChange={e => selectAll(e.target.checked)} />
         )}

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

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

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

@@ -2103,6 +2103,7 @@ class Browser extends DashboardView {
               errorAggregatedData={this.state.errorAggregatedData}
               appName={this.props.params.appId}
               limit={this.state.limit}
+              skip={this.state.skip}
             />
             <BrowserFooter
               skip={this.state.skip}

src/dashboard/Data/Browser/Browser.scss

@@ -110,6 +110,20 @@ body:global(.expanded) {
   text-align: center;
 }
 
+.rowNumber {
+  display: inline-block;
+  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

@@ -35,6 +35,7 @@
     this.tableRef = React.createRef();
     this.handleResize = this.handleResize.bind(this);
     this.updateMaxWidth = this.updateMaxWidth.bind(this);
+    this.headerWidth = 34;
   }
 
   componentWillReceiveProps(props) {
@@ -121,10 +122,16 @@
     let editor = null;
     let table = <div ref={this.tableRef} />;
     if (this.props.data) {
-      const rowWidth = this.props.order.reduce(
+      let rowWidth = this.props.order.reduce(
         (rowWidth, { visible, width }) => (visible ? rowWidth + width : rowWidth),
         this.props.onAddRow ? 210 : 0
-      );
+      ) + 30;
+
+      this.headerWidth = Math.max(
+        30,
+        Math.floor(Math.log10(this.props.data.length + this.props.skip)) * 10
+      ) + 4;
+
       let editCloneRows;
       if (this.props.editCloneRows) {
         editCloneRows = (
@@ -156,9 +163,10 @@
                     onFilterChange={this.props.onFilterChange}
                     order={this.props.order}
                     readOnlyFields={READ_ONLY}
-                    row={index}
+                    row={index + this.props.skip}
                     rowValue={this.props.data[index]}
                     rowWidth={rowWidth}
+                    headerWidth={this.headerWidth}
                     selection={this.props.selection}
                     selectRow={this.props.selectRow}
                     setCurrent={this.props.setCurrent}
@@ -240,6 +248,7 @@
               readOnlyFields={READ_ONLY}
               row={-1}
               rowWidth={rowWidth}
+              headerWidth={this.headerWidth}
               selection={this.props.selection}
               selectRow={this.props.selectRow}
               setCurrent={this.props.setCurrent}
@@ -329,9 +338,10 @@
             callCloudFunction={this.props.callCloudFunction}
             order={this.props.order}
             readOnlyFields={READ_ONLY}
-            row={i}
+            row={i + this.props.skip}
             rowValue={this.props.data[i]}
             rowWidth={rowWidth}
+            headerWidth={this.headerWidth}
             selection={this.props.selection}
             selectRow={this.props.selectRow}
             setCurrent={this.props.setCurrent}
@@ -540,7 +550,7 @@
         id="browser-table"
         style={{
           right: rightValue,
-          'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
+          overflowX: this.props.isResizing ? 'hidden' : 'auto',
         }}
       >
         <DataBrowserHeaderBar
@@ -563,6 +573,7 @@
           isDataLoaded={!this.props.isLoading}
           setSelectedObjectId={this.props.setSelectedObjectId}
           setCurrent={this.props.setCurrent}
+          headerWidth={this.headerWidth}
         />
         {table}
       </div>

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

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