React Data GridAdvanced Filter - Custom Filter Options

"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DateFilterModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IDateFilterParams,
  INumberFilterParams,
  ITextFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

const modules = [
  TextFilterModule,
  NumberFilterModule,
  DateFilterModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const athleteFilterParams: ITextFilterParams = {
  filterOptions: [
    "contains",
    {
      displayKey: "startsWithA",
      displayName: "Starts With A",
      numberOfInputs: 0,
      predicate: (_, cellValue) =>
        cellValue != null && cellValue.startsWith("A"),
    },
    {
      displayKey: "notStartsWith",
      displayName: "Does Not Start With",
      numberOfInputs: 1,
      predicate: ([filterValue], cellValue) =>
        cellValue != null &&
        !cellValue.toLowerCase().startsWith(String(filterValue).toLowerCase()),
    },
  ],
};

const ageFilterParams: INumberFilterParams = {
  filterOptions: [
    "equals",
    {
      displayKey: "evenNumbers",
      displayName: "Even Numbers",
      numberOfInputs: 0,
      predicate: (_, cellValue) => cellValue != null && cellValue % 2 === 0,
    },
    {
      displayKey: "betweenExclusive",
      displayName: "Between (Exclusive)",
      numberOfInputs: 2,
      predicate: ([from, to], cellValue) =>
        cellValue != null && cellValue > from && cellValue < to,
    },
  ],
};

const dateFilterParams: IDateFilterParams = {
  filterOptions: [
    "equals",
    {
      displayKey: "leapYear",
      displayName: "Leap Year",
      numberOfInputs: 0,
      predicate: (_, cellValue) => {
        if (cellValue == null) {
          return false;
        }
        const year = Number(cellValue.split("-")[0]);
        return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
      },
    },
    {
      displayKey: "betweenExclusive",
      displayName: "Between (Exclusive)",
      numberOfInputs: 2,
      predicate: ([from, to], cellValue) => {
        if (cellValue == null) {
          return false;
        }
        // Built as a local date: the filter's own values are local midnight, and
        // `new Date('YYYY-MM-DD')` would be UTC midnight, so the two would not line up.
        const [year, month, day] = cellValue.split("-").map(Number);
        const cellDate = new Date(year, month - 1, day);
        return cellDate > from && cellDate < to;
      },
    },
  ],
};

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<IOlympicData[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", filterParams: athleteFilterParams },
    { field: "age", minWidth: 120, filterParams: ageFilterParams },
    {
      field: "date",
      filter: "agDateColumnFilter",
      filterParams: dateFilterParams,
    },
    { field: "sport" },
    { field: "gold" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 180,
      filter: true,
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: IOlympicData[]) =>
        setRowData(
          // The supplied dates are `dd/mm/yyyy` strings, which is a text column. Convert them to
          // `yyyy-mm-dd` so the column is a Date (String) one and its options filter on dates.
          data.map((rowData) => {
            const [day, month, year] = rowData.date.split("/");
            return {
              ...rowData,
              date: `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`,
            };
          }),
        ),
      );
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            enableAdvancedFilter={true}
            onGridReady={onGridReady}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);

export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}