React Sort by Date: How to Sort Tables by Date in React

<!DOCTYPE html>
<html>

<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>&#9650;</span> // Up arrow symbol
                        ) : (
                            <span>&#9660;</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>