dynamic header width

Author: dblythy

src/components/BrowserRow/BrowserRow.react.js

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

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

src/dashboard/Data/Browser/Browser.scss

@@ -112,7 +112,6 @@ body:global(.expanded) {
 
 .rowNumber {
   display: inline-block;
-  width: 30px;
   height: 30px;
   line-height: 31px;
   vertical-align: top;
@@ -123,9 +122,6 @@ body:global(.expanded) {
   z-index: 1;
   border-bottom: 1px solid #e3e3ea;
   background: white;
-  overflow: hidden;
-  direction: rtl;
-  text-overflow: ellipsis;
 }
 
 .addRow {

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

@@ -35,6 +35,7 @@ export default class BrowserTable extends React.Component {
     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 @@ export default class BrowserTable extends React.Component {
     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 = (
@@ -159,6 +166,7 @@ export default class BrowserTable extends React.Component {
                     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 @@ export default class BrowserTable extends React.Component {
               readOnlyFields={READ_ONLY}
               row={-1}
               rowWidth={rowWidth}
+              headerWidth={this.headerWidth}
               selection={this.props.selection}
               selectRow={this.props.selectRow}
               setCurrent={this.props.setCurrent}
@@ -332,6 +341,7 @@ export default class BrowserTable extends React.Component {
             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}
@@ -563,6 +573,7 @@ export default class BrowserTable extends React.Component {
           isDataLoaded={!this.props.isLoading}
           setSelectedObjectId={this.props.setSelectedObjectId}
           setCurrent={this.props.setCurrent}
+          headerWidth={this.headerWidth}
         />
         {table}
       </div>