Added isSortable to Datagrid columns (#2952)

* Added isSorting to data_grid_types * do not display column in filter if isSortable is false * added isSorted = false in docs * update in changelog * Added isSortable flag to EuiDataGridSchemaDetector * Fixed empty sortable columns popover * Removed unwanted return * Fixes in empty sortable popover * Added isSortable in data grid test
elastic · Mar 1, 2020 · 7fdac45 · 7fdac45
1 parent 1d9c510
commit 7fdac45
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `isSortable` props to `EuiDataGridColumn` and `EuiDataGridSchemaDetector` to mark them as un-sortable ([#2952](https://github.com/elastic/eui/pull/2952))
 - Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))
 - Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934))
 - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919))

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -55,6 +55,7 @@ const columns = [
   },
   {
     id: 'phone',
+    isSortable: false,
   },
   {
     id: 'version',

diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
@@ -96,6 +96,12 @@ export const useColumnSorting = (
 
   const numberOfSortedFields = sorting.columns.length;
 
+  const inactiveSortableColumns = inactiveColumns.filter(({ id, isSortable }) =>
+    schema.hasOwnProperty(id) && schema[id].columnType != null
+      ? getDetailsForSchema(schemaDetectors, schema[id].columnType).isSortable
+      : isSortable !== false
+  );
+
   const columnSorting = (
     <EuiPopover
       data-test-subj="dataGridColumnSortingPopover"
@@ -158,14 +164,14 @@ export const useColumnSorting = (
           </p>
         </EuiText>
       )}
-      {(inactiveColumns.length > 0 || sorting.columns.length > 0) && (
+      {(inactiveSortableColumns.length > 0 || sorting.columns.length > 0) && (
         <EuiPopoverFooter>
           <EuiFlexGroup
             gutterSize="m"
             justifyContent="spaceBetween"
             responsive={false}>
             <EuiFlexItem grow={false}>
-              {inactiveColumns.length > 0 && (
+              {inactiveSortableColumns.length > 0 && (
                 <EuiPopover
                   data-test-subj="dataGridColumnSortingPopoverColumnSelection"
                   isOpen={avilableColumnsisOpen}
@@ -195,7 +201,7 @@ export const useColumnSorting = (
                       <div
                         className="euiDataGridColumnSorting__fieldList"
                         role="listbox">
-                        {inactiveColumns.map(({ id }) => (
+                        {inactiveSortableColumns.map(({ id }) => (
                           <button
                             key={id}
                             className="euiDataGridColumnSorting__field"

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
@@ -916,6 +916,7 @@ Array [
                 color: 'primary',
                 sortTextAsc: 'a-z',
                 sortTextDesc: 'z-a',
+                isSortable: true,
               },
             ]}
             inMemory={{ level: 'pagination' }}

diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx
@@ -39,6 +39,10 @@ export interface EuiDataGridSchemaDetector {
    * Text for how to represent a descending sort of this data type, e.g. 'Z -> A'
    */
   sortTextDesc: ReactNode;
+  /**
+   * Whether this column is sortable
+   */
+  isSortable: boolean;
 }
 
 const numericChars = new Set([
@@ -83,6 +87,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="False-True"
       />
     ),
+    isSortable: true,
   },
   {
     type: 'currency',
@@ -124,6 +129,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="High-Low"
       />
     ),
+    isSortable: true,
   },
   {
     type: 'datetime',
@@ -156,6 +162,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
     sortTextDesc: (
       <EuiI18n token="euiDataGridSchema.dateSortTextDesc" default="Old-New" />
     ),
+    isSortable: true,
   },
   {
     type: 'numeric',
@@ -196,6 +203,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="High-Low"
       />
     ),
+    isSortable: true,
   },
   {
     type: 'json',
@@ -230,6 +238,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="Large-Small"
       />
     ),
+    isSortable: true,
   },
 ];
 

diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -45,6 +45,10 @@ export interface EuiDataGridColumn {
    * Initial width (in pixels) of the column
    */
   initialWidth?: number;
+  /**
+   * Whether this column is sortable
+   */
+  isSortable?: boolean;
 }
 
 export interface EuiDataGridColumnVisibility {
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,7 @@ const columns = [ @@
       },
       {
         id: 'phone',
+        isSortable: false,
       },
       {
         id: 'version',
@@ Expand Down @@