React Js Display CSV Data in Table

<!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>

.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>

 
<!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>