diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js index da135bdf9e..4afd2463be 100644 --- 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,7 +193,8 @@ 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({ @@ -181,7 +202,8 @@ const classes = { '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,