Repository: gregnb/mui-datatables
Pull request #492 (2019-03-13 14:57:13)

Issue 491
Addresses https://github.com/gregnb/mui-datatables/issues/491.

coveralls: 
[![Coverage Status](https://coveralls.io/builds/22156344/badge)](https://coveralls.io/builds/22156344)

Coverage increased (+0.05%) to 72.45% when pulling **785e048b4c9a48eaab0566c189c1a76573b1ed46 on gabrielliwerant:issue-491** into **b2c74f3eabd4b5c3bcc73b508f9fac8e6be2aa0e on gregnb:master**.


Patch:
diff --git a/examples/component/index.js b/examples/component/index.js
index dfe1829..0098f1f 100644
--- a/examples/component/index.js
+++ b/examples/component/index.js
@@ -41,6 +41,7 @@ class Example extends React.Component {
         name: "Age",
         options: {
           filter: false,
+          customBodyRender: value => value
         }
       },
       {
@@ -85,8 +86,8 @@ class Example extends React.Component {
     ];
 
     const data = [
-      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000, false],
-      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000, true],
+      ["Robin Duncan", "Business Analyst", "Los Angeles", null, 77000, false],
+      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, null, true],
       ["Harper White", "Attorney", "Pittsburgh", 52, 420000, false],
       ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000, true],
       ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000, false],
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index eb5c210..8907466 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -464,7 +464,7 @@ class MUIDataTable extends React.Component {
 
         /* drill down to get the value of a cell */
         columnValue =
-          typeof funcResult === 'string'
+          typeof funcResult === 'string' || !funcResult
             ? funcResult
             : funcResult.props && funcResult.props.value
             ? funcResult.props.value
diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js
index e97ee22..6a4d15b 100644
--- a/src/components/TableToolbar.js
+++ b/src/components/TableToolbar.js
@@ -19,10 +19,10 @@ import { createCSVDownload } from '../utils';
 export const defaultToolbarStyles = (theme, props) => ({
   root: {},
   left: {
-    flex: '1 1 55%',
+    flex: '0 0 auto',
   },
   actions: {
-    flex: '0 0 45%',
+    flex: '1 1 auto',
     textAlign: 'right',
   },
   titleRoot: {},


Test patch:
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index 526a2e2..8533f61 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -19,18 +19,19 @@ describe('<MUIDataTable />', function() {
     <Cities value={value} index={tableMeta.rowIndex} change={event => updateValueFn(event)} />
   );
   let renderName = value => value.split(' ')[1] + ', ' + value.split(' ')[0];
+  let renderState = value => value;
 
   before(() => {
     columns = [
       { name: 'Name', options: { customBodyRender: renderName } },
       'Company',
       { name: 'City', label: 'City Label', options: { customBodyRender: renderCities } },
-      { name: 'State' },
+      { name: 'State', options: { customBodyRender: renderState } },
       { name: 'Empty', options: { empty: true } },
     ];
     data = [
       ['Joe James', 'Test Corp', 'Yonkers', 'NY'],
-      ['John Walsh', 'Test Corp', 'Hartford', 'CT'],
+      ['John Walsh', 'Test Corp', 'Hartford', null],
       ['Bob Herm', 'Test Corp', 'Tampa', 'FL'],
       ['James Houston', 'Test Corp', 'Dallas', 'TX'],
     ];
@@ -41,7 +42,7 @@ describe('<MUIDataTable />', function() {
         dataIndex: 0,
       },
       {
-        data: ['Walsh, John', 'Test Corp', renderCities('Hartford', { rowIndex: 1 }), 'CT', undefined],
+        data: ['Walsh, John', 'Test Corp', renderCities('Hartford', { rowIndex: 1 }), null, undefined],
         dataIndex: 1,
       },
       {
@@ -55,12 +56,13 @@ describe('<MUIDataTable />', function() {
     ]);
     tableData = [
       { index: 0, data: ['James, Joe', 'Test Corp', renderCities('Yonkers', { rowIndex: 0 }), 'NY', undefined] },
-      { index: 1, data: ['Walsh, John', 'Test Corp', renderCities('Hartford', { rowIndex: 1 }), 'CT', undefined] },
+      { index: 1, data: ['Walsh, John', 'Test Corp', renderCities('Hartford', { rowIndex: 1 }), null, undefined] },
       { index: 2, data: ['Herm, Bob', 'Test Corp', renderCities('Tampa', { rowIndex: 2 }), 'FL', undefined] },
       { index: 3, data: ['Houston, James', 'Test Corp', renderCities('Dallas', { rowIndex: 3 }), 'TX', undefined] },
     ];
     renderCities = renderCities;
     renderName = renderName;
+    renderState = renderState;
   });
 
   it('should render a table', () => {
@@ -132,6 +134,7 @@ describe('<MUIDataTable />', function() {
         searchable: true,
         viewColumns: true,
         sortDirection: null,
+        customBodyRender: renderState
       },
       {
         display: 'true',
@@ -173,7 +176,7 @@ describe('<MUIDataTable />', function() {
     state = shallowWrapper.dive().state();
     const expectedResult = [
       { index: 0, data: ['testing', 'Test Corp', 'Yonkers', 'NY', undefined] },
-      { index: 1, data: ['John Walsh', 'Test Corp', 'Hartford', 'CT', undefined] },
+      { index: 1, data: ['John Walsh', 'Test Corp', 'Hartford', null, undefined] },
       { index: 2, data: ['Bob Herm', 'Test Corp', 'Tampa', 'FL', undefined] },
       { index: 3, data: ['James Houston', 'Test Corp', 'Dallas', 'TX', undefined] },
     ];
@@ -213,7 +216,7 @@ describe('<MUIDataTable />', function() {
       ['Herm, Bob', 'Houston, James', 'James, Joe', 'Walsh, John'],
       ['Test Corp'],
       ['Dallas', 'Hartford', 'Tampa', 'Yonkers'],
-      ['CT', 'FL', 'NY', 'TX'],
+      ['FL', null, 'NY', 'TX'],
       [undefined],
     ];
 
@@ -371,7 +374,7 @@ describe('<MUIDataTable />', function() {
       { data: ['Herm, Bob', 'Test Corp', renderCities('Tampa', { rowIndex: 0 }), 'FL', undefined], dataIndex: 2 },
       { data: ['Houston, James', 'Test Corp', renderCities('Dallas', { rowIndex: 1 }), 'TX', undefined], dataIndex: 3 },
       { data: ['James, Joe', 'Test Corp', renderCities('Yonkers', { rowIndex: 2 }), 'NY', undefined], dataIndex: 0 },
-      { data: ['Walsh, John', 'Test Corp', renderCities('Hartford', { rowIndex: 3 }), 'CT', undefined], dataIndex: 1 },
+      { data: ['Walsh, John', 'Test Corp', renderCities('Hartford', { rowIndex: 3 }), null, undefined], dataIndex: 1 },
     ]);
 
     assert.deepEqual(JSON.stringify(state.displayData), expectedResult);
@@ -439,6 +442,7 @@ describe('<MUIDataTable />', function() {
         searchable: true,
         viewColumns: true,
         sortDirection: null,
+        customBodyRender: renderState
       },
       {
         name: 'Empty',
diff --git a/test/MUIDataTableBody.test.js b/test/MUIDataTableBody.test.js
index 071b855..9a7259f 100644
--- a/test/MUIDataTableBody.test.js
+++ b/test/MUIDataTableBody.test.js
@@ -16,7 +16,7 @@ describe('<TableBody />', function() {
     columns = [{ name: 'First Name' }, { name: 'Company' }, { name: 'City' }, { name: 'State' }];
     data = [
       ['Joe James', 'Test Corp', 'Yonkers', 'NY'],
-      ['John Walsh', 'Test Corp', 'Hartford', 'CT'],
+      ['John Walsh', 'Test Corp', null, 'CT'],
       ['Bob Herm', 'Test Corp', 'Tampa', 'FL'],
       ['James Houston', 'Test Corp', 'Dallas', 'TX'],
     ];
@@ -26,7 +26,7 @@ describe('<TableBody />', function() {
         dataIndex: 0,
       },
       {
-        data: ['John Walsh', 'Test Corp', 'Hartford', 'CT'],
+        data: ['John Walsh', 'Test Corp', null, 'CT'],
         dataIndex: 1,
       },
       {