Custom Date Filter for AG Grid with React Datepicker

Photo by Estée Janssens on Unsplash

Inro

Good day, guys!

I think some of you know about React Datepicker — quite common solution for date selection. AG Grid — less popular (according to GitHub download statistics), but also powerfull library for displaying data in grid. Both of them we use in my current company. And would be natural, if our user, who wants to filter the grid’s data by date column, will see the same component, what he/she see in forms. In this case we need to substitute default date filter with custom one, based on React Datepicker. So, let’s see how we can achive that!

Solution

Let’s create a new React project with TypeScript

npx create-react-app ag-grid-date-filter — template typescript

Add dependencies for AG Grid and React Datepicker

npm i --save ag-grid-community
npm i --save ag-grid-react
npm i --save react-datepicker
npm i --save-dev @types/react-datepicker

Let’s remove all default code and paste into App.tsx an example from official docs for AG Grid Filtering. Now, if we execute the following command

npm run start

and try to display the date filter, we will see something like that:

AG Grid with default date filter

It’s default one for Chrome browser. Let’s substitute it with custom component based on React Datepicker. For that, we need to implement/extend AG Grid’s interfaces:IDate for component and IDateParams for its props. Important methods for us are following:

export interface IDate {
  /** Returns the current date represented by this component */
  getDate(): Date | null;
  /** Sets the date represented by this component */
  setDate(date: Date | null): void;
  ...
}
export interface IDateParams<TData = any> extends AgGridCommon<TData> {
  /** Method for component to tell AG Grid that the date has changed. */
  onDateChanged: () => void;
  ...
}

As result, DatePickerFilter.tsx should look like this:

import { IDateParams } from "ag-grid-community";
import * as React from "react";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export const DatePickerFilter = React.forwardRef<unknown, IDateParams>((props, ref) => {
  const [date, setDate] = React.useState<Date | null>(null);
  const onDateChanged = (selectedDate: Date) => {
    setDate(selectedDate);
    props.onDateChanged();
  };
  React.useImperativeHandle(ref, () => ({
    getDate() {
      return date;
    },
    setDate(date: Date | null) {
      setDate(date);
    },
  }));
  return (
    <ReactDatePicker
      portalId="root"
      placeholderText="dd-MM-yyyy"
      dateFormat="dd-MM-yyyy"
      popperClassName="ag-custom-component-popup datepicker-filter-popper"
      selected={date}
      onChange={onDateChanged}
      enableTabLoop
      strictParsing
      useWeekdaysShort
    />
  );
});

Also I have added here one css selector for correct popup calendar displaying:

.datepicker-filter-popper {
  z-index: 10 !important;
}

Now, we need to add it into App.tsx for AG Grid component via components prop:

import { DatePickerFilter } from "./DatePickerFilter";
...
const App = () => {
  ...
  const components = useMemo(() => ({
      agDateInput: DatePickerFilter,
    }), []
  );
  ...
  return (
    <div style={containerStyle}>
      <div style={gridStyle} className="ag-theme-alpine">
        <AgGridReact<IOlympicData>
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          onGridReady={onGridReady}
          components={components}
        ></AgGridReact>
      </div>
    </div>
  );
}

Run the application again and look what we have now:

AG Grid with React Datepicker date filter

Brilliant! That’s what we need!

Conclusion

I hope this little article would be useful for you. Please check the full code on my GitHub.Thanks for reading!