Added showPaddedRows prop

ldstein · ldstein · commit be89c4913f11 · 2017-05-26T16:26:35.000+08:00
diff --git a/README.md b/README.md
@@ -159,6 +159,7 @@ These are all of the available props (and their default values) for the main `<R
   pageSizeOptions: [5, 10, 20, 25, 50, 100],
   defaultPageSize: 20,
   showPageJump: true,
+  showPaddedRows: true,
   collapseOnSortingChange: true,
   collapseOnPageChange: true,
   collapseOnDataChange: true,
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -26,6 +26,7 @@ import ControlledTable from './stories/ControlledTable.js'
 import PivotingOptions from './stories/PivotingOptions.js'
 import EditableTable from './stories/EditableTable.js'
 import FixedHeader from './stories/FixedHeader.js'
+import ShowPaddedRows from './stories/ShowPaddedRows.js'
 
 export default class App extends React.Component {
   render() {
@@ -100,7 +101,8 @@ export default class App extends React.Component {
           { name: 'Custom Filtering', component: Filtering },
           { name: 'Controlled Component', component: ControlledTable },
           { name: 'Editable Table', component: EditableTable },
-          { name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader }
+          { name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader },
+          { name: 'Show Padded Rows', component: ShowPaddedRows }
         ]}
       />
     )
diff --git a/docs/src/stories/ShowPaddedRows.js b/docs/src/stories/ShowPaddedRows.js
@@ -0,0 +1,114 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import ReactTable from '../../../lib/index'
+
+class Story extends React.PureComponent {
+  constructor (props) {
+    super(props)
+
+    const data = _.map(_.range(7), d => {
+      return {
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
+        age: Math.floor(Math.random() * 30)
+      }
+    })
+
+    this.state = {
+      tableOptions: {
+        showPaddedRows: true
+      },
+      data: data
+    }
+
+    this.setTableOption = this.setTableOption.bind(this)
+  }
+
+  render () {
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName
+      }]
+    }, {
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age'
+      }]
+    }]
+
+    console.log(this.state.tableOptions)
+
+    return (
+      <div>
+        <div>
+          <h1>Table Options</h1>
+          <table>
+            <tbody>
+            {
+              Object.keys(this.state.tableOptions).map(optionKey => {
+                const optionValue = this.state.tableOptions[optionKey]
+                return (
+                    <tr key={optionKey}>
+                      <td>{optionKey}</td>
+                      <td style={{paddingLeft: 10, paddingTop: 5}}>
+                        <input type='checkbox'
+                               name={optionKey}
+                               checked={optionValue}
+                               onChange={this.setTableOption}
+                        />
+                      </td>
+                    </tr>
+                )
+              })
+            }
+            </tbody>
+          </table>
+        </div>
+        <div className='table-wrap'>
+          <ReactTable
+            {...this.state.tableOptions}
+            className='-striped -highlight'
+            data={this.state.data}
+            columns={columns}
+            defaultPageSize={15}
+            pageSizeOptions={[5, 15, 30, 50]}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  setTableOption (event)
+  {
+    const target = event.target
+    const value = target.type === 'checkbox' ? target.checked : target.value
+    const name = target.name
+    this.setState({
+      tableOptions : {
+        ...this.state.tableOptions,
+        [name] : value
+      }
+    })
+  }
+}
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw!./ShowPaddedRows')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/src/defaultProps.js b/src/defaultProps.js
@@ -19,6 +19,7 @@ export default {
   collapseOnPageChange: true,
   collapseOnDataChange: true,
   freezeWhenExpanded: false,
+  showPaddedRows: true,
   sortable: true,
   resizable: true,
   filterable: false,
diff --git a/src/index.js b/src/index.js
@@ -72,6 +72,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       getNoDataProps,
       getResizerProps,
       showPagination,
+      showPaddedRows,
       manual,
       loadingText,
       noDataText,
@@ -131,7 +132,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     const endRow = startRow + pageSize
     let pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
     const minRows = this.getMinRows()
-    const padRows = _.range(Math.max(minRows - pageRows.length, 0))
+    const padRows = showPaddedRows ? _.range(Math.max(minRows - pageRows.length, 0)) : []
 
     const hasColumnFooter = allVisibleColumns.some(d => d.Footer)
     const hasFilters = filterable || allVisibleColumns.some(d => d.filterable)
