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() { const [csvData, setCSVData] = useState([]); const handleFileUpload = (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const contents = e.target.result; const rows = contents.split('\n'); const data = []; for (let i = 0; i < rows.length; i++) { const cells = rows[i].split(','); data.push(cells); } setCSVData(data); }; reader.readAsText(file); }; return ( <div className='container'> <h3>React Js Display CSV Data in Table </h3> <input type="file" accept=".csv" onChange={handleFileUpload} className="file-input" /> <table className="csv-table"> <thead> <tr className="csv-table-header"> {csvData.length > 0 && csvData[0].map((cell, index) => ( <th key={index} className="csv-table-header-cell"> {cell} </th> ))} </tr> </thead> <tbody> {csvData.length > 1 && csvData.slice(1).map((row, rowIndex) => ( <tr key={rowIndex} className="csv-table-row"> {row.map((cell, cellIndex) => ( <td key={cellIndex} className="csv-table-cell"> {cell} </td> ))} </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; } /* Style for the file input */ .file-input { display: block; margin: 10px 0; } /* Style for the table */ .csv-table { width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border: 1px solid #ccc; } /* Style for table headers */ .csv-table-header { background-color: #333; color: #fff; } .csv-table-header-cell { padding: 10px; } /* Style for table rows */ .csv-table-row:nth-child(odd) { background-color: #f2f2f2; } .csv-table-row { transition: background-color 0.3s; } .csv-table-row:hover { background-color: #d4d4d4; } /* Style for table cells */ .csv-table-cell { padding: 10px; border: 1px solid #ccc; } </style> </body> </html>