rising-crimson

Is there a way to use react table with a date range filter?

Currently looking into filters for my table but not sure how to implement filtering dates. Anyone able to help?

9 Replies

fascinating-indigo•3y ago

I'm also looking out for examples on date range filtering... any leads would be highly appreciated

helpful-purple•3y ago

Awhile back I built one with: https://www.npmjs.com/package/react-datepicker I created a custom filter function to handle the filtering logic and a custom front-end filter component that used the above npm package to allow users to select the start and end date. I used 2 date selector components on the front-end. One for start date and one for end date. I used the dante-fns library to help with all of the date conversion logic.

unwilling-turquoise•3y ago

After a lot of work I finally managed to make a filter by date ranges, here is the code haha. It was very difficult for me because I am a beginner but actually it is so simple, the trick is to start learning date-fns first and then the calendar one: const isWithinRange = (row, columnId, value) => { const date = row.getValue(columnId); const [start, end] = value; if (start && end) { const startDate = parseISO(start); const endDate = endOfDay(parseISO(end)); const parseDate = parseISO(date); return isWithinInterval(parseDate, { start: startDate, end: endDate }); } return true; };

sunny-green•3y ago

could you please update in codesandbox?.... many thanks thank you, finally It works..

graceful-blue•3y ago

Hey! I actually just implemented this this week as well It looks almost exactly like @Valahd's

export type Range = {
  startDate?: Date;
  endDate?: Date;
};

declare module "@tanstack/table-core" {
  interface FilterFns {
    inDateRange?: FilterFn<HubRowData>;
  }
}

const inDateRange: FilterFn<HubRowData> = (
  row,
  columnId,
  filterValue: Range,
  addMeta,
) => {
  const rowDate = row.getValue(columnId);
  if (!(rowDate instanceof Date)) {
    return false;
  }
  if (filterValue.startDate && filterValue.endDate) {
    // Return if the item should be filtered in/out
    return rowDate < filterValue.endDate && rowDate > filterValue.startDate;
  }
  if (filterValue.startDate) {
    // Return if the item should be filtered in/out
    return rowDate > filterValue.startDate;
  }
  if (filterValue.endDate) {
    // Return if the item should be filtered in/out
    return rowDate < filterValue.endDate;
  }
  return false;
};

// this removes the filter from state if the value of the filter is falsey
// this is instead of looping over everything (i think)
// example here: https://github.com/TanStack/table/blob/main/packages/table-core/src/filterFns.ts#L18
inDateRange.autoRemove = (value) => !value;
export { inDateRange };

export type Range = {
  startDate?: Date;
  endDate?: Date;
};

declare module "@tanstack/table-core" {
  interface FilterFns {
    inDateRange?: FilterFn<HubRowData>;
  }
}

const inDateRange: FilterFn<HubRowData> = (
  row,
  columnId,
  filterValue: Range,
  addMeta,
) => {
  const rowDate = row.getValue(columnId);
  if (!(rowDate instanceof Date)) {
    return false;
  }
  if (filterValue.startDate && filterValue.endDate) {
    // Return if the item should be filtered in/out
    return rowDate < filterValue.endDate && rowDate > filterValue.startDate;
  }
  if (filterValue.startDate) {
    // Return if the item should be filtered in/out
    return rowDate > filterValue.startDate;
  }
  if (filterValue.endDate) {
    // Return if the item should be filtered in/out
    return rowDate < filterValue.endDate;
  }
  return false;
};

// this removes the filter from state if the value of the filter is falsey
// this is instead of looping over everything (i think)
// example here: https://github.com/TanStack/table/blob/main/packages/table-core/src/filterFns.ts#L18
inDateRange.autoRemove = (value) => !value;
export { inDateRange };

I am using it with dayzed which was very helpful in getting it implemented

quickest-silver•17mo ago

Can someone help me implement the filter by range my date range input is in another component. I just passed the table as a prop and then use it like this table.getColumn("name")?.setFilterValue(event.target.value) it works fine on filtering the names. I'm really confused about the example above on how to implement it.

flat-fuchsia•14mo ago

@ryzonxyz hi, did you solve it?

quickest-silver•14mo ago

@Macosoft09y yes I solved it, I created a custom fn for the filter and use table meta to call in on my component.

flat-fuchsia•14mo ago

oh thanks, i did too, with no table meta and it works so i think it is fine haha

Gaming

Programming

Is there a way to use react table with a date range filter?

Did you find this page helpful?