2.1.3

README.md

@@ -15,20 +15,28 @@ A fast, lightweight, opinionated table and datagrid built on React
 - Server-side data
 - Minimal design & easily themeable
 
-Why you may **not** want to use this component:
-- No support for infinite scrolling yet. We chose to avoid the complex problems that come with it, and instead provide reliable and predictable pagination.
-
 ## [Demo](http://react-table.zabapps.com)
 
+## Table of Contents
+- [Installation](#nstallation)
+- [Example](#example)
+- [Data](#data)
+- [Default Props](#default-props)
+- [Columns](#columns)
+- [Styles](#styles)
+- [Header Groups](#header-groups)
+- [Server-side Data](#server-side-data)
+- [Multi-sort](#multi-sort)
+- [Component Overrides](#component-overrides)
+
+<a name="installation"></a>
 ## Installation
 ```bash
 $ npm install react-table
 ```
 
-#### Styles
-React-table is built to be dropped into existing applications or styled from the ground up, but if you'd like a decent starting point, you can optionally include our default theme `react-table.css`.  We think it looks great, honestly :)
-
-## Quick Usage
+<a name="example"></a>
+## Example
 ```javascript
 import ReactTable from 'react-table'
 
@@ -63,9 +71,109 @@ const columns = [{
 />
 ```
 
-## Client-side Data
-To use client-side data, simply pass the `data` prop an array. Client-side filtering and pagination is built in, and your table will update gracefully if you change any props.
+<a name="data"></a>
+## Data
+Every React-Table instance requires you to set the `data` prop. To use client-side data, simply pass the `data` prop anything that resembles an array or object. Client-side filtering and pagination is built in, and your table will update gracefully if you change any props. [Server-side data](#server-side-data) is also supported.
 
+
+<a name="default-props"></a>
+## Default Props
+These are the default props for the main react component `<ReactTable />`
+```javascript
+{
+  // Classes
+  className: '-striped -highlight', // The most top level className for the component
+  tableClassName: '', // ClassName for the `table` element
+  theadClassName: '', // ClassName for the `thead` element
+  tbodyClassName: '', // ClassName for the `tbody` element
+  trClassName: '', // ClassName for all `tr` elements
+  paginationClassName: '' // ClassName for `pagination` element
+  //
+  pageSize: 20,
+  minRows: 0, // Ensure this many rows are always rendered, regardless of rows on page
+  // Global Column Defaults
+  column: { // default properties for every column's model
+    sortable: true,
+    show: true
+  },
+  // Text
+  previousText: 'Previous',
+  nextText: 'Next'
+}
+```
+
+You can easily override the core defaults like so:
+
+```javascript
+import { ReactTableDefaults } from 'react-table'
+
+Object.assign(ReactTableDefaults, {
+  pageSize: 10,
+  minRows: 3,
+  // etc...
+})
+```
+
+Or just define them on the component per-instance
+
+```javascript
+<ReactTable
+  pageSize={10}
+  minRows={3}
+  // etc...
+  />
+```
+
+<a name="columns"></a>
+## Columns
+Every React-Table instance requires a `columns` prop, which is an array of objects containing the following properties
+
+```javascript
+[{
+  // Required
+  header: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
+  accessor: 'propertyName' or Accessor eg. (row) => row.propertyName,
+
+  // 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
+  id: 'myProperty',
+
+  // Optional
+  className: '', // Set the classname of the `th/td` element of the column
+  innerClassName: '', // Set the classname of the `.th-inner/.td-inner` element of the column
+  columns: [...] // See Header Groups section below
+  render: JSX eg. ({row, value, index, viewIndex}) => <span>{value}</span>, // Provide a JSX element or stateless function to render whatever you want as the column's cell with access to the entire row
+  sortable: true,
+  sort: 'asc' or 'desc',
+  show: true,
+  width: Number, // Locks the column width to this amount
+  minWidth: Number // Allows the column to flex above this minimum amount
+}]
+```
+
+<a name="styles"></a>
+## Styles
+React-table is built to be dropped into existing applications or styled from the ground up, but if you'd like a decent starting point, you can optionally include our default theme `react-table.css`.  We think it looks great, honestly :)
+
+<a name="header-groups"></a>
+## Header Groups
+To group columns with another header column, just nest your columns in a header column like so:
+```javascript
+const columns = [{
+  header: 'Favorites',
+  columns: [{
+    header: 'Color',
+    accessor: 'favorites.color'
+  }, {
+    header: 'Food',
+    accessor: 'favorites.food'
+  } {
+    header: 'Actor',
+    accessor: 'favorites.actor'
+  }]
+}]
+```
+
+<a name="server-side-data"></a>
 ## Server-side Data
 If you want to handle pagination, and sorting on the server, `react-table` makes it easy on you. Instead of passing the `data` prop an array, you provide a function instead.
 
@@ -108,97 +216,11 @@ This function will be called on mount, pagination events, and sorting events. It
 />
 ```
 
+<a name="multi-sort"></a>
 ## Multi-Sort
 When clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!
 
-## Default Props
-```javascript
-{
-  // Classes
-  className: '-striped -highlight', // The most top level className for the component
-  tableClassName: '', // ClassName for the `table` element
-  theadClassName: '', // ClassName for the `thead` element
-  tbodyClassName: '', // ClassName for the `tbody` element
-  trClassName: '', // ClassName for all `tr` elements
-  paginationClassName: '' // ClassName for `pagination` element
-  //
-  pageSize: 20,
-  minRows: 0, // Ensure this many rows are always rendered, regardless of rows on page
-  // Global Column Defaults
-  column: { // default properties for every column's model
-    sortable: true,
-    show: true
-  },
-  // Text
-  previousText: 'Previous',
-  nextText: 'Next'
-}
-```
-
-You can easily override the core defaults like so:
-
-```javascript
-import { ReactTableDefaults } from 'react-table'
-
-Object.assign(ReactTableDefaults, {
-  pageSize: 10,
-  minRows: 3,
-  // etc...
-})
-```
-
-Or just define them on the component
-
-```javascript
-<ReactTable
-  pageSize={10}
-  minRows={3}
-  // etc...
-  />
-```
-
-## Column Props
-
-```javascript
-[{
-  // Required
-  header: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
-  accessor: 'propertyName' or Accessor eg. (row) => row.propertyName,
-
-  // 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
-  id: 'myProperty',
-
-  // Optional
-  className: '', // Set the classname of the `th/td` element of the column
-  innerClassName: '', // Set the classname of the `.th-inner/.td-inner` element of the column
-  columns: [...] // See Header Groups section below
-  render: JSX eg. ({row, value, index}) => <span>{value}</span>, // Provide a JSX element or stateless function to render whatever you want as the column's cell with access to the entire row
-  sortable: true,
-  sort: 'asc' or 'desc',
-  show: true,
-  width: Number, // Locks the column width to this amount
-  minWidth: Number // Allows the column to flex above this minimum amount
-}]
-```
-
-## Header Groups
-To group columns with another header column, just nest your columns in a header column like so:
-```javascript
-const columns = [{
-  header: 'Favorites',
-  columns: [{
-    header: 'Color',
-    accessor: 'favorites.color'
-  }, {
-    header: 'Food',
-    accessor: 'favorites.food'
-  } {
-    header: 'Actor',
-    accessor: 'favorites.actor'
-  }]
-}]
-```
-
+<a name="component-overrides"></a>
 ## Component Overrides
 Though we wouldn't suggest it, `react-table` has the ability to change the core componentry it used to render it's table. You can do so by assigning a react component to it's corresponding global prop, or on a one-off basis like so:
 ```javascript

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -52,6 +52,7 @@
     "ignore": [
       "node_modules",
       "dist",
+      "lib",
       "example",
       "react-table.js"
     ]

src/index.js

@@ -96,17 +96,20 @@ export default React.createClass({
     }
     const makeDecoratedColumn = (column) => {
       const dcol = Object.assign({}, this.props.column, column)
+
       if (typeof dcol.accessor === 'string') {
         dcol.id = dcol.id || dcol.accessor
         const accessorString = dcol.accessor
         dcol.accessor = row => _.get(row, accessorString)
+        return dcol
       }
-      if (!dcol.id) {
-        console.warn('No column ID found for column: ', dcol)
-      }
-      if (!dcol.accessor) {
-        console.warn('No column accessor found for column: ', dcol)
+
+      if (dcol.accessor && !dcol.id) {
+        console.warn(dcol)
+        throw new Error('A column id is required if using a non-string accessor for column above.')
       }
+
+      dcol.accessor = d => undefined
       return dcol
     }
 
@@ -196,9 +199,10 @@ export default React.createClass({
     }
   },
   accessData (data) {
-    return data.map((d) => {
+    return data.map((d, i) => {
       const row = {
-        __original: d
+        __original: d,
+        __index: i
       }
       this.decoratedColumns.forEach(column => {
         row[column.id] = column.accessor(d)
@@ -337,7 +341,8 @@ export default React.createClass({
                             <Cell
                               value={row[column.id]}
                               row={row.__original}
-                              index={i}
+                              index={row.__index}
+                              viewIndex={i}
                             />
                             ) : typeof Cell !== 'undefined' ? Cell
                           : row[column.id]}