Fix: Add new rows if isScrollable=false

denisraslov · Jul 31, 2022 · 451bbd5 · 451bbd5
1 parent 529825b
commit 451bbd5
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/src/scrollWrapper/index.js b/src/scrollWrapper/index.js
@@ -409,7 +409,9 @@ class SpreadsheetGridScrollWrapper extends React.PureComponent {
   }
 
   render() {
-    const rows = slice(this.props.rows, this.state.first, this.state.last)
+    const rows = this.props.isScrollable
+      ? slice(this.props.rows, this.state.first, this.state.last)
+      : this.props.rows
 
     return (
       <div className='SpreadsheetGridContainer' ref={this.tableEl}>

diff --git a/stories/index.js b/stories/index.js
@@ -7,7 +7,7 @@ import { Grid, Input, Select } from './../index'
 const rows = []
 const positions = []
 
-for (let i = 0; i < 1000; i++) {
+for (let i = 0; i < 10; i++) {
   rows.push({
     id: i,
     firstName: 'First name ' + i,
@@ -32,6 +32,18 @@ function DataTable(props) {
     setRows([].concat(rows))
   }
 
+  const addRow = () => {
+    const id = [...rows][rows.length - 1].id + 1
+    const newRow = {
+      id: id,
+      firstName: 'First name ' + i,
+      secondName: 'Second name ' + i,
+      positionId: 3,
+    }
+
+    setRows(rows.concat(newRow))
+  }
+
   const initColumns = () => {
     return [
       {
@@ -103,20 +115,23 @@ function DataTable(props) {
   }
 
   return (
-    <div className='DataTable'>
-      <Grid
-        columns={columns}
-        rows={rows}
-        getRowKey={(row) => row.id}
-        rowHeight={50}
-        isColumnsResizable
-        onColumnResize={onColumnResize}
-        focusOnSingleClick={props.focusOnSingleClick}
-        disabledCellChecker={(row, columnId) => {
-          return columnId === 'age'
-        }}
-        isScrollable={props.isScrollable}
-      />
+    <div>
+      <button onClick={addRow}>Add row</button>
+      <div className='DataTable'>
+        <Grid
+          columns={columns}
+          rows={rows}
+          getRowKey={(row) => row.id}
+          rowHeight={50}
+          isColumnsResizable
+          onColumnResize={onColumnResize}
+          focusOnSingleClick={props.focusOnSingleClick}
+          disabledCellChecker={(row, columnId) => {
+            return columnId === 'age'
+          }}
+          isScrollable={props.isScrollable}
+        />
+      </div>
     </div>
   )
 }