@tanstack/table filterFns example for date range (between days and same day)

columns.tsx

"use client";

import type { ColumnDef } from "@tanstack/react-table";
import type { ColumnSchema } from "./schema";
import { format } from "date-fns";

export const columns: ColumnDef<ColumnSchema>[] = [
  {
    accessorKey: "date",
    header: "Date",
    cell: ({ row }) => {
      return (
        <div className="font-mono whitespace-nowrap">
          {format(new Date(row.getValue("date")), "LLL dd, y HH:mm")}
        </div>
      );
    },
    filterFn: "inDateRange",
  },
  // ...
];

data-table.tsx

"use client";

import type { ColumnDef } from "@tanstack/react-table";
import { useReactTable } from "@tanstack/react-table";
import { inDateRange } from "@/lib/filterfns";

export interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    filterFns: { inDateRange },
  });

  return // ... see shadcn/ui
}

filterfns.ts

import { FilterFn } from "@tanstack/react-table";
import { isAfter, isBefore, isSameDay } from "date-fns";

export const inDateRange: FilterFn<any> = (row, columnId, value) => {
  const date = new Date(row.getValue(columnId));
  const [start, end] = value as Date[];

  if (isNaN(date.getTime())) return false;

  // expection: if no end date, check if it's the same day
  if (!end) return isSameDay(date, start);

  return isAfter(date, start) && isBefore(date, end);
};

inDateRange.autoRemove = (val: any) =>
  !Array.isArray(val) ||
  !val.length ||
  !val.every((item) => item instanceof Date);

react-table.d.ts

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface FilterFns {
    inDateRange: FilterFn<any>;
  }
  // https://github.com/TanStack/table/discussions/4554
  interface ColumnFiltersOptions<TData extends RowData> {
    filterFns?: Record<string, FilterFn<TData>>;
  }
}

Current implementation for logs.run/i.

Read more about how to leverage filterFns.