table column with subobjects

src/components/my-table.vue

@@ -13,7 +13,7 @@
             <tbody is="transition-group" name="list">
                 <tr v-for="(r, ri) in rows" :key="ri">
                     <td v-for="(c, ci) in columns" :key="ci + 'c'">
-                        <span v-if="c.prop">{{ r[c.prop] }}</span>
+                        <span v-if="c.prop">{{ getProp(r, c.prop) }}</span>
                         <span v-else-if="c.render">{{ c.render(r) }}</span>
                     </td>
                 </tr>
@@ -51,6 +51,16 @@ export default {
                 orderBy: col,
                 orderDesc: false
             });
+        },
+        getProp(row, prop) {
+            let props = prop.split('.');
+            let val = row;
+            props.forEach((p) => {
+                if (typeof val == 'object') {
+                    val = val[p];
+                }
+            });
+            return val; 
         }
     }
 }

src/components/userlist.vue

@@ -26,10 +26,14 @@ export default {
                    prop: 'Username',
                    orderBy: 'username'
                },
+               {
+                   heading: 'Reseller',
+                   prop: 'Reseller.Username'
+               },
                {
                    heading: 'Render',
                    render(row) {
-                       return row.ID;
+                       return 'ID:' + row.ID;
                    }
                }
            ],