shadcn/ui data-table date-range filter

Question

Is there someone using shadcn/ui data-table here? I am looking for samples to filter my data using shadcn/ui Date Range Picker to filter the current table.

Here is my Date Range Picker component:

<div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn(
              "w-[300px] justify-start text-left font-normal",
              !date && "text-muted-foreground"
            )}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {date?.from ? (
              date.to ? (
                <>
                  {format(date.from, "LLL dd, y")} -{" "}
                  {format(date.to, "LLL dd, y")}
                </>
              ) : (
                format(date.from, "LLL dd, y")
              )
            ) : (
              <span>Pick a date</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            initialFocus
            mode="range"
            defaultMonth={date?.from}
            selected={date}
            onSelect={setDate}
            numberOfMonths={2}
          />
        </PopoverContent>
      </Popover>
    </div>

Here is the sample code that is currently working to filter file names:

<Input
                placeholder="Search File Name..."
                value={(table.getColumn("contentUri")?.getFilterValue() as string) ?? ""}
                onChange={(event) =>
                    table.getColumn("contentUri")?.setFilterValue(event.target.value)
                }
                className="max-w-sm border-primary text-primary"
            />

Any help would be appreciated Thanks a lot!

I tried to create a function that handle the onSelect but I am having an error and I think that is not the way

score 0 · Answer 1 · answered Jun 22 '23 at 10:11

It would be really helpful for us if you also add what kind type of data you want to filter? (most probably it is an object consisting of key-value pair and one of that must be date)

Well, here's what I can help you with:

Create a state in your parent component/page from where you're calling the date range picker components. like this

 const [dateRange, setDateRange] = useState({
    start: dateFormatter(subDays(new Date(), 20)),
    end: dateFormatter(new Date()),
  });

Be sure to check the format of the date the calendar component support also add the default date range as per your connivence

Then create a callback function that will change the value of your dateRange state. like this

 const handleDateRangeChange = (start, end) => {
    setDateRange({ start, end });
  };

Now Pass both the state variable and callback function as props to the Date range Picker component

 <DatePickerWithPresets dateRange={dateRange}
                onDateRangeChange={handleDateRangeChange}
              />

Then change the component's default useState block to the state variables you made before like this

  const [date, setDate] = useState({
    from: new Date(dateRange?.start),
    to: addDays(new Date(dateRange?.end), 0)
  })

Now, you can call the that callback function that will change date range of the component and will trigger in your parent component to filter the data.

Here I would suggest you to add another button just below your calendar so it will get much easier for user to select the date range.

the button code may look like this

 {date?.from  && date?.to ?  <Button className="ml-3 mb-4" size="sm" onClick={()=>onDateRangeChange(date.from, date.to)}>
            Apply
          </Button> : null}

I added additional check for you on the button to avoid single date selection error.

Hope this help you.

shadcn/ui data-table date-range filter

1 Answers1