LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Filtering

Filtering

AG Grid ships with several provided filters:

  • Text
  • Number
  • Date
  • Set (enterprise only)

The text filter is the default.

We can enable filtering by setting the filter column definition property to true.

Text Filter

Let's look at the text filter:

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Name',
      field: 'name',
      filter: true,
    },
  ]);
}

We can also explicitly use the provided text filter:

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Name',
      field: 'name',
      filter: 'agTextColumnFilter',
    },
  ]);
}

Number Filter

Let's look at an example of using the provided number filter:

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Price',
      field: 'price',
      filter: 'agNumberColumnFilter',
    },
  ]);
}

Date Filter

Let's look at an example of using the provided date filter:

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Date of Order',
      field: 'dateOfOrder',
      filter: 'agDateColumnFilter',
    },
  ] as ColDef<RowData>[];

  rowData: RowData[] = orders;
}

Exercise

  1. Open the exercise on Stackblitz
  2. Set the Customer Name column to use the default text filter.
  3. Set the Account No column to use the provided number filter.
  4. Set the Date of Order column to use the provided date filter.
  5. Set the Total column to use the provided text filter.

Solution

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      filter: true,
    },
    {
      headerName: 'Account No',
      field: 'account.accountNumber',
      filter: 'agNumberColumnFilter',
    },
    {
      headerName: 'Date of Order',
      field: 'dateOfOrder',
      filter: 'agDateColumnFilter',
    },
    {
      headerName: 'Total',
      field: 'total',
      filter: 'agNumberColumnFilter',
    },
  ]);
}

Date filtering and timestamps

🤔 You may be wondering, "What about date filtering with timestamps?"

Good question!

  • The date filter works "as-is" when the row data uses JavaScript Date objects.
  • If the date is provided using another method, such as ISO strings, then we must specify the comparator function.

Let's look at using the comparator function:

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Date of Order',
      field: 'dateOfOrder',
      filter: 'agDateColumnFilter',
      filterParams: {
        comparator: (filterLocalDateAtMidnight, cellValue) => {
          const date = new Date(cellValue);
          date.setHours(0, 0, 0, 0);
          if (date < filterLocalDateAtMidnight) {
            return -1;
          } else if (date > filterLocalDateAtMidnight) {
            return 1;
          } else {
            return 0;
          }
        },
      },
    },
  ]);
}

Let's review the custom comparator for the provided date filter:

  • First, we specify the provided agDateColumnFilter value for the filter property in the column definition.
  • Next, we provide the filterParams object with the comparator property.
  • The comparator function is invoked by AG Grid with the filter value for the local date at midnight along with the value for the cell.
  • The function must return 0 if the values are equal, any number less than 0 if the cell value is less than the filter value, and any number greater than 0 if the cell value is greater than the filter value