vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Theming for responsive table

pull/1047/head
Cagatay Civici 2021-02-25 12:59:03 +03:00
parent 48ae20bef1
commit 7aece338f2
35 changed files with 111 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/themes/arya-blue/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);

3
public/themes/arya-green/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);

3
public/themes/arya-orange/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);

3
public/themes/arya-purple/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);

3
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #8dd0ff;
color: #151515;

3
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #c298d8;
color: #151515;

3
public/themes/bootstrap4-light-blue/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #007bff;
color: #ffffff;

3
public/themes/bootstrap4-light-purple/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #883cae;
color: #ffffff;

3
public/themes/fluent-light/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #edebe9;
color: #323130;

3
public/themes/luna-amber/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #FFE082;
color: #212529;

3
public/themes/luna-blue/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #81D4FA;
color: #212529;

3
public/themes/luna-green/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #C5E1A5;
color: #212529;

3
public/themes/luna-pink/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #F48FB1;
color: #212529;

3
public/themes/md-dark-deeppurple/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(206, 147, 216, 0.16);
color: #CE93D8;

3
public/themes/md-dark-indigo/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(159, 168, 218, 0.16);
color: #9FA8DA;

3
public/themes/md-light-deeppurple/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(103, 58, 183, 0.12);
color: #673AB7;

3
public/themes/md-light-indigo/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(63, 81, 181, 0.12);
color: #3F51B5;

3
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(103, 58, 183, 0.16);
color: #673AB7;

3
public/themes/mdc-dark-indigo/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(63, 81, 181, 0.16);
color: #3F51B5;

3
public/themes/mdc-light-deeppurple/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(103, 58, 183, 0.12);
color: #673AB7;

3
public/themes/mdc-light-indigo/theme.css
View File

@ -2151,6 +2151,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 500;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(63, 81, 181, 0.12);
color: #3F51B5;

3
public/themes/nova-accent/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #e02365;
color: #ffffff;

3
public/themes/nova-alt/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #007ad9;
color: #ffffff;

3
public/themes/nova-vue/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #41b883;
color: #ffffff;

3
public/themes/nova/theme.css
View File

@ -2139,6 +2139,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #007ad9;
color: #ffffff;

3
public/themes/rhea/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #AFD3C8;
color: #385048;

3
public/themes/saga-blue/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #E3F2FD;
color: #495057;

3
public/themes/saga-green/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #E8F5E9;
color: #495057;

3
public/themes/saga-orange/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #FFF3E0;
color: #495057;

3
public/themes/saga-purple/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: #F3E5F5;
color: #495057;

3
public/themes/vela-blue/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);

3
public/themes/vela-green/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);

3
public/themes/vela-orange/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);

3
public/themes/vela-purple/theme.css
View File

@ -2127,6 +2127,9 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
font-weight: 600;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);

11
src/components/datatable/DataTable.vue
View File

@ -1580,8 +1580,12 @@ export default {
display: none !important;
}
.p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr {
border-bottom: 1px solid var(--surface-d);
.p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border-width: 0 none;
}
.p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td {
@ -1589,6 +1593,9 @@ export default {
width: 100%;
align-items: center;
justify-content: space-between;
}
.p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:not(:last-child) {
border: 0 none;
}