mytable01 date and f01
Wed Jan 31 2024 19:27:42 GMT+0000 (Coordinated Universal Time)
Saved by @taharjt
import React, { useEffect, useState } from 'react'; const MyTable = ({ filterValues }) => { const [intradata, setIntradata] = useState(null); const [data, setData] = useState(null); const [selectedGroup, setSelectedGroup] = useState('summary'); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [columns, setColumns] = useState([]); const [validGroups, setValidGroups] = useState([]); useEffect(() => { const fetchData = async () => { try { // Fetch intradatacols const intradatacolsResponse = await fetch('http://5.34.198.87:8000/api/options/intradatacols'); if (!intradatacolsResponse.ok) { throw new Error(`HTTP error! Status: ${intradatacolsResponse.status}`); } const intradatacolsData = await intradatacolsResponse.json(); console.log('API Response for intradatacols:', intradatacolsData); setData(intradatacolsData); const groups = Object.keys(intradatacolsData.groups); setValidGroups(groups); const initialColumns = intradatacolsData.groupscolumn[selectedGroup] || []; setColumns(initialColumns); if (!groups.includes(selectedGroup)) { console.error(`Invalid selectedGroup: ${selectedGroup}`); return; } // Fetch intradata const intradataResponse = await fetch('http://5.34.198.87:8000/api/options/intradata'); if (!intradataResponse.ok) { throw new Error(`HTTP error! Status: ${intradataResponse.status}`); } const intradataData = await intradataResponse.json(); console.log('API Response for intradata:', intradataData); setIntradata(intradataData.data); } catch (error) { console.error('Error fetching data:', error); setError(error.message || 'An error occurred while fetching data.'); } finally { setLoading(false); } }; fetchData(); }, [selectedGroup]); useEffect(() => { console.log('intradata:', intradata); console.log('columns:', columns); console.log('data:', data); }, [intradata, columns, data]); if (loading) { return <div>Loading...</div>; } if (error) { return <div>Error: {error}</div>; } if (!intradata || !data || !data.groups || !data.groupscolumn) { return <div>No data available</div>; } // Filter the intradata based on filterValues const filteredData = intradata.filter((item) => { // Check filter01 if (filterValues.filter01 && item.ua_instrument_id.toString().toLowerCase() !== filterValues.filter01.toString().toLowerCase()) { console.log(`ua_instrument_id Filter: ${item.ua_instrument_id} !== ${filterValues.filter01}`); return false; } // Custom function to parse date in the format "yyyyMMdd" const parseCustomDate = (dateString) => { const year = dateString.substr(0, 4); const month = dateString.substr(4, 2) - 1; // Months are zero-based const day = dateString.substr(6, 2); return new Date(year, month, day); }; // Check date range filter if (filterValues.startDate && filterValues.endDate) { const itemDate = parseCustomDate(item.end_date); // Parse using custom function if (isNaN(itemDate.getTime())) { console.error(`Invalid date format for end_date: ${item.end_date}`); return false; } const startDate = parseInt(filterValues.startDate, 10); const endDate = parseInt(filterValues.endDate, 10); console.log('Item Date:', itemDate); console.log('Start Date:', startDate); console.log('End Date:', endDate); console.log('Column Values:', item[columns[0]]); return itemDate >= startDate && itemDate <= endDate; } return true; }); console.log('Filtered Data:', filteredData); console.log('Filtered Data for Rendering:', filteredData); return ( <div className="container mt-4"> <div className="btn-group mb-3"> {validGroups.map((groupKey) => ( <button key={groupKey} type="button" className={`btn ${selectedGroup === groupKey ? 'bg-blue-500 text-white' : 'bg-blue-200'}`} onClick={() => setSelectedGroup(groupKey)} > {data.groups[groupKey]} </button> ))} </div> <div className="table-container overflow-x-auto" style={{ maxHeight: '400px' }}> <table className="table-auto w-full border-collapse border border-gray-800"> <thead className="bg-gray-800 text-white"> <tr> {columns.map((column, index) => ( <th key={index} className="py-2 px-4 border border-gray-800"> {data.fields[column]} </th> ))} </tr> </thead> <tbody> {filteredData.length > 0 ? ( filteredData.map((item, itemIndex) => ( <tr key={itemIndex} className={itemIndex % 2 === 0 ? 'bg-gray-100' : 'bg-white'}> {columns.map((column, columnIndex) => ( <td key={columnIndex} className="py-2 px-4 border border-gray-800"> {item[column] instanceof Date ? item[column].toLocaleDateString() : item[column]} </td> ))} </tr> )) ) : ( <tr> <td colSpan={columns.length} className="py-2 px-4 border border-gray-800"> No matching data </td> </tr> )} </tbody> </table> </div> </div> ); }; export default MyTable;
Comments