Styles, ClassNames & Row Style/ClassName callbacks

README.md

@@ -87,7 +87,18 @@ These are the default props for the main react component `<ReactTable />`
   theadClassName: '', // ClassName for the `thead` element
   tbodyClassName: '', // ClassName for the `tbody` element
   trClassName: '', // ClassName for all `tr` elements
+  trClassCallback: row => null, // A call back to dynamically add classes (via the classnames module) to a row element
   paginationClassName: '' // ClassName for `pagination` element
+  // Styles
+  style: {}, // Main style object for the component
+  tableStyle: {}, // style object for the `table` component
+  theadStyle: {}, // style object for the `thead` component
+  tbodyStyle: {}, // style object for the `tbody` component
+  trStyle: {}, // style object for the `tr` component
+  trStyleCallback: row => {}, // A call back to dynamically add styles to a row element
+  thStyle: {}, // style object for the `th` component
+  tdStyle: {}, // style object for the `td` component
+  paginationStyle: {}, // style object for the `paginination` component
   //
   pageSize: 20,
   minRows: 0, // Ensure this many rows are always rendered, regardless of rows on page
@@ -130,23 +141,31 @@ Every React-Table instance requires a `columns` prop, which is an array of objec
 
 ```javascript
 [{
-  // Required
-  header: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
+  // General
   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
+  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',
   show: true,
-  width: Number, // Locks the column width to this amount
   minWidth: Number // Allows the column to flex above this minimum amount
+
+  // Cell Options
+  className: '', // Set the classname of the `td` element of the column
+  style: {}, // Set the style of the `td` element of the column
+  innerClassName: '', // Set the classname of the `.-td-inner` element of the column
+  innerStyle: {}, // Set the style of the `.-td-inner` element of the column
+  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
+
+  // Header & HeaderGroup Options
+  header: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
+  headerClassName: '', // Set the classname of the `th` element of the column
+  headerStyle: {}, // Set the style of the `th` element of the column
+  headerInnerClassName: '', // Set the classname of the `.-th-inner` element of the column
+  headerInnerStyle: {}, // Set the style of the `.th-inner` element of the column
+
+  // Header Groups only
+  columns: [...] // See Header Groups section below
+
 }]
 ```
 

package.json

@@ -21,7 +21,8 @@
     "watch": "onchange 'src/**' -i -- npm-run-all build:*",
     "test": "standard",
     "umd": "rm -rf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
-    "prepublish": "npm-run-all build:* && npm run umd"
+    "prepublish": "npm-run-all build:* && npm run umd",
+    "postpublish": "git push --tags"
   },
   "dependencies": {
     "classnames": "^2.2.5"

src/index.js

@@ -22,14 +22,36 @@ export const ReactTableDefaults = {
   theadClassName: '',
   tbodyClassName: '',
   trClassName: '',
+  trClassCallback: d => null,
+  thClassName: '',
+  thGroupClassName: '',
+  tdClassName: '',
   paginationClassName: '',
+  // Styles
+  style: {},
+  tableStyle: {},
+  theadStyle: {},
+  tbodyStyle: {},
+  trStyle: {},
+  trStyleCallback: d => {},
+  thStyle: {},
+  tdStyle: {},
+  paginationStyle: {},
   //
   pageSize: 20,
   minRows: 0,
   // Global Column Defaults
   column: {
     sortable: true,
-    show: true
+    show: true,
+    className: '',
+    style: {},
+    innerClassName: '',
+    innerStyle: {},
+    headerClassName: '',
+    headerStyle: {},
+    headerInnerClassName: '',
+    headerInnerStyle: {}
   },
   // Text
   previousText: 'Previous',
@@ -255,19 +277,35 @@ export default React.createClass({
     const NextComponent = this.props.nextComponent || defaultButton
 
     return (
-      <div className={classnames(this.props.className, 'ReactTable')}>
-        <TableComponent className={classnames(this.props.tableClassName)}>
+      <div
+        className={classnames(this.props.className, 'ReactTable')}
+        style={this.props.style}
+      >
+        <TableComponent
+          className={classnames(this.props.tableClassName)}
+          style={this.props.tableStyle}
+        >
           {this.hasHeaderGroups && (
-            <TheadComponent className={classnames(this.props.theadClassName, '-headerGroups')}>
-              <TrComponent className={this.props.trClassName}>
+            <TheadComponent
+              className={classnames(this.props.theadGroupClassName, '-headerGroups')}
+              style={this.props.theadStyle}
+            >
+              <TrComponent
+                className={this.props.trClassName}
+                style={this.props.trStyle}
+              >
                 {this.headerGroups.map((column, i) => {
                   return (
                     <ThComponent
                       key={i}
-                      className={classnames(column.className)}
-                      colSpan={column.columns.length}>
+                      colSpan={column.columns.length}
+                      className={classnames(this.props.thClassname, column.headerClassName)}
+                      style={Object.assign({}, this.props.thStyle, column.headerStyle)}
+                    >
                       <div
-                        className={classnames(column.innerClassName, '-th-inner')}>
+                        className={classnames(column.headerInnerClassName, '-th-inner')}
+                        style={Object.assign({}, this.props.thInnerStyle, column.headerInnerStyle)}
+                      >
                         {typeof column.header === 'function' ? (
                           <column.header
                             data={this.props.data}
@@ -281,8 +319,14 @@ export default React.createClass({
               </TrComponent>
             </TheadComponent>
           )}
-          <TheadComponent className={classnames(this.props.theadClassName)}>
-            <TrComponent className={this.props.trClassName}>
+          <TheadComponent
+            className={classnames(this.props.theadClassName)}
+            style={this.props.theadStyle}
+          >
+            <TrComponent
+              className={this.props.trClassName}
+              style={this.props.trStyle}
+            >
               {this.decoratedColumns.map((column, i) => {
                 const sort = this.state.sorting.find(d => d.id === column.id)
                 const show = typeof column.show === 'function' ? column.show() : column.show
@@ -290,22 +334,25 @@ export default React.createClass({
                   <ThComponent
                     key={i}
                     className={classnames(
-                      column.className,
+                      this.props.thClassname,
+                      column.headerClassName,
                       sort ? (sort.asc ? '-sort-asc' : '-sort-desc') : '',
                       {
                         '-cursor-pointer': column.sortable,
                         '-hidden': !show
                       }
                     )}
+                    style={Object.assign({}, this.props.thStyle, column.headerStyle)}
                     onClick={(e) => {
                       column.sortable && this.sortColumn(column, e.shiftKey)
-                    }}>
+                    }}
+                  >
                     <div
-                      className={classnames(column.innerClassName, '-th-inner')}
-                      style={{
-                        width: column.width + 'px',
+                      className={classnames(column.headerInnerClassName, '-th-inner')}
+                      style={Object.assign({}, column.headerInnerStyle, {
                         minWidth: column.minWidth + 'px'
-                      }}>
+                      })}
+                    >
                       {typeof column.header === 'function' ? (
                         <column.header
                           data={this.props.data}
@@ -318,31 +365,41 @@ export default React.createClass({
               })}
             </TrComponent>
           </TheadComponent>
-          <TbodyComponent className={classnames(this.props.tbodyClassName)}>
+          <TbodyComponent
+            className={classnames(this.props.tbodyClassName)}
+            style={classnames(this.props.tbodyStyle)}
+          >
             {pageRows.map((row, i) => {
+              const rowInfo = {
+                row: row.__original,
+                index: row.__index,
+                viewIndex: i
+              }
               return (
                 <TrComponent
-                  className={classnames(this.props.trClassName)}
-                  key={i}>
+                  key={i}
+                  className={classnames(this.props.trClassName, this.props.trClassCallback(rowInfo))}
+                  style={Object.assign({}, this.props.trStyle, this.props.trStyleCallback(rowInfo))}
+                >
                   {this.decoratedColumns.map((column, i2) => {
                     const Cell = column.render
                     const show = typeof column.show === 'function' ? column.show() : column.show
                     return (
                       <TdComponent
+                        key={i2}
                         className={classnames(column.className, {hidden: !show})}
-                        key={i2}>
+                        style={Object.assign({}, this.props.tdStyle, column.style)}
+                      >
                         <div
                           className={classnames(column.innerClassName, '-td-inner')}
-                          style={{
-                            width: column.width + 'px',
+                          style={Object.assign({}, column.innerStyle, {
                             minWidth: column.minWidth + 'px'
-                          }}>
+                          })}
+                        >
                           {typeof Cell === 'function' ? (
                             <Cell
                               value={row[column.id]}
-                              row={row.__original}
-                              index={row.__index}
-                              viewIndex={i}
+                              {...rowInfo}
                             />
                             ) : typeof Cell !== 'undefined' ? Cell
                           : row[column.id]}
@@ -356,20 +413,24 @@ export default React.createClass({
             {padRows.map((row, i) => {
               return (
                 <TrComponent
+                  key={i}
                   className={classnames(this.props.trClassName, '-padRow')}
-                  key={i}>
+                  style={this.props.trStyle}
+                >
                   {this.decoratedColumns.map((column, i2) => {
                     const show = typeof column.show === 'function' ? column.show() : column.show
                     return (
                       <TdComponent
+                        key={i2}
                         className={classnames(column.className, {hidden: !show})}
-                        key={i2}>
+                        style={Object.assign({}, this.props.tdStyle, column.style)}
+                      >
                         <div
                           className={classnames(column.innerClassName, '-td-inner')}
-                          style={{
-                            width: column.width + 'px',
+                          style={Object.assign({}, column.innerStyle, {
                             minWidth: column.minWidth + 'px'
-                          }}>&nbsp;</div>
+                          })}
+                        >&nbsp;</div>
                       </TdComponent>
                     )
                   })}
@@ -379,11 +440,15 @@ export default React.createClass({
           </TbodyComponent>
         </TableComponent>
         {pagesLength > 1 && (
-          <div className={classnames(this.props.paginationClassName, '-pagination')}>
+          <div
+            className={classnames(this.props.paginationClassName, '-pagination')}
+            style={this.props.paginationStyle}
+          >
             <div className='-left'>
               <PreviousComponent
                 onClick={canPrevious && ((e) => this.previousPage(e))}
-                disabled={!canPrevious}>
+                disabled={!canPrevious}
+              >
                 {this.props.previousText}
               </PreviousComponent>
             </div>
@@ -393,7 +458,8 @@ export default React.createClass({
             <div className='-right'>
               <NextComponent
                 onClick={canNext && ((e) => this.nextPage(e))}
-                disabled={!canNext}>
+                disabled={!canNext}
+              >
                 {this.props.nextText}
               </NextComponent>
             </div>