EuiDataGrid add column sorting (#2278)

* API interface for providing column sort order, callback to allow external data sorting

* EuiDataGrid renders content into memory, sorts on it

* Added tests for EuiDataGrid sorting

* Added aria-sort value to a singly-sorted column header

* small cleanup

* add tests back in, though they are still broken

* Clean up some keyboard navigation issues

* Fix column sorting & update snapshots

src-docs/src/views/datagrid/datagrid.js

@@ -77,13 +77,31 @@ export default class DataGridContainer extends Component {
     super(props);
 
     this.state = {
+      sortingColumns: [],
+      data,
       pagination: {
         pageIndex: 0,
         pageSize: 50,
       },
     };
   }
 
+  setSorting = sortingColumns => {
+    const sortedData = [...data].sort((a, b) => {
+      for (let i = 0; i < sortingColumns.length; i++) {
+        const column = sortingColumns[i];
+        const aValue = a[column.id];
+        const bValue = b[column.id];
+
+        if (aValue < bValue) return column.direction === 'asc' ? -1 : 1;
+        if (aValue > bValue) return column.direction === 'asc' ? 1 : -1;
+      }
+
+      return 0;
+    });
+    this.setState({ sortingColumns, data: sortedData });
+  };
+
   setPageIndex = pageIndex =>
     this.setState(({ pagination }) => ({
       pagination: { ...pagination, pageIndex },
@@ -102,14 +120,15 @@ export default class DataGridContainer extends Component {
   );
 
   render() {
-    const { pagination } = this.state;
+    const { data, pagination, sortingColumns } = this.state;
 
     return (
       <EuiDataGrid
         aria-label="Top EUI contributors"
         columns={columns}
         rowCount={data.length}
         renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+        sorting={{ columns: sortingColumns, onSort: this.setSorting }}
         pagination={{
           ...pagination,
           pageSizeOptions: [5, 10, 25],

src-docs/src/views/datagrid/datagrid_example.js

@@ -17,6 +17,10 @@ import DataGridStyling from './styling';
 const dataGridStylingSource = require('!!raw-loader!./styling');
 const dataGridStylingHtml = renderToHtml(DataGridStyling);
 
+import InMemoryDataGrid from './in_memory';
+const inMemoryDataGridSource = require('!!raw-loader!./in_memory');
+const inMemoryDataGridHtml = renderToHtml(DataGridStyling);
+
 export const DataGridExample = {
   title: 'Data grid',
   sections: [
@@ -84,5 +88,21 @@ export const DataGridExample = {
       demo: <DataGridStyling />,
       props: { EuiDataGrid },
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inMemoryDataGridSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: inMemoryDataGridHtml,
+        },
+      ],
+      title: 'In Memory',
+      text: <p>In memory description</p>,
+      components: { InMemoryDataGrid },
+      demo: <InMemoryDataGrid />,
+    },
   ],
 };