Allow sorting by computed columns in EuiInMemoryTable

CHANGELOG.md

@@ -14,6 +14,7 @@
 - Fixed `EuiFlyout` scrolling in Safari ([#2033](https://github.com/elastic/eui/pull/2033))
 - Fixed `EuiCallOut` header icon alignment ([#2006](https://github.com/elastic/eui/pull/2006))
 - Fixed `EuiInMemoryTable` sort value persistence through lifecycle updates ([#2035](https://github.com/elastic/eui/pull/2035))
+- Fixed `EuiInMemoryTable` to allow sorting on computed columns ([#2044](https://github.com/elastic/eui/pull/2044))
 
 **Breaking changes**
 

src-docs/src/views/tables/basic/props_info.js

@@ -237,10 +237,11 @@ export const propsInfo = {
           type: { name: 'string (e.g. "30%", "100px", etc..)' },
         },
         sortable: {
-          description: 'Defines whether the user can sort on this column',
+          description:
+            'Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against.',
           required: false,
           defaultValue: { value: 'false' },
-          type: { name: 'boolean' },
+          type: { name: '"boolean" | "function"' },
         },
         align: {
           description: 'Defines the horizontal alignment of the column',
@@ -303,6 +304,12 @@ export const propsInfo = {
           required: false,
           type: { name: 'string (e.g. "30%", "100px", etc..)' },
         },
+        sortable: {
+          description:
+            'If provided, allows this column to be sorted on. Must return the value to sort against.',
+          required: false,
+          type: { name: 'function' },
+        },
         truncateText: {
           description:
             "Indicates whether this column should truncate its content when it doesn't fit",

src-docs/src/views/tables/in_memory/in_memory_custom_sorting.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { EuiInMemoryTable } from '../../../../../src/components';
 
 const data = [
-  { animal: 'snail', weight: 25, humanFriendlyWeight: '25g' },
-  { animal: 'peregrine falcon', weight: 900, humanFriendlyWeight: '0.9kg' },
-  { animal: 'small dog', weight: 4500, humanFriendlyWeight: '4.5kg' },
-  { animal: 'brown bear', weight: 180000, humanFriendlyWeight: '180kg' },
-  { animal: 'elephant', weight: 5440000, humanFriendlyWeight: '5440kg' },
-  { animal: 'giraffe', weight: 1180000, humanFriendlyWeight: '1180kg' },
+  { animal: 'snail', weight: 25 },
+  { animal: 'peregrine falcon', weight: 900 },
+  { animal: 'small dog', weight: 4500 },
+  { animal: 'brown bear', weight: 180000 },
+  { animal: 'elephant', weight: 5440000 },
+  { animal: 'giraffe', weight: 1180000 },
 ];
 
 export const Table = () => {
@@ -18,15 +18,20 @@ export const Table = () => {
       sortable: true,
     },
     {
-      field: 'humanFriendlyWeight',
       name: 'Weight',
+      render: ({ weight }) => `${weight / 1000}kg`,
       sortable: ({ weight }) => weight,
     },
+    {
+      field: 'weight',
+      name: 'Weight (grams)',
+      sortable: true,
+    },
   ];
 
   const sorting = {
     sort: {
-      field: 'humanFriendlyWeight',
+      field: 'Weightt',
       direction: 'asc',
     },
   };

src/components/basic_table/__snapshots__/in_memory_table.test.js.snap

@@ -56,7 +56,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           "description": "description",
           "field": "name",
           "name": "Name",
-          "sortable": false,
         },
       ]
     }
@@ -652,7 +651,6 @@ exports[`EuiInMemoryTable empty array 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -664,6 +662,101 @@ exports[`EuiInMemoryTable empty array 1`] = `
 />
 `;
 
+exports[`EuiInMemoryTable sorting verify field sorting precedes name sorting 1`] = `
+Array [
+  <span
+    className="euiTableCellContent__text"
+  >
+    name3
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    1
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name2
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    2
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name1
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    3
+  </span>,
+]
+`;
+
+exports[`EuiInMemoryTable sorting with field sorting (off by default) 1`] = `
+Array [
+  <span
+    className="euiTableCellContent__text"
+  >
+    name3
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name1
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name2
+  </span>,
+]
+`;
+
+exports[`EuiInMemoryTable sorting with field sorting (on by default) 1`] = `
+Array [
+  <span
+    className="euiTableCellContent__text"
+  >
+    name1
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name2
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name3
+  </span>,
+]
+`;
+
+exports[`EuiInMemoryTable sorting with name sorting 1`] = `
+Array [
+  <span
+    className="euiTableCellContent__text"
+  >
+    name3
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name2
+  </span>,
+  <span
+    className="euiTableCellContent__text"
+  >
+    name1
+  </span>,
+]
+`;
+
 exports[`EuiInMemoryTable with executeQueryOptions 1`] = `
 <EuiBasicTable
   aria-label="aria-label"
@@ -674,7 +767,6 @@ exports[`EuiInMemoryTable with executeQueryOptions 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -725,7 +817,7 @@ exports[`EuiInMemoryTable with initial sorting 1`] = `
       "allowNeutralSort": true,
       "sort": Object {
         "direction": "desc",
-        "field": "name",
+        "field": "Name",
       },
     }
   }
@@ -742,7 +834,6 @@ exports[`EuiInMemoryTable with items 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -779,7 +870,6 @@ exports[`EuiInMemoryTable with items and expanded item 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -824,7 +914,6 @@ exports[`EuiInMemoryTable with items and message - expecting to show the items 1
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -861,7 +950,6 @@ exports[`EuiInMemoryTable with message 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -883,7 +971,6 @@ exports[`EuiInMemoryTable with message and loading 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -906,7 +993,6 @@ exports[`EuiInMemoryTable with pagination 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -952,7 +1038,6 @@ exports[`EuiInMemoryTable with pagination and default page size and index 1`] =
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -994,7 +1079,6 @@ exports[`EuiInMemoryTable with pagination and selection 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -1050,7 +1134,6 @@ exports[`EuiInMemoryTable with pagination, default page size and error 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -1093,7 +1176,6 @@ exports[`EuiInMemoryTable with pagination, hiding the per page options 1`] = `
         "description": "description",
         "field": "name",
         "name": "Name",
-        "sortable": false,
       },
     ]
   }
@@ -1224,7 +1306,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting  and simple search
             },
           ],
           "name": "Actions",
-          "sortable": false,
         },
       ]
     }
@@ -1299,7 +1380,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and a single recor
           },
         ],
         "name": "Actions",
-        "sortable": false,
       },
     ]
   }
@@ -1459,7 +1539,6 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
             },
           ],
           "name": "Actions",
-          "sortable": false,
         },
       ]
     }
@@ -1503,46 +1582,3 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
   />
 </div>
 `;
-
-exports[`EuiInMemoryTable with sorting 1`] = `
-<EuiBasicTable
-  aria-label="aria-label"
-  className="testClass1 testClass2"
-  columns={
-    Array [
-      Object {
-        "description": "description",
-        "field": "name",
-        "name": "Name",
-        "sortable": true,
-      },
-    ]
-  }
-  data-test-subj="test subject string"
-  items={
-    Array [
-      Object {
-        "id": "1",
-        "name": "name1",
-      },
-      Object {
-        "id": "2",
-        "name": "name2",
-      },
-      Object {
-        "id": "3",
-        "name": "name3",
-      },
-    ]
-  }
-  noItemsMessage="No items found"
-  onChange={[Function]}
-  responsive={true}
-  sorting={
-    Object {
-      "allowNeutralSort": true,
-      "sort": undefined,
-    }
-  }
-/>
-`;