enable displaying nested properties

spatie · Aug 7, 2017 · cf32818 · cf32818
1 parent 7f809c1
commit cf32818
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 All notable changes to `vue-table-component` will be documented in this file
 
+## 1.2.2 - 2017-08-04
+- Fix for displaying nexted properties
+
 ## 1.2.1 - 2017-08-04
 - Fix async data retrieval and pagination
 

diff --git a/__tests__/components/table-component/TableComponent.test.js b/__tests__/components/table-component/TableComponent.test.js
@@ -29,6 +29,21 @@ describe('TableComponent', () => {
         expect(document.body.innerHTML).toMatchSnapshot();
     });
 
+    it('can display nested properties', async () => {
+        document.body.innerHTML = `
+            <div id="app">
+                <table-component
+                    :data="[{nested: { firstName: 'John' } }, { nested: { firstName: 'Paul' }}]">
+                    <table-column show="nested.firstName" label="First name"></table-column>
+                </table-component>
+            </div>
+        `;
+
+        await createVm();
+
+        expect(document.body.innerHTML).toMatchSnapshot();
+    });
+
     it('has an prop to disable the filter', async () => {
         document.body.innerHTML = `
             <div id="app">

diff --git a/__tests__/components/table-component/__snapshots__/TableComponent.test.js.snap b/__tests__/components/table-component/__snapshots__/TableComponent.test.js.snap
@@ -157,6 +157,61 @@ exports[`TableComponent can display a custom placeholder in the filter field 1`]
 
 `;
 
+exports[`TableComponent can display nested properties 1`] = `
+
+<div id="app">
+  <div class="table-component">
+    <div class="table-component__filter">
+      <input type="text"
+             placeholder="Filter table…"
+             class="table-component__filter__field"
+      >
+      <!---->
+    </div>
+    <div class="table-component__table-wrapper">
+      <table class="table-component__table">
+        <caption role="alert"
+                 aria-live="polite"
+                 class="table-component__table__caption"
+        >
+          Table not sorted
+        </caption>
+        <thead>
+          <tr>
+            <th role="columnheader"
+                scope="col"
+                aria-sort="none"
+                class="table-component__th--sort"
+            >
+              First name
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              John
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Paul
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!---->
+    <div style="display: none;">
+      <div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+
+`;
+
 exports[`TableComponent can mount 1`] = `
 
 <div id="app">

diff --git a/npm-debug.log.4082538609 b/npm-debug.log.4082538609
diff --git a/src/classes/Row.js b/src/classes/Row.js
@@ -1,5 +1,6 @@
 import moment from 'moment';
 import striptags from 'striptags';
+import get from 'lodash/get';
 
 export default class Row {
     constructor(data, columns) {
@@ -8,7 +9,7 @@ export default class Row {
     }
 
     getValue(columnName) {
-        return this.data[columnName];
+        return get(this.data, columnName);
     }
 
     getColumn(columnName) {