mantine-datatable
Version:
The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data r
49 lines • 23.7 kB
CSS
@layer mantine-datatable{.mantine-datatable-nowrap{white-space:nowrap}.mantine-datatable-ellipsis{overflow:hidden;text-overflow:ellipsis}.mantine-datatable-pointer-cursor{cursor:pointer}.mantine-datatable-context-menu-cursor{cursor:context-menu}.mantine-datatable-text-selection-disabled{user-select:none}.mantine-datatable-text-align-left{text-align:left}.mantine-datatable-text-align-center{text-align:center}.mantine-datatable-text-align-right{text-align:right}.mantine-datatable{--mantine-datatable-color:var(
--mantine-datatable-color-light,var(--mantine-color-text)
)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-color:var(
--mantine-datatable-color-dark,var(--mantine-color-text)
)}.mantine-datatable{--mantine-datatable-background-color:var(
--mantine-datatable-background-color-light,var(--mantine-color-body)
)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-background-color:var(
--mantine-datatable-background-color-dark,var(--mantine-color-body)
)}.mantine-datatable{--mantine-datatable-border-color:var(
--mantine-datatable-border-color-light,var(--mantine-color-gray-3)
)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-border-color:var(
--mantine-datatable-border-color-dark,var(--mantine-color-dark-4)
)}.mantine-datatable{--mantine-datatable-row-border-color:var(
--mantine-datatable-row-border-color-light,var(--mantine-datatable-border-color)
)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-row-border-color:var(
--mantine-datatable-row-border-color-dark,var(--mantine-datatable-border-color)
)}.mantine-datatable{--mantine-datatable-striped-color:var(
--mantine-datatable-striped-color-light,var(--mantine-color-gray-0)
)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-striped-color:var(
--mantine-datatable-striped-color-dark,var(--mantine-color-dark-6)
)}.mantine-datatable{--mantine-datatable-highlight-on-hover-color:var(
--mantine-datatable-highlight-on-hover-color-light,var(--mantine-color-gray-1)
)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-highlight-on-hover-color:var(
--mantine-datatable-highlight-on-hover-color-dark,var(--mantine-color-dark-5)
)}.mantine-datatable{--mantine-datatable-shadow-background-top:linear-gradient(rgba(0,0,0,.05),transparent),linear-gradient(rgba(0,0,0,.05) 30%,transparent)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-shadow-background-top:linear-gradient(rgba(0,0,0,.25),transparent),linear-gradient(rgba(0,0,0,.25) 30%,transparent)}.mantine-datatable{--mantine-datatable-shadow-background-right:linear-gradient(270deg,rgba(0,0,0,.05),transparent),linear-gradient(270deg,rgba(0,0,0,.05),transparent 30%)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-shadow-background-right:linear-gradient(270deg,rgba(0,0,0,.25),transparent),linear-gradient(270deg,rgba(0,0,0,.25),transparent 30%)}.mantine-datatable{--mantine-datatable-shadow-background-bottom:linear-gradient(transparent,rgba(0,0,0,.05)),linear-gradient(transparent 30%,rgba(0,0,0,.05))}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-shadow-background-bottom:linear-gradient(transparent,rgba(0,0,0,.25)),linear-gradient(transparent 30%,rgba(0,0,0,.25))}.mantine-datatable{--mantine-datatable-shadow-background-left:linear-gradient(90deg,rgba(0,0,0,.05),transparent),linear-gradient(90deg,rgba(0,0,0,.05),transparent 30%)}[data-mantine-color-scheme=dark] .mantine-datatable{--mantine-datatable-shadow-background-left:linear-gradient(90deg,rgba(0,0,0,.25),transparent),linear-gradient(90deg,rgba(0,0,0,.25),transparent 30%)}.mantine-datatable{background:var(--mantine-datatable-background-color);color:var(--mantine-datatable-color);display:flex;flex-direction:column;overflow:hidden;position:relative}.mantine-datatable-with-border{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-border-color)}.mantine-datatable-table{background:var(--mantine-datatable-background-color);border-collapse:separate;border-spacing:0;color:inherit}.mantine-datatable-table td,.mantine-datatable-table th{border-color:var(--mantine-datatable-row-border-color)}.mantine-datatable-table tbody,.mantine-datatable-table td,.mantine-datatable-table tfoot,.mantine-datatable-table tfoot tr,.mantine-datatable-table th,.mantine-datatable-table thead,.mantine-datatable-table thead tr{background:inherit}.mantine-datatable-table[data-striped] tbody tr:nth-of-type(odd){background:var(--mantine-datatable-striped-color)}.mantine-datatable-table[data-highlight-on-hover] tbody tr:hover{background:var(--mantine-datatable-highlight-on-hover-color)}.mantine-datatable-table tbody tr:last-of-type{border-bottom:0}.mantine-datatable-vertical-align-top td{vertical-align:top}.mantine-datatable-vertical-align-bottom td{vertical-align:bottom}.mantine-datatable-last-row-border-bottom-visible tr:last-of-type:not(.mantine-datatable-empty-row) td{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-row-border-color)}}@layer mantine-datatable{.mantine-datatable-pin-last-column td:not(.mantine-datatable-row-expansion-cell):last-of-type,.mantine-datatable-pin-last-column th:last-of-type{position:sticky;right:calc(-.025rem*var(--mantine-scale));z-index:1;@-moz-document url-prefix(){right:0}}.mantine-datatable-pin-last-column td:not(.mantine-datatable-row-expansion-cell):last-of-type:after,.mantine-datatable-pin-last-column th:last-of-type:after{background:var(--mantine-datatable-shadow-background-right);border-right:1px solid var(--mantine-datatable-row-border-color);bottom:0;content:"";left:calc(var(--mantine-spacing-xs)*-1);opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .2s;width:var(--mantine-spacing-xs)}.mantine-datatable-pin-last-column th:last-of-type:after,.mantine-datatable-pin-last-column tr[data-with-row-border]:not(:last-of-type) td:not(.mantine-datatable-row-expansion-cell):last-of-type:after{bottom:calc(-.0625rem*var(--mantine-scale));top:calc(-.0625rem*var(--mantine-scale))}.mantine-datatable-pin-last-column tfoot th:last-of-type:after{top:calc(-.0625rem*var(--mantine-scale))}.mantine-datatable-pin-last-column tr[data-selected] td:not(.mantine-datatable-row-expansion-cell):last-of-type{background:inherit}.mantine-datatable-pin-last-column tr[data-selected] td:not(.mantine-datatable-row-expansion-cell):last-of-type:before{background:var(--mantine-primary-color-light);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.mantine-datatable-pin-last-column-scrolled td:not(.mantine-datatable-row-expansion-cell):last-of-type:after,.mantine-datatable-pin-last-column-scrolled th:last-of-type:after{opacity:1}.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2),.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2),.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible th:first-of-type,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) td:not(.mantine-datatable-row-expansion-cell):first-of-type,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) th:first-of-type{left:var(--mantine-datatable-selection-column-width);position:sticky;z-index:1}.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2):after,.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2):after,.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible th:first-of-type:after,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) td:not(.mantine-datatable-row-expansion-cell):first-of-type:after,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) th:first-of-type:after{background:var(--mantine-datatable-shadow-background-left);border-left:1px solid var(--mantine-datatable-row-border-color);bottom:0;content:"";opacity:0;pointer-events:none;position:absolute;right:calc(var(--mantine-spacing-xs)*-1);top:0;transition:opacity .2s;width:var(--mantine-spacing-xs)}.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible th.mantine-datatable-header-selector-cell{left:0}.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2):after,.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible tr[data-with-row-border]:not(:last-of-type) td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2):after,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) th:first-of-type:after,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) tr[data-with-row-border]:not(:last-of-type) td:not(.mantine-datatable-row-expansion-cell):first-of-type:after{bottom:calc(-.0625rem*var(--mantine-scale));top:calc(-.0625rem*var(--mantine-scale))}.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible tfoot th:nth-of-type(2):after,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) tfoot th:first-of-type:after{top:calc(-.0625rem*var(--mantine-scale))}.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible tr[data-selected] td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2),.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) tr[data-selected] td:not(.mantine-datatable-row-expansion-cell):first-of-type{background:inherit}.mantine-datatable-pin-first-column.mantine-datatable-selection-column-visible tr[data-selected] td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2):before,.mantine-datatable-pin-first-column:not(.mantine-datatable-selection-column-visible) tr[data-selected] td:not(.mantine-datatable-row-expansion-cell):first-of-type:before{background:var(--mantine-primary-color-light);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.mantine-datatable-pin-first-column-scrolled.mantine-datatable-selection-column-visible td:not(.mantine-datatable-row-expansion-cell):nth-of-type(2):after,.mantine-datatable-pin-first-column-scrolled.mantine-datatable-selection-column-visible th.mantine-datatable-column-group-header-cell:nth-of-type(2):after,.mantine-datatable-pin-first-column-scrolled.mantine-datatable-selection-column-visible th:first-of-type:after,.mantine-datatable-pin-first-column-scrolled:not(.mantine-datatable-selection-column-visible) td:not(.mantine-datatable-row-expansion-cell):first-of-type:after,.mantine-datatable-pin-first-column-scrolled:not(.mantine-datatable-selection-column-visible) th:first-of-type:after{opacity:1}.mantine-datatable-empty-row,.mantine-datatable-table[data-highlight-on-hover] tbody .mantine-datatable-empty-row:hover{background:transparent}.mantine-datatable-empty-state{bottom:0;color:var(--mantine-color-gray-6);flex-direction:column;left:0;pointer-events:none;position:absolute;right:0;top:0}[data-mantine-color-scheme=dark] .mantine-datatable-empty-state{color:var(--mantine-color-dark-3)}.mantine-datatable-empty-state{opacity:0;transition:opacity .2s}.mantine-datatable-empty-state[data-active]{opacity:1}.mantine-datatable-empty-state-icon{background:var(--mantine-color-gray-2);border-radius:50%;font-size:0;padding:var(--mantine-spacing-xs)}[data-mantine-color-scheme=dark] .mantine-datatable-empty-state-icon{background:var(--mantine-color-dark-5)}.mantine-datatable-empty-state-icon{margin-bottom:calc(var(--mantine-spacing-xs)/2)}.mantine-datatable-footer{z-index:2}.mantine-datatable-footer th{border-top:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-border-color)}.mantine-datatable-footer-selector-placeholder-cell{left:0;position:sticky;width:0}.mantine-datatable-footer-selector-placeholder-cell:after{background:var(--mantine-datatable-shadow-background-left);border-left:1px solid var(--mantine-datatable-row-border-color);bottom:calc(-.0625rem*var(--mantine-scale));content:"";opacity:0;pointer-events:none;position:absolute;right:calc(var(--mantine-spacing-xs)*-1);top:0;transition:opacity .2s;width:var(--mantine-spacing-xs)}.mantine-datatable-footer-selector-placeholder-cell[data-shadow-visible]:after{opacity:1}.mantine-datatable-header{position:sticky;top:0;z-index:2}.mantine-datatable-header th{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-border-color)}.mantine-datatable-header-column-toggle-checkbox-label{user-select:none}.mantine-datatable-header-cell-sortable{cursor:pointer;transition:background .2s}}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{.mantine-datatable-header-cell-sortable:hover:not(:has(button:hover)){background:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .mantine-datatable-header-cell-sortable:hover:not(:has(button:hover)){background:var(--mantine-color-dark-6)}.mantine-datatable-header-cell-draggable{border-radius:calc(.375rem*var(--mantine-scale));cursor:grab;transition:all .2s}.mantine-datatable-header-cell-draggable:active{cursor:grabbing}.mantine-datatable-header-cell-draggable:hover:not(:has(button:hover)){background:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .mantine-datatable-header-cell-draggable:hover:not(:has(button:hover)){background:var(--mantine-color-dark-6)}.mantine-datatable-header-cell-draggable-action-icon{cursor:inherit;margin:calc(-.125rem*var(--mantine-scale)) calc(.125rem*var(--mantine-scale)) 0}.mantine-datatable-header-cell-drag-over{background:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .mantine-datatable-header-cell-drag-over{background:var(--mantine-color-dark-6)}.mantine-datatable-header-cell-toggleable-icon{opacity:.1;transition:opacity .2s}.mantine-datatable-header-cell-toggleable:hover .mantine-datatable-header-cell-toggleable-icon{opacity:1}.mantine-datatable-header-cell-resizable{position:relative}.mantine-datatable-header-resizable-handle{background:inherit;bottom:0;cursor:"col-resize";cursor:col-resize;opacity:0;position:absolute;top:0;transform:translateX(50%);transition:opacity .2s;width:calc(.5rem*var(--mantine-scale));z-index:1}.mantine-datatable-header-resizable-handle:after{border-right:calc(.25rem*var(--mantine-scale)) dotted var(--mantine-color-gray-3);bottom:calc(.0625rem*var(--mantine-scale));content:"";left:calc(.125rem*var(--mantine-scale));position:absolute;top:calc(.0625rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .mantine-datatable-header-resizable-handle:after{border-right:calc(.25rem*var(--mantine-scale)) dotted var(--mantine-color-dark-4)}.mantine-datatable-header-resizable-handle:hover:after{border-color:var(--mantine-primary-color-6)}tr:hover .mantine-datatable-header-resizable-handle{opacity:1}.mantine-datatable-header-cell-sortable-group{gap:.25em}.mantine-datatable-header-cell-sortable-text{flex-grow:1;min-width:0}.mantine-datatable-header-cell-sortable-icon{transition:transform .2s}.mantine-datatable-header-cell-sortable-icon-reversed{transform:scaleY(-1)}.mantine-datatable-header-cell-sortable-unsorted-icon{color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .mantine-datatable-header-cell-sortable-unsorted-icon{color:var(--mantine-color-dark-3)}.mantine-datatable-header-cell-sortable-unsorted-icon{transition:color .2s}th:hover .mantine-datatable-header-cell-sortable-unsorted-icon{color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] th:hover .mantine-datatable-header-cell-sortable-unsorted-icon{color:var(--mantine-color-dark-2)}.mantine-datatable-header-cell-filter-action-icon{border:0;color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .mantine-datatable-header-cell-filter-action-icon{color:var(--mantine-color-dark-3)}.mantine-datatable-header-cell-filter-action-icon[data-active]{color:var(--mantine-color-text)}.mantine-datatable-header-selector-cell{left:0;position:sticky;width:0}.mantine-datatable-header-selector-cell:after{background:var(--mantine-datatable-shadow-background-left);border-left:1px solid var(--mantine-datatable-row-border-color);bottom:calc(-.0625rem*var(--mantine-scale));content:"";opacity:0;pointer-events:none;position:absolute;right:calc(var(--mantine-spacing-xs)*-1);top:0;transition:opacity .2s;width:var(--mantine-spacing-xs)}.mantine-datatable-header-selector-cell[data-shadow-visible]:after{opacity:1}.mantine-datatable-loader{background:color-mix(in srgb,var(--mantine-datatable-background-color),transparent 25%);bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .2s;z-index:3}.mantine-datatable-loader-fetching{opacity:1;pointer-events:all}.mantine-datatable-page-size-selector-button-icon{margin:0 calc(-.25rem*var(--mantine-scale)) 0 calc(.125rem*var(--mantine-scale))}.mantine-datatable-page-size-selector-menu-arrow{z-index:-1}.mantine-datatable-page-size-selector-active{--mantine-datatable-pagination-active-text-color:var(
--mantine-datatable-pagination-active-text-color-light,var(--mantine-color-white)
)}[data-mantine-color-scheme=dark] .mantine-datatable-page-size-selector-active{--mantine-datatable-pagination-active-text-color:var(
--mantine-datatable-pagination-active-text-color-dark,var(--mantine-color-white)
)}.mantine-datatable-page-size-selector-active{--mantine-datatable-pagination-active-background-color:var(
--mantine-datatable-pagination-active-background-color-light,var(--mantine-primary-color-filled)
)}[data-mantine-color-scheme=dark] .mantine-datatable-page-size-selector-active{--mantine-datatable-pagination-active-background-color:var(
--mantine-datatable-pagination-active-background-color-dark,var(--mantine-primary-color-filled)
)}.mantine-datatable-page-size-selector-active{background:var(--mantine-datatable-pagination-active-background-color);color:var(--mantine-datatable-pagination-active-text-color);opacity:1}.mantine-datatable-pagination{align-items:center;background:inherit;border-top:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-border-color);display:flex;gap:var(--mantine-spacing-xs);justify-content:space-between}.mantine-datatable-pagination-text{flex:1 1 auto}.mantine-datatable-pagination-pages{--mantine-datatable-pagination-active-text-color:var(
--mantine-datatable-pagination-active-text-color-light,var(--mantine-color-white)
)}[data-mantine-color-scheme=dark] .mantine-datatable-pagination-pages{--mantine-datatable-pagination-active-text-color:var(
--mantine-datatable-pagination-active-text-color-dark,var(--mantine-color-white)
)}.mantine-datatable-pagination-pages{--mantine-datatable-pagination-active-background-color:var(
--mantine-datatable-pagination-active-background-color-light,var(--mantine-primary-color-filled)
)}[data-mantine-color-scheme=dark] .mantine-datatable-pagination-pages{--mantine-datatable-pagination-active-background-color:var(
--mantine-datatable-pagination-active-background-color-dark,var(--mantine-primary-color-filled)
)}.mantine-datatable-pagination-pages{opacity:1;transition:opacity .2s}.mantine-datatable-pagination-pages-fetching{opacity:0}.mantine-datatable-pagination-pages-control{border-color:var(--mantine-datatable-border-color);color:var(--mantine-datatable-color)}.mantine-datatable-pagination-pages-control[data-active]{background:var(--mantine-datatable-pagination-active-background-color);border-color:transparent;color:var(--mantine-datatable-pagination-active-text-color)}.mantine-datatable-row{--mantine-datatable-row-color:var(
--mantine-datatable-row-color-light
)}[data-mantine-color-scheme=dark] .mantine-datatable-row{--mantine-datatable-row-color:var(
--mantine-datatable-row-color-dark
)}.mantine-datatable-row{--mantine-datatable-row-background-color:var(
--mantine-datatable-row-background-color-light
)}[data-mantine-color-scheme=dark] .mantine-datatable-row{--mantine-datatable-row-background-color:var(
--mantine-datatable-row-background-color-dark
)}.mantine-datatable-row{background:var(--mantine-datatable-row-background-color,inherit);color:var(--mantine-datatable-row-color,inherit)}.mantine-datatable-row[data-with-row-border]:not(:last-of-type) td{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-row-border-color)}.mantine-datatable-row[data-selected] td{background:var(--mantine-primary-color-light)}.mantine-datatable-row-expansion-cell{padding:0}tr:not(:last-of-type) .mantine-datatable-row-expansion-cell-content{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-row-border-color)}.mantine-datatable-row-expansion-cell-content{border-top:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-datatable-row-border-color)}[data-with-row-border] .mantine-datatable-row-expansion-cell-content{border-top:0}.mantine-datatable-row-selector-cell{left:0;position:sticky;width:0;z-index:1}tr[data-selected] .mantine-datatable-row-selector-cell{background:inherit}tr[data-selected] .mantine-datatable-row-selector-cell:before{background:var(--mantine-primary-color-light);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.mantine-datatable-row-selector-cell:after{background:var(--mantine-datatable-shadow-background-left);border-left:1px solid var(--mantine-datatable-row-border-color);bottom:0;content:"";opacity:0;pointer-events:none;position:absolute;right:calc(var(--mantine-spacing-xs)*-1);top:0;transition:opacity .2s;width:var(--mantine-spacing-xs)}tr[data-with-row-border] .mantine-datatable-row-selector-cell:after{bottom:calc(-.0625rem*var(--mantine-scale));top:calc(-.0625rem*var(--mantine-scale))}tr:last-of-type .mantine-datatable-row-selector-cell:after{bottom:0}.mantine-datatable-row-selector-cell[data-shadow-visible]:after{opacity:1}.mantine-datatable-row-selector-cell-checkbox{cursor:pointer}.mantine-datatable-scroll-area{flex:1 1 100%}.mantine-datatable-scroll-area-corner{background:transparent}.mantine-datatable-scroll-area-thumb{z-index:3}.mantine-datatable-scroll-area-scrollbar[data-state=visible]{background:transparent}.mantine-datatable-scroll-area-scrollbar div:before{pointer-events:none}.mantine-datatable-scroll-area-shadow{opacity:0;pointer-events:none;position:absolute;transition:opacity .2s}.mantine-datatable-scroll-area-top-shadow{background:var(--mantine-datatable-shadow-background-top);height:calc(var(--mantine-spacing-xs)/2);left:0;right:0;z-index:2}.mantine-datatable-scroll-area-left-shadow{background:var(--mantine-datatable-shadow-background-left);bottom:0;left:0;top:0;width:var(--mantine-spacing-xs);z-index:3}.mantine-datatable-scroll-area-right-shadow{background:var(--mantine-datatable-shadow-background-right);bottom:0;right:0;top:0;width:calc(var(--mantine-spacing-xs)/2);z-index:3}.mantine-datatable-scroll-area-shadow-behind{z-index:0}.mantine-datatable-scroll-area-bottom-shadow{background:var(--mantine-datatable-shadow-background-bottom);height:calc(var(--mantine-spacing-xs)/2);left:0;right:0;z-index:2}.mantine-datatable-scroll-area-shadow-visible{opacity:1}}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}@layer mantine-datatable{}