@svar-ui/react-grid/dist/index.css

Fast, feature-rich React DataGrid with virtual scrolling, cell editing, sorting, filtering, and accessibility support.

.wx-measure-cell-body,.wx-print-cell,.wx-cell.wx-TSCaXsGV{background:inherit;box-sizing:border-box;padding:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-print-tree-cell,.wx-tree-cell.wx-TSCaXsGV{display:flex}.wx-measure-cell-body,.wx-cell.wx-TSCaXsGV:not(:last-child){border-right:var(--wx-table-cell-border)}.wx-print-draggable,.wx-draggable.wx-TSCaXsGV,.wx-draggable-stub.wx-TSCaXsGV{display:inline-block;vertical-align:middle;margin-right:3px;font-size:20px;height:20px;width:20px}.wx-draggable.wx-TSCaXsGV{cursor:move}.wx-shadow.wx-cell.wx-TSCaXsGV{border-right:var(--wx-table-fixed-column-border);clip-path:inset(0px -15px 0px 0px);z-index:1}.wx-fixed-right.wx-shadow.wx-cell.wx-TSCaXsGV{border-right:var(--wx-table-cell-border);border-left:var(--wx-table-fixed-column-border)}.wx-fixed-right.wx-shadow.wx-cell.wx-TSCaXsGV:last-child{border-right:none}.wx-print-grid-tree-toggle,.wx-table-tree-toggle.wx-TSCaXsGV{font-size:20px;cursor:pointer;margin:0 4px 0 0;display:inline-block}.wx-cell.wx-TSCaXsGV[tabindex="0"]:focus{outline:1px solid var(--wx-color-primary);outline-offset:-1px}.wx-print-filter,.wx-cell.wx-filter>.wx-text>input{height:28px;padding:4px 8px}.wx-print-filter{border:var(--wx-table-border);background:var(--wx-background);border-radius:var(--wx-input-border-radius);font-weight:400;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wx-cell.wx-filter.wx-D3voQpJs div.wx-richselect{min-height:28px;height:28px;padding:4px 8px}.wx-cell.wx-filter.wx-D3voQpJs div.wx-richselect .wx-label{padding:0}.wx-measure-cell-header,.wx-print-cell-header,.wx-cell.wx-RsQD74qC{padding:8px;position:relative;display:flex;align-items:center;font-weight:var(--wx-header-font-weight);background:var(--wx-table-header-background);line-height:20px}.wx-cell.wx-RsQD74qC:focus{outline:1px solid var(--wx-color-primary);outline-offset:-1px}.wx-print-cell-header{display:table-cell;position:static}.wx-cell.wx-RsQD74qC.wx-vertical{align-items:flex-end}.wx-measure-cell-header,.wx-cell.wx-RsQD74qC:not(:last-child){border-right:var(--wx-table-header-cell-border)}.wx-print-cell-filter.wx-RsQD74qC,.wx-cell.wx-filter.wx-RsQD74qC{padding:4px;z-index:8}.wx-print-cell-header .wx-text,.wx-text.wx-RsQD74qC{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wx-print-cell-header.wx-vertical .wx-text,.wx-vertical.wx-RsQD74qC .wx-text.wx-RsQD74qC{height:100%;transform:rotate(-180deg);writing-mode:vertical-lr;text-overflow:ellipsis;overflow:hidden}.wx-print-cell-header.wx-vertical .wx-text{display:block}.wx-cell.wx-shadow.wx-RsQD74qC{clip-path:inset(0px -15px 0px 0px);border-right:var(--wx-table-fixed-column-border)}.wx-cell.wx-fixed-right.wx-shadow.wx-RsQD74qC{border-right:var(--wx-table-cell-border);border-left:var(--wx-table-fixed-column-border)}.wx-cell.wx-fixed-right.wx-cell.wx-RsQD74qC:last-child{border-right:none}.wx-shadow.wx-RsQD74qC,.wx-fixed.wx-RsQD74qC{z-index:7}.wx-shadow.wx-rowspan.wx-RsQD74qC,.wx-shadow.wx-colspan.wx-RsQD74qC,.wx-fixed.wx-rowspan.wx-RsQD74qC,.wx-fixed.wx-colspan.wx-RsQD74qC{z-index:8}.wx-grip.wx-RsQD74qC{box-sizing:border-box;position:absolute;top:0;bottom:0;right:-4px;width:9px;background-color:transparent;opacity:0;cursor:ew-resize;z-index:8}.wx-grip.wx-RsQD74qC div{margin-left:5px;width:1px;height:100%;background-color:var(--wx-color-primary)}.wx-cell.wx-RsQD74qC:last-child .wx-grip.wx-RsQD74qC{width:5px;right:0}.wx-cell.wx-RsQD74qC:last-child .wx-grip.wx-RsQD74qC div{margin-left:4px}.wx-grip.wx-RsQD74qC:before,.wx-cell.wx-RsQD74qC:not(:last-child) .wx-grip.wx-RsQD74qC:after{content:"";position:absolute;top:0;bottom:0;width:0;height:0;margin:auto}.wx-grip.wx-RsQD74qC:before{border:3px dashed transparent;border-right:3px solid var(--wx-color-primary);right:7px}.wx-cell.wx-RsQD74qC:last-child .wx-grip.wx-RsQD74qC:before{right:3px}.wx-cell.wx-RsQD74qC:not(:last-child) .wx-grip.wx-RsQD74qC:after{border:3px dashed transparent;border-left:3px solid var(--wx-color-primary);left:9px}.wx-cell.wx-RsQD74qC:has(.wx-grip.wx-RsQD74qC:hover){z-index:9}.wx-grip.wx-RsQD74qC:hover{opacity:1}.wx-sort.wx-RsQD74qC{height:100%;margin-left:auto;display:flex;align-items:center}.wx-order.wx-RsQD74qC{width:16px;height:16px;line-height:16px;border-radius:50%;font-size:12px;text-align:center;color:#fff;background-color:#3498ff}.wx-collapse.wx-RsQD74qC:focus{outline:none}.wx-collapse.wx-RsQD74qC:focus i,.wx-collapse.wx-RsQD74qC:hover i{color:var(--wx-color-primary)}.wx-rowspan.wx-RsQD74qC,.wx-colspan.wx-RsQD74qC{z-index:6}.wx-collapse.wx-RsQD74qC,.wx-collapsed.wx-RsQD74qC{cursor:pointer;z-index:1}.wx-collapsed.wx-RsQD74qC{position:relative}.wx-collapse.wx-RsQD74qC i{margin-right:4px}.wx-h-row:not(:last-child) .wx-cell.wx-RsQD74qC:not(.wx-rowspan.wx-RsQD74qC){border-bottom:var(--wx-table-header-cell-border)}.wx-measure-cell-footer,.wx-print-cell-footer,.wx-cell.wx-6Sdi3Dfd{padding:8px;display:flex;align-items:center;font-weight:var(--wx-header-font-weight);background:var(--wx-table-header-background);overflow:hidden}.wx-print-cell-footer{display:table-cell}.wx-cell.wx-6Sdi3Dfd:not(:last-child){border-right:var(--wx-table-footer-cell-border)}.wx-cell.wx-vertical.wx-6Sdi3Dfd{align-items:flex-end}.wx-print-cell-footer .wx-text,.wx-text.wx-6Sdi3Dfd{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wx-print-cell-footer.wx-vertical .wx-text,.wx-vertical.wx-6Sdi3Dfd .wx-text{transform:rotate(-90deg) translateY(100%);transform-origin:left bottom;text-overflow:clip;overflow:unset}.wx-print-cell-footer.wx-vertical .wx-text{display:block}.wx-cell.wx-shadow.wx-6Sdi3Dfd{clip-path:inset(0px -15px 0px 0px);border-right:var(--wx-table-fixed-column-border)}.wx-cell.wx-fixed-right.wx-shadow.wx-6Sdi3Dfd{border-right:var(--wx-table-cell-border);border-left:var(--wx-table-fixed-column-border)}.wx-cell.wx-fixed-right.wx-cell:last-child.wx-6Sdi3Dfd{border-right:none}.wx-shadow.wx-6Sdi3Dfd,.wx-fixed.wx-6Sdi3Dfd{z-index:3}.wx-rowspan.wx-6Sdi3Dfd{z-index:2}.wx-rowspan.wx-shadow.wx-6Sdi3Dfd,.wx-rowspan.wx-fixed.wx-6Sdi3Dfd,.wx-colspan.wx-shadow.wx-6Sdi3Dfd,.wx-colspan.wx-fixed.wx-6Sdi3Dfd{z-index:4}.wx-f-row:not(:last-child) .wx-cell:not(.wx-rowspan).wx-6Sdi3Dfd{border-bottom:var(--wx-table-header-cell-border)}.wx-header.wx-sAsPVaUK,.wx-footer.wx-sAsPVaUK{font-weight:500}.wx-header.wx-sAsPVaUK{top:0;border-bottom:var(--wx-table-header-border)}.wx-footer.wx-sAsPVaUK{position:sticky;z-index:2;bottom:0;border-top:var(--wx-table-header-border)}.wx-overlay.wx-1ty666CQ{width:100%;height:100%;position:absolute;z-index:5;background-color:var(--wx-background);padding:14px 8px;text-align:center}.wx-text.wx-e7Ao5ejY{width:100%;height:100%;border:none;outline:none;padding-left:8px;font:inherit;background:var(--wx-background);color:var(--wx-color-font);border:1px solid var(--wx-color-primary)}.wx-input.wx-0UYfSd1x{height:100%;width:100%;border:none;outline:none;padding-left:8px;font:inherit;background:var(--wx-background);color:var(--wx-color-font);border:1px solid var(--wx-color-primary)}.wx-value.wx-lNWNYUb6{width:100%;height:100%;padding:8px;overflow:hidden;outline:none;border:1px solid var(--wx-color-primary)}.wx-text.wx-lNWNYUb6{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.wx-value.wx-ywGRk611{width:100%;height:100%;padding:8px;overflow:hidden;outline:none;border:1px solid var(--wx-color-primary)}.wx-text.wx-ywGRk611{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wx-value.wx-ywGRk611:focus{outline:none;display:block}.wx-8l724t2g.wx-cell{box-sizing:border-box;padding:0;background-color:var(--wx-background);color:var(--wx-color-font);position:relative;z-index:3}.wx-8l724t2g.wx-cell .wx-dropdown{border:var(--wx-table-editor-dropdown-border);box-shadow:var(--wx-table-editor-dropdown-shadow)}.wx-print-grid .wx-vertical.wx-Gy81xq2u{vertical-align:bottom}.wx-flex-columns.wx-8NTMLH0z{width:100%}.wx-print-container{display:none}.wx-print-grid{border-collapse:collapse;table-layout:fixed;border:var(--wx-table-border);border-spacing:0;text-indent:initial;print-color-adjust:exact;-webkit-print-color-adjust:exact}.wx-print-grid tr,.wx-print-grid th,.wx-print-grid td{border:var(--wx-table-border)}@media print{.wx-print>*{display:none}.wx-print-container>.wx-print-grid-wrapper{page-break-after:always;break-after:page}.wx-print-container{display:block}}.wx-grid.wx-4VuBwK2D{height:100%}.wx-table-box.wx-4VuBwK2D{outline:none;position:relative;display:flex;flex-direction:column;height:100%;border:var(--wx-table-cell-border);overflow:hidden;box-sizing:content-box}.wx-header-wrapper.wx-4VuBwK2D{position:sticky;z-index:3;top:0}.wx-body.wx-4VuBwK2D,.wx-data.wx-4VuBwK2D{position:relative}.wx-scroll.wx-4VuBwK2D{position:relative;flex:1;scroll-padding-top:var(--header-height);scroll-padding-bottom:var(--footer-height)}.wx-row.wx-4VuBwK2D{display:flex;box-sizing:border-box;background-color:var(--wx-background)}.wx-row.wx-4VuBwK2D:not(:last-child){border-bottom:var(--wx-table-cell-border)}.wx-row.wx-autoheight.wx-4VuBwK2D .wx-cell{overflow:visible;text-overflow:initial;white-space:normal;word-break:break-all}.wx-row.wx-autoheight.wx-4VuBwK2D{height:max-content}.wx-selected.wx-4VuBwK2D{color:var(--wx-table-select-color);background-color:var(--wx-table-select-background)}.wx-selected.wx-4VuBwK2D .wx-cell:first-child{box-shadow:var(--wx-table-select-border)}.wx-inactive.wx-4VuBwK2D{color:var(--wx-table-drag-over-background);background-color:var(--wx-table-drag-over-background);--wx-table-select-border: none}.wx-drag-zone{z-index:10;position:absolute;pointer-events:none;overflow:hidden;box-shadow:var(--wx-table-drag-zone-shadow)}.wx-cell.wx-collapsed.wx-4VuBwK2D{width:36px;border-right:var(--wx-table-cell-border)}.wx-icon.wx-v13lZxja{display:inline-block;vertical-align:middle;margin-right:4px}.wx-hidden.wx-v13lZxja{color:var(--wx-color-font-disabled)}.wx-area.wx-RYccULtD{position:relative;height:100%;width:100%}.tooltip{padding:2px 10px;border-radius:2px;box-shadow:var(--wx-box-shadow);pointer-events:none;position:absolute;z-index:10;font-size:var(--wx-font-size-sm);font-family:var(--wx-font-family);color:var(--wx-color-primary-font);background-color:#1a1e21}.wx-material-theme{--wx-table-select-background: #f0f0f0;--wx-table-select-color: var(--wx-color-font);--wx-table-border: 1px solid #dfdfdf;--wx-table-select-border: none;--wx-table-header-border: var(--wx-table-border);--wx-table-header-cell-border: var(--wx-table-border);--wx-table-footer-cell-border: var(--wx-table-border);--wx-table-cell-border: var(--wx-table-border);--wx-header-font-weight: 500;--wx-table-header-background: #fafafb;--wx-table-fixed-column-border: 3px solid #dfdfdf;--wx-table-editor-dropdown-border: none;--wx-table-editor-dropdown-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .3);--wx-table-drag-over-background: var(--wx-background-alt);--wx-table-drag-zone-shadow: var(--wx-box-shadow)}.wx-material-theme .wx-table-menu{box-shadow:0 2px 5px #0000004d;outline:none}.wx-willow-theme{--wx-table-select-background: #eaedf5;--wx-table-select-color: var(--wx-color-font);--wx-table-border: 1px solid #e6e6e6;--wx-table-select-border: inset 3px 0 var(--wx-color-primary);--wx-table-header-border: var(--wx-table-border);--wx-table-header-cell-border: var(--wx-table-border);--wx-table-footer-cell-border: var(--wx-table-border);--wx-table-cell-border: var(--wx-table-border);--wx-header-font-weight: 600;--wx-table-header-background: #f2f3f7;--wx-table-fixed-column-border: 3px solid #e6e6e6;--wx-table-editor-dropdown-border: var(--wx-table-border);--wx-table-editor-dropdown-shadow: 0px 4px 20px 0px rgba(44, 47, 60, .12);--wx-table-drag-over-background: var(--wx-background-alt);--wx-table-drag-zone-shadow: var(--wx-box-shadow)}.wx-willow-theme .wx-table-menu{box-shadow:0 4px 20px #2c2f3c1f;outline:1px solid #e6e6e6}.wx-willow-dark-theme{color-scheme:dark;--wx-table-select-background: #384047;--wx-table-select-color: var(--wx-color-font);--wx-table-border: var(--wx-border);--wx-table-select-border: inset 3px 0 var(--wx-color-primary);--wx-table-header-border: var(--wx-table-border);--wx-table-header-cell-border: var(--wx-table-border);--wx-table-footer-cell-border: var(--wx-table-border);--wx-table-cell-border: var(--wx-table-border);--wx-header-font-weight: 600;--wx-table-header-background: #20262b;--wx-table-fixed-column-border: 3px solid var(--wx-background-alt);--wx-table-editor-dropdown-border: var(--wx-border);--wx-table-editor-dropdown-shadow: 0px 4px 16px 0px rgba(0, 0, 0, .6);--wx-table-drag-over-background: var(--wx-background-alt);--wx-table-drag-zone-shadow: 0px 1px 2px var(--wx-background-hover), 0px 3px 10px var(--wx-background-hover)}.wx-willow-dark-theme .wx-table-menu{box-shadow:0 4px 16px #0009;outline:var(--wx-border)}