How to add a select option for appointment status. Where my status are scheduled,cancelled,ongoing. When i select scheduled only the scheduled appointments should be seen. I tried with compare, selector. But did not work. Please help
const [appointments, setAppointments] = React.useState<Appointment[] | null>(null);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState('');
const axios = useAxios();
const gridRef = useRef(null);
useEffect(() => {
const getAppointments = async () => {
try {
const response = await axios.get(endpoint);
const data = response.data['data'];
const convertedAppointmentList = data.map((app: any) =>
//convert data
);
setAppointments(convertedAppointmentList);
setLoading(false);
const grid = new Grid({
columns: [
'Name',
'Phone',
'Appointemnt Status',
],
sort: true,
search: true,
data: convertedAppointmentList.map((app: Appointment) => [
app.name,
app.phone,
app.status,
),
]),
pagination: { limit: 8 },
language: {
search: {
placeholder: 'Search by Name, Phone Number',
},
},
});
if (gridRef.current) {
grid.render(gridRef.current);
}
} catch (error) {
//error
setLoading(false);
}
};
getAppointments();
}, []);
return (
<div>
<div ref={gridRef}></div>
</div>
);
I tried with compare, selector. But did not work. Please help