<html><head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script></head><body> <div id="app"></div> <script type="text/babel"> const { useState } = React function App() { const [data, setData] = useState([ { date: '2023-05-10', name: 'John Doe', age: 25 }, { date: '2023-05-15', name: 'Jane Smith', age: 30 }, { date: '2023-05-05', name: 'Bob Johnson', age: 40 }, { date: '2023-05-12', name: 'Alice Williams', age: 35 }, { date: '2023-05-08', name: 'Michael Brown', age: 45 }, { date: '2023-05-20', name: 'Emily Davis', age: 28 }, { date: '2023-05-03', name: 'Daniel Wilson', age: 32 }, { date: '2023-05-18', name: 'Olivia Thompson', age: 27 }, { date: '2023-05-01', name: 'William Martinez', age: 38 }, { date: '2023-05-25', name: 'Sophia Anderson', age: 33 }, ]); const [sortDirection, setSortDirection] = useState('asc'); // Function to handle the sorting const handleSort = () => { const sortedData = [...data]; sortedData.sort((a, b) => { const dateA = new Date(a.date); const dateB = new Date(b.date); return sortDirection === 'asc' ? dateA - dateB : dateB - dateA; }); setData(sortedData); setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc'); }; return ( <div className='container'> <h2>React Js Table Sort by date</h2> <button onClick={handleSort}> Sort by Date {sortDirection === 'asc' ? ( <span>▲</span> // Up arrow symbol ) : ( <span>▼</span> // Down arrow symbol )} </button> <table> <thead> <tr> <th>Date</th> <th>Name</th> <th>Age</th> {/* Include other table headers here */} </tr> </thead> <tbody> {data.map((item, index) => ( <tr key={index}> <td>{item.date}</td> <td>{item.name}</td> <td>{item.age}</td> {/* Include other table cells here */} </tr> ))} </tbody> </table> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> * { box-sizing: border-box; } .container { margin: 0 auto; width: 600px; text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); padding: 20px; } button { padding: 10px 15px; font-size: 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 20px; } button:hover { background-color: #45a049; } table { width: 100%; border-collapse: collapse; } thead th { background-color: #f2f2f2; color: #333; font-weight: bold; padding: 10px; text-align: left; } tbody td { padding: 10px; border-bottom: 1px solid #ddd; } tbody tr:hover { background-color: #f9f9f9; } span { margin-left: 5px; } /* Additional styling options */ /* Alternate row colors */ tbody tr:nth-child(even) { background-color: #f2f2f2; } /* Hover effect on table cells */ tbody td:hover { background-color: #e6f2ff; cursor: pointer; } /* Table responsive on small screens */ @media screen and (max-width: 600px) { table { width: 100%; } th, td { display: block; } th { text-align: left; } td { margin-bottom: 10px; } tbody td:before { content: attr(data-label); font-weight: bold; display: inline-block; margin-right: 5px; } } </style></body></html>