Introduce column filters

Summary:
Beyond a search across all columns, it is now possible to specific columns for specific values:

* for a row to be visible, all active column filters need to be matched (e.g. both a filter on time and app has to be satisfied)
* if multiple values within a column are filtered for, these are -or-ed.
* if no value at all within a column is checked, even when they are defined, the column won't take part in filtering
* if there is a general search and column filters, a row has to satisfy both

Filters can be preconfigured, pre-configured filters cannot be removed.

Reseting will reset the filters back to their original

Move `useMemoize` to flipper-plugin

Merged the `ui/utils` and `utils` folder inside `flipper-plugin`

Reviewed By: nikoant

Differential Revision: D26450260

fbshipit-source-id: 11693d5d140cea03cad91c1e0f3438d7b129cf29

desktop/flipper-plugin/src/ui/datatable/DataTable.tsx

@@ -20,7 +20,7 @@ import {TableRow, DEFAULT_ROW_HEIGHT} from './TableRow';
 import {DataSource} from '../../state/datasource/DataSource';
 import {Layout} from '../Layout';
 import {TableHead} from './TableHead';
-import {Percentage} from '../utils/widthUtils';
+import {Percentage} from '../../utils/widthUtils';
 import {DataSourceRenderer, DataSourceVirtualizer} from './DataSourceRenderer';
 import {useDataTableManager, TableManager} from './useDataTableManager';
 import {TableSearch} from './TableSearch';
@@ -55,6 +55,12 @@ export type DataTableColumn<T = any> = {
   wrap?: boolean;
   align?: 'left' | 'right' | 'center';
   visible?: boolean;
+  filters?: {
+    label: string;
+    value: string;
+    enabled: boolean;
+    predefined?: boolean;
+  }[];
 };
 
 export interface RenderContext<T = any> {
@@ -129,6 +135,7 @@ export function DataTable<T extends object>(props: DataTableProps<T>) {
         case 'End':
           selectItem(() => dataSource.output.length - 1);
           break;
+        case ' ': // yes, that is a space
         case 'PageDown':
           selectItem((idx) =>
             Math.min(
@@ -196,6 +203,9 @@ export function DataTable<T extends object>(props: DataTableProps<T>) {
             onColumnToggleVisibility={tableManager.toggleColumnVisibility}
             sorting={tableManager.sorting}
             onColumnSort={tableManager.sortColumn}
+            onAddColumnFilter={tableManager.addColumnFilter}
+            onRemoveColumnFilter={tableManager.removeColumnFilter}
+            onToggleColumnFilter={tableManager.toggleColumnFilter}
           />
         </Layout.Container>
         <DataSourceRenderer<T, RenderContext<T>>