hightable/dist/HighTable.css

A dynamic windowed scrolling table component for react

._hightable_11jok_1{display:flex;flex:1;min-height:0;position:relative;flex-direction:column}._hightable_11jok_1 *{box-sizing:border-box;margin:0;padding:0}._hightable_11jok_1 ._table-scroll_11jok_16{flex:1;overflow:auto;scroll-padding-inline-start:var(--row-number-width);scroll-padding-block-start:var(--column-header-height)}._hightable_11jok_1 ._table-scroll_11jok_16>div{position:relative}._hightable_11jok_1 table{position:absolute;max-width:100%;overflow-x:auto}._hightable_11jok_1 th,._hightable_11jok_1 td{overflow:hidden}._hightable_11jok_1 thead th{background-color:transparent;position:sticky;-webkit-user-select:none;user-select:none;top:0;z-index:var(--header-z-index, auto)}._hightable_11jok_1 th[aria-sort]{cursor:pointer}._hightable_11jok_1 th[aria-sort]:after{content:"⇅";position:absolute;right:0;top:0}._hightable_11jok_1 th[aria-sort][aria-sort=ascending]:after{content:"⭡"}._hightable_11jok_1 th[aria-sort][aria-sort=descending]:after{content:"⭣"}._hightable_11jok_1 div[role=menu]{position:fixed;z-index:1001}._hightable_11jok_1 div[role=presentation]:has(+div[role=menu]){position:fixed;inset:0;background-color:transparent;z-index:1000}._hightable_11jok_1 thead th>button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px}._hightable_11jok_1 thead [role=spinbutton]{position:absolute;top:1px;right:0;bottom:0;width:8px;cursor:col-resize;background-color:#888;z-index:var(--header-spinbutton-z-index, auto)}._hightable_11jok_1 [role=rowheader]{position:sticky;left:0;-webkit-user-select:none;user-select:none;min-width:var(--row-label-width);max-width:var(--row-label-width);z-index:var(--header-z-index, auto)}._hightable_11jok_1 thead td:first-child{position:sticky;min-width:var(--row-label-width);max-width:var(--row-label-width);top:0;left:0;z-index:var(--header-corner-z-index, auto)}._hightable_11jok_1 thead td:first-child[aria-disabled=false]{background:transparent}._hightable_11jok_1 thead td:first-child,._hightable_11jok_1 [role=rowheader]{--row-number-display: inline;--checkbox-display: none}:is(._hightable_11jok_1 thead td:first-child,._hightable_11jok_1 [role=rowheader]) span{display:var(--row-number-display)}:is(._hightable_11jok_1 thead td:first-child,._hightable_11jok_1 [role=rowheader]) input{display:var(--checkbox-display);pointer-events:none;margin:auto}:is(._hightable_11jok_1 thead td:first-child,._hightable_11jok_1 [role=rowheader])[aria-checked=true]{--row-number-display: none;--checkbox-display: block}:is(._hightable_11jok_1 thead td:first-child,._hightable_11jok_1 [role=rowheader])[aria-disabled=false]{cursor:pointer}:is(._hightable_11jok_1 thead td:first-child,._hightable_11jok_1 [role=rowheader])[aria-disabled=false]:is(:focus,:hover){--row-number-display: none;--checkbox-display: block}._hightable_11jok_1 ._mock-row-label_11jok_171{content:"";position:absolute;top:var(--mock-row-label-top, 0);left:0;bottom:0;background:var(--mock-row-label-background, transparent);z-index:var(--header-background-z-index, auto);min-width:var(--row-label-width);max-width:var(--row-label-width)}._styled_11jok_185{--header-z-index: 10;--header-background-z-index: calc(var(--header-z-index) - 1);--header-spinbutton-z-index: calc(var(--header-z-index) + 1);--header-corner-z-index: calc(var(--header-z-index) + 3);--header-progress-z-index: calc(var(--header-z-index) + 2);--cell-placeholder-z-index: 1;--table-scroll-outline-z-index: calc(var(--header-z-index) + 4);--top-border-height: 2px;--focus-border-width: 2px;--row-label-width: 36px;--cell-horizontal-padding: 10px;--resizer-border-width: 4px;--hy-color-1: #000;--hy-color-2: #444;--hy-color-3: #666;--hy-color-5: #bbb;--hy-color-7: #ccc;--hy-color-8: #ddd;--hy-color-9: #f0f0f0;--hy-color-10: #fff;--hy-accent-1: #706fb1;--hy-accent-2: #9d9cd5;--hy-accent-3: #ccd;--hy-accent-4: #dbdbe5;--hy-accent-5: #efeef6;--hy-highlight-1: #f1edbb;--hy-highlight-2: #fbf7bf;--header-color: var(--hy-color-2);--menu-color: var(--hy-color-2);--menu-item-color: var(--hy-color-2);--menu-button-color: var(--hy-color-2);--primary-sort-icon-color: inherit;--secondary-sort-icon-color: var(--hy-color-8);--row-number-color: var(--hy-color-3);--text-color: var(--hy-color-1);--focus-background-color: var(--hy-accent-5);--focusable-background-color: var(--hy-color-9);--background-color: var(--hy-color-10);--header-background-color: var(--hy-color-9);--menu-background-color: var(--hy-color-9);--menu-button-background-color: var(--hy-color-9);--menu-button-hovered-background-color: var(--hy-accent-4);--menu-button-focused-background-color: var(--hy-accent-4);--menu-item-background-color: var(--hy-color-10);--menu-item-hovered-background-color: var(--hy-color-9);--row-number-background-color: var(--hy-color-9);--row-number-hovered-background-color: var(--hy-accent-3);--row-number-selected-background-color: var(--hy-highlight-1);--row-hovered-background-color: var(--hy-accent-4);--row-selected-background-color: var(--hy-highlight-2);--corner-cell-background-color: var(--hy-color-9);--resize-indicator-background-color: var(--hy-accent-2);--cell-busy-background: linear-gradient( 60deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .08) 50%, rgba(0, 0, 0, .05) 75% );--top-border-color: var(--hy-accent-1);--focus-border-color: var(--hy-accent-1);--focusable-border-color: var(--hy-color-3);--cell-border-color: var(--hy-color-8);--cell-hovered-right-border-color: var(--hy-color-5);--header-bottom-border-color: var(--hy-color-7);--menu-border-color: var(--hy-color-7);--menu-inner-border-color: var(--hy-color-7);--resizer-hovered-right-border-color: var(--hy-accent-2);--row-number-hovered-right-border-color: var(--hy-color-7);--corner-cell-right-border-color: var(--hy-color-7);--mock-row-label-background: var(--row-number-background-color);--mock-row-label-top: var(--top-border-height, 0);isolation:isolate;color:var(--text-color);background-color:var(--background-color)}._styled_11jok_185 ._top-border_11jok_270{border-top:var(--top-border-height) solid var(--top-border-color);width:100%;height:0}._styled_11jok_185 ._table-scroll_11jok_16:focus{outline:none}._styled_11jok_185 ._table-scroll_11jok_16:focus:after{content:"";outline:var(--focus-border-width) solid var(--focus-border-color);position:absolute;top:var(--focus-border-width);left:var(--focus-border-width);height:calc(100% - 2 * var(--focus-border-width));width:calc(100% - 2 * var(--focus-border-width));z-index:var(--table-scroll-outline-z-index);pointer-events:none}._styled_11jok_185 table{border-collapse:separate;border-spacing:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}._styled_11jok_185 table:focus-visible{outline:none}._styled_11jok_185 thead th{background-color:var(--header-background-color);border-bottom:2px solid var(--header-bottom-border-color);color:var(--header-color);height:20px;padding-top:4px;padding-bottom:4px}._styled_11jok_185 thead th[aria-sort]{padding-right:calc(var(--cell-horizontal-padding) + 2.5rem)}._styled_11jok_185 thead th[data-fixed-width=true]:before{position:absolute;right:calc(var(--resizer-border-width) + 2px);top:4px;width:4px;height:4px;border-radius:50%;background-color:var(--resize-indicator-background-color);content:""}._styled_11jok_185 th[aria-sort]:after{right:calc(var(--cell-horizontal-padding) + 1rem);top:4px;padding-left:2px;background:none;color:var(--secondary-sort-icon-color);display:block;width:2rem;text-align:center}._styled_11jok_185 th[data-order-by-index="0"]:after{color:var(--primary-sort-icon-color)}._styled_11jok_185 th,._styled_11jok_185 td{border-bottom:1px solid var(--cell-border-color);border-right:1px solid var(--cell-border-color);height:32px;line-height:1.5;max-width:40rem;padding:4px var(--cell-horizontal-padding);text-align:left;text-overflow:ellipsis;white-space:nowrap}:is(._styled_11jok_185 th,._styled_11jok_185 td)[tabindex="0"]{outline-style:solid;outline-color:var(--focusable-border-color);outline-width:var(--focus-border-width);outline-offset:calc(0px - var(--focus-border-width));background-color:var(--focusable-background-color)}:is(._styled_11jok_185 th,._styled_11jok_185 td):focus{outline-style:solid;outline-color:var(--focus-border-color);outline-width:var(--focus-border-width);outline-offset:calc(0px - var(--focus-border-width));background-color:var(--focus-background-color)}._styled_11jok_185 div[role=menu]{margin-top:4px;background-color:var(--menu-background-color);border:1px solid var(--menu-border-color);border-radius:4px;box-shadow:0 2px 8px #00000026;min-width:150px;font-size:.875rem;color:var(--menu-color);padding:4px 0}._styled_11jok_185 div[role=menu]:focus,._styled_11jok_185 div[role=menu]>[role=menuitem]:focus{outline-style:solid;outline-color:var(--focus-border-color);outline-width:var(--focus-border-width);outline-offset:-2px}._styled_11jok_185 div[role=menu]>[role=presentation]{padding:4px 12px 8px;font-weight:700;border-style:solid;border-color:var(--menu-inner-border-color);border-width:0 0 1px 0}._styled_11jok_185 div[role=menu]>[role=separator]{display:block;width:100%;text-align:left;padding:4px 12px}._styled_11jok_185 div[role=menu]>[role=menuitem]{display:block;width:100%;text-align:left;padding:8px 12px;color:var(--menu-item-color);border-style:solid;border-color:var(--menu-inner-border-color);border-width:1px 0;border-radius:0;background-color:var(--menu-item-background-color);cursor:pointer}._styled_11jok_185 div[role=menu]>[role=menuitem]:hover{background-color:var(--menu-item-hovered-background-color)}._styled_11jok_185 thead th>button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s ease;border-radius:50%;border:none;background-color:var(--menu-button-background-color)}._styled_11jok_185 thead th>button:focus{outline-style:solid;outline-color:var(--focus-border-color);outline-width:var(--focus-border-width);outline-offset:-2px;background-color:var(--menu-button-focused-background-color)}._styled_11jok_185 thead th>button>span{font-size:.875rem;line-height:1;color:var(--menu-button-color);font-weight:700}._styled_11jok_185 thead th:hover>button,._styled_11jok_185 thead th>button:focus,._styled_11jok_185 thead th>button:focus-visible,._styled_11jok_185 thead th>button[aria-expanded=true]{background-color:var(--menu-button-hovered-background-color);opacity:1}._styled_11jok_185 thead [role=spinbutton]{background-color:transparent;transition:background-color .2s ease}._styled_11jok_185 thead [role=spinbutton]:focus,._styled_11jok_185 thead [role=spinbutton]:hover{border-right-color:var(--resizer-hovered-right-border-color);border-width:0 var(--resizer-border-width) 0 0;border-style:solid;margin:1px 1px 0}._styled_11jok_185 thead [role=spinbutton]:focus{outline-style:none}._styled_11jok_185 tbody [role=rowheader]{background-color:var(--row-number-background-color);border-right:1px solid var(--row-number-right-border-color);color:var(--row-number-color);font-size:.68rem;padding:0 2px;text-align:center}._styled_11jok_185 tr[aria-selected=true]{background-color:var(--row-selected-background-color)}._styled_11jok_185 tr[aria-selected=true] [role=rowheader]{background-color:var(--row-number-selected-background-color)}._styled_11jok_185 thead td:first-child{background-color:var(--corner-cell-background-color);border-right:1px solid var(--corner-cell-right-border-color);box-shadow:inset 0 0 4px #0003}._styled_11jok_185 thead td:first-child[aria-checked=true]{background-image:none;background-color:var(--corner-cell-background-color)}:is(._styled_11jok_185 thead td:first-child,._styled_11jok_185 tbody [role=rowheader]) input[type=checkbox][aria-busy=true]{pointer-events:none;opacity:.5}._styled_11jok_185 tbody td[aria-busy=true]{position:relative}._styled_11jok_185 tbody td[aria-busy=true]:after{content:"";position:absolute;z-index:var(--cell-placeholder-z-index);inset:8px;border-radius:4px;background:var(--cell-busy-background);background-size:120px 100%;animation:_textshimmer_11jok_1 3s infinite linear}._styled_11jok_185 tbody tr:nth-child(2n) td[aria-busy=true]:after{animation-delay:-1s}._styled_11jok_185 tbody tr:nth-child(odd) td[aria-busy=true]:after{animation-delay:-3s}._styled_11jok_185 tbody tr:nth-child(3n) td[aria-busy=true]:after{animation-delay:-2s}._styled_11jok_185 tbody tr:nth-child(5n) td[aria-busy=true]:after{animation-delay:-4s}._styled_11jok_185 tbody tr:nth-child(7n) td[aria-busy=true]:after{animation-delay:-1.5s}._styled_11jok_185 tbody th[aria-busy=true]:after{content:"427";filter:blur(4px)}@media (hover: hover){._styled_11jok_185 tbody tr:hover{background-color:var(--row-hovered-background-color)}._styled_11jok_185 tbody tr:hover td{border-right-color:var(--cell-hovered-right-border-color)}._styled_11jok_185 tbody tr:hover th[role=rowheader]{background-color:var(--row-number-hovered-background-color);border-right-color:var(--row-number-hovered-right-border-color)}}@keyframes _textshimmer_11jok_1{0%{background-position:-120px 0}to{background-position:120px 0}}