Fix #5315: TreeTable header alignment (#5746)

primefaces · Jan 11, 2024 · 489091c · 489091c
1 parent 3b8dc54
commit 489091c
Showing 1 changed file with 28 additions and 6 deletions.
diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
@@ -132,6 +132,26 @@ const styles = `
         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;
+    }
 }
 `;
 
@@ -151,8 +171,8 @@ const classes = {
     header: 'p-treetable-header',
     footer: 'p-treetable-footer',
     resizeHelper: 'p-column-resizer-helper',
-    reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
-    reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
+    reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
+    reorderIndicatorDown: 'p-treetable-reorder-indicator-down',
     wrapper: 'p-treetable-wrapper',
     table: ({ props }) =>
         classNames('p-treetable-table', {
@@ -173,15 +193,17 @@ const classes = {
         }),
     sortBadge: 'p-sortable-column-badge',
     headerTitle: 'p-column-title',
-    headerCell: ({ headerProps: props, frozen, column, options, getColumnProp, sorted }) =>
+    headerContent: 'p-column-header-content',
+    headerCell: ({ headerProps: props, frozen, column, options, getColumnProp, sorted, align }) =>
         options.filterOnly
             ? classNames('p-filter-column', { 'p-frozen-column': frozen })
             : classNames({
                   'p-sortable-column': getColumnProp(column, 'sortable'),
                   'p-highlight': sorted,
                   'p-frozen-column': frozen,
                   'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
-                  'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen
+                  'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen,
+                  [`p-align-${align}`]: !!align
               }),
     columnResizer: 'p-column-resizer p-clickable',
     sortIcon: 'p-sortable-column-icon',
@@ -267,9 +289,9 @@ export const TreeTableBase = ComponentBase.extend({
         propagateSelectionDown: true,
         propagateSelectionUp: true,
         removableSort: false,
-        reorderableColumns: false,
         reorderIndicatorDownIcon: null,
         reorderIndicatorUpIcon: null,
+        reorderableColumns: false,
         resizableColumns: false,
         rowClassName: null,
         rowHover: false,
@@ -282,8 +304,8 @@ export const TreeTableBase = ComponentBase.extend({
         selectionMode: null,
         showGridlines: false,
         sortField: null,
-        sortMode: 'single',
         sortIcon: null,
+        sortMode: 'single',
         sortOrder: null,
         stripedRows: false,
         style: null,