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 children = (
+  let divProps: HTMLAttributes<HTMLDivElement> = {};
-    <Layout.Right center>
+  if (column.sortable) {
-      <div
+    divProps = {
-        onClick={(e) => {
+      onClick: (e) => {
         e.stopPropagation();
         const newDirection =
-            sorted === undefined
+          sorted === undefined ? 'asc' : sorted === 'asc' ? 'desc' : undefined;
-              ? 'asc'
-              : sorted === 'asc'
-              ? 'desc'
-              : undefined;
         dispatch({
           type: 'sortColumn',
           column: column.key,
           direction: newDirection,
         });
-        }}
+      },
-        role="button"
+      role: 'button',
-        tabIndex={0}>
+      tabIndex: 0,
+    };
+  }
+  let children = (
+    <Layout.Right center>
+      <div {...divProps}>
         <Text type="secondary">
           {column.title === undefined ? (
             toFirstUpper(column.key)
@@ -201,12 +202,18 @@ function TableHeadColumn({
           ) : (
             column.title
           )}
+          {column.sortable ? (
             <SortIcons
               direction={sorted}
               onSort={(dir) =>
-              dispatch({type: 'sortColumn', column: column.key, direction: dir})
+                dispatch({
+                  type: 'sortColumn',
+                  column: column.key,
+                  direction: dir,
+                })
               }
             />
+          ) : null}
         </Text>
       </div>
       <FilterIcon column={column} dispatch={dispatch} />