Allow to disable column sorting

Summary: Project: https://docs.google.com/document/d/1SbFrpvfIShX5npANNa1AkgHliR1M-VMLW5Q9RhREt94/edit#

Reviewed By: antonk52

Differential Revision: D45394048

fbshipit-source-id: 4255777d477f8240f52b5f82c28e922ef1011989

desktop/flipper-plugin/src/ui/data-table/DataTable.tsx

@@ -121,6 +121,7 @@ export type DataTableColumn<T = any> = {
     predefined?: boolean;
   }[];
   inversed?: boolean;
+  sortable?: boolean;
 };
 
 export interface TableRowRenderContext<T = any> {

desktop/flipper-plugin/src/ui/data-table/TableHead.tsx

@@ -13,7 +13,7 @@ import {
   Percentage,
   Width,
 } from '../../utils/widthUtils';
-import {memo, useRef} from 'react';
+import {HTMLAttributes, memo, useRef} from 'react';
 import {Interactive, InteractiveProps} from '../Interactive';
 import styled from '@emotion/styled';
 import React from 'react';
@@ -174,25 +174,26 @@ function TableHeadColumn({
     });
   };
 
+  let divProps: HTMLAttributes<HTMLDivElement> = {};
+  if (column.sortable) {
+    divProps = {
+      onClick: (e) => {
+        e.stopPropagation();
+        const newDirection =
+          sorted === undefined ? 'asc' : sorted === 'asc' ? 'desc' : undefined;
+        dispatch({
+          type: 'sortColumn',
+          column: column.key,
+          direction: newDirection,
+        });
+      },
+      role: 'button',
+      tabIndex: 0,
+    };
+  }
   let children = (
     <Layout.Right center>
-      <div
+      <div {...divProps}>
-        onClick={(e) => {
-          e.stopPropagation();
-          const newDirection =
-            sorted === undefined
-              ? 'asc'
-              : sorted === 'asc'
-              ? 'desc'
-              : undefined;
-          dispatch({
-            type: 'sortColumn',
-            column: column.key,
-            direction: newDirection,
-          });
-        }}
-        role="button"
-        tabIndex={0}>
         <Text type="secondary">
           {column.title === undefined ? (
             toFirstUpper(column.key)
@@ -201,12 +202,18 @@ function TableHeadColumn({
           ) : (
             column.title
           )}
-          <SortIcons
+          {column.sortable ? (
-            direction={sorted}
+            <SortIcons
-            onSort={(dir) =>
+              direction={sorted}
-              dispatch({type: 'sortColumn', column: column.key, direction: dir})
+              onSort={(dir) =>
-            }
+                dispatch({
-          />
+                  type: 'sortColumn',
+                  column: column.key,
+                  direction: dir,
+                })
+              }
+            />
+          ) : null}
         </Text>
       </div>
       <FilterIcon column={column} dispatch={dispatch} />