Fix #5315: Treetable add alignment (#5317)

primefaces · Nov 24, 2023 · b256a21 · b256a21
1 parent 37e2805
commit b256a21
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
@@ -132,6 +132,28 @@ 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 +173,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', {
@@ -172,15 +194,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',
@@ -266,9 +290,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,
@@ -281,8 +305,8 @@ export const TreeTableBase = ComponentBase.extend({
         selectionMode: null,
         showGridlines: false,
         sortField: null,
-        sortMode: 'single',
         sortIcon: null,
+        sortMode: 'single',
         sortOrder: null,
         stripedRows: false,
         style: null,

diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
@@ -283,6 +283,7 @@ export const TreeTableHeader = React.memo((props) => {
             const multipleSorted = multiSortMetaData !== null;
             const sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
             const frozen = getColumnProp(column, 'frozen');
+            const align = getColumnProp(column, 'alignHeader') || getColumnProp(column, 'align');
             let sortOrder = 0;
 
             if (singleSorted) sortOrder = props.sortOrder;
@@ -298,7 +299,7 @@ export const TreeTableHeader = React.memo((props) => {
             const resizer = createResizer(column);
             const headerCellProps = mergeProps(
                 {
-                    className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted })),
+                    className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted, align })),
                     style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
                     tabIndex: getColumnProp(column, 'sortable') ? props.tabIndex : null,
                     onClick: (e) => onHeaderClick(e, column),
@@ -326,14 +327,28 @@ export const TreeTableHeader = React.memo((props) => {
                 })
             );
 
+            const headerContentProps = mergeProps(
+                {
+                    className: cx('headerContent')
+                },
+                getColumnPTOptions('headerContent')
+            );
+
+            const header = (
+                <div {...headerContentProps}>
+                    {header}
+                    {title}
+                    {sortIconElement}
+                    {sortBadge}
+                    {filterElement}
+                </div>
+            );
+
             return (
                 <React.Fragment key={column.columnKey || column.field || options.index}>
                     <th ref={headerCellRef} {...headerCellProps}>
                         {resizer}
-                        {title}
-                        {sortIconElement}
-                        {sortBadge}
-                        {filterElement}
+                        {header}
                     </th>
                     {hasTooltip && <Tooltip target={headerCellRef} content={headerTooltip} {...getColumnProp(column, 'headerTooltipOptions')} unstyled={props.unstyled} />}
                 </React.Fragment>