reactjs - Πώς να χρησιμοποιήσετε τον πίνακα tanstack v8 για να φιλτράρετε δεδομένα με εύρος ημερομηνιών;

Έχω δεδομένα που προέρχονται από ένα API όπως:

const abc = [
 {
   date: '2023-12-8',
   value: 'mop'
 },{
   date: '2023-10-8',
   value: 'qrs'
 }
]

Πώς να συνδέσουμε δύο πεδία εισόδου ώστε να λειτουργούν ως εύρος ημερομηνιών; Η ημερομηνία έρχεται ως συμβολοσειρά, πώς μπορούμε να φιλτράρουμε με βάση αυτές; Ποιος είναι ο καλύτερος τρόπος να λύσουμε αυτό το είδος προβλήματος με εύρος ημερομηνιών;

export const columns: ColumnDef<VTDATA>[] = [
  {
    accessorKey: "value",
    header: "Value",
  },
  {
    accessorKey: "date",
    header: "Date",
  }]

Απάντηση #1

Αν θέλετε να υλοποιήσετε φιλτράρισμα από την πλευρά του πελάτη, μπορείτε να το κάνετε με αυτόν τον τρόπο:

import { format, parseISO, isAfter, isBefore } from 'date-fns'; // You may need to install the 'date-fns' library

const YourComponent = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const filteredData = abc.filter(item => {
    const itemDate = parseISO(item.date);

    // Check if the item's date is within the selected date range
    return (!startDate || isAfter(itemDate, startDate)) && (!endDate || isBefore(itemDate, endDate));
  });

  // Your render logic and JSX here

  return (
    <div>
      <input
        type="date"
        value={startDate ? format(startDate, 'yyyy-MM-dd') : ''}
        onChange={(e) => setStartDate(new Date(e.target.value))}
      />
      <input
        type="date"
        value={endDate ? format(endDate, 'yyyy-MM-dd') : ''}
        onChange={(e) => setEndDate(new Date(e.target.value))}
      />

      {/* Render your table with filteredData */}
    </div>
  );
};

Αν μπορείτε να δώσετε ένα εύρος ημερομηνιών στον διακομιστή για φίλτραρισμα, μπορείτε να το υλοποιήσετε πιο εύκολα:

import { format, parseISO, isAfter, isBefore } from 'date-fns';

const fetchData = async (startDate, endDate) => {
  // Your API call logic here, for example using fetch
  const response = await fetch(`/api/data?startDate=${format(startDate, 'yyyy-MM-dd')}&endDate=${format(endDate, 'yyyy-MM-dd')}`);
  const data = await response.json();

  return data;
};

const YourComponent = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const { data, isLoading, isError } = useQuery(['data', startDate, endDate], () => fetchData(startDate, endDate));

  // Your render logic and JSX here

  return (
    <div>
      <input
        type="date"
        value={startDate ? format(startDate, 'yyyy-MM-dd') : ''}
        onChange={(e) => setStartDate(new Date(e.target.value))}
      />
      <input
        type="date"
        value={endDate ? format(endDate, 'yyyy-MM-dd') : ''}
        onChange={(e) => setEndDate(new Date(e.target.value))}
      />

      {isLoading && <p>Loading...</p>}
      {isError && <p>Error fetching data</p>}

      {/* Render your table or other components with data */}
      {data && (
        <YourDataTable data={data} />
      )}
    </div>
  );
};