feat(xo-web/sorted-table): "valuePath" property (#3607)

Fixes #3606

packages/xo-web/src/common/sorted-table/index.js

@@ -18,6 +18,7 @@ import {
   filter,
   findIndex,
   forEach,
+  get as getProperty,
   isEmpty,
   isFunction,
   map,
@@ -288,13 +289,24 @@ export default class SortedTable extends Component {
       .isRequired,
     columns: PropTypes.arrayOf(
       PropTypes.shape({
-        component: PropTypes.func,
         default: PropTypes.bool,
         name: PropTypes.node,
-        itemRenderer: PropTypes.func,
         sortCriteria: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
         sortOrder: PropTypes.string,
         textAlign: PropTypes.string,
+
+        // for the cell render, you can use component or itemRenderer or valuePath
+        //
+        // item and userData will be injected in the component as props
+        // component: <Component />
+        component: PropTypes.func,
+
+        // itemRenderer: (item, userData) => <span />
+        itemRenderer: PropTypes.func,
+
+        // the path to the value, it's also the sort criteria default value
+        // valuePath: 'a.b.c'
+        valuePath: PropTypes.string,
       })
     ).isRequired,
     filterContainer: PropTypes.func,
@@ -426,9 +438,10 @@ export default class SortedTable extends Component {
         )
       ),
       createSelector(
+        () => this._getSelectedColumn().valuePath,
         () => this._getSelectedColumn().sortCriteria,
         this._getUserData,
-        (sortCriteria, userData) =>
+        (valuePath, sortCriteria = valuePath, userData) =>
           typeof sortCriteria === 'function'
             ? object => sortCriteria(object, userData)
             : sortCriteria
@@ -748,10 +761,12 @@ export default class SortedTable extends Component {
 
     const columns = map(
       props.columns,
-      ({ component: Component, itemRenderer, textAlign }, key) => (
+      ({ component: Component, itemRenderer, valuePath, textAlign }, key) => (
         <td className={textAlign && `text-xs-${textAlign}`} key={key}>
           {Component !== undefined ? (
             <Component item={item} userData={userData} />
+          ) : valuePath !== undefined ? (
+            getProperty(item, valuePath)
           ) : (
             itemRenderer(item, userData)
           )}
@@ -950,7 +965,11 @@ export default class SortedTable extends Component {
                   columnId={key}
                   key={key}
                   name={column.name}
-                  sort={column.sortCriteria && this._sort}
+                  sort={
+                    (column.sortCriteria !== undefined ||
+                      column.valuePath !== undefined) &&
+                    this._sort
+                  }
                   sortIcon={
                     state.selectedColumn === key ? state.sortOrder : 'sort'
                   }

packages/xo-web/src/xo-app/backup-ng/index.js

@@ -157,8 +157,7 @@ class JobsTable extends React.Component {
         name: _('jobId'),
       },
       {
-        itemRenderer: _ => _.name,
-        sortCriteria: 'name',
+        valuePath: 'name',
         name: _('jobName'),
         default: true,
       },