Recipe — Data table with date range filters

Filter a DataTable by a DateRangePicker in the toolbar or filter row.

When to use

Operational reports where users pick a date window then filter tabular results (receipts, transfers, incidents by date).

Pattern

import { DataTable, DateRangePicker } from '@nike/whisker-component-library';
import dayjs from 'dayjs';
import { Stack } from '@nike/podium';
import { useMemo, useState } from 'react';

function ReportTable({ rows }) {
  const [range, setRange] = useState({
    start: dayjs().subtract(7, 'day'),
    end: dayjs(),
  });

  const filtered = useMemo(() => {
    if (!range.start || !range.end) return rows;
    return rows.filter((r) => {
      const d = dayjs(r.eventDate);
      return d.isAfter(range.start) && d.isBefore(range.end.endOf('day'));
    });
  }, [rows, range]);

  const columns = [
    { accessor: 'eventDate', label: 'Date', sortable: true },
    { accessor: 'name', label: 'Name', filterBy: true },
  ];

  return (
    <Stack gap="md">
      <DateRangePicker
        locale="en-US"
        value={range}
        onChange={setRange}
        onAccept={(r) => setRange(r)}
      />
      <DataTable columns={columns} data={filtered} ariaLabel="Report" />
    </Stack>
  );
}

Podium primitives

DateRangePicker uses Podium TextField for inputs.
Toolbar layout uses Podium Stack.

Pitfalls

Align DateRangePicker locale with TranslationProvider.
Fetch server-side when row count is large — client filter is for modest datasets.
onAccept fires only when both start and end are set.