Topic: MDBTable horizontal scroll?
Bridget Melvin
premium
asked 2 years ago
Expected behavior I would like an overflow like property for a table with too many columns such that no columns get squished/resize and it is possible to scroll horizontally. How do I accomplish this with MDBTable?
Bridget Melvin
premium
answered 2 years ago
I have made the first three columns sticky as desired but the first non-sticky item hides behind the sticky columns on overflow. Do you know how I can fix this?
const TableDiv = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1100px!important;
overflow-x: auto;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
`
const Table = styled(MDBTable)`
&& {
align-self: center;
width: auto;
max-width: 80vw!important;
overflow-x: auto;
& tr, td {
background-color: #fff;
}
background-color: #fff;
z-index: 2;
& :not(caption) > * > * {
border: 0;
}
& .float-right {
text-align: right!important;
}
& .item, .label {
text-align: left;
background-color: #fff;
}
& td, th {
position: relative;
text-align: center;
transition: width 2s ease, min-width 2s ease, max-width 2s ease;
z-index: 1;
}
& tr th:first-child, tr td:nth-child(-n + 2) {
position: sticky;
left: 0;
z-index: 3;
}
& tr th:nth-child(n + 2), tr td:nth-child(n + 2) {
margin-left: 162px;
}
& tr td:nth-child(2) {
position: sticky;
left: 17px;
z-index: 3;
border-left-width: 0;
}
}
`
Wojciech Staniszewski staff commented 2 years ago
Not really, I need more code (for example Table with data)
Wojciech Staniszewski
staff
answered 2 years ago
Just wrap MDBTable like here:
<div style={{ overflowX: 'auto' }}>
<MDBTable>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
</div>
About the sticky column, it's only possible in MDBDatatable.
Wojciech Staniszewski staff commented 2 years ago
Although, you can check how it is done and create your own mechanism :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.1.0
- Device: Surface Laptop Studio
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No
Bridget Melvin premium commented 2 years ago
further, is it possible to make the first column sticky?