@are-visual/virtual-table
Version:
### VirtualTable
142 lines (140 loc) • 3.97 kB
CSS
:root {
--virtual-table-header-bg: #fafafa;
--virtual-table-border-color: #f0f0f0;
--virtual-table-row-hover-bg: #fafafa;
--virtual-table-font-size: 14px;
--virtual-table-split-shadow: rgba(5, 5, 5, 0.06);
--virtual-table-header-split: #c2c2c2;
--virtual-table-fixed-cell-background: #fff;
--virtual-table-cell-padding: 8px;
}
[class^=virtual-table] {
box-sizing: border-box;
}
.virtual-table {
width: 100%;
text-align: left;
font-size: var(--virtual-table-font-size);
line-height: 1.57142;
}
.virtual-table table {
border-collapse: separate;
}
.virtual-table-header {
overflow: auto hidden;
scrollbar-width: none;
}
.virtual-table-header::-webkit-scrollbar {
display: none;
}
.virtual-table-header > table {
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.virtual-table-header-sticky {
position: sticky;
top: 0;
left: 0;
z-index: 2;
background-color: var(--virtual-table-fixed-cell-background);
}
.virtual-table-header-cell {
position: relative;
padding: var(--virtual-table-cell-padding);
text-align: start;
background-color: var(--virtual-table-header-bg);
border-bottom: 1px solid var(--virtual-table-border-color);
font-weight: 600;
font-size: 14px;
}
.virtual-table-header-cell:not(:last-child, :first-child.virtual-table-selection-column, :first-child.virtual-table-expand-column, :first-child.virtual-table-expand-column + .virtual-table-selection-column, .no-split)::before {
position: absolute;
top: 50%;
inset-inline-end: 0;
width: 1px;
height: 1.2em;
background-color: var(--virtual-table-header-split);
transform: translateY(-50%);
transition: background-color 0.2s;
content: "";
}
.virtual-table-body-wrapper {
overflow: auto hidden;
scrollbar-width: none;
}
.virtual-table-body-wrapper::-webkit-scrollbar {
display: none;
}
.virtual-table-body {
table-layout: fixed;
width: 100%;
border-spacing: 0;
}
.virtual-table-row:not(.no-hover):hover > .virtual-table-cell {
background-color: var(--virtual-table-row-hover-bg);
}
.virtual-table-cell {
position: relative;
padding: var(--virtual-table-cell-padding);
transition: background 0.2s, border-color 0.2s;
border-bottom: 1px solid var(--virtual-table-border-color);
overflow-wrap: break-word;
}
.virtual-table-sticky-cell {
position: sticky ;
z-index: 1;
}
.virtual-table-sticky-cell:not(.virtual-table-header-cell) {
background-color: var(--virtual-table-fixed-cell-background);
}
.virtual-table-cell-fix-left-last::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: -1px;
width: 30px;
transform: translateX(100%);
transition: box-shadow 0.3s;
pointer-events: none;
}
.virtual-table-cell-fix-right-first::after {
content: "";
position: absolute;
top: 0;
bottom: -1px;
left: 0;
width: 30px;
transform: translateX(-100%);
transition: box-shadow 0.3s;
pointer-events: none;
}
.virtual-table-has-fix-left .virtual-table-sticky-cell:not(.virtual-table-header-cell) {
background-color: var(--virtual-table-fixed-cell-background);
}
.virtual-table-has-fix-left .virtual-table-cell-fix-left-last::after {
box-shadow: inset 10px 0 8px -8px var(--virtual-table-split-shadow);
}
.virtual-table-has-fix-left .virtual-table-cell-fix-left-last::before {
background-color: transparent ;
}
.virtual-table-has-fix-right .virtual-table-cell-fix-right-first::after {
box-shadow: inset -10px 0 8px -8px var(--virtual-table-split-shadow);
}
.virtual-table-has-fix-right .virtual-table-cell-fix-right-first::after {
background-color: transparent;
}
.virtual-table-align-right {
text-align: end;
}
.virtual-table-align-center {
text-align: center;
}
.virtual-table-bordered .virtual-table-cell,
.virtual-table-bordered .virtual-table-header-cell {
border-inline-end: 1px solid var(--virtual-table-border-color);
}
.virtual-table-bordered .virtual-table-header-cell::before {
background-color: transparent ;
}