refactor(ui/datatables): allow datatable to globally filter on object value [EE-5824] (#9955)

app/react/components/datatables/extend-options/mergeOptions.ts

@@ -0,0 +1,10 @@
+import { TableOptions } from '@tanstack/react-table';
+
+type OptionExtender<T> = (options: TableOptions<T>) => TableOptions<T>;
+
+export function mergeOptions<T>(
+  ...extenders: Array<OptionExtender<T>>
+): OptionExtender<T> {
+  return (options: TableOptions<T>) =>
+    extenders.reduce((acc, option) => option(acc), options);
+}

app/react/components/datatables/extend-options/withControlledSelected.tsx

@@ -0,0 +1,37 @@
+import {
+  RowSelectionState,
+  TableOptions,
+  Updater,
+} from '@tanstack/react-table';
+
+import { DefaultType } from '../types';
+
+export function withControlledSelected<D extends DefaultType>(
+  onChange?: (value: string[]) => void,
+  value?: string[]
+) {
+  return function extendTableOptions(options: TableOptions<D>) {
+    if (!onChange || !value) {
+      return options;
+    }
+
+    return {
+      ...options,
+      state: {
+        ...options.state,
+        rowSelection: Object.fromEntries(value.map((i) => [i, true])),
+      },
+      onRowSelectionChange(updater: Updater<RowSelectionState>) {
+        const newValue =
+          typeof updater !== 'function'
+            ? updater
+            : updater(Object.fromEntries(value.map((i) => [i, true])));
+        onChange(
+          Object.entries(newValue)
+            .filter(([, selected]) => selected)
+            .map(([id]) => id)
+        );
+      },
+    };
+  };
+}

app/react/components/datatables/extend-options/withGlobalFilter.ts

@@ -0,0 +1,15 @@
+import { TableOptions } from '@tanstack/react-table';
+
+import { defaultGlobalFilterFn } from '../Datatable';
+import { DefaultType } from '../types';
+
+export function withGlobalFilter<D extends DefaultType>(
+  filterFn: typeof defaultGlobalFilterFn
+) {
+  return function extendOptions(options: TableOptions<D>) {
+    return {
+      ...options,
+      globalFilterFn: filterFn,
+    };
+  };
+}

app/react/components/datatables/extend-options/withMeta.ts

@@ -0,0 +1,15 @@
+import { TableOptions } from '@tanstack/react-table';
+
+import { DefaultType } from '../types';
+
+export function withMeta<D extends DefaultType>(meta: Record<string, unknown>) {
+  return function extendOptions(options: TableOptions<D>) {
+    return {
+      ...options,
+      meta: {
+        ...options.meta,
+        ...meta,
+      },
+    };
+  };
+}