support filtering derivative columns with supported output types

src/components/TableHeader/Filters/FilterInputs.tsx

@@ -8,8 +8,7 @@ import FormAutosave from "@src/components/Table/ColumnMenu/FieldSettings/FormAut
 import FieldSkeleton from "@src/components/SideDrawer/Form/FieldSkeleton";
 
 import type { useFilterInputs } from "./useFilterInputs";
-import { FieldType } from "@src/constants/fields";
-import { getFieldProp } from "@src/components/fields";
+import { getColumnType, getFieldProp } from "@src/components/fields";
 
 export interface IFilterInputsProps extends ReturnType<typeof useFilterInputs> {
   disabled?: boolean;
@@ -22,7 +21,6 @@ export default function FilterInputs({
   availableFilters,
   query,
   setQuery,
-
   disabled,
 }: IFilterInputsProps) {
   // Need to use react-hook-form with autosave for the value field,
@@ -32,12 +30,7 @@ export default function FilterInputs({
     defaultValues: selectedColumn ? { [selectedColumn.key]: query.value } : {},
   });
 
-  // Get column type to render for the value field
-  const columnType = selectedColumn
-    ? selectedColumn.type === FieldType.derivative
-      ? selectedColumn.config.renderFieldType
-      : selectedColumn.type
-    : null;
+  const columnType = selectedColumn ? getColumnType(selectedColumn) : null;
 
   return (
     <Grid container spacing={2} sx={{ mb: 3 }}>

src/components/TableHeader/Filters/useFilterInputs.ts

@@ -3,14 +3,14 @@ import _find from "lodash/find";
 import _sortBy from "lodash/sortBy";
 
 import { TableState, TableFilter } from "@src/hooks/useTable";
-import { getFieldProp } from "@src/components/fields";
+import { getColumnType, getFieldProp } from "@src/components/fields";
 
 export const INITIAL_QUERY = { key: "", operator: "", value: "" };
 
 export const useFilterInputs = (columns: TableState["columns"]) => {
   // Get list of columns that can be filtered
   const filterColumns = _sortBy(Object.values(columns), "index")
-    .filter((c) => getFieldProp("filter", c.type))
+    .filter((c) => getFieldProp("filter", getColumnType(c)))
     .map((c) => ({ value: c.key, label: c.name, ...c }));
 
   // State for filter inputs
@@ -22,7 +22,7 @@ export const useFilterInputs = (columns: TableState["columns"]) => {
     const column = _find(filterColumns, ["key", value]);
 
     if (column) {
-      const filter = getFieldProp("filter", column.type);
+      const filter = getFieldProp("filter", getColumnType(column));
       setQuery({
         key: column.key,
         operator: filter.operators[0].value,
@@ -36,7 +36,10 @@ export const useFilterInputs = (columns: TableState["columns"]) => {
   // Get the column config
   const selectedColumn = _find(filterColumns, ["key", query?.key]);
   // Get available filters from selected column type
-  const availableFilters = getFieldProp("filter", selectedColumn?.type);
+  const availableFilters = getFieldProp(
+    "filter",
+    getColumnType(selectedColumn)
+  );
 
   return {
     filterColumns,

src/components/fields/index.tsx

@@ -39,6 +39,7 @@ import UpdatedAt from "./UpdatedAt";
 import User from "./User";
 import Id from "./Id";
 import Status from "./Status";
+import { TableColumn } from "../Table";
 
 // Export field configs in order for FieldsDropdown
 export const FIELDS: IFieldConfig[] = [
@@ -120,7 +121,9 @@ export const hasDataTypes = (dataTypes: string[]) => {
   );
 };
 
-export const getColumnType = (column) =>
-  column.type === FieldType.derivative
+export const getColumnType = (column?: TableColumn) =>
+  !column
+    ? null
+    : column.type === FieldType.derivative
     ? column.config.renderFieldType
     : column.type;