Feature/issue 871 (setCellHeaderProps) and Feature/issue 714 (setTableProps)

README.md

@@ -185,7 +185,8 @@ The component accepts the following props:
 |**`onColumnViewChange`**|function||Callback function that triggers when a column view has been changed. `function(changedColumn: string, action: string) => void`
 |**`onTableChange`**|function||Callback function that triggers when table state has changed. `function(action: string, tableState: object) => void`
 |**`onTableInit`**|function||Callback function that triggers when table state has been initialized. `function(action: string, tableState: object) => void`
-|**`setRowProps`**|function||Is called for each row and allows to return custom props for this row based on its data. `function(row: array, dataIndex: number) => object`
+|**`setRowProps`**|function||Is called for each row and allows you to return custom props for this row based on its data. `function(row: array, dataIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
+|**`setTableProps`**|function||Is called for the table and allows you to return custom props for the table based on its data. `function() => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 
 ## Customize Columns
 
@@ -231,7 +232,8 @@ const columns = [
 |**`hint`**|string||Display hint icon with string as tooltip on hover.
 |**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn) => string`|` React Component`
 |**`customBodyRender`**|function||Function that returns a string or React component. Used as display data within all table cells of a given column. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js)
-|**`setCellProps`**|function||Is called for each cell and allows to return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object`
+|**`setCellProps`**|function||Is called for each cell and allows to you return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
+|**`setCellHeaderProps`**|function||Is called for each header cell and allows you to return custom props for the header cell based on its data. `function(columnMeta: object) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 
 `customHeadRender` is called with these arguments:
 

examples/customize-styling/index.js

@@ -2,11 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
 import {createMuiTheme, MuiThemeProvider, withStyles} from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 import classnames from 'classnames';
 
 const customStyles = {
   BusinessAnalystRow: {
-    '& td': {backgroundColor: "#F00"}
+    '& td': {backgroundColor: "#FAA"}
   },
   NameCell: {
     fontWeight: 900
@@ -15,11 +18,19 @@ const customStyles = {
 
 class Example extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      denseTable: false,
+      stacked: true
+    };
+  }
+
   getMuiTheme = () => createMuiTheme({
     overrides: {
       MUIDataTable: {
         root: {
-          backgroundColor: "#FF000",
+          backgroundColor: "#AAF",
         },
         paper: {
           boxShadow: "none",
@@ -33,6 +44,18 @@ class Example extends React.Component {
     }
   });
 
+  toggleDenseTable = (event) => {
+    this.setState({
+      denseTable: event.target.checked
+    });
+  }
+
+  toggleResponsive = (event) => {
+    this.setState({
+      stacked: event.target.checked ? true : false
+    });
+  }
+
   render() {
     const columns = [
       {
@@ -46,13 +69,25 @@ class Example extends React.Component {
                   [this.props.classes.NameCell]: value === "Mel Brooks"
                 })
             };
+          },
+          setCellHeaderProps: (value) => {
+            return {
+              className: classnames(
+                {
+                  [this.props.classes.NameCell]: true
+                }),
+                style: {
+                  textDecoration: 'underline'
+                }
+            };
           }
         }
       },
       {
         name: "Title",
         options: {
           filter: true,
+          setCellHeaderProps: (value) => ({style:{textDecoration:'underline'}}),
         }
       },
       {
@@ -112,7 +147,9 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: this.state.stacked ? 'stacked' : 'scrollMaxHeight',
+      fixedHeader: true,
+      rowHover: false,
       setRowProps: (row) => {
         return {
           className: classnames(
@@ -121,12 +158,44 @@ class Example extends React.Component {
             }),
           style: {border: '3px solid blue',}
         };
+      },
+      setTableProps: () => {
+        return {
+          padding: this.state.denseTable ? "none" : "default",
+
+          // material ui v4 only
+          size: this.state.denseTable ? "small" : "medium",
+        };
       }
 
     };
 
     return (
       <MuiThemeProvider theme={this.getMuiTheme()}>
+        <FormGroup row>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={this.state.denseTable}
+                onChange={this.toggleDenseTable}
+                value="denseTable"
+                color="primary"
+              />
+            }
+            label="Dense Table"
+          />
+          <FormControlLabel
+            control={
+              <Switch
+                checked={this.state.stacked}
+                onChange={this.toggleResponsive}
+                value="stacked"
+                color="primary"
+              />
+            }
+            label="Stacked Table"
+          />
+        </FormGroup>
         <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options}/>
       </MuiThemeProvider>
     );

src/MUIDataTable.js

@@ -124,6 +124,8 @@ class MUIDataTable extends React.Component {
             customHeadRender: PropTypes.func,
             customBodyRender: PropTypes.func,
             customFilterListRender: PropTypes.func,
+            setCellProps: PropTypes.func,
+            setCellHeaderProps: PropTypes.func,
           }),
         }),
       ]),
@@ -179,6 +181,8 @@ class MUIDataTable extends React.Component {
         }),
       }),
       onDownload: PropTypes.func,
+      setTableProps: PropTypes.func,
+      setRowProps: PropTypes.func,
     }),
     /** Pass and use className to style MUIDataTable as desired */
     className: PropTypes.string,
@@ -1229,6 +1233,10 @@ class MUIDataTable extends React.Component {
         break;
     }
 
+    let tableProps = this.options.setTableProps ? this.options.setTableProps() : {};
+    let tableClassNames = classnames(classes.tableRoot, tableProps.className);
+    delete tableProps.className; // remove className from props to avoid the className being applied twice
+
     return (
       <Paper
         elevation={this.options.elevation}
@@ -1279,7 +1287,12 @@ class MUIDataTable extends React.Component {
               setResizeable={fn => (this.setHeadResizeable = fn)}
             />
           )}
-          <MuiTable ref={el => (this.tableRef = el)} tabIndex={'0'} role={'grid'} className={classes.tableRoot}>
+          <MuiTable
+            ref={el => (this.tableRef = el)}
+            tabIndex={'0'}
+            role={'grid'}
+            className={tableClassNames}
+            {...tableProps}>
             <caption className={classes.caption}>{title}</caption>
             <TableHead
               columns={columns}

src/components/TableBodyCell.js

@@ -12,18 +12,26 @@ const defaultBodyCellStyles = theme => ({
     [theme.breakpoints.down('sm')]: {
       display: 'inline-block',
       fontSize: '16px',
-      height: '24px',
-      width: 'calc(50% - 80px)',
+      width: '50%',
       whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      height: '32px',
+      '&:nth-last-child(2)': {
+        borderBottom: 'none'
+      },
     },
   },
   responsiveStacked: {
     [theme.breakpoints.down('sm')]: {
       display: 'inline-block',
       fontSize: '16px',
-      width: 'calc(50% - 80px)',
+      width: '50%',
       whiteSpace: 'nowrap',
-      height: '24px',
+      boxSizing: 'border-box',
+      height: '32px',
+      '&:last-child': {
+        borderBottom: 'none'
+      },
     },
   },
 });

src/components/TableHead.js

@@ -58,6 +58,7 @@ class TableHead extends React.Component {
                 column.customHeadRender({ index, ...column }, this.handleToggleColumn)
               ) : (
                 <TableHeadCell
+                  cellHeaderProps={columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) : {}}
                   key={index}
                   index={index}
                   type={'cell'}

src/components/TableHeadCell.js

@@ -89,7 +89,8 @@ class TableHeadCell extends React.Component {
 
   render() {
     const { isSortTooltipOpen, isHintTooltipOpen } = this.state;
-    const { children, classes, options, sortDirection, sort, hint, print } = this.props;
+    const { children, classes, options, sortDirection, sort, hint, print, cellHeaderProps } = this.props;
+    const { className, ...otherProps } = cellHeaderProps;
     const sortActive = sortDirection !== 'none' && sortDirection !== undefined ? true : false;
     const ariaSortDirection = sortDirection === 'none' ? false : sortDirection;
 
@@ -100,14 +101,17 @@ class TableHeadCell extends React.Component {
       ...(ariaSortDirection ? { direction: sortDirection } : {}),
     };
 
-    const cellClass = classNames({
-      [classes.root]: true,
-      [classes.fixedHeader]: options.fixedHeader,
-      'datatables-noprint': !print,
-    });
+    const cellClass = classNames(
+      {
+        [classes.root]: true,
+        [classes.fixedHeader]: options.fixedHeader,
+        'datatables-noprint': !print,
+      },
+      className,
+    );
 
     return (
-      <TableCell className={cellClass} scope={'col'} sortDirection={ariaSortDirection}>
+      <TableCell className={cellClass} scope={'col'} sortDirection={ariaSortDirection} {...otherProps}>
         {options.sort && sort ? (
           <Tooltip
             title={options.textLabels.body.toolTip}