feat: Add row number to data browser

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.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,24 @@ 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;
+  overflow: hidden;
+  direction: rtl;
+  text-overflow: ellipsis;
+}
+
 .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 = (
@@ -156,7 +156,7 @@ export default class BrowserTable extends React.Component {
                     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}
                     selection={this.props.selection}
@@ -329,7 +329,7 @@ export default class BrowserTable extends React.Component {
             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}
             selection={this.props.selection}
@@ -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}