From 5fb9e9a7ad498649fea519103ddbee4558ab908b Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 7 Mar 2020 01:07:45 +0530
Subject: [PATCH 1/2] updated

---
 CHANGELOG.md                                 |  2 +
 src-docs/src/views/datagrid/datagrid.js      |  3 +
 src/components/datagrid/column_sorting.tsx   | 95 +++++++++++---------
 src/components/datagrid/data_grid_schema.tsx |  4 +
 src/components/datagrid/data_grid_types.ts   |  4 +
 5 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e720bef827b..843a8595260 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987))
+
 **Bug Fixes**
 
 - Fixed `EuiDataGrid`'s sort popover to behave properly on mobile screens ([#2979](https://github.com/elastic/eui/pull/2979))
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 62864d99fce..8a62ea664b9 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..48d6eda0e67 100644
--- a/src/components/datagrid/column_sorting.tsx
+++ b/src/components/datagrid/column_sorting.tsx
@@ -213,50 +213,57 @@ 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 || '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 {

From 568aed0c0b2836d9b97eb7b2a13048e5fbee187e Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 7 Mar 2020 01:39:40 +0530
Subject: [PATCH 2/2] added for schema

---
 src/components/datagrid/column_sorting.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
index 48d6eda0e67..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) {
@@ -227,7 +226,12 @@ export const useColumnSorting = (
                                   const nextColumns = [...sorting.columns];
                                   nextColumns.push({
                                     id,
-                                    direction: defaultSortDirection || 'asc',
+                                    direction:
+                                      defaultSortDirection ||
+                                      (schemaDetails(id) &&
+                                        schemaDetails(id)!
+                                          .defaultSortDirection) ||
+                                      'asc',
                                   });
                                   sorting.onSort(nextColumns);
                                 }}>