4.2.5

Fix utils.groupBy where watch key would cause error in Firefox
No cname needed
2026-08-19 16:30:21 +00:00 · 2017-01-19 19:37:48 -07:00 · 2017-01-19 19:37:32 -07:00 · 2017-01-18 21:27:15 -07:00 · 2017-01-18 21:22:21 -07:00 · 2017-01-18 21:17:11 -07:00
17 changed files with 245 additions and 98 deletions
@@ -11,6 +11,7 @@ import '../react-table.css'
 import Readme from '../README.md'
 //
 import Simple from '../stories/Simple.js'
+import CellRenderers from '../stories/CellRenderers.js'
 import ServerSide from '../stories/ServerSide.js'
 import SubComponents from '../stories/SubComponents.js'
 import Pivoting from '../stories/Pivoting.js'
@@ -31,7 +32,8 @@ configure(() => {
      return <ReadmeCmp />
    })
  storiesOf('2. Demos')
-    .add('Client-side Data', Simple)
+    .add('Simple Table', Simple)
+    .add('Cell Renderers & Custom Components', CellRenderers)
    .add('Server-side Data', ServerSide)
    .add('Sub Components', SubComponents)
    .add('Pivoting & Aggregation', Pivoting)
@@ -1 +0,0 @@
-react-table.js.org
@@ -35,7 +35,7 @@
 - Fully controllable via optional props and callbacks
 - <a href="https://medium.com/@tannerlinsley/why-i-wrote-react-table-and-the-problems-it-has-solved-for-nozzle-others-445c4e93d4a8#.axza4ixba" target="\_parent">"Why I wrote React Table and the problems it has solved for Nozzle.io</a> by Tanner Linsley

-## <a href="http://react-table.zabapps.com/?selectedKind=2.%20Demos&selectedStory=Client-side%20Data&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Demo</a>
+## <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Client-side%20Data&full=0&down=0&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Demo</a>

 ## Table of Contents
 - [Installation](#installation)
@@ -0,0 +1 @@
+react-table.js.org
@@ -16,7 +16,7 @@
      <body>
        <div id="root"></div>
        <div id="error-display"></div>
-        <script src="static/preview.30adfa2464622c0f1904.bundle.js"></script>
+        <script src="static/preview.6255f53218a1ea5fdea0.bundle.js"></script>
      </body>
    </html>
  
@@ -38,7 +38,7 @@
      </head>
      <body style="margin: 0;">
        <div id="root"></div>
-        <script src="static/manager.32cbfa2b6d56d1f8fbac.bundle.js"></script>
+        <script src="static/manager.7351266fe8166602d73f.bundle.js"></script>
      </body>
    </html>
  
@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.32cbfa2b6d56d1f8fbac.bundle.js","sources":["webpack:///static/manager.32cbfa2b6d56d1f8fbac.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AAwgEA;AAqiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAs3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/manager.7351266fe8166602d73f.bundle.js","sources":["webpack:///static/manager.7351266fe8166602d73f.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AA4gEA;AAiiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAu3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}
@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.30adfa2464622c0f1904.bundle.js","sources":["webpack:///static/preview.30adfa2464622c0f1904.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAo9DA;AA24DA;AAg3CA;AAkoIA;AAgwGA;AA+sPA;AAk6CA;AAq4DA;AA4gDA;AAmpDA;AA05DA;AAkoDA;AAu+CA;AA0rDA;AAiqEA;AAyoDA;AA8xCA;AAmnDA;AAqzDA;AAqhEA;AAqwDA;AAk7DA;AAw1CA;AAisFA;AAw3GA;AAo/CA;AAikCA;AA29BA;AA+vBA;AAy1CA","sourceRoot":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.6255f53218a1ea5fdea0.bundle.js","sources":["webpack:///static/preview.6255f53218a1ea5fdea0.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAuuDA;AA46EA;AA2lGA;AAmpIA;AAnwOA;AAsweA;AA8zDA;AA0nEA;AAqkDA;AAq+CA;AAuiEA;AAupDA;AA68CA;AAioDA;AAqsEA;AAmpDA;AAgvCA;AA6oDA;AAwkDA;AAypEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AAyqDA;AAskCA;AAyyCA;AA0aA;AAo8CA","sourceRoot":""}
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "4.2.4",
+  "version": "4.2.5",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -135,7 +135,7 @@ function prefixAll (obj) {
 function groupBy (xs, key) {
  return xs.reduce((rv, x, i) => {
    const resKey = typeof key === 'function' ? key(x, i) : x[key]
-    rv[resKey] = rv[resKey] || []
+    rv[resKey] = isArray(rv[resKey]) ? rv[resKey] : []
    rv[resKey].push(x)
    return rv
  }, {})
@@ -0,0 +1,169 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  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 }),
+      progress: Math.floor(Math.random() * 100),
+      status: statusChance > 0.66 ? 'relationship'
+        : statusChance > 0.33 ? 'complicated'
+        : 'single'
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Profile Progress',
+      accessor: 'progress',
+      render: row => (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#dadada',
+            borderRadius: '2px'
+          }}
+        >
+          <div
+            style={{
+              width: `${row.value}%`,
+              height: '100%',
+              backgroundColor: row.value > 66 ? '#85cc00'
+                : row.value > 33 ? '#ffbf00'
+                : '#ff2e00',
+              borderRadius: '2px',
+              transition: 'all .2s ease-out'
+            }}
+          />
+        </div>
+      )
+    }, {
+      header: 'Status',
+      accessor: 'status',
+      render: row => (
+        <span>
+          <span style={{
+            color: row.value === 'relationship' ? '#ff2e00'
+              : row.value === 'complicated' ? '#ffbf00'
+              : '#57d500',
+            transition: 'all .3s ease'
+          }}>
+            &#x25cf;
+          </span> {
+            row.value === 'relationship' ? 'In a relationship'
+            : row.value === 'complicated' ? `It's complicated`
+            : 'Single'
+          }
+        </span>
+      )
+    }]
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Profile Progress',
+    accessor: 'progress',
+    render: row => (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#dadada',
+          borderRadius: '2px'
+        }}
+      >
+        <div
+          style={{
+            width: \`$\{row.value}%\`,
+            height: '100%',
+            backgroundColor: row.value > 66 ? '#85cc00'
+              : row.value > 33 ? '#ffbf00'
+              : '#ff2e00',
+            borderRadius: '2px',
+            transition: 'all .2s ease-out'
+          }}
+        />
+      </div>
+    )
+  }, {
+    header: 'Status',
+    accessor: 'status',
+    render: row => (
+      <span>
+        <span style={{
+          color: row.value === 'relationship' ? '#ff2e00'
+            : row.value === 'complicated' ? '#ffbf00'
+            : '#57d500',
+          transition: 'all .3s ease'
+        }}>
+          &#x25cf;
+        </span> {
+          row.value === 'relationship' ? 'In a relationship'
+          : row.value === 'complicated' ? \`It's complicated\`
+          : 'Single'
+        }
+      </span>
+    )
+  }]
+}]
+
+return (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}
@@ -135,42 +135,18 @@ export default React.createClass({
      })
  },
  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'
-      }]
-    }]
-
    return (
      <ReactTable
        columns={[{
-          header: 'Name',
-          columns: [{
-            header: 'First Name',
-            accessor: 'firstName'
-          }, {
-            header: 'Last Name',
-            id: 'lastName',
-            accessor: d => d.lastName
-          }]
+          header: 'First Name',
+          accessor: 'firstName'
        }, {
-          header: 'Info',
-          columns: [{
-            header: 'Age',
-            accessor: 'age'
-          }]
+          header: 'Last Name',
+          id: 'lastName',
+          accessor: d => d.lastName
+        }, {
+          header: 'Age',
+          accessor: 'age'
        }]}
        manual // Forces table not to paginate or sort automatically, so we can handle it server-side
        defaultPageSize={10}
Author	SHA1	Message	Date
Tanner Linsley	943332d9e1	4.2.5	2017-01-19 19:37:48 -07:00
Tanner Linsley	66f1b04ba6	Fix utils.groupBy where `watch` key would cause error in Firefox	2017-01-19 19:37:32 -07:00
Tanner Linsley	bea4b366d6	No cname needed	2017-01-18 21:27:15 -07:00
Tanner Linsley	64168eb3ef	Updates demo site	2017-01-18 21:22:21 -07:00
Tanner Linsley	77be7c066f	Create CNAME	2017-01-18 21:17:11 -07:00
Tanner Linsley	e9e69428a2	Updated Docs	2017-01-18 10:22:59 -07:00
Tanner Linsley	3c039789f1	Updated Docs	2017-01-18 10:22:47 -07:00
Tanner Linsley	5865f59129	New Stories	2017-01-18 10:01:34 -07:00
Tanner Linsley	c663cce719	Create CNAME	2017-01-18 09:16:35 -07:00
Tanner Linsley	a6f803c1a3	Updated Storybook	2017-01-18 09:09:59 -07:00
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"static/manager.32cbfa2b6d56d1f8fbac.bundle.js","sources":["webpack:///static/manager.32cbfa2b6d56d1f8fbac.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AAwgEA;AAqiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAs3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}`
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/manager.7351266fe8166602d73f.bundle.js","sources":["webpack:///static/manager.7351266fe8166602d73f.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AA4gEA;AAiiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAu3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}`
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"static/preview.30adfa2464622c0f1904.bundle.js","sources":["webpack:///static/preview.30adfa2464622c0f1904.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAo9DA;AA24DA;AAg3CA;AAkoIA;AAgwGA;AA+sPA;AAk6CA;AAq4DA;AA4gDA;AAmpDA;AA05DA;AAkoDA;AAu+CA;AA0rDA;AAiqEA;AAyoDA;AA8xCA;AAmnDA;AAqzDA;AAqhEA;AAqwDA;AAk7DA;AAw1CA;AAisFA;AAw3GA;AAo/CA;AAikCA;AA29BA;AA+vBA;AAy1CA","sourceRoot":""}`
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/preview.6255f53218a1ea5fdea0.bundle.js","sources":["webpack:///static/preview.6255f53218a1ea5fdea0.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAuuDA;AA46EA;AA2lGA;AAmpIA;AAnwOA;AAsweA;AA8zDA;AA0nEA;AAqkDA;AAq+CA;AAuiEA;AAupDA;AA68CA;AAioDA;AAqsEA;AAmpDA;AAgvCA;AA6oDA;AAwkDA;AAypEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AAyqDA;AAskCA;AAyyCA;AA0aA;AAo8CA","sourceRoot":""}`