enableNestedDataAccess option to disable nested data when needed #909

src/MUIDataTable.js

@@ -148,6 +148,7 @@ class MUIDataTable extends React.Component {
       customSort: PropTypes.func,
       customToolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
       customToolbarSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+      enableNestedDataAccess : PropTypes.string,
       expandableRows: PropTypes.bool,
       expandableRowsHeader: PropTypes.bool,
       expandableRowsOnClick: PropTypes.bool,
@@ -330,6 +331,7 @@ class MUIDataTable extends React.Component {
       separator: ',',
     },
     elevation: 4,
+    enableNestedDataAccess: '.',
     expandableRows: false,
     expandableRowsHeader: true,
     expandableRowsOnClick: false,
@@ -540,7 +542,9 @@ class MUIDataTable extends React.Component {
   };
 
   transformData = (columns, data) => {
-    const leaf = (obj, path) => path.split('.').reduce((value, el) => (value ? value[el] : undefined), obj);
+    const { enableNestedDataAccess } = this.options;
+    const leaf = (obj, path) =>  (enableNestedDataAccess ? path.split(enableNestedDataAccess) : path.split())
+      .reduce((value, el) => (value ? value[el] : undefined), obj);
 
     const transformedData = Array.isArray(data[0])
       ? data.map(row => {
@@ -562,7 +566,7 @@ class MUIDataTable extends React.Component {
       warnDeprecated(
         'Passing objects in as data is not supported, and will be prevented in a future release. Consider using ids in your data and linking it to external objects if you want to access object data from custom render functions.',
       );
-
+    
     return transformedData;
   };
 

test/MUIDataTable.test.js

@@ -202,7 +202,7 @@ describe('<MUIDataTable />', function() {
     });
 
     const actualResult = shallowWrapper.dive().state().columns;
-
+    
     const expectedResult = [
       {
         display: 'excluded',
@@ -290,7 +290,7 @@ describe('<MUIDataTable />', function() {
     assert.deepEqual(JSON.stringify(state.displayData), displayData);
   });
 
-  it('should correctly build internal table data and displayData structure when using nested data', () => {
+  it('should correctly build internal table data and displayData structure when using nested data (option enableNestedDataAccess omitted )', () => {
     const columns = [
       {
         name: 'Name',
@@ -323,6 +323,72 @@ describe('<MUIDataTable />', function() {
     assert.deepEqual(JSON.stringify(state.displayData), displayData);
   });
 
+  it('should correctly build internal table data and displayData structure with enabled nested data custom marker (option enableNestedDataAccess : "/OK/" )',() => {
+    const columns = [
+      {
+        name: 'Name',
+        options: {
+          customBodyRender: renderName,
+          customFilterListRender: renderCustomFilterList, // DEPRECATED
+          customFilterListOptions: { render: renderCustomFilterList },
+        },
+      },
+    'Company',
+    { name: 'Location/OK/City', label: 'City Label' },
+    { name: 'Location/OK/State' },
+    { name: 'Empty', options: { empty: true, filterType: 'checkbox' } },
+  ];
+  const data = [
+    { Name: 'Joe James', Company: 'Test Corp', Location: { City: 'Yonkers', State: 'NY' } },
+    { Name: 'John Walsh', Company: 'Test Corp', Location: { City: 'Hartford', State: null } },
+    { Name: 'Bob Herm', Company: 'Test Corp', Location: { Town: 'Tampa', State: 'FL' } },
+    { Name: 'James Houston', Company: 'Test Corp', Location: { City: 'Dallas', State: 'TX' } },
+  ];
+  const displayData = JSON.stringify([
+    { data: ['James, Joe', 'Test Corp', 'Yonkers', 'NY', undefined], dataIndex: 0 },
+    { data: ['Walsh, John', 'Test Corp', 'Hartford', null, undefined], dataIndex: 1 },
+    { data: ['Herm, Bob', 'Test Corp', undefined, 'FL', undefined], dataIndex: 2 },
+    { data: ['Houston, James', 'Test Corp', 'Dallas', 'TX', undefined], dataIndex: 3 },
+  ]);
+  const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} options={{enableNestedDataAccess :'/OK/'}} />);
+  const state = shallowWrapper.dive().state();
+
+  assert.deepEqual(JSON.stringify(state.displayData), displayData);
+  });
+
+  it('should correctly build internal table data and displayData structure with disabled nested data (option enableNestedDataAccess : "" )',() => {
+  const columns = [
+    {
+      name: 'Name',
+      options: {
+        customBodyRender: renderName,
+        customFilterListRender: renderCustomFilterList, // DEPRECATED
+        customFilterListOptions: { render: renderCustomFilterList },
+      },
+    },
+    'Company',
+    { name: 'Location/OK/City', label: 'City Label' },
+    { name: 'Location.State' },
+    { name: 'Empty', options: { empty: true, filterType: 'checkbox' } },
+  ];
+  const data = [
+    { Name: 'Joe James', Company: 'Test Corp', Location: { City: 'Yonkers', State: 'NY' } },
+    { Name: 'John Walsh', Company: 'Test Corp', Location: { City: 'Hartford', State: null } },
+    { Name: 'Bob Herm', Company: 'Test Corp', Location: { Town: 'Tampa', State: 'FL' } },
+    { Name: 'James Houston', Company: 'Test Corp', Location: { City: 'Dallas', State: 'TX' } },
+  ];
+  const displayData = JSON.stringify([
+    { data: ['James, Joe', 'Test Corp', null, null, undefined], dataIndex: 0 },
+    { data: ['Walsh, John', 'Test Corp', null, null, undefined], dataIndex: 1 },
+    { data: ['Herm, Bob', 'Test Corp', null, null, undefined], dataIndex: 2 },
+    { data: ['Houston, James', 'Test Corp', null, null, undefined], dataIndex: 3 },
+  ]);
+  const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} options={{enableNestedDataAccess :''}}  />);
+  const state = shallowWrapper.dive().state();
+
+  assert.deepEqual(JSON.stringify(state.displayData), displayData);
+  });
+
   it('should correctly re-build display after xhr with serverSide=true', done => {
     const fullWrapper = mount(<MUIDataTable columns={columns} data={[]} options={{ serverSide: true }} />);
     assert.strictEqual(fullWrapper.find('tbody tr').length, 1);