jolly-crimson

How can I filter data using date?

hello, so i've been having a hard time on how can I filter data using date, This is my data looks like

const data = [
{
   "dateOfEvent": "6/4/24"
},
{
   "dateOfEvent": "5/27/24"
},
]

const data = [
{
   "dateOfEvent": "6/4/24"
},
{
   "dateOfEvent": "5/27/24"
},
]

I want to filter data using date, is it possible? I'm following shadcn + tanstacktable tutorial and quite stuck on this problem.
I'm trying to render this

        {table.getColumn("dateOfEvent") && (
          <FilterByDate
            column={table.getColumn("dateOfEvent")}
            title="Date"
          />
        )}

        {table.getColumn("dateOfEvent") && (
          <FilterByDate
            column={table.getColumn("dateOfEvent")}
            title="Date"
          />
        )}

FilterByDate.tsx

import * as React from "react";
import { Column } from "@tanstack/react-table";
import { Input } from "@/components/ui/input";

interface FilterByDateProps<TData, TValue> {
  column?: Column<TData, TValue>;
  title?: string;
}

export default function FilterByDate<TData, TValue>({
  column,
  title,
}: FilterByDateProps<TData, TValue>) {
  const [filterValue, setFilterValue] = React.useState("");


  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setFilterValue(value); 
    console.log(column?.setFilterValue(value))

    column?.setFilterValue(value); // Update column's filter value directly
  };

  // console.log(filterValue)

  return (
    <div>
      <Input
        placeholder={title || "Date"}
        type="month"
        value={filterValue}
        onChange={handleChange}
      />
    </div>
  );
}

import * as React from "react";
import { Column } from "@tanstack/react-table";
import { Input } from "@/components/ui/input";

interface FilterByDateProps<TData, TValue> {
  column?: Column<TData, TValue>;
  title?: string;
}

export default function FilterByDate<TData, TValue>({
  column,
  title,
}: FilterByDateProps<TData, TValue>) {
  const [filterValue, setFilterValue] = React.useState("");


  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setFilterValue(value); 
    console.log(column?.setFilterValue(value))

    column?.setFilterValue(value); // Update column's filter value directly
  };

  // console.log(filterValue)

  return (
    <div>
      <Input
        placeholder={title || "Date"}
        type="month"
        value={filterValue}
        onChange={handleChange}
      />
    </div>
  );
}

but nothing happens when I try it.

1 Reply

jolly-crimsonOP•16mo ago

this is my stackoverflow question https://stackoverflow.com/questions/78568573/how-can-i-filter-the-data-using-only-the-month-and-year-using

Stack Overflow

How can I filter the data using only the month and year using?

so I'm trying to learn tanstacktable/v8 and I'm using shadcn's Datatable tutorial on this, but I'm having a little of bit of trouble on how can I render the dates by using <Input type="mont...

Gaming

Programming

How can I filter data using date?

Did you find this page helpful?