Skip to content
This repository was archived by the owner on Nov 12, 2025. It is now read-only.

Commit c4d765f

Browse files
AdamJdgutride
AdamJ
authored and
dgutride
committed
fix(datatable): Update datatable to use PatternFly table styles
Update the datatable to use the PatternFly table styles. This includes hover, selection, drag and drop and the toolbar.
1 parent 829e89d commit c4d765f

File tree

2 files changed

+217
-32
lines changed

2 files changed

+217
-32
lines changed

‎src/app/table/datatable/datatable.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*ngIf="config.toolbarConfig">
1212
</pfng-toolbar>
1313
<ngx-datatable #datatable
14-
class="bootstrap"
14+
class="patternfly"
1515
[rows]="rows"
1616
[columns]="cols"
1717
[columnMode]="'force'"

‎src/app/table/datatable/datatable.component.less‎

Lines changed: 216 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,223 @@
11
@import (reference) '../../../assets/stylesheets/patternfly-ng';
22

3-
.pfng-datatable {
4-
.row.toolbar-pf {
5-
margin-left: 0;
6-
margin-right: 0;
3+
.pfng {
4+
&-datatable {
5+
.row.toolbar-pf {
6+
margin-left: 0;
7+
margin-right: 0;
8+
background-color: @color-pf-black-150;
9+
border: 1px solid @color-pf-black-300;
10+
border-bottom: none;
11+
}
12+
.table-view-pf-select-results {
13+
padding-bottom: 10px;
14+
}
15+
&-dnd-container {
16+
align-self: stretch;
17+
display: flex;
18+
}
19+
&-dnd-header {
20+
margin-right: 10px;
21+
&:before {
22+
background-image: linear-gradient(to bottom, @color-pf-blue-400 60%, @color-pf-white 0%);
23+
background-position: left;
24+
background-repeat: repeat-y;
25+
background-size: 2px 5px;
26+
border: 4px solid @color-pf-blue-400;
27+
border-color: @color-pf-blue-500;
28+
content: '';
29+
height: 100%;
30+
left: -4px;
31+
position: absolute;
32+
top: 0;
33+
width: 10px;
34+
}
35+
&:hover {
36+
cursor: move;
37+
}
38+
}
39+
&-select {
40+
margin-left: -5px;
41+
.ng-untouched {
42+
margin-top: 0;
43+
}
44+
}
745
}
8-
.table-view-pf-select-results {
9-
padding-bottom: 10px;
46+
&-table {
47+
.row {
48+
&.toolbar-pf {
49+
background-color: @color-pf-black-150;
50+
border-bottom: none;
51+
border-left: 1px solid @color-pf-black-300;
52+
border-right: 1px solid @color-pf-black-300;
53+
border-top: 1px solid @color-pf-black-300;
54+
box-shadow: none;
55+
margin-left: 0;
56+
margin-right: 0;
57+
}
58+
}
59+
.table-view-pf-select-results {
60+
padding-bottom: 10px;
61+
}
1062
}
1163
}
12-
13-
.pfng-datatable-dnd-container {
14-
align-self: stretch;
15-
display: flex;
16-
}
17-
18-
.pfng-datatable-dnd-header {
19-
margin-right: 10px;
20-
&:before {
21-
background-image: linear-gradient(to bottom, @color-pf-blue-400 60%, @color-pf-white 0%);
22-
background-position: left;
23-
background-repeat: repeat-y;
24-
background-size: 2px 5px;
25-
border: 4px solid @color-pf-blue-400;
26-
border-color: @color-pf-blue-500;
27-
content: '';
28-
height: 100%;
29-
left: -4px;
30-
position: absolute;
31-
top: 0;
32-
width: 10px;
64+
/*
65+
* PatternFly table theme for ngx-datatable
66+
*/
67+
.ngx-datatable {
68+
/*
69+
* dragula style overwrites
70+
*/
71+
.gu-mirror {
72+
/* stylelint-disable */
73+
position: fixed !important;
74+
margin: 0 !important;
75+
z-index: 9999 !important;
76+
/* stylelint-enable */
77+
opacity: .5;
78+
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
79+
filter: alpha(opacity=50);
80+
}
81+
.gu-hide {
82+
/* stylelint-disable */
83+
display: none !important;
84+
/* stylelint-enable */
85+
}
86+
.gu-unselectable {
87+
/* stylelint-disable */
88+
-webkit-user-select: none !important;
89+
-moz-user-select: none !important;
90+
-ms-user-select: none !important;
91+
user-select: none !important;
92+
/* stylelint-enable */
93+
}
94+
.gu-transit {
95+
display: inline-flex;
96+
color: #fff;
97+
background-color: @color-pf-blue-400;
98+
opacity: .5;
99+
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
100+
filter: alpha(opacity=50);
101+
}
102+
&.patternfly {
103+
margin-bottom: -5px;
104+
border-top: 1px solid @color-pf-black-300;
105+
box-shadow: none;
106+
.datatable-header {
107+
background-image: -webkit-linear-gradient(top, @color-pf-black-100 0, @color-pf-black-200 100%);
108+
background-image: linear-gradient(to bottom, @color-pf-black-100 0, @color-pf-black-200 100%);
109+
background-repeat: repeat-x;
110+
background-color: @color-pf-black-150;
111+
/* stylelint-disable */
112+
height: unset !important;
113+
/* stylelint-enable */
114+
&-cell {
115+
border-right: 1px solid @color-pf-black-300;
116+
border-bottom: 1px solid @color-pf-black-300;
117+
font-weight: 600;
118+
padding: 2px 10px 3px;
119+
vertical-align: bottom;
120+
&:first-child {
121+
border-left: 1px solid @color-pf-black-300;
122+
}
123+
&.sortable.sort-active {
124+
color: @color-pf-blue-400;
125+
&.sort-asc, &.sort-desc {
126+
/* stylelint-disable */
127+
color: @color-pf-blue-400 !important;
128+
/* stylelint-enable */
129+
position: relative;
130+
/* stylelint-disable */
131+
background-image: none !important;
132+
/* stylelint-enable */
133+
padding-top: 2px;
134+
&:before {
135+
background: @color-pf-blue-400;
136+
content: '';
137+
height: 2px;
138+
position: absolute;
139+
left: 0;
140+
top: 0;
141+
width: 100%;
142+
}
143+
.datatable-header-cell-label {
144+
&:after {
145+
content: '\f107';
146+
color: @color-pf-blue-400;
147+
font-family: FontAwesome;
148+
font-size: 10px;
149+
font-weight: 400;
150+
height: 9px;
151+
margin-left: 5px;
152+
line-height: 1.2;
153+
position: absolute;
154+
top: 7px;
155+
vertical-align: baseline;
156+
width: 12px;
157+
}
158+
}
159+
}
160+
&.sort-asc {
161+
.datatable-header-cell-label {
162+
&:after {
163+
content: '\f106';
164+
}
165+
}
166+
}
167+
}
168+
}
169+
.datatable-header-cell-label {
170+
line-height: 24px;
171+
}
172+
}
173+
.datatable-body {
174+
&-row {
175+
border-bottom: 1px solid @color-pf-black-300;
176+
border-top: 0;
177+
vertical-align: top;
178+
/* stylelint-disable */
179+
&.datatable-row-even {
180+
background-color: transparent !important;
181+
&:hover, &:active {
182+
background-color: @color-pf-blue-50 !important;
183+
border-bottom-color: @color-pf-blue-200;
184+
}
185+
}
186+
&.datatable-row-odd {
187+
background-color: @color-pf-black-150 !important;
188+
&:hover, &:active {
189+
background-color: @color-pf-blue-50 !important;
190+
border-bottom-color: @color-pf-blue-200;
191+
}
192+
}
193+
&.active {
194+
background-color: @color-pf-blue-400 !important;
195+
border-bottom-color: @color-pf-blue-500 !important;
196+
color: #fff;
197+
&:hover {
198+
background-color: @color-pf-blue-400 !important;
199+
}
200+
}
201+
/* stylelint-enable */
202+
.datatable-body-cell {
203+
padding: 2px 10px 3px;
204+
text-align: left;
205+
vertical-align: top;
206+
}
207+
}
208+
&-cell {
209+
border-right: 1px solid @color-pf-black-300;
210+
&:first-child {
211+
border-left: 1px solid @color-pf-black-300;
212+
}
213+
&-label {
214+
.fa {
215+
&:hover {
216+
cursor: pointer;
217+
}
218+
}
219+
}
220+
}
221+
}
33222
}
34-
}
35-
36-
.pfng-datatable-select {
37-
margin-left: 5px;
38223
}

0 commit comments

Comments
 (0)