Skip to content

Commit

Permalink
#7270 Add missing base styling to TreeTable (#7272)
Browse files Browse the repository at this point in the history
  • Loading branch information
MBelniak authored Sep 28, 2024
1 parent c330980 commit aa99a96
Showing 1 changed file with 134 additions and 1 deletion.
135 changes: 134 additions & 1 deletion components/lib/treetable/TreeTableBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,138 @@ import { FilterMatchMode } from '../api/Api';
import { ComponentBase } from '../componentbase/ComponentBase';
import { classNames } from '../utils/Utils';

const styles = `
@layer primereact {
.p-treetable {
position: relative;
}
.p-treetable > .p-treetable-wrapper {
overflow: auto;
}
.p-treetable table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
.p-treetable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-treetable-selectable .p-treetable-tbody > tr {
cursor: pointer;
}
.p-treetable-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
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 {
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;
}
/* Scrollable */
.p-treetable-scrollable-wrapper {
position: relative;
}
.p-treetable-scrollable-header,
.p-treetable-scrollable-footer {
overflow: hidden;
border: 0 none;
}
.p-treetable-scrollable-body {
overflow: auto;
position: relative;
}
.p-treetable-virtual-table {
position: absolute;
}
/* Frozen Columns */
.p-treetable-frozen-view .p-treetable-scrollable-body {
overflow: hidden;
}
.p-treetable-unfrozen-view {
position: absolute;
top: 0px;
left: 0px;
}
/* Reorder */
.p-treetable-reorder-indicator-up,
.p-treetable-reorder-indicator-down {
position: absolute;
display: none;
}
/* Loader */
.p-treetable .p-treetable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Alignment */
.p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
.p-treetable .p-treetable-tbody > tr > td.p-align-left,
.p-treetable .p-treetable-tfoot > tr > td.p-align-left {
text-align: left;
justify-content: flex-start;
}
.p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
.p-treetable .p-treetable-tbody > tr > td.p-align-right,
.p-treetable .p-treetable-tfoot > tr > td.p-align-right {
text-align: right;
justify-content: flex-end;
}
.p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
.p-treetable .p-treetable-tbody > tr > td.p-align-center,
.p-treetable .p-treetable-tfoot > tr > td.p-align-center {
text-align: center;
justify-content: center;
}
}
`;

const classes = {
root: ({ props, isRowSelectionMode }) =>
classNames('p-treetable p-component', {
Expand Down Expand Up @@ -168,6 +300,7 @@ export const TreeTableBase = ComponentBase.extend({
children: undefined
},
css: {
classes
classes,
styles
}
});

0 comments on commit aa99a96

Please sign in to comment.