diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index 9f5b0019f..72e58915b 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -29,7 +29,7 @@
-
+
`
width: 100%;
}
-.p-datatable-sortable-column {
- cursor: pointer;
- user-select: none;
- outline-color: transparent;
-}
-
-.p-datatable-column-title,
-.p-datatable-sort-icon,
-.p-datatable-sort-badge {
- vertical-align: middle;
-}
-
-.p-datatable-sort-icon {
- color: ${dt('datatable.sort.icon.color')};
- transition: color ${dt('transition.duration')};
-}
-
-.p-datatable-sort-badge.p-badge {
- display: inline-flex;
- align-items: center;
- height: 1rem;
- min-width: 1rem;
- line-height: 1rem;
-}
-
-.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
- background: ${dt('datatable.header.cell.hover.background')};
- color: ${dt('datatable.header.cell.hover.color')};
-}
-
-.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
- color: ${dt('datatable.sort.icon.hover.color')};
-}
-
-.p-datatable-column-sorted {
- background: ${dt('datatable.header.cell.selected.background')};
- color: ${dt('datatable.header.cell.selected.color')};
-}
-
-.p-datatable-column-sorted .p-datatable-sort-icon {
- color: ${dt('datatable.header.cell.selected.color')};
-}
-
-.p-datatable-sortable-column:focus-visible {
- box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};
- outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};
- outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};
-}
-
-.p-datatable-hoverable .p-datatable-selectable-row {
- cursor: pointer;
-}
.p-datatable-scrollable > .p-datatable-table-container {
position: relative;
@@ -341,7 +289,7 @@ const theme = ({ dt }) => `
font-weight: ${dt('datatable.footer.font.weight')};
}
-.p-datatable-thead > tr > th {
+.p-datatable-header-cell {
text-align: ${dt('datatable.header.cell.text.align')};
padding: ${dt('datatable.header.cell.padding')};
background: ${dt('datatable.header.cell.background')};
@@ -404,6 +352,51 @@ const theme = ({ dt }) => `
background: ${dt('datatable.footer.cell.background')};
}
+.p-datatable-sortable-column {
+ cursor: pointer;
+ user-select: none;
+ outline-color: transparent;
+}
+
+.p-datatable-column-title,
+.p-datatable-sort-icon,
+.p-datatable-sort-badge {
+ vertical-align: middle;
+}
+
+.p-datatable-sort-icon {
+ color: ${dt('datatable.sort.icon.color')};
+ transition: color ${dt('transition.duration')};
+}
+
+.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
+ background: ${dt('datatable.header.cell.hover.background')};
+ color: ${dt('datatable.header.cell.hover.color')};
+}
+
+.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
+ color: ${dt('datatable.sort.icon.hover.color')};
+}
+
+.p-datatable-column-sorted {
+ background: ${dt('datatable.header.cell.selected.background')};
+ color: ${dt('datatable.header.cell.selected.color')};
+}
+
+.p-datatable-column-sorted .p-datatable-sort-icon {
+ color: ${dt('datatable.header.cell.selected.color')};
+}
+
+.p-datatable-sortable-column:focus-visible {
+ box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};
+ outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};
+ outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};
+}
+
+.p-datatable-hoverable .p-datatable-selectable-row {
+ cursor: pointer;
+}
+
.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};
}
@@ -606,11 +599,13 @@ const classes = {
headerCell: ({ instance, props, column }) =>
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
? [
+ 'p-datatable-header-cell',
{
'p-datatable-frozen-column': instance.columnProp(column, 'frozen')
}
]
: [
+ 'p-datatable-header-cell',
{
'p-datatable-sortable-column': instance.columnProp('sortable'),
'p-datatable-resizable-column': instance.resizableColumns,
diff --git a/components/lib/themes/aura/datatable/index.js b/components/lib/themes/aura/datatable/index.js
index bef805d31..c6b948857 100644
--- a/components/lib/themes/aura/datatable/index.js
+++ b/components/lib/themes/aura/datatable/index.js
@@ -18,7 +18,7 @@ export default {
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '600',
- align: 'left',
+ textAlign: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/components/lib/themes/lara/datatable/index.js b/components/lib/themes/lara/datatable/index.js
index 9758a3b64..b6722cccd 100644
--- a/components/lib/themes/lara/datatable/index.js
+++ b/components/lib/themes/lara/datatable/index.js
@@ -13,7 +13,7 @@ export default {
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '700',
- align: 'left',
+ textAlign: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/components/lib/themes/nora/datatable/index.js b/components/lib/themes/nora/datatable/index.js
index bef805d31..c6b948857 100644
--- a/components/lib/themes/nora/datatable/index.js
+++ b/components/lib/themes/nora/datatable/index.js
@@ -18,7 +18,7 @@ export default {
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '600',
- align: 'left',
+ textAlign: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/components/lib/treetable/HeaderCell.vue b/components/lib/treetable/HeaderCell.vue
index 0662bd32d..cc159d4bc 100644
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@@ -20,7 +20,7 @@
-
+
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
index 6a78fcf26..24529e57d 100644
--- a/components/lib/treetable/style/TreeTableStyle.js
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -10,59 +10,6 @@ const theme = ({ dt }) => `
width: 100%;
}
-.p-treetable-sortable-column {
- cursor: pointer;
- user-select: none;
- outline-color: transparent;
-}
-
-.p-treetable-column-title,
-.p-treetable-sort-icon,
-.p-treetable-sort-badge {
- vertical-align: middle;
-}
-
-.p-treetable-sort-icon {
- color: ${dt('treetable.sort.icon.color')};
- transition: color ${dt('transition.duration')};
-}
-
-.p-treetable-sort-badge.p-badge {
- display: inline-flex;
- align-items: center;
- height: 1rem;
- min-width: 1rem;
- line-height: 1rem;
-}
-
-.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
- background: ${dt('treetable.header.cell.hover.background')};
- color: ${dt('treetable.header.cell.hover.color')};
-}
-
-.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
- color: ${dt('treetable.sort.icon.hover.color')};
-}
-
-.p-treetable-column-sorted {
- background: ${dt('treetable.header.cell.selected.background')};
- color: ${dt('treetable.header.cell.selected.color')};
-}
-
-.p-treetable-column-sorted .p-treetable-sort-icon {
- color: ${dt('treetable.header.cell.selected.color')};
-}
-
-.p-treetable-sortable-column:focus-visible {
- box-shadow: ${dt('treetable.header.cell.focus.ring.shadow')};
- outline: ${dt('treetable.header.cell.focus.ring.width')} ${dt('treetable.header.cell.focus.ring.style')} ${dt('treetable.header.cell.focus.ring.color')};
- outline-offset: ${dt('treetable.header.cell.focus.ring.offset')};
-}
-
-.p-treetable-hoverable .p-treetable-selectable-row {
- cursor: pointer;
-}
-
.p-treetable-scrollable > .p-treetable-table-container {
position: relative;
}
@@ -200,7 +147,7 @@ const theme = ({ dt }) => `
font-weight: ${dt('treetable.footer.font.weight')};
}
-.p-treetable-thead > tr > th {
+.p-treetable-header-cell {
text-align: ${dt('treetable.header.cell.text.align')};
padding: ${dt('treetable.header.cell.padding')};
background: ${dt('treetable.header.cell.background')};
@@ -263,6 +210,52 @@ const theme = ({ dt }) => `
background: ${dt('treetable.footer.cell.background')};
}
+
+.p-treetable-sortable-column {
+ cursor: pointer;
+ user-select: none;
+ outline-color: transparent;
+}
+
+.p-treetable-column-title,
+.p-treetable-sort-icon,
+.p-treetable-sort-badge {
+ vertical-align: middle;
+}
+
+.p-treetable-sort-icon {
+ color: ${dt('treetable.sort.icon.color')};
+ transition: color ${dt('transition.duration')};
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
+ background: ${dt('treetable.header.cell.hover.background')};
+ color: ${dt('treetable.header.cell.hover.color')};
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
+ color: ${dt('treetable.sort.icon.hover.color')};
+}
+
+.p-treetable-column-sorted {
+ background: ${dt('treetable.header.cell.selected.background')};
+ color: ${dt('treetable.header.cell.selected.color')};
+}
+
+.p-treetable-column-sorted .p-treetable-sort-icon {
+ color: ${dt('treetable.header.cell.selected.color')};
+}
+
+.p-treetable-sortable-column:focus-visible {
+ box-shadow: ${dt('treetable.header.cell.focus.ring.shadow')};
+ outline: ${dt('treetable.header.cell.focus.ring.width')} ${dt('treetable.header.cell.focus.ring.style')} ${dt('treetable.header.cell.focus.ring.color')};
+ outline-offset: ${dt('treetable.header.cell.focus.ring.offset')};
+}
+
+.p-treetable-hoverable .p-treetable-selectable-row {
+ cursor: pointer;
+}
+
.p-treetable-loading-icon {
font-size: ${dt('treetable.loading.icon.size')};
width: ${dt('treetable.loading.icon.size')};
@@ -452,10 +445,11 @@ const classes = {
],
thead: 'p-treetable-thead',
headerCell: ({ instance, props, context }) => [
+ 'p-treetable-header-cell',
{
'p-treetable-sortable-column': instance.columnProp('sortable'),
'p-treetable-resizable-column': props.resizableColumns,
- 'p-treetable-column-sorted': context?.sorted,
+ 'p-treetable-column-sorted': instance.isColumnSorted(),
'p-treetable-frozen-column': instance.columnProp('frozen')
}
],