diff --git a/src/components/RegistrationTable/TableHeader.tsx b/src/components/RegistrationTable/TableHeader.tsx index 4bec8d5..7b88613 100644 --- a/src/components/RegistrationTable/TableHeader.tsx +++ b/src/components/RegistrationTable/TableHeader.tsx @@ -45,8 +45,11 @@ interface TableHeaderProps { isQrReaderToggled: boolean; setQrReaderToggled: Dispatch>; refreshTable: () => Promise; + onFilterChange: (value: SelectValue) => void; } +type SelectValue = 'attendees' | 'partners' | 'waitlisted'; + export const TableHeader: React.FC = ({ table, filterButtonRef, @@ -54,12 +57,19 @@ export const TableHeader: React.FC = ({ isQrReaderToggled, setQrReaderToggled, refreshTable, + onFilterChange, }) => { const selectedRowsCount = Object.keys(rowSelection).length; const [showMassUpdateStatus, setShowMassUpdateStatus] = useState(false); const [showCreateTeam, setShowCreateTeam] = useState(false); const [newStatus, setNewStatus] = useState(""); const [teamName, setTeamName] = useState(""); + const [selectedValue, setSelectedValue] = useState('attendees'); + + const handleSelectChange = (value: SelectValue) => { + setSelectedValue(value); + onFilterChange(value); + }; const getSelectedRows = () => { return table.getFilteredSelectedRowModel().rows; @@ -165,7 +175,7 @@ export const TableHeader: React.FC = ({ setQrReaderToggled={setQrReaderToggled} refreshTable={refreshTable} /> - diff --git a/src/components/RegistrationTable/data-table.tsx b/src/components/RegistrationTable/data-table.tsx index 0cef8f6..dc8f4d4 100644 --- a/src/components/RegistrationTable/data-table.tsx +++ b/src/components/RegistrationTable/data-table.tsx @@ -32,6 +32,8 @@ export function DataTable({ const [pageSize, setPageSize] = useState(10); const [isClient, setIsClient] = useState(false); const [isQrReaderToggled, setQrReaderToggled] = useState(false); + const [filteredData, setFilteredData] = useState(initialData); + const [filterValue, setFilterValue] = useState<'attendees' | 'partners' | 'waitlisted'>('attendees'); const refreshTable = async () => { try { @@ -53,12 +55,27 @@ export function DataTable({ const filterButtonRef = useRef(null); + useEffect(() => { + const filtered = data.filter(attendee => { + switch (filterValue) { + case 'partners': + return attendee.isPartner === true; + case 'waitlisted': + return attendee.registrationStatus === 'waitlisted'; + case 'attendees': + default: + return !attendee.isPartner && attendee.registrationStatus !== 'waitlisted'; + } + }); + setFilteredData(filtered); + }, [data, filterValue]); + useEffect(() => { setIsClient(true); }, []); const table = useReactTable({ - data, + data: filteredData, columns: allColumns, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), @@ -115,6 +132,7 @@ export function DataTable({ isQrReaderToggled={isQrReaderToggled} setQrReaderToggled={setQrReaderToggled} refreshTable={refreshTable} + onFilterChange={setFilterValue} />