// core .p-treetable { position: relative; } .p-treetable table { border-collapse: collapse; width: 100%; table-layout: fixed; } .p-treetable .p-sortable-column { cursor: pointer; user-select: none; } .p-treetable-responsive-scroll > .p-treetable-wrapper { overflow-x: auto; } .p-treetable-responsive-scroll > .p-treetable-wrapper > table, .p-treetable-auto-layout > .p-treetable-wrapper > table { table-layout: auto; } .p-treetable-hoverable-rows .p-treetable-tbody > tr { cursor: pointer; } .p-treetable-toggler { cursor: pointer; user-select: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; overflow: hidden; position: relative; } .p-treetable-toggler + .p-checkbox { vertical-align: middle; } .p-treetable-toggler + .p-checkbox + span { vertical-align: middle; } /* Resizable */ .p-treetable-resizable > .p-treetable-wrapper { overflow-x: auto; } .p-treetable-resizable .p-treetable-thead > tr > th, .p-treetable-resizable .p-treetable-tfoot > tr > td, .p-treetable-resizable .p-treetable-tbody > tr > td { overflow: hidden; } .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { background-clip: padding-box; position: relative; } .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { display: none; } .p-treetable .p-column-resizer { display: block; position: absolute; top: 0; right: 0; margin: 0; width: 0.5rem; height: 100%; padding: 0px; cursor: col-resize; border: 1px solid transparent; } .p-treetable .p-column-resizer-helper { width: 1px; position: absolute; z-index: 10; display: none; } .p-treetable .p-treetable-loading-overlay { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 2; } /* Scrollable */ .p-treetable-scrollable .p-treetable-wrapper { position: relative; overflow: auto; } .p-treetable-scrollable .p-treetable-table { display: block; } .p-treetable-scrollable .p-treetable-thead, .p-treetable-scrollable .p-treetable-tbody, .p-treetable-scrollable .p-treetable-tfoot { display: block; } .p-treetable-scrollable .p-treetable-thead > tr, .p-treetable-scrollable .p-treetable-tbody > tr, .p-treetable-scrollable .p-treetable-tfoot > tr { display: flex; flex-wrap: nowrap; width: 100%; } .p-treetable-scrollable .p-treetable-thead > tr > th, .p-treetable-scrollable .p-treetable-tbody > tr > td, .p-treetable-scrollable .p-treetable-tfoot > tr > td { display: flex; flex: 1 1 0; align-items: center; } .p-treetable-scrollable .p-treetable-thead { position: sticky; top: 0; z-index: 1; } .p-treetable-scrollable .p-treetable-tfoot { position: sticky; bottom: 0; z-index: 1; } .p-treetable-scrollable .p-frozen-column { position: sticky; background: inherit; } .p-treetable-scrollable th.p-frozen-column { z-index: 1; } .p-treetable-scrollable-both .p-treetable-thead > tr > th, .p-treetable-scrollable-both .p-treetable-tbody > tr > td, .p-treetable-scrollable-both .p-treetable-tfoot > tr > td, .p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, .p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { flex: 0 0 auto; } .p-treetable-flex-scrollable { display: flex; flex-direction: column; height: 100%; } .p-treetable-flex-scrollable .p-treetable-wrapper { display: flex; flex-direction: column; flex: 1; height: 100%; } // theme .p-treetable { .p-paginator-top { border-width: $tableTopPaginatorBorderWidth; border-radius: 0; } .p-paginator-bottom { border-width: $tableBottomPaginatorBorderWidth; border-radius: 0; } .p-treetable-header { background: $tableHeaderBg; color: $tableHeaderTextColor; border: $tableHeaderBorder; border-width: $tableHeaderBorderWidth; padding: $tableHeaderPadding; font-weight: $tableHeaderFontWeight; } .p-treetable-footer { background: $tableFooterBg; color: $tableFooterTextColor; border: $tableFooterBorder; border-width: $tableFooterBorderWidth; padding: $tableFooterPadding; font-weight: $tableFooterFontWeight; } .p-treetable-thead > tr > th { text-align: $tableCellContentAlignment; padding: $tableHeaderCellPadding; border: $tableHeaderCellBorder; border-width: $tableHeaderCellBorderWidth; font-weight: $tableHeaderCellFontWeight; color: $tableHeaderCellTextColor; background: $tableHeaderCellBg; transition: $listItemTransition; } .p-treetable-tfoot > tr > td { text-align: $tableCellContentAlignment; padding: $tableFooterCellPadding; border: $tableFooterCellBorder; border-width: $tableFooterCellBorderWidth; font-weight: $tableFooterCellFontWeight; color: $tableFooterCellTextColor; background: $tableFooterCellBg; } .p-sortable-column { outline-color: $focusOutlineColor; .p-sortable-column-icon { color: $tableHeaderCellIconColor; margin-left: $inlineSpacing; } .p-sortable-column-badge { border-radius: 50%; height: $tableSortableColumnBadgeSize; min-width: $tableSortableColumnBadgeSize; line-height: $tableSortableColumnBadgeSize; color: $highlightTextColor; background: $highlightBg; margin-left: $inlineSpacing; } &:not(.p-highlight):hover { background: $tableHeaderCellHoverBg; color: $tableHeaderCellTextHoverColor; .p-sortable-column-icon { color: $tableHeaderCellIconHoverColor; } } &.p-highlight { background: $tableHeaderCellHighlightBg; color: $tableHeaderCellHighlightTextColor; .p-sortable-column-icon { color: $tableHeaderCellHighlightTextColor; } } } .p-treetable-tbody { > tr { background: $tableBodyRowBg; color: $tableBodyRowTextColor; transition: $listItemTransition; > td { text-align: $tableCellContentAlignment; border: $tableBodyCellBorder; border-width: $tableBodyCellBorderWidth; padding: $tableBodyCellPadding; .p-treetable-toggler { @include action-icon(); margin-right: $inlineSpacing; & + .p-checkbox { margin-right: $inlineSpacing; &.p-indeterminate { .p-checkbox-icon { color: $textColor; } } } } } &:focus-visible { outline: 0.15rem solid $focusOutlineColor; outline-offset: -0.15rem; } &.p-highlight { background: $highlightBg; color: $highlightTextColor; .p-treetable-toggler { color: $highlightTextColor; &:hover { color: $highlightTextColor; } } } } } &.p-treetable-hoverable-rows { .p-treetable-tbody > tr:not(.p-highlight):hover { background: $tableBodyRowHoverBg; color: $tableBodyRowTextHoverColor; .p-treetable-toggler { color: $tableBodyRowTextHoverColor; } } } .p-column-resizer-helper { background: $tableResizerHelperBg; } .p-treetable-scrollable-header, .p-treetable-scrollable-footer { background: $panelHeaderBg; } .p-treetable-loading-icon { font-size: $loadingIconFontSize; &.p-icon { width: $loadingIconFontSize; height: $loadingIconFontSize; } } &.p-treetable-gridlines { .p-datatable-header { border-width: 1px 1px 0 1px; } .p-treetable-footer { border-width: 0 1px 1px 1px; } .p-treetable-top { border-width: 0 1px 0 1px; } .p-treetable-bottom { border-width: 0 1px 1px 1px; } .p-treetable-thead { > tr { > th { border-width: 1px; } } } .p-treetable-tbody { > tr { > td { border-width: 1px; } } } .p-treetable-tfoot { > tr { > td { border-width: 1px; } } } } &.p-treetable-sm { .p-treetable-header { @include scaledPadding($tableHeaderPadding, $scaleSM); } .p-treetable-thead > tr > th { @include scaledPadding($tableHeaderCellPadding, $tableScaleSM); } .p-treetable-tbody > tr > td { @include scaledPadding($tableBodyCellPadding, $tableScaleSM); } .p-treetable-tfoot > tr > td { @include scaledPadding($tableFooterPadding, $tableScaleSM); } .p-treetable-footer { @include scaledPadding($tableFooterPadding, $tableScaleSM); } } &.p-treetable-lg { .p-treetable-header { @include scaledPadding($tableHeaderPadding, $tableScaleLG); } .p-treetable-thead > tr > th { @include scaledPadding($tableHeaderCellPadding, $tableScaleLG); } .p-treetable-tbody > tr > td { @include scaledPadding($tableBodyCellPadding, $tableScaleLG); } .p-treetable-tfoot > tr > td { @include scaledPadding($tableFooterPadding, $tableScaleLG); } .p-treetable-footer { @include scaledPadding($tableFooterPadding, $tableScaleLG); } } }