screen_rotation
Copied to Clipboard
<!DOCTYPE html> <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() { // Sample data const initialData = [ { id: 2, product: "Apple Iphone" }, { id: 5, product: "Vivo Mobile" }, { id: 3, product: "Samsung Tablet" }, { id: 7, product: "Google Pixel" }, { id: 11, product: "Sony Xperia" }, { id: 17, product: "Huawei Laptop" }, { id: 10, product: "Dell XPS" }, { id: 34, product: "Lenovo ThinkPad" }, { id: 22, product: "HP Printer" }, { id: 43, product: "Canon Camera" }, { id: 89, product: "Bose Headphones" }, { id: 21, product: "LG Smart TV" }, { id: 13, product: "Microsoft Surface" } ]; const [data, setData] = useState(initialData); const [sortOrder, setSortOrder] = useState("asc"); // Function to handle sorting by ID const sortById = () => { const sortedData = [...data].sort((a, b) => { if (sortOrder === "asc") { return a.id - b.id; } else { return b.id - a.id; } }); setData(sortedData); setSortOrder(sortOrder === "asc" ? "desc" : "asc"); }; return ( <div className='container'> <h3 className='title'>Rect Js Table Sort by id</h3> <button className='sort-button' onClick={sortById}>Sort by ID</button> <table className='data-table'> <thead> <tr> <th className='table-header'>ID</th> <th className='table-header'>Product</th> </tr> </thead> <tbody> {data.map((item) => ( <tr key={item.id} className='table-row'> <td className='table-cell'>{item.id}</td> <td className='table-cell'>{item.product}</td> </tr> ))} </tbody> </table> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> * { box-sizing: border-box; } /* Styles for the container */ .container { font-family: Roboto, Helvetica, Arial, sans-serif; border-radius: 4px; padding: 16px; font-weight: 400; color: rgba(0, 0, 0, 0.87); background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px; max-width: 600px; margin: 0 auto; } /* Styles for the title */ .title { color: #333; font-size: 24px; margin-bottom: 20px; } /* Styles for the sort button */ .sort-button { background-color: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } .sort-button:hover { background-color: #0056b3; } /* Styles for the data table */ .data-table { width: 100%; border-collapse: collapse; margin-top: 20px; } /* Styles for table headers */ .table-header { background-color: #333; color: #fff; padding: 10px; } /* Styles for table rows */ .table-row:nth-child(even) { background-color: #f2f2f2; } .table-row:hover { background-color: #e0e0e0; } /* Styles for table cells */ .table-cell { padding: 10px; border: 1px solid #ddd; } </style> </body> </html>