[v8] How to create a Date Range Filter ?

[akshay722]

Can anyone please give a full example Date Range filter for React Table ?

I cannot get the dates to get memorized.

Thank you

[mjaynixxz]

I will also like to get this please even anyone can help with an example using version 8

[salimkanoun]

Hi we had this discussion on discord,

here an example of custom filter function

`
export const isWithinRange = (row, columnId, value) => {
const date = row.getValue(columnId);
const [start, end] = value;
//If one filter defined and date is null filter it
if((start || end) && !date) return false;
if(start && !end){
return date.getTime() >= start.getTime()
}else if(!start && end){
return date.getTime() <= end.getTime()
}else if (start && end) {
return date.getTime() >= start.getTime() && date.getTime() <= end.getTime()
} else return true;
};

`

[salimkanoun]

For the filter component just follow the official documentation https://tanstack.com/table/v8/docs/api/features/filters
The date inputs are in JS Date Object, that the proper way to give dates to the table.

[mjaynixxz]

thank you @salimkanoun for your response. there is no guide on create the component in the documentation.

[salimkanoun]

https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/filters?from-embed

`function Filter({
column,
table,
}: {
column: Column<any, unknown>
table: Table
}) {
const firstValue = table
.getPreFilteredRowModel()
.flatRows[0]?.getValue(column.id)

const columnFilterValue = column.getFilterValue()

const sortedUniqueValues = React.useMemo(
() =>
typeof firstValue === 'number'
? []
: Array.from(column.getFacetedUniqueValues().keys()).sort(),
[column.getFacetedUniqueValues()]
)

return typeof firstValue === 'number' ? (

<DebouncedInput
type="number"
min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
value={(columnFilterValue as [number, number])?.[0] ?? ''}
onChange={value =>
column.setFilterValue((old: [number, number]) => [value, old?.[1]])
}
placeholder={Min ${ column.getFacetedMinMaxValues()?.[0] ? (${column.getFacetedMinMaxValues()?.[0]}) : '' }}
className="w-24 border shadow rounded"
/>
<DebouncedInput
type="number"
min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
value={(columnFilterValue as [number, number])?.[1] ?? ''}
onChange={value =>
column.setFilterValue((old: [number, number]) => [old?.[0], value])
}
placeholder={Max ${ column.getFacetedMinMaxValues()?.[1] ? (${column.getFacetedMinMaxValues()?.[1]}) : '' }}
className="w-24 border shadow rounded"
/>

) : (
<>
<datalist id={column.id + 'list'}>
{sortedUniqueValues.slice(0, 5000).map((value: any) => (

))}

<DebouncedInput
type="text"
value={(columnFilterValue ?? '') as string}
onChange={value => column.setFilterValue(value)}
placeholder={Search... (${column.getFacetedUniqueValues().size})}
className="w-36 border shadow rounded"
list={column.id + 'list'}
/>

</>
)
}`

[mshameer237]

@salimkanoun the isWithinRange function is giving me error. can you tell the date format which should be passed to this function and the tanstack table? I am already passing as JS Date Object and its giving me error.

[salimkanoun]

@salimkanoun the isWithinRange function is giving me error. can you tell the date format which should be passed to this function and the tanstack table? I am already passing as JS Date Object and its giving me error.

Return timestamp which is a number (number of seconds from Unix time) it is this way easy to check range

[alejandrogonzalz]

Did it work?

[fysal-dev]

Step 1: Create two date input, if the column record is Date type
Step 2: Create filter function for that date column, that will do the magic and bring the record if the filter return true
I use same the filter function @salimkanoun mentioned

export const isWithinRange = (row, columnId, value) => {
  const date = row.getValue(columnId);
  const [start, end] = value;                 // value => two date input values
  //If one filter defined and date is null filter it
  if((start || end) && !date) return false;
  if(start && !end){
  return date.getTime() >= start.getTime()
  }else if(!start && end){
  return date.getTime() <= end.getTime()
  }else if (start && end) {
  return date.getTime() >= start.getTime() && date.getTime() <= end.getTime()
  } else return true;
};

Step 3: Add filterfn to the column Def as a string

export const TB_REQ_COLUMNS = [
  columnHelper.accessor("request_no", {
    header: () => <span>ID No</span>,
    cell: (info) => {
        return <a href="#">{info.getValue()}</a>
    },
    
  }),
  
  columnHelper.accessor("date_created", {
    cell: (info) => {
      var crDate = new Date(info.getValue()).toLocaleDateString('en-gb');
      return crDate;
    },
    filterFn: 'isWithinRange',                                     // add filter function as a name
    header: () => <span>Date Created</span>,
  }),
  columnHelper.accessor("region",{
    header:"Region",
    cell:info => info.getValue()
  }),
  columnHelper.accessor("transfer_type",{
    cell: info => { return info.getValue()},
    header:()=> <span>Transfer Type</span>
  })
];

Step 4: import filterFns from react table, and import also isWithinRange and add to table instance

so your table instance will be like below

const tblInstance = useReactTable({
    columns: tb_columns,
    data: tb_data,
    filterFns:{
      'isWithinRange':isWithinRange,            //filter function added
    },
    getCoreRowModel: getCoreRowModel(), //this will get row data
    getSortedRowModel: getSortedRowModel(), //sorting
    getFilteredRowModel: getFilteredRowModel(), //filter
    state: {
      sorting: tbSorting,
      globalFilter: tbGlobalFilter, //add useState Global filter
      columnFilters: tbColumnFilter,
    },
    onSortingChange: setTbSorting, //setSorting
    onGlobalFilterChange: setTbGlobalFilter, //setGlobalFilter
    onColumnFiltersChange: setTbColumnFilter, //setColumnFilter
  });

[AsitDixit]

still I am unclear, how to select date range, and my JSON data is:

    "id": {
      "$oid": "6512fa83fc13ae1395fd6385"
    },
    "name": "Esteban Ruane",
    "details": "rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet",
    "date": "2023-03-08T23:31:40Z",
    "amount": 543
  },```

[mshameer237]

Step 1: Create two date input, if the column record is Date type Step 2: Create filter function for that date column, that will do the magic and bring the record if the filter return true I use same the filter function @salimkanoun mentioned

export const isWithinRange = (row, columnId, value) => {
  const date = row.getValue(columnId);
  const [start, end] = value;                 // value => two date input values
  //If one filter defined and date is null filter it
  if((start || end) && !date) return false;
  if(start && !end){
  return date.getTime() >= start.getTime()
  }else if(!start && end){
  return date.getTime() <= end.getTime()
  }else if (start && end) {
  return date.getTime() >= start.getTime() && date.getTime() <= end.getTime()
  } else return true;
};

Step 3: Add filterfn to the column Def as a string

export const TB_REQ_COLUMNS = [
  columnHelper.accessor("request_no", {
    header: () => <span>ID No</span>,
    cell: (info) => {
        return <a href="#">{info.getValue()}</a>
    },
    
  }),
  
  columnHelper.accessor("date_created", {
    cell: (info) => {
      var crDate = new Date(info.getValue()).toLocaleDateString('en-gb');
      return crDate;
    },
    filterFn: 'isWithinRange',                                     // add filter function as a name
    header: () => <span>Date Created</span>,
  }),
  columnHelper.accessor("region",{
    header:"Region",
    cell:info => info.getValue()
  }),
  columnHelper.accessor("transfer_type",{
    cell: info => { return info.getValue()},
    header:()=> <span>Transfer Type</span>
  })
];

Step 4: import filterFns from react table, and import also isWithinRange and add to table instance

so your table instance will be like below

const tblInstance = useReactTable({
    columns: tb_columns,
    data: tb_data,
    filterFns:{
      'isWithinRange':isWithinRange,            //filter function added
    },
    getCoreRowModel: getCoreRowModel(), //this will get row data
    getSortedRowModel: getSortedRowModel(), //sorting
    getFilteredRowModel: getFilteredRowModel(), //filter
    state: {
      sorting: tbSorting,
      globalFilter: tbGlobalFilter, //add useState Global filter
      columnFilters: tbColumnFilter,
    },
    onSortingChange: setTbSorting, //setSorting
    onGlobalFilterChange: setTbGlobalFilter, //setGlobalFilter
    onColumnFiltersChange: setTbColumnFilter, //setColumnFilter
  });

while using the above code the table is not getting filtered and its giving me the below error:

can you please help me? What is the date format that I should pass ? The current date format is - 'Fri Jan 28 1994 00:00:00 GMT+0530 (India Standard Time)' and the range I am passing is like an array - [ 'Fri Jan 28 1994 00:00:00 GMT+0530 (India Standard Time)', 'Mon Jul 11 2022 00:00:00 GMT+0530 (India Standard Time)' ,].

is the above formats correct ?

I was not able to find any reference for the date range filters in the Tanstack docs.

[larzknoke]

you need to convert the date string (e.g. "2023-11-20") to a unix timestamp with:

const start = new Date(startDate)

then you can use start.getTime() :

1700517977088

and compare this with the given column date:

return date.getTime() >= start.getTime();

[ShoebMerchant]

I've created an example repo for all the lazy peoples 😂
Date-Range Filter Example

[p-runge]

That was very helpful. Tyvm!

I initially missed your redeclaration of the FilterFns interface in the @tanstack/table-core module. So in case anyone is wondering why TypeScript is still yelling, have another look at this part of the docs.

In addition I would recommend to check for both the row value and the filter value to actually be instances of Date and log errors when they aren't. Helps for better DX when e.g. accidentally setting this filterFn for the wrong column:

    filterFns: {
      dateBetweenFilterFn: (row, columnId, value) => {
        const date = row.getValue(columnId);
        if (!(date instanceof Date)) {
          console.error(
            `Value of column "${columnId}" is expected to be a date, but got ${date}`
          );
          return false;
        }

        const [start, end] = value ?? []; // value => two date input values
        if (
          !(start instanceof Date || start === undefined) ||
          !(end instanceof Date || end === undefined)
        ) {
          console.error(
            `Filter value of column "${columnId}" is expected to be an array of two dates, but got ${value}`
          );
          return false;
        }

        // If one filter defined and date is undefined, filter it
        if ((start || end) && !date) {
          return false;
        }

        if (start && !end) {
          return date.getTime() >= start.getTime();
        } else if (!start && end) {
          return date.getTime() <= end.getTime();
        } else if (start && end) {
          return (
            date.getTime() >= start.getTime() && date.getTime() <= end.getTime()
          );
        }

        return true;
      },
    },

[Mingbling1]

hey dude @p-runge , i've been waiting for this example for along weeks. just asked me if you can share me this all project to analyze and implement to my project. =(

[p-runge]

hey dude @p-runge , i've been waiting for this example for along weeks. just asked me if you can share me this all project to analyze and implement to my project. =(

You can just have a look into ShoebMerchant's comment (the one I answered to). They linked a full Stackblitz project with a working example. I just copied the core function from that project (from the data-between-filter.ts file) and updated it a little.

[iannn07]

Tysm! I've made some tweaks to the Date Range table filter, especially for the Fixed Date Filter (e.g. Today, Yesterday, etc.) and Custom Range. Also, I've added the Array Sub String Filter as well for Custom filterFn!

I've created an example on StackBlitz and CodeSandbox, which you can find the details in this discussion #5829