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