UNPKG

smart-webcomponents-react

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-00JS8f7.svg)](https://jqwidgets.com/license/)

1,557 lines (1,548 loc) 65.2 kB
smart-table table:not(.smart-table-container) { display: none; } smart-table tr.expanded .hierarchy-arrow { transform: rotate(180deg); } .smart-table { display: block; border-radius: var(--smart-border-top-left-radius) var(--smart-border-top-right-radius) var(--smart-border-bottom-right-radius) var(--smart-border-bottom-left-radius); width: var(--smart-table-default-width); height: var(--smart-table-default-height); font-family: var(--smart-font-family); font-size: var(--smart-font-size); } .smart-table > .smart-container { border: var(--smart-border-width) solid var(--smart-border); position: relative; overflow: auto; border-radius: inherit; max-height: inherit; } .smart-table .smart-table { background-color: #fff; } .smart-table table { table-layout: fixed; border-collapse: collapse; border-radius: inherit; } .smart-table thead th { background-color: var(--smart-background); color: var(--smart-background-color); font-size: calc(var(--smart-font-size) - 2px); border-bottom: var(--smart-border-width) solid var(--smart-border); text-align: left; font-weight: 500; } .smart-table thead th[filter] { position: relative; } .smart-table thead th[filter]::before { content: var(--smart-icon-filter); font-family: var(--smart-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--smart-arrow-size); color: inherit; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; margin-top: 2px; align-items: center; justify-content: center; position: absolute; right: 10px; } .smart-table thead th .sort-by { display: none; position: relative; visibility: hidden; width: 16px; height: 16px; user-select: none; opacity: 0; } .smart-table thead th .sort-by:before { content: var(--smart-icon-up); width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--smart-arrow-size); color: inherit; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; } .smart-table thead th .sort-by:after { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 100%; border-radius: 50%; width: 50%; height: 50%; padding: 3px; background-color: var(--smart-primary); color: var(--smart-primary-color); font-size: 8px; } .smart-table thead th .sort-by.asc, .smart-table thead th .sort-by.desc { display: inline-block; visibility: inherit; opacity: 1; } .smart-table thead th .sort-by.desc:before { transform: rotateX(180deg); } .smart-table thead th:not(.smart-table-select-all) { opacity: 0.9; } .smart-table thead th.freeze-near, .smart-table thead th.freeze-far { opacity: 1; } .smart-table thead tr { height: var(--smart-table-column-header-height); } .smart-table thead tr:first-child th { border-top: none; } .smart-table tbody tr { height: var(--smart-table-row-height); } .smart-table tbody tr.last-visible { height: unset; } .smart-table tbody tr.last-visible.sized { box-shadow: inset 0px var(--smart-border-width) 0px 0px var(--smart-border); } .smart-table tbody + tbody { border-top: 2px solid var(--smart-border); } .smart-table tfoot tr { height: var(--smart-table-row-height); } .smart-table tfoot td { --smart-surface: var(--smart-background); --smart-surface-color: var(--smart-background-color); font-size: calc(var(--smart-font-size) - 2px); background-color: var(--smart-surface); color: var(--smart-surface-color); } .smart-table tr[row-id] td { white-space: nowrap; } .smart-table th { padding-top: var(--smart-table-cell-padding); padding-right: var(--smart-table-cell-padding); padding-bottom: var(--smart-table-cell-padding); padding-left: var(--smart-table-cell-padding); vertical-align: middle; border-top-width: var(--smart-border-width); border-top-style: solid; border-top-color: var(--smart-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smart-table th:hover .column-menu, .smart-table th[column-menu-button] .column-menu { overflow: hidden; text-overflow: ellipsis; position: absolute; right: 3px; width: 25px; height: 100%; } .smart-table th:hover .column-menu:after, .smart-table th[column-menu-button] .column-menu:after { content: var(--smart-icon-arrow-down); font-family: var(--smart-font-family-icon); width: 100%; cursor: pointer; color: var(--smart-surface-color); font-size: 16px; font-weight: bold; } .smart-table th > .wrapper { display: flex; align-items: center; overflow: hidden; position: relative; } .smart-table th > .wrapper > .label { overflow: hidden; text-overflow: ellipsis; } .smart-table th.smart-table-select-all { width: calc(var(--smart-check-box-default-size) * 3); } .smart-table th.smart-table-select-all.indeterminate > div { background-color: var(--smart-primary); } .smart-table th.smart-table-select-all.indeterminate > div:after { content: ""; position: absolute; width: calc(0.5 * var(--smart-check-box-default-size)); height: calc(0.5 * var(--smart-check-box-default-size)); background-color: var(--smart-primary-color); } .smart-table th.column-header { text-align: center; border-bottom: none; } .smart-table th.column-header:empty { border-top: none; } .smart-table td { padding-top: var(--smart-table-cell-padding); padding-right: var(--smart-table-cell-padding); padding-bottom: var(--smart-table-cell-padding); padding-left: var(--smart-table-cell-padding); vertical-align: middle; border-top-width: var(--smart-border-width); border-top-style: solid; border-top-color: var(--smart-border); overflow: hidden; text-overflow: ellipsis; } .smart-table td div { font-size: var(--smart-font-size); padding: 0; margin: 0; line-height: initial; } .smart-table td span { line-height: initial; } .smart-table td.no-edit { background-color: rgba(0, 0, 0, 0.02); } .smart-table td.indeterminate > div { background-color: var(--smart-primary); } .smart-table td.indeterminate > div:after { content: ""; position: absolute; width: calc(0.5 * var(--smart-check-box-default-size)); height: calc(0.5 * var(--smart-check-box-default-size)); background-color: var(--smart-primary-color); } .smart-table td.editing { padding: 0; } .smart-table td.editing .smart-table-editor { width: 100%; height: 100%; } .smart-table td.editing .smart-table-editor.standard { border: var(--smart-border-width) solid var(--smart-border); padding: var(--smart-table-cell-padding); font-family: inherit; font-size: inherit; box-shadow: none; } .smart-table td.editing .smart-table-editor.standard:focus { border: var(--smart-border-width) solid var(--smart-border); outline: none; } .smart-table td.group-header > div { display: flex; flex-direction: row; align-items: center; } .smart-table td.tree-cell > div { display: flex; flex-direction: row; align-items: center; } .smart-table td.tree-cell > div div:nth-child(2) { width: calc(100% - var(--smart-table-arrow-margin) - var(--smart-table-arrow-size)); overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .smart-table td.editing.invalid { position: relative; overflow: visible; } .smart-table td.editing.invalid:before { content: attr(validation-message); visibility: hidden; position: absolute; top: -100%; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: 7px; background-color: var(--smart-error); color: var(--smart-secondary-color); font-size: calc(var(--smart-font-size) - 4px); opacity: 0; transform: scale(0); } .smart-table td.editing.invalid:hover:before { visibility: visible; opacity: 0.7; transform: scale(1); } .smart-table td.editing.invalid .smart-table-editor { border-color: var(--smart-error); } .smart-table th.smart-table-select-all:hover, .smart-table td.smart-table-select-row:hover { z-index: 99; overflow: visible; } .smart-table th.smart-table-select-all > div, .smart-table td.smart-table-select-row > div { display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; transform: translate(-50%, -50%); border: var(--smart-border-width) solid var(--smart-border); width: var(--smart-check-box-default-size); height: var(--smart-check-box-default-size); padding: 8px; color: var(--smart-primary-color); font-family: var(--smart-font-family-icon); cursor: pointer; border-radius: var(--smart-border-radius); } .smart-table th.smart-table-select-all > div:before, .smart-table td.smart-table-select-row > div:before { content: ""; position: absolute; border-radius: 50%; width: 100%; height: 100%; background-color: var(--smart-secondary); opacity: 0.1; transform: scale(0); transform-origin: center; } .smart-table th.smart-table-select-all > div:hover:before, .smart-table td.smart-table-select-row > div:hover:before { transform: scale(2.5); } .smart-table th.smart-table-select-all > div:hover:active:before, .smart-table td.smart-table-select-row > div:hover:active:before { background-color: var(--smart-primary); animation-name: active; animation-duration: 0.2s; animation-timing-function: ease-out; animation-iteration-count: 1; } .smart-table th.smart-table-select-all.selected > div, .smart-table td.smart-table-select-row.selected > div { border-color: var(--smart-primary); background-color: var(--smart-primary); } .smart-table th.smart-table-select-all.selected > div:after, .smart-table td.smart-table-select-row.selected > div:after { content: var(--smart-icon-check); } .smart-table th.smart-table-select-all.selected > div:before, .smart-table td.smart-table-select-row.selected > div:before { background-color: var(--smart-primary); } .smart-table .smart-table-select-all.freeze-near { background-color: var(--smart-background); color: var(--smart-background-color); } .smart-table smart-pager.smart-element { display: none; min-width: 0; height: var(--smart-table-header-footer-height); background-color: var(--smart-background); border-left: none; border-right: none; border-bottom: none; position: sticky; left: 0; bottom: 0; } .smart-table smart-pager > .smart-container { justify-content: flex-end; } .smart-table smart-pager .smart-pager-near-buttons-container { font-size: calc(var(--smart-font-size) * 2); } .smart-table smart-pager .smart-pager-near-buttons-container.near { order: 2; } .smart-table smart-pager .smart-pager-near-buttons-container.far { order: 3; } .smart-table smart-pager .smart-pager-far-buttons-container { font-size: calc(var(--smart-font-size) * 2); } .smart-table smart-pager .smart-pager-size-selector-and-label-container { order: 0; } .smart-table smart-pager .smart-pager-label { font-size: calc(var(--smart-font-size) - 2px); opacity: 0.7; } .smart-table smart-pager .smart-pager-summary-container.smart-pager-label { order: 1; margin: 0 32px 0 24px; } .smart-table smart-pager .smart-pager-button:before { content: attr(tooltip); visibility: hidden; position: absolute; top: -125%; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: 7px; background-color: var(--smart-secondary); color: var(--smart-secondary-color); font-size: calc(var(--smart-font-size) - 4px); opacity: 0; transform: scale(0); } .smart-table smart-pager .smart-pager-button:hover:before { visibility: visible; opacity: 0.7; transform: scale(1); } .smart-table .smart-pager .smart-pager-button { overflow: visible; } .smart-table .smart-table-container:focus { outline: none; } .smart-table .smart-table-container:focus td[focus]:after { content: ""; box-sizing: border-box; position: absolute; width: calc(100% - 1px); height: 100%; top: 0; left: 1px; pointer-events: none; border: 1px solid var(--smart-ui-state-color-focus); } .smart-table .smart-table-container:focus td[focus]:not(.freeze-near):not(.freeze-far) { position: relative; } .smart-table .smart-table-header { height: var(--smart-table-header-footer-height); display: none; position: sticky; left: 0; top: 0; background-color: var(--smart-background); z-index: 2; } .smart-table .smart-table-header .smart-input { display: none; width: 100%; height: 100%; } .smart-table .smart-table-header .smart-table-filter-template-container { display: none; width: 100%; height: 100%; } .smart-table .smart-table-header .smart-table-toolbar-button.conditional-formatting { display: none; border: var(--smart-border-width) solid var(--smart-border); border-top: none; border-right: none; width: var(--smart-table-header-footer-height); height: 100%; } .smart-table .smart-table-header .smart-table-toolbar-button.conditional-formatting:before { left: unset; right: 0; } .smart-table .smart-table-toolbar-button { --smart-border-top-left-radius: 0; --smart-border-top-right-radius: 0; --smart-border-bottom-left-radius: 0; --smart-border-bottom-right-radius: 0; --smart-button-padding: 0; position: relative; border-top: none; border-bottom: none; overflow: visible; min-height: 0; } .smart-table .smart-table-toolbar-button:before { content: attr(tooltip); visibility: hidden; position: absolute; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: 7px; background-color: var(--smart-secondary); color: var(--smart-secondary-color); font-size: calc(var(--smart-font-size) - 4px); opacity: 0; transform: scale(0); box-sizing: border-box; top: 125%; left: calc(-1 * var(--smart-table-row-height) / 2); width: calc(2 * var(--smart-table-row-height)); white-space: normal; word-wrap: break-word; text-transform: none; z-index: 1000; } .smart-table .smart-table-toolbar-button:after { content: var(--smart-icon-table); display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-size: 20px; font-family: "smart-icons"; pointer-events: none; opacity: 0.4; } .smart-table .smart-table-toolbar-button:hover:before { visibility: visible; opacity: 0.7; transform: scale(1); } .smart-table .smart-table-toolbar-button > button { overflow: hidden; } .smart-table .smart-table-toolbar-button.conditional-formatting > button:after { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-family: "smart-icons"; pointer-events: none; content: var(--smart-icon-less-than-equal); font-size: 16px; top: 8px; left: 8px; opacity: 1; } .smart-table .smart-table-toolbar-button.fields { border-right: none; } .smart-table .smart-table-toolbar-button.fields:before { left: unset; right: 0; width: calc(2 * var(--smart-table-row-height)); } .smart-table .smart-table-toolbar-button.fields > button:after { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-family: "smart-icons"; pointer-events: none; font-size: 16px; top: 8px; left: 8px; opacity: 1; content: var(--smart-icon-settings); } .smart-table .smart-table-filter-row smart-button { --smart-button-padding: 0; } .smart-table .smart-table-filter-row smart-button button:after { content: var(--smart-icon-filter); font-family: var(--smart-font-family-icon); width: 100%; height: 100%; text-decoration: line-through; } .smart-table .smart-table-filter-row > td > div { --smart-filter-row-content-height: calc(var(--smart-table-row-height) - 2 * var(--smart-table-cell-padding) - var(--smart-border-width)); display: grid; grid-template-columns: 1fr var(--smart-filter-row-content-height) var(--smart-filter-row-content-height); grid-template-rows: 100%; column-gap: 2px; height: var(--smart-filter-row-content-height); } .smart-table .smart-table-filter-row > td.no-filter { opacity: 0.6; pointer-events: none; } .smart-table .smart-table-filter-row .filter-value { min-width: 0; border: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: var(--smart-editor-label-padding); background-color: var(--smart-background); color: var(--smart-background-color); font-family: inherit; font-size: inherit; } .smart-table .smart-table-filter-row .filter-value:hover { border-color: var(--smart-ui-state-border-hover); } .smart-table .smart-table-filter-row .filter-value:focus { outline: none; border-color: var(--smart-outline); } .smart-table .smart-table-filter-row .filter-value[type=number] { -webkit-appearance: none; -moz-appearance: textfield; } .smart-table .smart-table-filter-row .filter-value::-webkit-outer-spin-button, .smart-table .smart-table-filter-row .filter-value::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: textfield; } .smart-table .smart-table-filter-row .smart-input { --smart-editor-addon-width: 100%; --smart-editor-label-padding: 0; width: unset; height: 100%; } .smart-table .smart-table-filter-row .smart-input .smart-drop-down-button { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); } .smart-table .smart-table-filter-row .smart-input .smart-drop-down-button .arrow:after { content: var(--smart-icon-filter); transform: none !important; } .smart-table .smart-table-row-detail { height: var(--smart-table-row-detail-height); } .smart-table .smart-table-row-detail > td { border: none; padding: 0; } .smart-table .smart-table-row-detail .smart-table-detail-container { height: calc(var(--smart-table-row-detail-height) - 2 * var(--smart-table-cell-padding)); padding: 0 var(--smart-table-cell-padding); overflow: hidden; } .smart-table .smart-table-row-detail.collapsed { height: 0; } .smart-table .smart-table-row-detail.collapsed .smart-table-detail-container { height: 0; padding-top: 0; padding-bottom: 0; } .smart-table .smart-table-cell-template { overflow: hidden; text-overflow: ellipsis; display: contents; } .smart-table .disable-select td.smart-table-select-row > div { pointer-events: none; opacity: 0.2; } .smart-table .dragged { position: relative; } .smart-table .drop-column { position: relative; } .smart-table .drop-column:after { content: ""; position: absolute; width: 2px; height: 100%; background-color: var(--smart-primary); top: 0; } .smart-table .drop-column.left:after { left: 0; } .smart-table .drop-column.right:after { right: 0; } .smart-table .freeze-near { position: sticky; opacity: 1; z-index: 1; background-color: var(--smart-background); color: var(--smart-background-color); left: 0; box-shadow: 1px 0px 0px 0px var(--smart-border); } .smart-table .freeze-far { position: sticky; opacity: 1; z-index: 1; background-color: var(--smart-background); color: var(--smart-background-color); right: 0; box-shadow: -1px 0px 0px 0px var(--smart-border); } .smart-table .smart-table-virtualization-container { width: 100%; height: 100%; border: none; padding: 0; } .smart-table .smart-table-virtualization-container .smart-scroll-viewer-content-container { padding: 0; } .smart-table .hierarchy-arrow { margin-right: var(--smart-table-arrow-margin); width: var(--smart-table-arrow-size); cursor: pointer; } .smart-table .group-label-name { display: var(--smart-table-group-name-display); } .smart-table .group-label-value { font-weight: bold; } .smart-table .group-label-count { display: var(--smart-table-group-count-display); } .smart-table .outline-level-1 { padding-left: var(--smart-table-indent); } .smart-table .outline-level-1.tree-leaf { padding-left: calc(var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-2 { padding-left: calc(2 * var(--smart-table-indent)); } .smart-table .outline-level-2.tree-leaf { padding-left: calc(2 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-3 { padding-left: calc(3 * var(--smart-table-indent)); } .smart-table .outline-level-3.tree-leaf { padding-left: calc(3 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-4 { padding-left: calc(4 * var(--smart-table-indent)); } .smart-table .outline-level-4.tree-leaf { padding-left: calc(4 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-5 { padding-left: calc(5 * var(--smart-table-indent)); } .smart-table .outline-level-5.tree-leaf { padding-left: calc(5 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-6 { padding-left: calc(6 * var(--smart-table-indent)); } .smart-table .outline-level-6.tree-leaf { padding-left: calc(6 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-7 { padding-left: calc(7 * var(--smart-table-indent)); } .smart-table .outline-level-7.tree-leaf { padding-left: calc(7 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-8 { padding-left: calc(8 * var(--smart-table-indent)); } .smart-table .outline-level-8.tree-leaf { padding-left: calc(8 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-9 { padding-left: calc(9 * var(--smart-table-indent)); } .smart-table .outline-level-9.tree-leaf { padding-left: calc(9 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table .outline-level-10 { padding-left: calc(10 * var(--smart-table-indent)); } .smart-table .outline-level-10.tree-leaf { padding-left: calc(10 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)); } .smart-table.thead-dark table th { color: #fff; background-color: #212529; border-color: #32383e; } .smart-table.thead-dark thead th .sort-by::before { color: #fff; } .smart-table.thead-primary table th { color: var(--smart-primary-color); background-color: var(--smart-primary); border-color: var(--smart-primary); } .smart-table.thead-primary th.smart-table-select-all > div { border-color: var(--smart-primary-color); } .smart-table.thead-primary th.smart-table-select-all.selected > div { border-color: var(--smart-primary-color); } .smart-table.thead-primary th.smart-table-select-all.indeterminate > div { background-color: var(--smart-primary-color); } .smart-table.thead-secondary table th { color: var(--smart-secondary-color); background-color: var(--smart-secondary); border-color: var(--smart-secondary); } .smart-table.thead-surface table th { color: var(--smart-surface-color); background-color: var(--smart-surface); border-color: var(--smart-surface); } .smart-table.thead-light table th { color: #495057; background-color: #e9ecef; border-color: #dee2e6; } .smart-table.table-dark table { color: #fff; background-color: #212529; } .smart-table.table-dark table th, .smart-table.table-dark table td, .smart-table.table-dark table thead th { border-color: #32383e; } .smart-table.table-dark thead th .sort-by::before { color: #fff; } .smart-table.table-dark.table-bordered table { border: 0; } .smart-table.table-dark.table-striped table tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.05); } .smart-table.table-dark.table-hover table tbody tr:hover { background-color: rgba(255, 255, 255, 0.075); } .smart-table.table-bordered table { border: var(--smart-border-width) solid var(--smart-border); } .smart-table.table-bordered table thead th, .smart-table.table-bordered table thead td { border-bottom-width: 2px; } .smart-table.table-bordered table th, .smart-table.table-bordered table td { border: var(--smart-border-width) solid var(--smart-border); } .smart-table.table-striped table tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.05); } .smart-table.table-hover table tbody tr:hover { background-color: rgba(0, 0, 0, 0.075); } .smart-table.table-hover table .smart-table-primary:hover { background-color: #9fcdff; } .smart-table.table-hover table .smart-table-primary:hover > td, .smart-table.table-hover table .smart-table-primary:hover > th { background-color: #9fcdff; } .smart-table.table-hover table .smart-table-secondary:hover { background-color: #c8cbcf; } .smart-table.table-hover table .smart-table-secondary:hover > td, .smart-table.table-hover table .smart-table-secondary:hover > th { background-color: #c8cbcf; } .smart-table.table-hover table .smart-table-success:hover { background-color: #b1dfbb; } .smart-table.table-hover table .smart-table-success:hover > td, .smart-table.table-hover table .smart-table-success:hover > th { background-color: #b1dfbb; } .smart-table.table-hover table .smart-table-info:hover { background-color: #abdde5; } .smart-table.table-hover table .smart-table-info:hover > td, .smart-table.table-hover table .smart-table-info:hover > th { background-color: #abdde5; } .smart-table.table-hover table .smart-table-warning:hover { background-color: #ffe8a1; } .smart-table.table-hover table .smart-table-warning:hover > td, .smart-table.table-hover table .smart-table-warning:hover > th { background-color: #ffe8a1; } .smart-table.table-hover table .smart-table-danger:hover { background-color: #f1b0b7; } .smart-table.table-hover table .smart-table-danger:hover > td, .smart-table.table-hover table .smart-table-danger:hover > th { background-color: #f1b0b7; } .smart-table.table-hover table .smart-table.table-light table:hover { background-color: #ececf6; } .smart-table.table-hover table .smart-table.table-light table:hover > td, .smart-table.table-hover table .smart-table.table-light table:hover > th { background-color: #ececf6; } .smart-table.table-hover table .smart-table.table-dark table:hover { background-color: #b9bbbe; } .smart-table.table-hover table .smart-table.table-dark table:hover > td, .smart-table.table-hover table .smart-table.table-dark table:hover > th { background-color: #b9bbbe; } .smart-table.table-hover table .smart-table-active:hover { background-color: rgba(0, 0, 0, 0.075); } .smart-table.table-hover table .smart-table-active:hover > td, .smart-table.table-hover table .smart-table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); } .smart-table.no-border > .smart-container { border: none; } .smart-table.table-elevation { border: none; border-radius: unset; box-shadow: var(--smart-elevation-8); } .smart-table:not([animation=none]) thead th .sort-by { transition: visibility 0.5s ease-out, opacity 0.5s ease-out; } .smart-table:not([animation=none]) thead th .sort-by:before { transition: transform 0.5s ease-out; } .smart-table:not([animation=none]) tr[row-id] td:not(.editing) { transition: padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out, transform 0.2s ease-in-out, border-top-color 0.2s ease-in-out; } .smart-table:not([animation=none]) td.editing.invalid:before { transition: visibility 0.2s ease-in-out, opacity 0.2s ease-out, transform 0.1s ease-out; } .smart-table:not([animation=none]) smart-pager .smart-pager-button:before { transition: visibility 0.2s ease-out, opacity 0.2s ease-out, transform 0.1s ease-out; } .smart-table:not([animation=none]) .smart-table-toolbar-button:before { transition: visibility 0.2s ease-out, opacity 0.2s ease-out, transform 0.1s ease-out; } .smart-table:not([animation=none]) .hierarchy-arrow { transition: transform 0.2s ease-in-out; } .smart-table:not([animation=none]):not([ignore-detail-animation]) .smart-table-row-detail { transition: height 0.2s ease-in-out; } .smart-table:not([animation=none]):not([ignore-detail-animation]) .smart-table-row-detail .smart-table-detail-container { transition: height 0.2s ease-in-out, padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out; } .smart-table[virtualization] { --smart-table-default-height: var(--smart-grid-default-height); } .smart-table[filtering] .smart-table-header { display: grid; grid-template-columns: 1fr; } .smart-table[filtering] .smart-table-header .smart-input { display: block; } .smart-table[filtering] .smart-table-header .smart-table-filter-template-container { display: block; } .smart-table[filtering]:not([filter-row]):not([column-menu]) .smart-table-container { height: calc(100% - var(--smart-table-header-footer-height)); } .smart-table[filtering]:not([filter-row]):not([column-menu]) .smart-table-virtualization-container { height: calc(100% - var(--smart-table-header-footer-height)); } .smart-table[filtering][filter-row][conditional-formatting-button] .smart-table-header .smart-input { display: none; } .smart-table[filtering][filter-row][conditional-formatting-button] .smart-table-header .smart-table-filter-template-container { display: none; } .smart-table[filtering][conditional-formatting-button] .smart-table-header { grid-template-columns: 1fr auto; } .smart-table[conditional-formatting-button] .smart-table-container { height: calc(100% - var(--smart-table-header-footer-height)); } .smart-table[conditional-formatting-button] .smart-table-virtualization-container { height: calc(100% - var(--smart-table-header-footer-height)); } .smart-table[conditional-formatting-button] .smart-table-header { display: grid; } .smart-table[conditional-formatting-button] .smart-table-header .smart-table-toolbar-button.conditional-formatting { display: flex; } .smart-table[conditional-formatting-button]:not([filtering]) .smart-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button"; } .smart-table[conditional-formatting-button]:not([filtering]) .smart-table-header .smart-table-toolbar-button.conditional-formatting { grid-area: button; } .smart-table[conditional-formatting-button][filtering][filter-row] .smart-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button"; } .smart-table[conditional-formatting-button][filtering][filter-row] .smart-table-header .smart-table-toolbar-button.conditional-formatting { grid-area: button; } .smart-table[paging]:not(.smart-pivot-table) smart-pager { display: block; z-index: 1; } .smart-table[paging]:not(.smart-pivot-table) .smart-table-container { height: calc(100% - var(--smart-table-header-footer-height)); } .smart-table[paging]:not(.smart-pivot-table) .smart-table-virtualization-container { height: calc(100% - var(--smart-table-header-footer-height)); } .smart-table[paging]:not(.smart-pivot-table)[filtering]:not([filter-row]) .smart-table-container { height: calc(100% - 2 * var(--smart-table-header-footer-height)); } .smart-table[paging]:not(.smart-pivot-table)[filtering]:not([filter-row]) .smart-table-virtualization-container { height: calc(100% - 2 * var(--smart-table-header-footer-height)); } .smart-table[paging]:not(.smart-pivot-table)[conditional-formatting-button] .smart-table-container { height: calc(100% - 2 * var(--smart-table-header-footer-height)); } .smart-table[paging]:not(.smart-pivot-table)[conditional-formatting-button] .smart-table-virtualization-container { height: calc(100% - 2 * var(--smart-table-header-footer-height)); } .smart-table[paging].smart-pivot-table smart-pager { display: block; z-index: 999; } .smart-table[paging].smart-pivot-table [designer] smart-pager { border-right: 1px solid var(--smart-border); } .smart-table[column-reorder] thead th { touch-action: none; } .smart-table[column-reorder] th[data-field] { cursor: move; } .smart-table:not([column-resize]) .dragged:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; opacity: 0.8; } .smart-table[column-resize] thead th { touch-action: none; } .smart-table[column-resize] th[data-field]:before, .smart-table[column-resize] th[data-field]:after { content: ""; position: absolute; top: 0; width: 5px; height: 100%; cursor: col-resize; } .smart-table[column-resize] th[data-field]:before { left: 0; } .smart-table[column-resize] th[data-field]:after { right: 0; width: 4px; } .smart-table[column-resize]:not([freeze-header]) th[data-field]:not(.freeze-near):not(.freeze-far) { position: relative; } .smart-table[column-resize]:not([selection]) th[data-field]:first-child:before { content: none; } .smart-table[column-resize]:not([right-to-left]) th[locked]:after { content: none; } .smart-table[column-resize]:not([right-to-left]) th[locked] + th[data-field]:before { content: none; } @media (hover: none) { .smart-table[column-resize]:not(.resizing) th[data-field]:before { border-left: 1px solid rgba(var(--smart-primary-rgb), 0.3); } .smart-table[column-resize]:not(.resizing) th[data-field]:after { border-right: 1px solid rgba(var(--smart-primary-rgb), 0.3); } } @media (hover: hover) { .smart-table[column-resize]:not(.resizing) th[data-field]:hover:before { border-left: 1px solid rgba(var(--smart-primary-rgb), 0.3); } .smart-table[column-resize]:not(.resizing) th[data-field]:hover:after { border-right: 1px solid rgba(var(--smart-primary-rgb), 0.3); } } .smart-table[column-resize][selection] th[data-field]:nth-child(2):before { content: none; } .smart-table[column-resize][resize-max-reached] th[data-field]:before { content: none; } .smart-table[column-resize][resize-max-reached] th[data-field]:after { content: none; } .smart-table[sort-mode=many] thead th .sort-by:after { content: attr(order); } .smart-table[loading] tbody td { opacity: 0; } .smart-table[loading] smart-pager { pointer-events: none; } .smart-table[freeze-header]:not([virtualization]) thead th { position: sticky; opacity: 1; border-bottom: none; top: 0; box-shadow: 0px 1px 0px 0px var(--smart-border); z-index: 100; } .smart-table[freeze-header]:not([virtualization]) thead th.freeze-near { box-shadow: 1px 1px 0px 0px var(--smart-border); z-index: 200; } .smart-table[freeze-header]:not([virtualization]) thead th.freeze-far { box-shadow: -1px 1px 0px 0px var(--smart-border); z-index: 200; } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(2) > th { top: var(--smart-table-column-header-height); } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(3) > th { top: calc(2 * var(--smart-table-column-header-height)); } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(4) > th { top: calc(3 * var(--smart-table-column-header-height)); } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(5) > th { top: calc(4 * var(--smart-table-column-header-height)); } .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead th, .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead th { top: var(--smart-table-header-footer-height); } .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(2) > th, .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(2) > th { top: calc(var(--smart-table-header-footer-height) + var(--smart-table-column-header-height)); } .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(3) > th, .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(3) > th { top: calc(var(--smart-table-header-footer-height) + 2 * var(--smart-table-column-header-height)); } .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(4) > th, .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(4) > th { top: calc(var(--smart-table-header-footer-height) + 3 * var(--smart-table-column-header-height)); } .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(5) > th, .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(5) > th { top: calc(var(--smart-table-header-footer-height) + 4 * var(--smart-table-column-header-height)); } .smart-table[freeze-header][virtualization] thead { box-shadow: 0px 1px 0px 0px var(--smart-border); top: 0; position: relative; z-index: 200; } .smart-table[freeze-header][virtualization] thead th { opacity: 1; border-bottom: none; top: 0; box-shadow: 0px 1px 0px 0px var(--smart-border); z-index: 100; position: relative; } .smart-table[freeze-header][virtualization] thead th.sticky { position: sticky; } .smart-table[freeze-header][virtualization] thead th.freeze-near { box-shadow: 1px 1px 0px 0px var(--smart-border); z-index: 200; } .smart-table[freeze-header][virtualization] thead th.freeze-far { box-shadow: -1px 1px 0px 0px var(--smart-border); z-index: 200; } .smart-table[freeze-header][virtualization] thead tr:nth-child(2) > th { top: var(--smart-table-column-header-height); } .smart-table[freeze-header][virtualization] thead tr:nth-child(3) > th { top: calc(2 * var(--smart-table-column-header-height)); } .smart-table[freeze-header][virtualization] thead tr:nth-child(4) > th { top: calc(3 * var(--smart-table-column-header-height)); } .smart-table[freeze-header][virtualization] thead tr:nth-child(5) > th { top: calc(4 * var(--smart-table-column-header-height)); } .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead th, .smart-table[freeze-header][virtualization][conditional-formatting-button] thead th { top: var(--smart-table-header-footer-height); } .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(2) > th, .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(2) > th { top: calc(var(--smart-table-header-footer-height) + var(--smart-table-column-header-height)); } .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(3) > th, .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(3) > th { top: calc(var(--smart-table-header-footer-height) + 2 * var(--smart-table-column-header-height)); } .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(4) > th, .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(4) > th { top: calc(var(--smart-table-header-footer-height) + 3 * var(--smart-table-column-header-height)); } .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(5) > th, .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(5) > th { top: calc(var(--smart-table-header-footer-height) + 4 * var(--smart-table-column-header-height)); } .smart-table[freeze-footer] tfoot td { position: sticky; opacity: 1; border-top: none; bottom: 0; box-shadow: 0px -1px 0px 0px var(--smart-border); z-index: 100; } .smart-table[freeze-footer] tfoot td.freeze-near { box-shadow: 1px -1px 0px 0px var(--smart-border); z-index: 200; } .smart-table[freeze-footer] tfoot td.freeze-far { box-shadow: -1px -1px 0px 0px var(--smart-border); z-index: 200; } .smart-table[freeze-footer] tfoot tr:nth-last-child(2) td { bottom: var(--smart-table-row-height); } .smart-table[freeze-footer] tfoot tr:nth-last-child(3) td { bottom: calc(2 * var(--smart-table-row-height)); } .smart-table[freeze-footer] .smart-table-container:focus td[focus]:after { height: calc(100% - 1px); } .smart-table[freeze-footer][paging]:not(.smart-pivot-table) tfoot td { bottom: var(--smart-table-header-footer-height); } .smart-table[freeze-footer][paging]:not(.smart-pivot-table) tfoot tr:nth-last-child(2) td { bottom: calc(var(--smart-table-row-height) + var(--smart-table-header-footer-height)); } .smart-table[freeze-footer][paging]:not(.smart-pivot-table) tfoot tr:nth-last-child(3) td { bottom: calc(2 * var(--smart-table-row-height) + var(--smart-table-header-footer-height)); } .smart-table[row-detail-template] tr[row-id] { cursor: pointer; } .smart-table[hierarchy] tr[row-id] td { transform: scaleY(1); } .smart-table[hierarchy] tr[row-id].no-height td { line-height: 0; } .smart-table[hierarchy] tr.collapsed[row-id] { height: 0; } .smart-table[hierarchy] tr.collapsed[row-id] td { border-top-width: 0; border-top-color: transparent; padding-top: 0; padding-bottom: 0; line-height: 0; transform: scaleY(0); } .smart-table[hierarchy]:not([animation=none]) tr[row-id] { transition: height 0.2s ease-in-out; } .smart-table[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .smart-table[modal]:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; z-index: 100; } .smart-table[toolbar][designer] .smart-table-toolbar-button.conditional-formatting { border-right: none; } .smart-table[toolbar][designer] .smart-table-toolbar-button.conditional-formatting:before { left: unset; right: 0; width: calc(2 * var(--smart-table-row-height)); } .smart-table[auto-size] table { table-layout: auto; } .smart-table[column-groups]:not([right-to-left]) th:not(:last-child) { border-right: var(--smart-border-width) solid var(--smart-border); } .smart-table[column-groups][selection] th.smart-table-select-all, .smart-table[column-groups][selection] th.empty { border-top: none; } .smart-table[virtualization] tr.last-row td { border-bottom: var(--smart-border-width) solid var(--smart-border); } .smart-table[virtualization] tr[unused] { visibility: hidden; } .smart-table[virtualization] tr[unused] td { border-top: none; } .smart-table[virtualization] tr.smart-table-filter-row td { position: sticky; top: var(--smart-table-column-header-height); background-color: var(--smart-background); box-shadow: 0px 1px 0px 0px var(--smart-border); } .smart-table[virtualization][filtering]:not([filter-row]) .smart-table-container { height: 100%; } .smart-table[virtualization][conditional-formatting-button] .smart-table-container { height: 100%; } .smart-table[virtualization][paging]:not(.smart-pivot-table) .smart-table-container { height: 100%; } .smart-table[virtualization][paging]:not(.smart-pivot-table)[filtering]:not([filter-row]):not([column-menu]) .smart-table-container, .smart-table[virtualization][paging]:not(.smart-pivot-table)[conditional-formatting-button] .smart-table-container { height: 100%; } .smart-table[virtualization][freeze-header][filtering]:not([filter-row]):not([column-menu]) thead th, .smart-table[virtualization][freeze-header][conditional-formatting-button] thead th { top: 0; } @media (max-width: 575.98px) { .smart-table.table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .smart-table.table-responsive-sm > .smart-table.table-bordered table { border: 0; } } @media (max-width: 767.98px) { .smart-table.table-responsive-md { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .smart-table.table-responsive-md > .smart-table.table-bordered table { border: 0; } } @media (max-width: 991.98px) { .smart-table.table-responsive-lg { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .smart-table.table-responsive-lg > .smart-table.table-bordered table { border: 0; } } @media (max-width: 1199.98px) { .smart-table.table-responsive-xl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .smart-table.table-responsive-xl > .smart-table.table-bordered table { border: 0; } } .smart-table.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .smart-table.table-responsive > .smart-table.table-bordered table { border: 0; } @media only screen and (max-width: 1280px) { .smart-table .priority-5 { display: none; } } @media only screen and (max-width: 1024px) { .smart-table .priority-4 { display: none; } } @media only screen and (max-width: 800px) { .smart-table .priority-3 { display: none; } } @media only screen and (max-width: 640px) { .smart-table .priority-2 { display: none; } } @-moz-document url-prefix() { .smart-table thead th:not(.smart-table-select-all) { opacity: 1; } .smart-table .freeze-near, .smart-table .freeze-far { box-shadow: 0px 0px 0px 1px var(--smart-border); } .smart-table .smart-table-container:focus td[focus]:after { height: calc(100% - 1px); top: 1px; } .smart-table[freeze-header] thead th.empty, .smart-table[freeze-header] thead th:empty { box-shadow: -1px 0px 0px 0px var(--smart-border); } .smart-table[freeze-footer] .smart-table-container:focus td[focus]::after { height: calc(100% - 2px); } .smart-table[column-groups][freeze-header] thead th { box-shadow: 0px 0px 0px 1px var(--smart-border); } } .smart-table[hide-selection-column] th.smart-table-select-all { width: 0px; padding-left: 0px; padding-right: 0px; } .smart-table[hide-selection-column] th.smart-table-select-all > div { visibility: hidden; } .smart-table[hide-selection-column] td.smart-table-select-row { visibility: hidden; } .smart-table[hide-selection-column] td.smart-table-select-row .selection-checkbox { visibility: hidden; } .smart-table[hide-selection-column] tr[aria-selected=true] td { background: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected); } .smart-pivot-table th.expanded .total-arrow { transform: rotate(180deg); } .smart-pivot-table:not([animation=none]) .total-arrow { transition: transform 0.2s ease-in-out; } .smart-pivot-table:not([group-layout=classic]) tr.expanded .hierarchy-arrow { transform: rotate(180deg); } @-moz-document url-prefix() { .smart-pivot-table thead th:not(:last-child), .smart-pivot-table thead th:last-child { border: none; box-shadow: 0px 0px 0px 1px var(--smart-border); } .smart-pivot-table tbody tr[row-id]:first-child td { border-top: none; } .smart-pivot-table[freeze-header] thead th { box-shadow: 0px 0px 0px 1px var(--smart-border); } .smart-pivot-table[freeze-header] .smart-pivot-table-grouping-header:empty { box-shadow: -1px 0px 0px 0px var(--smart-border); } } .smart-pivot-panel > .smart-container[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .smart-pivot-panel > .smart-container[modal]:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; z-index: 100; } .smart-table-primary { background-color: #b8daff; } .smart-table-primary > th, .smart-table-primary > td { background-color: #b8daff; } .smart-table-secondary { background-color: #d6d8db; } .smart-table-secondary > th, .smart-table-secondary > td { background-color: #d6d8db; } .smart-table-success { background-color: #c3e6cb; } .smart-table-success > th, .smart-table-success > td { background-color: #c3e6cb; } .smart-table-info { background-color: #bee5eb; } .smart-table-info > th, .smart-table-info > td { background-color: #bee5eb; } .smart-table-warning { background-color: #ffeeba; } .smart-table-warning > th, .smart-table-warning > td { background-color: #ffeeba; } .smart-table-danger { background-color: #f5c6cb;