Looking for a DateRange Filter example

[roxxid]

New to react and react-table.

If anyone could provide a Date Range filter example with two inputs startDate and endDate similar to NumberRangeColumnFilter, would really help me understand this.

[roxxid]

Was able to get a rough version working.

Filter Code :

export function DateRangeColumnFilter({
    column: { filterValue = [], preFilteredRows, setFilter, id }}) 
  {
    const [min, max] = React.useMemo(() => {
        let min: Date = new Date(preFilteredRows[0].values[id])
        let max: Date = new Date(preFilteredRows[0].values[id])
        preFilteredRows.forEach(row => {
            min = new Date(row.values[id]) <= min ? new Date(row.values[id]) : min
            max = new Date(row.values[id]) >= max ? new Date(row.values[id]) : max
        });
        return [min, max];
    }, [id, preFilteredRows]);
    console.log(min, max)
    return (
        <div
            style={{
                display: "flex"
            }}
        >
            <input
                value={filterValue[0] || ""}
                type="date"
                min={min.toISOString().slice(0, 10)}
                onChange={e => {
                    const val = e.target.value;
                    console.log(e.target.value);
                    setFilter((old = []) => [val ? (val) : undefined, old[1]]);
                }}
                style={{
                    width: "170px",
                    marginRight: "0.5rem"
                }}
            />
            to
      <input
                value={filterValue[1] || ""}
                type="date"
                max={max.toISOString().slice(0, 10)}
                onChange={e => {
                    const val = e.target.value;
                    setFilter((old = []) => [old[0], val ? (val) : undefined]);
                }}
                style={{
                    width: "170px",
                    marginLeft: "0.5rem"
                }}
            />
        </div>
    );
}

Define Custom filter type like this:

{
        Header: 'Created',
        accessor: 'created',
        Filter: DateRangeColumnFilter,
        filter: "dateBetween" /* Custom Filter Type */
},

Filter Function Def:

function dateBetweenFilterFn(rows, id, filterValues) {
    let sd = new Date(filterValues[0]);
    let ed = new Date(filterValues[1]);
    console.log(rows, id, filterValues)
    return rows.filter(r => {
        var time = new Date(r.values[id]);
        console.log(time, ed, sd)
        if (filterValues.length === 0) return rows;
        return (time >= sd && time <= ed);
    });
}

dateBetweenFilterFn.autoRemove = val => !val;

Finally call it inside main Table function alongside other filterTypes if you have any:

const Table = ({ columns, data }) => {

    const filterTypes = React.useMemo(
        () => ({
            // Add a new fuzzyTextFilterFn filter type.
            fuzzyText: fuzzyTextFilterFn,
            dateBetween: dateBetweenFilterFn,   /*<- LIKE THIS*/
            text: (rows, id, filterValue) => {
                return rows.filter(row => {
                    const rowValue = row.values[id];
                    return rowValue !== undefined
                        ? String(rowValue)
                            .toLowerCase()
                            .startsWith(String(filterValue).toLowerCase())
                        : true;
                });
            }
        }),
        []
    );

This is pretty rough and basic, if someone could rectify and suggest something stronger, I would really appreciate it.

Thanks 🤓👍🏼

[anvarazizov]

Thank you for this snippets! It helped me a lot.

[agusismawan]

do you have a codesanbox ?

[agusismawan]

i implement on this codesanbox but returned an error. this is the url @roxxid

https://codesandbox.io/s/fervent-hooks-f6540?file=/src/App.js

[Avi-E-Koenig]

Thanks! made some tweak to better match nulls as full return

export function isValidDate(d) {
  const parsedDate = new Date(d)
  return parsedDate instanceof Date && !isNaN(parsedDate)
}

import { isValidDate } from './dateUtils'

function dateBetweenFilterFn(rows, id, filterValues) {
  let sd = new Date(filterValues[0]);
  let ed = new Date(filterValues[1]);
  if (!isValidDate(filterValues[0]) || !isValidDate(filterValues[1])) return rows
  return rows.filter(r => {
    var time = new Date(r.values[id]);
    console.log(time, ed, sd)
    if (filterValues.length === 0) return rows;
    return (time >= sd && time <= ed);
  });
}

dateBetweenFilterFn.autoRemove = val => !val;

export default dateBetweenFilterFn;

[dolie]

Hello, here is a more robust snippet, and handle :

• Better end-date inclusion.
• Filtering since / until.

  function dateBetweenFilterFn(rows, id, filterValues) {
    const sd = filterValues[0] ? new Date(filterValues[0]) : undefined
    const ed = filterValues[1] ? new Date(filterValues[1]) : undefined

    if (ed || sd) {
      return rows.filter(r => {
        const cellDate = new Date(r.values[id])

        if (ed && sd) {
          return cellDate >= sd && cellDate <= ed
        } else if (sd){
          return cellDate >= sd
        } else if (ed){
          return cellDate <= ed
        }
      })
    } else {
      return rows
    }
  }

function DateRangeColumnFilter({
  column: {
    filterValue = [],
    preFilteredRows,
    setFilter,
    id
  }})
{
  const [min, max] = React.useMemo(() => {
    let min = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]) : new Date(0)
    let max = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]) : new Date(0)

    preFilteredRows.forEach(row => {
      const rowDate = new Date(row.values[id])

      min = rowDate <= min ? rowDate : min
      max = rowDate >= max ? rowDate : max
    })

    return [min, max]
  }, [id, preFilteredRows])

  return (
    <div>
      <input
        min={min.toISOString().slice(0, 10)}
        onChange={e => {
          const val = e.target.value
          setFilter((old = []) => [val ? val : undefined, old[1]])
        }}
        type="date"
        value={filterValue[0] || ''}
      />
      {' to '}
      <input
        max={max.toISOString().slice(0, 10)}
        onChange={e => {
          const val = e.target.value
          setFilter((old = []) => [old[0], val ? val.concat('T23:59:59.999Z') : undefined])
        }}
        type="date"
        value={filterValue[1]?.slice(0, 10) || ''}
      />
    </div>
  )
}

[Meez-tech]

This worked like magic, thank you!

[verbeckii]

I'm sorry for disturbing this topic but I faced with the same question
I'm looking for a Date Range filter like Start Date + End Date which will show all result between two dates
Please maybe anyone have any codesandbox examples? the above one did not work for me

[Tosinkoa]

Pls how do I make this wwork in my code? I'm trying to implement date-filter in react-table

[RobRover]

Hey @verbeckii and @Tosinkoa! Since I'm new I was also struggling to make it work, so when I did it I created a CodeSandox to help. Credits to TheWidlarzGroup since I'm using their template which I find easier to work on (https://github.com/TheWidlarzGroup). I will be using @dolie implementation. Notice that in filters.js I've commented "min" and "max" in order to being able to select any date we want to. You can try to uncomment to see what happens.

https://codesandbox.io/s/smoosh-resonance-6zs39h?file=/src/App.js

[Tosinkoa]

Thank you so much for the answer @RobRover, I will implement this when I get back on the project.

[vareleitor]

Thanks for sharing this example. Special attention to those who, like me, had another type of date format. The secret is the Split in the arrays of it. thanks <3

[AsitDixit]

My column:

interface TrasactionType {

date: string;

}
export const TR_COLUMNS: ColumnDef[] = [
{
header: () => (

Date

),
accessorKey: "date",
cell: (props) => (

{props.row.original.date}

),
filterFn:dateBetweenFilterFn
},
]

My dateBetweenFilterFn:

export function dateBetweenFilterFn(rows, id, filterValues) {
const sd = filterValues[0] ? new Date(filterValues[0]) : undefined;
const ed = filterValues[1] ? new Date(filterValues[1]) : undefined;
if (ed || sd) {
return rows.filter((r) => {
// format data
var dateAndHour = r.values[id].split(" ");
var [year, month, day] = dateAndHour[0].split("-");
var date = [month, day, year].join("/");
var hour = dateAndHour[1];
var formattedData = date + " " + hour;

  const cellDate = new Date(formattedData);

  if (ed && sd) {
    return cellDate >= sd && cellDate <= ed;
  } else if (sd) {
    return cellDate >= sd;
  } else {
    return cellDate <= ed;
  }
});

} else {
return rows;
}
}

I got this code but I don't know where to put this:

{
Header: 'Created',
accessor: 'created',
Filter: DateRangeColumnFilter,
filter: dateBetweenFilterFn
},

function DateRangeColumnFilter({
column: {
filterValue = [],
preFilteredRows,
setFilter,
id
}})
{
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]) : new Date(0)
let max = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]) : new Date(0)

preFilteredRows.forEach(row => {
  const rowDate = new Date(row.values[id])

  min = rowDate <= min ? rowDate : min
  max = rowDate >= max ? rowDate : max
})

return [min, max]

}, [id, preFilteredRows])

return (

<input
min={min.toISOString().slice(0, 10)}
onChange={e => {
const val = e.target.value
setFilter((old = []) => [val ? val : undefined, old[1]])
}}
type="date"
value={filterValue[0] || ''}
/>
{' to '}
<input
max={max.toISOString().slice(0, 10)}
onChange={e => {
const val = e.target.value
setFilter((old = []) => [old[0], val ? val.concat('T23:59:59.999Z') : undefined])
}}
type="date"
value={filterValue[1]?.slice(0, 10) || ''}
/>

)
}

[siddhartha8916]

column.id.toLowerCase().includes("date") && <AppDatePickerWithRange onDateRangeChange={handleDateRangeChange} />

const handleDateRangeChange = (newDateRange: DateRange | undefined) => {
    setSelectedDateRange(newDateRange);
    if (newDateRange?.from && newDateRange?.to) {
      column.setFilterValue({
        from: newDateRange?.from?.toISOString(),
        to: newDateRange?.to?.toISOString(),
      });
    }
    if (!newDateRange?.from && !newDateRange?.to) {
      column.setFilterValue('')
    }
  };

Then in Column Def add : 
{
    accessorKey: "buyDate",
    footer: (props) => props.column.id,
    header: () => {
      return <p className="my-2">BUY DATE</p>;
    },
    filterFn: (rows, id, filterValue) => {
      return (
        rows.original.buyDate >= filterValue.from &&
        rows.original.buyDate <= filterValue.to
      );
    },

filterFn should either return true of false for all rows that's passed to it. If true, it'll add it to the filter

Hope this helps someone