more table list progress

- scroll shadow
- header shadow
- remove sticky row count - only allow sticky header
- support table expansion
This commit is contained in:
jeffvli
2025-10-03 17:50:23 -07:00
parent 8e392a9bff
commit f1f3223922
2 changed files with 214 additions and 117 deletions
@@ -1,3 +1,11 @@
.item-table-list-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
.item-table-container {
display: flex;
flex-direction: row;
@@ -8,6 +16,7 @@
}
.item-table-grid-container {
position: relative;
flex: 1 1 auto;
width: 100%;
height: 100%;
@@ -23,6 +32,7 @@
}
.item-table-sticky-rows-grid-container {
position: relative;
flex: 0 1 auto;
min-width: 0;
}
@@ -35,6 +45,7 @@
}
.item-table-sticky-intersection-grid-container {
position: relative;
flex: 0 1 auto;
min-width: 0;
}
@@ -53,3 +64,39 @@
.height-100 {
height: 100%;
}
.item-table-sticky-header-shadow {
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 1;
height: 8px;
pointer-events: none;
background: linear-gradient(
to bottom,
rgb(0 0 0 / 50%) 0%,
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
}
.item-table-left-scroll-shadow {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 8px;
pointer-events: none;
background: linear-gradient(
to right,
rgb(0 0 0 / 50%) 0%,
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
}
.list-expanded-container {
height: 500px;
}