6.2.0

No old storybook files
Top and Bottom Pagination (#283 )
2026-08-19 16:30:21 +00:00 · 2017-06-07 21:57:54 -06:00 · 2017-06-07 21:57:37 -06:00 · 2017-06-05 17:45:04 -06:00 · 2017-05-30 08:45:58 -06:00 · 2017-05-30 08:44:32 -06:00
32 changed files with 206 additions and 209 deletions
@@ -1 +0,0 @@
-react-table.js.org
@@ -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;
-}
@@ -1,7 +0,0 @@
-body{
-	padding: 20px;
-}
-
-strong {
-	font-weight: bold
-}
@@ -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;
-}
@@ -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
-}
@@ -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
    }, {
@@ -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",
@@ -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}
        ]}
      />
    )
@@ -10,8 +10,8 @@ class Story extends React.PureComponent {
    const data = _.map(_.range(5553), d => {
      const statusChance = Math.random()
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        progress: Math.floor(Math.random() * 100),
        status: statusChance > 0.66 ? 'relationship'
          : statusChance > 0.33 ? 'complicated'
@@ -7,8 +7,8 @@ import ReactTable from '../../../lib/index'

 const data = _.map(_.range(5553), d => {
  return {
-    firstName: namor.generate({ words: 1, numLen: 0 }),
-    lastName: namor.generate({ words: 1, numLen: 0 }),
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
    age: Math.floor(Math.random() * 30)
  }
 })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -13,8 +13,8 @@ class Story extends React.PureComponent {

    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,13 +9,13 @@ class Story extends React.PureComponent {
  render() {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        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, numLen: 0 }),
-            lastName: namor.generate({ words: 1, numLen: 0 }),
+            firstName: namor.generate({ words: 1, numbers: 0 }),
+            lastName: namor.generate({ words: 1, numbers: 0 }),
            age: Math.floor(Math.random() * 30)
          }
        })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -31,8 +31,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -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>
+)
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(100000), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(1000), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(1000), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(1000), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -7,8 +7,8 @@ import ReactTable from '../../../lib/index'

 const rawData = _.map(_.range(3424), d => {
  return {
-    firstName: namor.generate({ words: 1, numLen: 0 }),
-    lastName: namor.generate({ words: 1, numLen: 0 }),
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
    age: Math.floor(Math.random() * 30)
  }
 })
@@ -9,13 +9,13 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        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, numLen: 0 }),
-            lastName: namor.generate({ words: 1, numLen: 0 }),
+            firstName: namor.generate({ words: 1, numbers: 0 }),
+            lastName: namor.generate({ words: 1, numbers: 0 }),
            age: Math.floor(Math.random() * 30)
          }
        })
@@ -11,8 +11,8 @@ class Story extends React.PureComponent {

    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -15,13 +15,13 @@ class Story extends React.PureComponent {
          }
        })
        return {
-          firstName: namor.generate({ words: 1, numLen: 0 }),
+          firstName: namor.generate({ words: 1, numbers: 0 }),
          age: Math.floor(Math.random() * 30),
          children: grandChildren
        }
      })
      return {
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        firstName: children.map(d => d.firstName),
        age: Math.floor(Math.random() * 30),
        children
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "6.0.4",
+  "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",
@@ -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,
@@ -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()
@@ -21,7 +21,7 @@ $expandSize = 7px
  .rt-thead
    flex: 1 0 auto
    display: flex
-    overflow-y: scroll
+    // overflow-y: scroll
    flex-direction: column
    -webkit-user-select: none;
    -moz-user-select: none;
@@ -99,7 +99,7 @@ $expandSize = 7px
    flex: 99999 1 auto
    display: flex
    flex-direction: column
-    overflow: scroll
+    overflow: auto
    // z-index:0
    .rt-tr-group
      border-bottom: solid 1px alpha(black, .05)
@@ -305,6 +305,8 @@ $expandSize = 7px
  input:not([type="checkbox"]):not([type="radio"])
  select
    appearance: none
+    &::-ms-expand
+      display: none

  .select-wrap
    position:relative
Author	SHA1	Message	Date
Tanner Linsley	f4704b146c	6.2.0	2017-06-07 21:57:54 -06:00
Tanner Linsley	004186af24	No old storybook files	2017-06-07 21:57:37 -06:00
Mayank JethvaandTanner Linsley	0d0e239baa	Top and Bottom Pagination (#283 ) * added top and bottom pagination, included story * version bump * linting * fixes * PR fixes * lint and fixes * update story * removed unused attr	2017-06-05 17:45:04 -06:00
Stanislav DzhusandTanner Linsley	f61b19cb8a	fix property name (#290 )	2017-05-30 08:45:58 -06:00
stefaniapavelandTanner Linsley	e1a46fb77e	fix IE select visual bug (#301 )	2017-05-30 08:44:32 -06:00
ldsteinandTanner Linsley	a9db5b1ac6	Add minRows to list of available props (#295 ) * Added showPaddedRows prop * Added minRows to defaultProps, added to documentation. * Revert "Added showPaddedRows prop" This reverts commit be89c4913f11df8b322ac9f65e3500c9539f838f. * Removed minRows from defaultProps	2017-05-26 22:17:41 -06:00
Tanner Linsley	846fc0d84d	6.0.5	2017-05-19 16:27:53 -06:00
Tanner Linsley	87610c83fa	Revert overflow styles	2017-05-19 16:27:48 -06:00
Tanner Linsley	a58f5c4de2	Update docs	2017-05-19 16:26:48 -06:00