Adapting sorting to accept custom fields in Table component

src/components/Table/TableHead.jsx

@@ -5,27 +5,26 @@ import TableCell from '@material-ui/core/TableCell'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import TableSortLabel from '@material-ui/core/TableSortLabel'
-import Tooltip from '@material-ui/core/Tooltip'
 import { type Order } from '~/components/Table/sorting'
 
 export type Column = {
   id: string,
   numeric: boolean,
+  order: boolean,
   disablePadding: boolean,
   label: string,
-  tooltip?: string,
 }
 
 type Props = {
   columns: List<Column>,
   orderBy: string, // id of one of the described columns
   order: Order,
-  onSort: (property: string) => void,
+  onSort: (property: string, orderAttr: boolean) => void,
 }
 
 class GnoTableHead extends React.PureComponent<Props> {
-  changeSort = (property: string) => () => {
+  changeSort = (property: string, orderAttr: boolean) => () => {
-    this.props.onSort(property)
+    this.props.onSort(property, orderAttr)
   }
 
   render() {
@@ -41,19 +40,13 @@ class GnoTableHead extends React.PureComponent<Props> {
               padding={column.disablePadding ? 'none' : 'default'}
               sortDirection={orderBy === column.id ? order : false}
             >
-              <Tooltip
+              <TableSortLabel
-                title={column.tooltip}
+                active={orderBy === column.id}
-                placement={column.numeric ? 'bottom-end' : 'bottom-start'}
+                direction={order}
-                enterDelay={300}
+                onClick={this.changeSort(column.id, column.order)}
               >
-                <TableSortLabel
+                {column.label}
-                  active={orderBy === column.id}
+              </TableSortLabel>
-                  direction={order}
-                  onClick={this.changeSort(column.id)}
-                >
-                  {column.label}
-                </TableSortLabel>
-              </Tooltip>
             </TableCell>
           ))}
         </TableRow>

src/components/Table/index.jsx

@@ -20,6 +20,7 @@ type State = {
   page: number,
   order: Order,
   orderBy: string,
+  orderProp: boolean,
 }
 
 class GnoTable<K> extends React.Component<Props<K>, State> {
@@ -27,9 +28,10 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
     page: 0,
     order: 'desc',
     orderBy: this.props.defaultOrderBy,
+    orderProp: false,
   }
 
-  onSort = (property: string) => {
+  onSort = (property: string, orderProp: boolean) => {
     const orderBy = property
     let order = 'desc'
 
@@ -37,14 +39,16 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
       order = 'asc'
     }
 
-    this.setState({ order, orderBy })
+    this.setState({ order, orderBy, orderProp })
   }
 
   render() {
     const {
       data, label, columns, rowsPerPage = 5,
     } = this.props
-    const { order, orderBy, page } = this.state
+    const {
+      order, orderBy, page, orderProp,
+    } = this.state
 
     return (
       <Table aria-labelledby={label}>
@@ -55,12 +59,12 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
           onSort={this.onSort}
         />
         <TableBody>
-          {stableSort(data, getSorting(order, orderBy))
+          {stableSort(data, getSorting(order, orderBy, orderProp))
             .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
-            .map((row: any) => (
+            .map((row: any, index: number) => (
               <TableRow
                 tabIndex={-1}
-                key={row.id}
+                key={index}
               >
                 {
                   columns.map((column: Column) => (

src/components/Table/sorting.js

@@ -1,11 +1,17 @@
 // @flow
-const desc = (a, b, orderBy) => {
+
-  if (b[orderBy] < a[orderBy]) {
+export const buildOrderFieldFrom = (attr: string) => `${attr}Order`
+
+const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
+  const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
+
+  if (b[order] < a[order]) {
     return -1
   }
-  if (b[orderBy] > a[orderBy]) {
+  if (b[order] > a[order]) {
     return 1
   }
+
   return 0
 }
 
@@ -26,5 +32,5 @@ export const stableSort = (array: any, cmp: any) => {
 
 export type Order = 'asc' | 'desc'
 
-export const getSorting = (order: Order, orderBy: string) =>
+export const getSorting = (order: Order, orderBy: string, orderProp: boolean) =>
-  (order === 'desc' ? (a: any, b: any) => desc(a, b, orderBy) : (a: any, b: any) => -desc(a, b, orderBy))
+  (order === 'desc' ? (a: any, b: any) => desc(a, b, orderBy, orderProp) : (a: any, b: any) => -desc(a, b, orderBy, orderProp))