From 9a52f2f66c85ec88c9a675417469e054779888f8 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Sat, 7 Mar 2020 03:22:40 +0530
Subject: [PATCH] added default sort order props to dataGrid (#2987)

* updated

* added for schema

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
---
 CHANGELOG.md                                 |   1 +
 src-docs/src/views/datagrid/datagrid.js      |   3 +
 src/components/datagrid/column_sorting.tsx   | 101 ++++++++++---------
 src/components/datagrid/data_grid_schema.tsx |   4 +
 src/components/datagrid/data_grid_types.ts   |   4 +
 5 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4153680ad6..04ca018c2f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987))
 - Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978))
 - Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957))
 - Added `showOnFocus` prop to `EuiScreenReaderOnly` to force display on keyboard focus ([#2976](https://github.com/elastic/eui/pull/2976))
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 06e5ca0d9aa..440cc1b8406 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -21,6 +21,7 @@ import {
 const columns = [
   {
     id: 'name',
+    defaultSortDirection: 'asc',
   },
   {
     id: 'email',
@@ -49,6 +50,7 @@ const columns = [
   },
   {
     id: 'date',
+    defaultSortDirection: 'desc',
   },
   {
     id: 'amount',
@@ -59,6 +61,7 @@ const columns = [
   },
   {
     id: 'version',
+    defaultSortDirection: 'desc',
     initialWidth: 65,
     isResizable: false,
   },
diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
index 605d90785d6..f56b15203e5 100644
--- a/src/components/datagrid/column_sorting.tsx
+++ b/src/components/datagrid/column_sorting.tsx
@@ -34,7 +34,6 @@ export const useColumnSorting = (
 ): ReactNode => {
   const [isOpen, setIsOpen] = useState(false);
   const [avilableColumnsisOpen, setAvailableColumnsIsOpen] = useState(false);
-
   // prune any non-existant/hidden columns from sorting
   useEffect(() => {
     if (sorting) {
@@ -213,50 +212,62 @@ export const useColumnSorting = (
                       <div
                         className="euiDataGridColumnSorting__fieldList"
                         role="listbox">
-                        {inactiveSortableColumns.map(({ id }) => (
-                          <button
-                            key={id}
-                            className="euiDataGridColumnSorting__field"
-                            aria-label={`${sortFieldAriaLabel} ${id}`}
-                            role="option"
-                            aria-selected="false"
-                            data-test-subj={`dataGridColumnSortingPopoverColumnSelection-${id}`}
-                            onClick={() => {
-                              const nextColumns = [...sorting.columns];
-                              nextColumns.push({ id, direction: 'asc' });
-                              sorting.onSort(nextColumns);
-                            }}>
-                            <EuiFlexGroup
-                              alignItems="center"
-                              gutterSize="s"
-                              component="span"
-                              responsive={false}>
-                              <EuiFlexItem grow={false}>
-                                <EuiToken
-                                  iconType={
-                                    schemaDetails(id) != null
-                                      ? getDetailsForSchema(
-                                          schemaDetectors,
-                                          schema[id].columnType
-                                        ).icon
-                                      : 'tokenString'
-                                  }
-                                  color={
-                                    schemaDetails(id) != null
-                                      ? getDetailsForSchema(
-                                          schemaDetectors,
-                                          schema[id].columnType
-                                        ).color
-                                      : undefined
-                                  }
-                                />
-                              </EuiFlexItem>
-                              <EuiFlexItem grow={false}>
-                                <EuiText size="xs">{id}</EuiText>
-                              </EuiFlexItem>
-                            </EuiFlexGroup>
-                          </button>
-                        ))}
+                        {inactiveSortableColumns.map(
+                          ({ id, defaultSortDirection }) => {
+                            return (
+                              <button
+                                key={id}
+                                className="euiDataGridColumnSorting__field"
+                                aria-label={`${sortFieldAriaLabel} ${id}`}
+                                role="option"
+                                aria-selected="false"
+                                data-test-subj={`dataGridColumnSortingPopoverColumnSelection-${id}`}
+                                onClick={() => {
+                                  const nextColumns = [...sorting.columns];
+                                  nextColumns.push({
+                                    id,
+                                    direction:
+                                      defaultSortDirection ||
+                                      (schemaDetails(id) &&
+                                        schemaDetails(id)!
+                                          .defaultSortDirection) ||
+                                      'asc',
+                                  });
+                                  sorting.onSort(nextColumns);
+                                }}>
+                                <EuiFlexGroup
+                                  alignItems="center"
+                                  gutterSize="s"
+                                  component="span"
+                                  responsive={false}>
+                                  <EuiFlexItem grow={false}>
+                                    <EuiToken
+                                      iconType={
+                                        schemaDetails(id) != null
+                                          ? getDetailsForSchema(
+                                              schemaDetectors,
+                                              schema[id].columnType
+                                            ).icon
+                                          : 'tokenString'
+                                      }
+                                      color={
+                                        schemaDetails(id) != null
+                                          ? getDetailsForSchema(
+                                              schemaDetectors,
+                                              schema[id].columnType
+                                            ).color
+                                          : undefined
+                                      }
+                                    />
+                                  </EuiFlexItem>
+                                  <EuiFlexItem grow={false}>
+                                    <EuiText size="xs">{id}</EuiText>
+                                  </EuiFlexItem>
+                                </EuiFlexGroup>
+                              </button>
+                            );
+                          }
+                        )}
                       </div>
                     )}
                   </EuiI18n>
diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx
index 38945dfd370..4a1809e5833 100644
--- a/src/components/datagrid/data_grid_schema.tsx
+++ b/src/components/datagrid/data_grid_schema.tsx
@@ -43,6 +43,10 @@ export interface EuiDataGridSchemaDetector {
    * Whether this column is sortable
    */
   isSortable: boolean;
+  /**
+   * Default sort direction of the column
+   */
+  defaultSortDirection?: 'asc' | 'desc';
 }
 
 const numericChars = new Set([
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 58b5165095e..683be6c72f3 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -49,6 +49,10 @@ export interface EuiDataGridColumn {
    * Whether this column is sortable
    */
   isSortable?: boolean;
+  /**
+   * Default sort direction of the column
+   */
+  defaultSortDirection?: 'asc' | 'desc';
 }
 
 export interface EuiDataGridColumnVisibility {