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

app/react/components/datatables/buildNameColumn.tsx

@@ -0,0 +1,44 @@
+import { ColumnDef, CellContext } from '@tanstack/react-table';
+
+import { Link } from '@@/Link';
+
+import { DefaultType } from './types';
+import { defaultGetRowId } from './defaultGetRowId';
+
+export function buildNameColumn<T extends DefaultType>(
+  nameKey: keyof T,
+  path: string,
+  idParam = 'id',
+  idGetter: (row: T) => string = defaultGetRowId<T>
+): ColumnDef<T> {
+  const cell = createCell();
+
+  return {
+    header: 'Name',
+    accessorKey: nameKey,
+    id: 'name',
+    cell,
+    enableSorting: true,
+    enableHiding: false,
+  };
+
+  function createCell() {
+    return function NameCell({ renderValue, row }: CellContext<T, unknown>) {
+      const name = renderValue() || '';
+
+      if (typeof name !== 'string') {
+        return null;
+      }
+
+      return (
+        <Link
+          to={path}
+          params={{ [idParam]: idGetter(row.original) }}
+          title={name}
+        >
+          {name}
+        </Link>
+      );
+    };
+  }
+}