.table { width: 100%; table-layout: fixed; thead th { &.sortable { cursor: pointer; user-select: none; } .sortArrow { display: inline-block; border: 5px solid transparent; border-top-color: var(--ps-ui-foreground-text); top: 3px; position: relative; margin-left: 7px; &.asc { border-top-color: transparent; border-bottom-color: var(--ps-button-switch-bg-highlight); top: -2px; } &.desc { border-top-color: var(--ps-button-switch-bg-highlight); top: 3px; } } } thead, tbody tr:nth-child(2n) { background-color: var(--ps-neutral-9); } tbody { cursor: pointer; td { font-weight: initial; text-align: center; } tr { &.isRowSelected { cursor: pointer; background: var(--ps-table-highlight-row-bg) !important; color: var(--ps-table-highlight-row-text); } &.isRowDisabled td { text-decoration: line-through; } &:not(.isRowSelected) { &:hover { cursor: pointer; color: var(--ps-neutral-2); background: var(--ps-ui-element-bg-highlight); } } } td, th { border: 1px solid var(--ps-ui-border); padding: 4px 10px; width: 10%; } } } .loadingSpinner { text-align: center; margin-top: 50px; } .pagination { display: flex; justify-content: flex-end; }