defaultSorting changes and doc updates

2025-10-16 11:55:36 +00:00 · 2017-02-10 16:46:14 -07:00 · 2017-02-10 16:46:14 -07:00 · e702fc80ca
commit e702fc80ca
parent beaa748187
11 changed files with 179 additions and 153 deletions
--- a/README.md
+++ b/README.md
@ -135,6 +135,10 @@ These are all of the available props (and their default values) for the main `<R
  defaultPageSize: 20,
  showPageJump: true,
  expanderColumnWidth: 35,
+  collapseOnSortingChange: false,
+  collapseOnPageChange: true,
+  freezeWhenExpanded: false,
+  defaultSorting: [],

  // Controlled State Overrides (see Fully Controlled Component section)
  page: undefined,
@ -242,7 +246,6 @@ Or just define them as props
  accessor: 'propertyName' or Accessor eg. (row) => row.propertyName,
  id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
  sortable: true,
-  sort: 'asc' or 'desc', // used to determine the column sorting on init
  show: true, // can be used to hide a column
  width: undefined, // A hardcoded width for the column. This overrides both min and max width options
  minWidth: 100 // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
--- a/src/componentMethods.js
+++ b/src/componentMethods.js
@ -226,20 +226,16 @@ export default {
      page: (page + 1) > newPages ? newPages - 1 : page
    }
  },
-  getSortedData (state) {
+  getSortedData (resolvedState) {
    const {
      manual,
      sorting,
-      allDecoratedColumns,
      resolvedData
-    } = state
-
-    const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns)
+    } = resolvedState

    // Resolve the data from either manual data or sorted data
    return {
-      resolvedSorting,
-      sortedData: manual ? resolvedData : this.sortData(resolvedData, resolvedSorting)
+      sortedData: manual ? resolvedData : this.sortData(resolvedData, sorting)
    }
  },

@ -252,26 +248,6 @@ export default {
  getStateOrProp (key) {
    return _.getFirstDefined(this.state[key], this.props[key])
  },
-  getInitSorting (columns) {
-    if (!columns) {
-      return []
-    }
-    const initSorting = columns.filter(d => {
-      return typeof d.sort !== 'undefined'
-    }).map(d => {
-      return {
-        id: d.id,
-        asc: d.sort === 'asc'
-      }
-    })
-
-    return initSorting
-
-    // return initSorting.length ? initSorting : [{
-    //   id: columns.find(d => d.id).id,
-    //   asc: true
-    // }]
-  },
  sortData (data, sorting) {
    if (!sorting.length) {
      return data
@ -283,7 +259,7 @@ export default {
        }
        return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id]
      }
-    }), sorting.map(d => d.asc ? 'asc' : 'desc'))
+    }), sorting.map(d => !d.desc))

    return sorted.map(row => {
      if (!row[this.props.subRowsKey]) {
@ -338,54 +314,25 @@ export default {
    if (onSortingChange) {
      return onSortingChange(column, additive)
    }
-    let newSorting = _.clone(sorting || [])
-    if (_.isArray(column)) {
-      const existingIndex = newSorting.findIndex(d => d.id === column[0].id)
-      if (existingIndex > -1) {
-        const existing = newSorting[existingIndex]
-        if (existing.asc) {
-          column.forEach((d, i) => {
-            newSorting[existingIndex + i].asc = false
-          })
-        } else {
-          if (additive) {
-            newSorting.splice(existingIndex, column.length)
-          } else {
-            column.forEach((d, i) => {
-              newSorting[existingIndex + i].asc = true
-            })
-          }
-        }
-        if (!additive) {
-          newSorting = newSorting.slice(existingIndex, column.length)
-        }
-      } else {
-        if (additive) {
-          newSorting = newSorting.concat(column.map(d => ({
-            id: d.id,
-            asc: true
-          })))
-        } else {
-          newSorting = column.map(d => ({
-            id: d.id,
-            asc: true
-          }))
-        }
-      }
-    } else {
+    let newSorting = _.clone(sorting || []).map(d => {
+      d.desc = _.isSortingDesc(d)
+      return d
+    })
+    if (!_.isArray(column)) {
+      // Single-Sort
      const existingIndex = newSorting.findIndex(d => d.id === column.id)
      if (existingIndex > -1) {
        const existing = newSorting[existingIndex]
-        if (existing.asc) {
-          existing.asc = false
-          if (!additive) {
-            newSorting = [existing]
-          }
-        } else {
+        if (existing.desc) {
          if (additive) {
            newSorting.splice(existingIndex, 1)
          } else {
-            existing.asc = true
+            existing.desc = false
+            newSorting = [existing]
+          }
+        } else {
+          existing.desc = true
+          if (!additive) {
            newSorting = [existing]
          }
        }
@ -393,15 +340,51 @@ export default {
        if (additive) {
          newSorting.push({
            id: column.id,
-            asc: true
+            desc: false
          })
        } else {
          newSorting = [{
            id: column.id,
-            asc: true
+            desc: false
          }]
        }
      }
+    } else {
+      // Multi-Sort
+      const existingIndex = newSorting.findIndex(d => d.id === column[0].id)
+      // Existing Sorted Column
+      if (existingIndex > -1) {
+        const existing = newSorting[existingIndex]
+        if (existing.desc) {
+          if (additive) {
+            newSorting.splice(existingIndex, column.length)
+          } else {
+            column.forEach((d, i) => {
+              newSorting[existingIndex + i].desc = false
+            })
+          }
+        } else {
+          column.forEach((d, i) => {
+            newSorting[existingIndex + i].desc = true
+          })
+        }
+        if (!additive) {
+          newSorting = newSorting.slice(existingIndex, column.length)
+        }
+      } else {
+        // New Sort Column
+        if (additive) {
+          newSorting = newSorting.concat(column.map(d => ({
+            id: d.id,
+            desc: false
+          })))
+        } else {
+          newSorting = column.map(d => ({
+            id: d.id,
+            desc: false
+          }))
+        }
+      }
    }
    this.setStateWithData({
      page: ((!sorting.length && newSorting.length) || !additive) ? 0 : this.state.page,
--- a/src/index.js
+++ b/src/index.js
@ -18,8 +18,10 @@ export const ReactTableDefaults = {
  defaultPageSize: 20,
  showPageJump: true,
  expanderColumnWidth: 35,
-  collapseOnChange: true,
+  collapseOnSortingChange: false,
+  collapseOnPageChange: true,
  freezeWhenExpanded: false,
+  defaultSorting: [],

  // Controlled State Overrides
  // page: undefined,
@ -149,7 +151,7 @@ export default React.createClass({
    return {
      page: 0,
      pageSize: this.props.defaultPageSize || 10,
-      sorting: [],
+      sorting: this.props.defaultSorting,
      expandedRows: {}
    }
  },
@ -214,10 +216,14 @@ export default React.createClass({
      oldState.sorting !== newResolvedState.sorting ||
      (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
    ) {
-      // If collapseOnChange is set, automatically close expanded subcomponents
-      if (this.props.collapseOnChange) {
+      // Handle collapseOnSortingChange & collapseOnPageChange
+      if (
+        (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnPageChange)
+      ) {
        newResolvedState.expandedRows = {}
      }
+
      Object.assign(newResolvedState, this.getSortedData(newResolvedState))
    }

@ -274,7 +280,7 @@ export default React.createClass({
      loading,
      pageSize,
      page,
-      resolvedSorting,
+      sorting,
      pages,
      // Pivoting State
      pivotValKey,
@ -481,7 +487,7 @@ export default React.createClass({
    }

    const makeHeader = (column, i) => {
-      const sort = resolvedSorting.find(d => d.id === column.id)
+      const sort = sorting.find(d => d.id === column.id)
      const show = typeof column.show === 'function' ? column.show() : column.show
      const width = _.getFirstDefined(column.width, column.minWidth)
      const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
@ -507,7 +513,7 @@ export default React.createClass({

      if (column.expander) {
        if (column.pivotColumns) {
-          const pivotSort = resolvedSorting.find(d => d.id === column.id)
+          const pivotSort = sorting.find(d => d.id === column.id)
          return (
            <ThComponent
              key={i}
@ -515,7 +521,7 @@ export default React.createClass({
                'rt-pivot-header',
                column.sortable && '-cursor-pointer',
                classes,
-                pivotSort ? (pivotSort.asc ? '-sort-asc' : '-sort-desc') : ''
+                pivotSort ? (pivotSort.desc ? '-sort-asc' : '-sort-desc') : ''
              )}
              style={{
                ...styles,
@ -568,7 +574,7 @@ export default React.createClass({
          key={i}
          className={classnames(
            classes,
-            sort ? (sort.asc ? '-sort-asc' : '-sort-desc') : '',
+            sort ? (sort.desc ? '-sort-asc' : '-sort-desc') : '',
            column.sortable && '-cursor-pointer',
            !show && '-hidden',
          )}
--- a/src/utils.js
+++ b/src/utils.js
@ -16,7 +16,8 @@ export default {
  groupBy,
  isArray,
  splitProps,
-  compactObject
+  compactObject,
+  isSortingDesc
 }

 function get (obj, path, def) {
@ -184,3 +185,7 @@ function compactObject (obj) {
  }
  return newObj
 }
+
+function isSortingDesc (d) {
+  return !!(d.sort === 'desc' || d.desc === true || d.asc === false)
+}
--- a/stories/CustomComponentProps.js
+++ b/stories/CustomComponentProps.js
@ -34,12 +34,24 @@ export default () => {

  return (
    <div>
+      <strong>Hey!</strong> Open your console! :)
      <div className='table-wrap'>
        <ReactTable
          className='-striped -highlight'
          data={data}
          columns={columns}
          defaultPageSize={10}
+          getTdProps={(state, rowInfo, column, instance) => {
+            return {
+              onMouseEnter: e => console.log('Cell - onMouseEnter', {
+                state,
+                rowInfo,
+                column,
+                instance,
+                event: e
+              })
+            }
+          }}
        />
      </div>
      <div style={{textAlign: 'center'}}>
@ -53,9 +65,6 @@ export default () => {

 function getCode () {
  return `
-import ReactTable from 'react-table'
-
-// Create some column definitions
 const columns = [{
  header: 'Name',
  columns: [{
@ -74,12 +83,23 @@ const columns = [{
  }]
 }]

-// Display your table!
 return (
  <ReactTable
+    className='-striped -highlight'
    data={data}
    columns={columns}
    defaultPageSize={10}
+    getTdProps={(state, rowInfo, column, instance) => {
+      return {
+        onMouseEnter: e => console.log('Cell - onMouseEnter', {
+          state,
+          rowInfo,
+          column,
+          instance,
+          event: e
+        })
+      }
+    }}
  />
 )
  `
--- a/stories/CustomExpanderPosition.js
+++ b/stories/CustomExpanderPosition.js
@ -79,8 +79,6 @@ const columns = [{
    id: 'lastName',
    accessor: d => d.lastName
  }]
-}, {
-  expander: true
 }, {
  header: 'Info',
  columns: [{
@ -91,6 +89,8 @@ const columns = [{
      return <span>{row.aggregated ? \`$\{row.value} (avg)\` : row.value}</span>
    }
  }]
+}, {
+  expander: true
 }]

 return (
@ -100,7 +100,6 @@ return (
    columns={columns}
    defaultPageSize={10}
    SubComponent={() => <span>Hello</span>}
-    pivotBy={['lastName']}
  />
 )
  `
--- a/stories/DefaultSorting.js
+++ b/stories/DefaultSorting.js
@ -28,8 +28,7 @@ export default () => {
    header: 'Info',
    columns: [{
      header: 'Age',
-      accessor: 'age',
-      sort: 'desc'
+      accessor: 'age'
    }]
  }]

@ -41,6 +40,10 @@ export default () => {
          data={data}
          columns={columns}
          defaultPageSize={10}
+          defaultSorting={[{
+            id: 'age',
+            desc: true
+          }]}
        />
      </div>
      <div style={{textAlign: 'center'}}>
@ -54,34 +57,35 @@ export default () => {

 function getCode () {
  return `
-import ReactTable from 'react-table'
-
-// Create some column definitions
-const columns = [{
-  header: 'Name',
-  columns: [{
-    header: 'First Name',
-    accessor: 'firstName'
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
  }, {
-    header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age'
+    }]
  }]
-}, {
-  header: 'Info',
-  columns: [{
-    header: 'Age',
-    accessor: 'age'
-  }]
-}]

-// Display your table!
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
-)
+  return (
+    <ReactTable
+      className='-striped -highlight'
+      data={data}
+      columns={columns}
+      defaultPageSize={10}
+      defaultSorting={[{
+        id: 'age',
+        desc: true
+      }]}
+    />
+  )
  `
 }
--- a/stories/OneHundredKRows.js
+++ b/stories/OneHundredKRows.js
@ -100,15 +100,24 @@ const columns = [{
  header: 'Info',
  columns: [{
    header: 'Age',
-    accessor: 'age'
+    accessor: 'age',
+    aggregate: vals => _.round(_.mean(vals)),
+    render: row => {
+      return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
+    }
+  }, {
+    header: 'Visits',
+    accessor: 'visits',
+    aggregate: vals => _.sum(vals)
  }]
 }]

-export default (
+return (
  <ReactTable
    data={data}
    columns={columns}
    defaultPageSize={10}
+    className='-striped -highlight'
    pivotBy={['firstName', 'lastName']}
    SubComponent={(row) => {
      return (
--- a/stories/Pivoting.js
+++ b/stories/Pivoting.js
@ -50,12 +50,6 @@ export default () => {
          className='-striped -highlight'
          defaultPageSize={10}
          pivotBy={['firstName', 'lastName']}
-          // expandedRows={{
-          //   2: true,
-          //   3: {
-          //     2: true
-          //   }
-          // }}
        />
      </div>
      <div style={{textAlign: 'center'}}>
@ -83,38 +77,25 @@ const columns = [{
  header: 'Info',
  columns: [{
    header: 'Age',
-    accessor: 'age'
+    accessor: 'age',
+    aggregate: vals => _.round(_.mean(vals)),
+    render: row => {
+      return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
+    }
+  }, {
+    header: 'Visits',
+    accessor: 'visits',
+    aggregate: vals => _.sum(vals)
  }]
 }]

-export default (
+return (
  <ReactTable
    data={data}
    columns={columns}
+    className='-striped -highlight'
    defaultPageSize={10}
-    SubComponent={(row) => {
-      return (
-        <div style={{padding: '20px'}}>
-          <em>You can put any component you want here, even another React Table!</em>
-          <br />
-          <br />
-          <ReactTable
-            data={data}
-            columns={columns}
-            defaultPageSize={3}
-            showPagination={false}
-            SubComponent={(row) => {
-              return (
-                <div style={{padding: '20px'}}>
-                  <em>It even has access to the row data: </em>
-                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
-                </div>
-              )
-            }}
-          />
-        </div>
-      )
-    }}
+    pivotBy={['firstName', 'lastName']}
  />
 )
  `
--- a/stories/PivotingSubComponents.js
+++ b/stories/PivotingSubComponents.js
@ -100,15 +100,24 @@ const columns = [{
  header: 'Info',
  columns: [{
    header: 'Age',
-    accessor: 'age'
+    accessor: 'age',
+    aggregate: vals => _.round(_.mean(vals)),
+    render: row => {
+      return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
+    }
+  }, {
+    header: 'Visits',
+    accessor: 'visits',
+    aggregate: vals => _.sum(vals)
  }]
 }]

-export default (
+return (
  <ReactTable
    data={data}
    columns={columns}
    defaultPageSize={10}
+    className='-striped -highlight'
    pivotBy={['firstName', 'lastName']}
    SubComponent={(row) => {
      return (
--- a/stories/Simple.js
+++ b/stories/Simple.js
@ -40,6 +40,13 @@ export default () => {
          data={data}
          columns={columns}
          defaultPageSize={10}
+          getTdProps={() => {
+            return {
+              onClick: () => {
+                console.log('clicked')
+              }
+            }
+          }}
        />
      </div>
      <div style={{textAlign: 'center'}}>