Fixes and Readme updates

README.md

@@ -158,8 +158,11 @@ Or just define them on the component
   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
-  id: 'myProperty', // A unique ID is needed if the accessor is not a string or if you would like to override the column name used in server-side calls
+  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',
@@ -168,3 +171,39 @@ Or just define them on the component
   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'
+  }]
+}]
+```
+
+## Contributing
+To suggest a feature, create an issue if it does not already exist.
+If you would like to help develop a suggested feature follow these steps:
+
+- Fork this repo
+- Run `npm install`
+- Run `npm watch`
+- Implement your changes to files in the `src/` directory
+- Submit PR for review
+
+If you would like to preview your changes, you can utilize the example like so:
+
+- `cd example`
+- Run `npm install`
+- Run `npm watch`
+- Make changes to the example in `src/screens/index.js` if needed
+- View changes at `localhost:8000`

example/src/app.styl

@@ -33,10 +33,10 @@ html
   min-height 100vh
 
 body
-  background $clr-jumpsuit1
-  background radial-gradient(ellipse at center, $clr-jumpsuit2 0%, $clr-jumpsuit1 100%)
-  font-family $fnt-open-sans
-  font-weight 300
+  background: $clr-jumpsuit1
+  background: radial-gradient(ellipse at center, $clr-jumpsuit2 0%, $clr-jumpsuit1 100%)
+  font-family: $fnt-open-sans
+  font-weight: 300
   padding-bottom: 50px
 
 h1

example/src/screens/index.js

@@ -15,14 +15,20 @@ export default Component({
     })
 
     const columns = [{
-      header: 'First Name',
-      accessor: 'firstName'
+      header: 'Name',
+      columns: [{
+        header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        header: 'Last Name',
+        accessor: 'lastName'
+      }]
     }, {
-      header: 'Last Name',
-      accessor: 'lastName'
-    }, {
-      header: 'Age',
-      accessor: 'age'
+      header: 'Info',
+      columns: [{
+        header: 'Age',
+        accessor: 'age'
+      }]
     }]
 
     return (

example/src/state/github.js

@@ -1,39 +0,0 @@
-import { State } from 'jumpsuit'
-import _ from 'lodash'
-import axios from 'axios'
-
-const githubState = State('counter', {
-  initial: {
-    search: null,
-    loading: false,
-    user: {}
-  },
-
-  updateSearch: (state, payload) => ({
-    search: payload,
-    loading: true
-  }),
-
-  receiveUser: (state, payload) => ({
-    user: payload,
-    loading: false
-  })
-})
-
-export default githubState
-
-const getUserDebounced = _.debounce((username) => {
-  axios.get(`https://api.github.com/users/${username}`)
-    .then(({ data }) => {
-      githubState.receiveUser(data)
-    })
-    .catch((err) => {
-      githubState.receiveUser({})
-      console.error(err)
-    })
-}, 1000)
-
-export function getUser (username) {
-  githubState.updateSearch(username)
-  if (username) getUserDebounced(username)
-}

example/src/state/index.js

@@ -1,3 +0,0 @@
-import github from './github'
-
-export default { github }

src/index.js

@@ -261,10 +261,10 @@ export default React.createClass({
                   <th
                     key={i}
                     className={classnames(
-                      sort ? (sort.asc ? 'sort-asc' : 'sort-desc') : '',
+                      sort ? (sort.asc ? '-sort-asc' : '-sort-desc') : '',
                       {
-                        'cursor-pointer': column.sortable,
-                        'hidden': !show
+                        '-cursor-pointer': column.sortable,
+                        '-hidden': !show
                       }
                     )}
                     onClick={(e) => {

src/index.styl

@@ -57,7 +57,7 @@ $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
           > *
             text-shadow: none
 
-    &.hidden
+    &.-hidden
       border:0 !important
       opacity: 0 !important
       .-th-inner
@@ -89,10 +89,12 @@ $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
       border-right: 1px solid alpha(black, .05)
       transition box-shadow .3s $easeOutBack
       box-shadow:inset 0 0 0 0 transparent
-      &.sort-asc
+      &.-sort-asc
         box-shadow:inset 0 3px 0 0 alpha(black, .6)
-      &.sort-desc
+      &.-sort-desc
         box-shadow:inset 0 -3px 0 0 alpha(black, .6)
+      &.-cursor-pointer
+        cursor: pointer
 
   tbody
     z-index:0