React Js Table Sticky Header - HTML CSS

<!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 App = () => {
        const data = [
          { id: 1, name: "John Doe", age: 25 },
          { id: 2, name: "Jane Smith", age: 30 },
          { id: 3, name: "Mark Johnson", age: 42 },
          { id: 4, name: "Emily Davis", age: 29 },
          { id: 5, name: "Michael Wilson", age: 35 },
          { id: 6, name: "Sarah Thompson", age: 27 },
          { id: 7, name: "David Anderson", age: 48 },
          { id: 8, name: "Jessica Martinez", age: 33 },
          { id: 9, name: "Christopher Taylor", age: 39 },
          { id: 10, name: "Stephanie Thomas", age: 31 },
          { id: 11, name: "Daniel Brown", age: 37 },
          { id: 12, name: "Amanda Garcia", age: 26 },
          { id: 13, name: "Robert Hernandez", age: 43 },
          { id: 14, name: "Melissa Lewis", age: 34 },
          { id: 15, name: "Matthew Clark", age: 41 },
          { id: 16, name: "Ashley Walker", age: 28 },
          { id: 17, name: "William Lewis", age: 36 },
          { id: 18, name: "Jennifer Rodriguez", age: 32 },
          { id: 19, name: "Andrew Wright", age: 38 },
          { id: 20, name: "Lauren Young", age: 23 },
          // ... add more entries here
        ];

return (
          <div className="container">
            <h1>React Js Sticky Table Example | fixed table header </h1>
            <div className="table-container">
              <table className="sticky-table">
                <thead>
                  <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Age</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((row) => (
                    <tr key={row.id}>
                      <td>{row.id}</td>
                      <td>{row.name}</td>
                      <td>{row.age}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );
      };

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        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);
        width: 600px;
        margin: 0 auto;
        padding: 20px;
      }

.table-container {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        height: 400px;
        overflow: auto;
      }

/* Style table */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1em;
      }

thead {
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 1;
      }

thead th {
        background-color: #f5f5f5;
        text-align: left;
        padding: 0.5em 1em;
        border-bottom: 1px solid #ddd;
      }

tbody tr:nth-child(even) {
        background-color: #f9f9f9;
      }

td {
        padding: 0.5em 1em;
        border-bottom: 1px solid #ddd;
      }

td:first-child {
        font-weight: bold;
      }
    </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 App = () => {
        const data = [
          { id: 1, name: "John Doe", age: 25 },
          { id: 2, name: "Jane Smith", age: 30 },
          { id: 3, name: "Mark Johnson", age: 42 },
          { id: 4, name: "Emily Davis", age: 29 },
          { id: 5, name: "Michael Wilson", age: 35 },
          { id: 6, name: "Sarah Thompson", age: 27 },
          { id: 7, name: "David Anderson", age: 48 },
          { id: 8, name: "Jessica Martinez", age: 33 },
          { id: 9, name: "Christopher Taylor", age: 39 },
          { id: 10, name: "Stephanie Thomas", age: 31 },
          { id: 11, name: "Daniel Brown", age: 37 },
          { id: 12, name: "Amanda Garcia", age: 26 },
          { id: 13, name: "Robert Hernandez", age: 43 },
          { id: 14, name: "Melissa Lewis", age: 34 },
          { id: 15, name: "Matthew Clark", age: 41 },
          { id: 16, name: "Ashley Walker", age: 28 },
          { id: 17, name: "William Lewis", age: 36 },
          { id: 18, name: "Jennifer Rodriguez", age: 32 },
          { id: 19, name: "Andrew Wright", age: 38 },
          { id: 20, name: "Lauren Young", age: 23 },
          // ... add more entries here
        ];
​
        return (
          <div className="container">
            <h1>React Js Sticky Table Example | fixed table header </h1>
            <div className="table-container">
              <table className="sticky-table">
                <thead>
                  <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Age</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((row) => (
                    <tr key={row.id}>
                      <td>{row.id}</td>
                      <td>{row.name}</td>
                      <td>{row.age}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );
      };
​
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        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);
        width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
​
      .table-container {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        height: 400px;
        overflow: auto;
      }
​
      /* Style table */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1em;
      }
​
      thead {
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 1;
      }
​
      thead th {
        background-color: #f5f5f5;
        text-align: left;
        padding: 0.5em 1em;
        border-bottom: 1px solid #ddd;
      }
​
      tbody tr:nth-child(even) {
        background-color: #f9f9f9;
      }
​
      td {
        padding: 0.5em 1em;
        border-bottom: 1px solid #ddd;
      }
​
      td:first-child {
        font-weight: bold;
      }
    </style>
  </body>
</html>
​