I need to add component which will tak all available space assigned to him.
It should be splitted into 2 parts
- Toolbar panel – always visible on top
- Table – with headers always visible on the screen, sticked to top.
So when there are a lot of rows in table I should see a scroll, which will scroll only tbody, ie panel and table headers should stay on the screen.
Here is what I have (and it does not work)
https://jsfiddle.net/vqsfhm4e/1/
<code>.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.top-panel {
padding: 10px;
background-color: #f0f0f0;
}
.table-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
</code>
<code>.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.top-panel {
padding: 10px;
background-color: #f0f0f0;
}
.table-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
</code>
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.top-panel {
padding: 10px;
background-color: #f0f0f0;
}
.table-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
<code> <div className="container">
<div className="top-panel">
<h2>Top Panel</h2>
<p>This content is always visible, as well as headers for table.</p>
</div>
<div className="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
{tableData.map((row) => (
<tr key={row.id}>
<td>{row.col1}</td>
<td>{row.col2}</td>
<td>{row.col3}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</code>
<code> <div className="container">
<div className="top-panel">
<h2>Top Panel</h2>
<p>This content is always visible, as well as headers for table.</p>
</div>
<div className="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
{tableData.map((row) => (
<tr key={row.id}>
<td>{row.col1}</td>
<td>{row.col2}</td>
<td>{row.col3}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</code>
<div className="container">
<div className="top-panel">
<h2>Top Panel</h2>
<p>This content is always visible, as well as headers for table.</p>
</div>
<div className="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
{tableData.map((row) => (
<tr key={row.id}>
<td>{row.col1}</td>
<td>{row.col2}</td>
<td>{row.col3}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>