6.2.0

* added top and bottom pagination, included story

* version bump

* linting

* fixes

* PR fixes

* lint and fixes

* update story

* removed unused attr

.storybook/CNAME

@@ -1 +0,0 @@
-react-table.js.org

.storybook/fonts.css

@@ -1,18 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");
-body {
-  background: #fff;
-  font-family: 'Open Sans', sans-serif;
-  font-weight: 300;
-}
-
-h1 {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  margin-top: 5px;
-}
-
-p {
-  margin-bottom: 15px;
-  line-height: 22px;
-}

.storybook/layout.css

@@ -1,7 +0,0 @@
-body{
-	padding: 20px;
-}
-
-strong {
-	font-weight: bold
-}

.storybook/reset.css

@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-/*ol, ul {
-	list-style: none;
-}*/
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

.storybook/webpack.config.js

@@ -1,27 +0,0 @@
-const path = require('path')
-
-// load the default config generator.
-const genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js')
-
-module.exports = (config, env) => {
-  config = genDefaultConfig(config, env)
-
-  Object.assign(config, {
-    module: Object.assign(config.module, {
-      loaders: config.module.loaders.concat([{
-        test: /\.md$/,
-        loader: 'html!markdown',
-        include: path.resolve(__dirname, '../')
-      }, {
-        test: /\.html$/,
-        loader: 'html',
-        query: {
-          minimize: true
-        },
-        include: path.resolve(__dirname, '../')
-      }])
-    })
-  })
-
-  return config
-}

README.md

@@ -155,9 +155,12 @@ These are all of the available props (and their default values) for the main `<R
   data: [],
   loading: false,
   showPagination: true,
+  showPaginationTop: false,
+  showPaginationBottom: true
   showPageSizeOptions: true,
   pageSizeOptions: [5, 10, 20, 25, 50, 100],
   defaultPageSize: 20,
+  minRows: undefined,
   showPageJump: true,
   collapseOnSortingChange: true,
   collapseOnPageChange: true,
@@ -729,7 +732,7 @@ Here are the props and their corresponding callbacks that control the state of t
   // Props
   page={0} // the index of the page you wish to display
   pageSize={20} // the number of rows per page to be displayed
-  sorting={[{ // the sorting model for the table
+  sorted={[{ // the sorting model for the table
       id: 'lastName',
       desc: true
     }, {

docs/package.json

@@ -14,7 +14,7 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-json-tree": "^0.10.9",
-    "react-story": "^0.0.6"
+    "react-story": "^0.0.10"
   },
   "scripts": {
     "start": "react-scripts start",

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 MultiplePagers from './stories/MultiplePagers';
 
 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: 'Multiple Pagers (Top and Bottom)', component: MultiplePagers}
         ]}
       />
     )

docs/src/stories/MultiplePagers.js

@@ -0,0 +1,73 @@
+/* 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 {
+  render () {
+    const data = _.map(_.range(5553), d => {
+      return {
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
+        age: Math.floor(Math.random() * 30),
+        children: _.map(_.range(10), d => {
+          return {
+            firstName: namor.generate({ words: 1, numbers: 0 }),
+            lastName: namor.generate({ words: 1, numbers: 0 }),
+            age: Math.floor(Math.random() * 30)
+          }
+        })
+      }
+    })
+
+    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'
+      }]
+    }]
+
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+            showPagination
+            showPaginationTop
+            showPaginationBottom
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
+      </div>
+    )
+  }
+}
+
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw!./MultiplePagers')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "6.0.5",
+  "version": "6.2.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/defaultProps.js

@@ -11,6 +11,8 @@ export default {
   data: [],
   loading: false,
   showPagination: true,
+  showPaginationTop: false,
+  showPaginationBottom: true,
   showPageSizeOptions: true,
   pageSizeOptions: [5, 10, 20, 25, 50, 100],
   defaultPageSize: 20,

src/index.js

@@ -72,6 +72,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       getNoDataProps,
       getResizerProps,
       showPagination,
+      showPaginationTop,
+      showPaginationBottom,
       manual,
       loadingText,
       noDataText,
@@ -758,78 +760,92 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       )
     }
 
+    const makePagination = () => {
+      const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
+      return <PaginationComponent
+        {...resolvedState}
+        pages={pages}
+        canPrevious={canPrevious}
+        canNext={canNext}
+        onPageChange={this.onPageChange}
+        onPageSizeChange={this.onPageSizeChange}
+        className={paginationProps.className}
+        style={paginationProps.style}
+        {...paginationProps.rest}
+      />
+    }
+
     const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
     const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
     const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
-    const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
     const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
     const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
     const resizerProps = getResizerProps(finalState, undefined, undefined, this)
 
-    const makeTable = () => (
-      <div
-        className={classnames(
-          'ReactTable',
-          className,
-          rootProps.className
-        )}
-        style={{
-          ...style,
-          ...rootProps.style
-        }}
-        {...rootProps.rest}
-      >
-        <TableComponent
+    const makeTable = () => {
+      const pagination = makePagination()
+      return (
+        <div
           className={classnames(
-            tableProps.className,
-            currentlyResizing ? 'rt-resizing' : ''
+            'ReactTable',
+            className,
+            rootProps.className
           )}
-          style={tableProps.style}
-          {...tableProps.rest}
+          style={{
+            ...style,
+            ...rootProps.style
+          }}
+          {...rootProps.rest}
         >
-          {hasHeaderGroups ? makeHeaderGroups() : null}
-          {makeHeaders()}
-          {hasFilters ? makeFilters() : null}
-          <TbodyComponent
-            className={classnames(tBodyProps.className)}
-            style={{
-              ...tBodyProps.style,
-              minWidth: `${rowMinWidth}px`
-            }}
-            {...tBodyProps.rest}
+          {showPagination && showPaginationTop
+            ? <div className='pagination-top'>
+              {pagination}
+            </div>
+            : null}
+          <TableComponent
+            className={classnames(
+              tableProps.className,
+              currentlyResizing ? 'rt-resizing' : ''
+            )}
+            style={tableProps.style}
+            {...tableProps.rest}
           >
-            {pageRows.map((d, i) => makePageRow(d, i))}
-            {padRows.map(makePadRow)}
-          </TbodyComponent>
-          {hasColumnFooter ? makeColumnFooters() : null}
-        </TableComponent>
-        {showPagination ? (
-          <PaginationComponent
-            {...resolvedState}
-            pages={pages}
-            canPrevious={canPrevious}
-            canNext={canNext}
-            onPageChange={this.onPageChange}
-            onPageSizeChange={this.onPageSizeChange}
-            className={paginationProps.className}
-            style={paginationProps.style}
-            {...paginationProps.rest}
+            {hasHeaderGroups ? makeHeaderGroups() : null}
+            {makeHeaders()}
+            {hasFilters ? makeFilters() : null}
+            <TbodyComponent
+              className={classnames(tBodyProps.className)}
+              style={{
+                ...tBodyProps.style,
+                minWidth: `${rowMinWidth}px`
+              }}
+              {...tBodyProps.rest}
+            >
+              {pageRows.map((d, i) => makePageRow(d, i))}
+              {padRows.map(makePadRow)}
+            </TbodyComponent>
+            {hasColumnFooter ? makeColumnFooters() : null}
+          </TableComponent>
+          {showPagination && showPaginationBottom
+            ? <div className='pagination-bottom'>
+              {pagination}
+            </div>
+            : null}
+          {!pageRows.length && (
+            <NoDataComponent
+              {...noDataProps}
+            >
+              {_.normalizeComponent(noDataText)}
+            </NoDataComponent>
+          )}
+          <LoadingComponent
+            loading={loading}
+            loadingText={loadingText}
+            {...loadingProps}
           />
-        ) : null}
-        {!pageRows.length && (
-          <NoDataComponent
-            {...noDataProps}
-          >
-            {_.normalizeComponent(noDataText)}
-          </NoDataComponent>
-        )}
-        <LoadingComponent
-          loading={loading}
-          loadingText={loadingText}
-          {...loadingProps}
-        />
-      </div>
-    )
+        </div>
+      )
+    }
 
     // childProps are optionally passed to a function-as-a-child
     return children ? children(finalState, makeTable, this) : makeTable()

src/index.styl

@@ -305,6 +305,8 @@ $expandSize = 7px
   input:not([type="checkbox"]):not([type="radio"])
   select
     appearance: none
+    &::-ms-expand
+      display: none
 
   .select-wrap
     position:relative