@stellartrack/custom-data-table
Version:
A high-performance virtualized React data table with Excel export and filtering
2 lines (1 loc) • 2.4 kB
CSS
@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) );transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.data-table-card{border:1px solid #dee2e6}.border-none{border:0px}.table-container{max-height:65vh;border:1px solid #dee2e6;border-radius:6px;background-color:#fff;font-size:12px}.table-header{background-color:#f8f9fa;border-bottom:1px solid #dee2e6;font-weight:500;padding:12px 8px;color:#2c2c39}.table-row{transition:background-color .2s ease;padding:12px 8px}.table-cell{font-size:12px;color:#212529}.table-row:hover{background-color:#f1f3f5}.table-header{position:sticky;top:0;z-index:10}.table-row{box-sizing:border-box}.table-row>div{white-space:normal;word-break:break-word}.table-header>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}mark.bg-warning{background-color:#fff3cd;color:#856404;padding:0 2px;border-radius:2px}.table-container::-webkit-scrollbar{height:8px;width:8px}.table-container::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:8px}.table-container::-webkit-scrollbar-track{background-color:transparent}.action-btns{display:flex;gap:6px;align-items:center;justify-content:center}.action-btns button{background:none;border:none;cursor:pointer;padding:4px;font-size:16px}.action-btns button:hover{color:#0d6efd}.action-btns .text-danger:hover{color:#dc3545}.table-footer{background-color:#f8f9fa;border-top:1px solid #dee2e6;font-size:12px;color:#2c2c39;font-weight:500}