I have created a custom flex table with filtering and sorting capabilities. The filter and sort icons are located in the right corner of the table header. Additionally, users can choose to align the header text left or center.
The Issue:
When positioning elements in the center, the alignment gets disrupted due to the space occupied by the icons within the table header.
body {
width: 100%;
}
.table-header, .table-body {
display: flex;
width: fit-content;
border: 1px solid black;
padding: 10px;
}
.header, .data {
display: flex;
min-width: 150px;
width: 150px;
border-right: 1px solid black;
display: flex;
justify-content: center;
position: relative;
}
.header .text {
width: 100%;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.icons {
float: right;
right: 0;
display: flex;
}<div class="table">
<div class="table-header">
<div class="header">
<div class="text">Hlkjklkjlkjlkj lkjlkjlkjlkjlkjljlkjlkj</div>
<div class="icons">
<span> ☠</span>
<span> ☠</span>
</div>
</div>
<div class="header">9747
<div class="text">Header 2</div>
<div class="icons">
<span>b</span>
<span>b</span>
</div>
</div>
<div class="header">
<div class="text">Header 3</div>
<div class="icons">
<span>a</span>
<span>b</span>
</div>
</div>
<div class="header">
<div class="text">Header 4</div>
<div class="icons">
<span>a</span>
<span>b</span>
</div>
</div>
</div>
<div class="table-body">
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
</div>
<div class="table-body">
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
</div><div class="table-body">
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
</div>
</div>Code: Here
https://i.sstatic.net/lOYAM.png
Attempted Solutions:
To address the space occupation issue caused by icons, I positioned them absolutely relative to the header which solved the alignment problem. However, for headers where ellipsis should be displayed, the ellipsis may get hidden behind the icons. You can visualize this here: https://i.sstatic.net/nS2PT.png
Code: Here
If you have any suggestions on how to maintain centered alignment while reducing icon space occupancy through CSS, please advise. Thank you! :)