Fixed sort column styling on Table and TreeTable

components/lib/datatable/HeaderCell.vue

@@ -29,7 +29,7 @@
             <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
                 <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
             </span>
-            <Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getBadgeValue()" />
+            <Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getBadgeValue()" size="small" />
             <DTHeaderCheckbox
                 v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
                 :checked="allRowsSelected"

components/lib/datatable/style/DataTableStyle.js

@@ -10,58 +10,6 @@ const theme = ({ dt }) => `
     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,

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}',

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}',

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}',

components/lib/treetable/HeaderCell.vue

@@ -20,7 +20,7 @@
             <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
                 <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
             </span>
-            <Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getMultiSortMetaIndex() + 1" />
+            <Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getMultiSortMetaIndex() + 1" size="small" />
         </div>
     </th>
 </template>

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')
         }
     ],