added default sort order props to dataGrid (#2987)

* updated * added for schema Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
elastic · Mar 6, 2020 · 9a52f2f · 9a52f2f
1 parent 4427816
commit 9a52f2f
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {