Fixed #2572 - Add align and alignHeader property to Column

primefaces · Jan 10, 2022 · c000470 · c000470
1 parent f67dd3f
commit c000470
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 2 deletions.
diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
@@ -16,6 +16,8 @@ type ColumnSortOrderType = 1 | 0 | -1 | undefined | null;
 
 type ColumnDataType = 'text' | 'numeric' | 'date' | string;
 
+type ColumnAlignType = 'left' | 'right' | 'center' | undefined | null;
+
 type ColumnAlignFrozenType = 'left' | 'right';
 
 type ColumnFilterOperatorType = 'and' | 'or';
@@ -200,6 +202,8 @@ export interface ColumnProps {
     maxConstraints?: number;
     filterMenuClassName?: string;
     filterMenuStyle?: object;
+    align?: ColumnAlignType;
+    alignHeader?: ColumnAlignType;
     alignFrozen?: ColumnAlignFrozenType;
     hidden?: boolean;
     onFilterClear?(): void;

diff --git a/components/lib/column/Column.js b/components/lib/column/Column.js
@@ -35,6 +35,8 @@ export class Column extends Component {
         maxConstraints: 2,
         filterMenuClassName: null,
         filterMenuStyle: null,
+        align: null,
+        alignHeader: null,
         alignFrozen: 'left',
         hidden: false,
         onFilterClear: null,
@@ -108,6 +110,8 @@ export class Column extends Component {
         maxConstraints: PropTypes.number,
         filterMenuClassName: PropTypes.string,
         filterMenuStyle: PropTypes.object,
+        align: PropTypes.string,
+        alignHeader: PropTypes.string,
         alignFrozen: PropTypes.string,
         hidden: PropTypes.bool,
         onFilterClear: PropTypes.func,

diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
@@ -508,6 +508,7 @@ export class BodyCell extends Component {
         const body = this.getColumnProp('body');
         const editor = this.getColumnProp('editor');
         const frozen = this.getColumnProp('frozen');
+        const align = this.getColumnProp('align');
         const value = this.resolveFieldData();
         const cellClassName = ObjectUtils.getPropValue(this.props.cellClassName, value, { props: this.props.tableProps, rowData: this.props.rowData, column: this.props.column });
         const className = classNames(this.getColumnProp('bodyClassName'), this.getColumnProp('class'), cellClassName, {
@@ -517,6 +518,7 @@ export class BodyCell extends Component {
             'p-frozen-column': frozen,
             'p-selectable-cell': this.props.allowCellSelection,
             'p-highlight': cellSelected,
+            [`p-align-${align}`]: !!align
         });
         const style = this.getStyle();
         const title = this.props.responsiveLayout === 'stack' && <span className="p-column-title">{ObjectUtils.getJSXElement(header, { props: this.props.tableProps })}</span>;

diff --git a/components/lib/datatable/DataTable.css b/components/lib/datatable/DataTable.css
@@ -313,3 +313,25 @@
     top: 0;
     left: 0;
 }
+
+/* Alignment */
+.p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,
+.p-datatable .p-datatable-tbody > tr > td.p-align-left,
+.p-datatable .p-datatable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+}
+
+.p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,
+.p-datatable .p-datatable-tbody > tr > td.p-align-right,
+.p-datatable .p-datatable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+}
+
+.p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,
+.p-datatable .p-datatable-tbody > tr > td.p-align-center,
+.p-datatable .p-datatable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+}
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -611,6 +611,10 @@ export class DataTable extends Component {
                         .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}) {
                             flex: 0 0 ${width}px;
                         }
+
+                        .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                            flex: 0 0 ${width}px;
+                        }
                     `
                 });
 

diff --git a/components/lib/datatable/FooterCell.js b/components/lib/datatable/FooterCell.js
@@ -61,8 +61,10 @@ export class FooterCell extends Component {
 
     render() {
         const style = this.getStyle();
+        const align = this.getColumnProp('align');
         const className = classNames(this.getColumnProp('footerClassName'), this.getColumnProp('className'), {
-            'p-frozen-column': this.getColumnProp('frozen')
+            'p-frozen-column': this.getColumnProp('frozen'),
+            [`p-align-${align}`]: !!align
         });
         const colSpan = this.getColumnProp('colSpan');
         const rowSpan = this.getColumnProp('rowSpan');

diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
@@ -293,14 +293,16 @@ export class HeaderCell extends Component {
         const isSortableDisabled = this.isSortableDisabled();
         const sortMeta = this.getSortMeta();
         const style = this.getStyle();
+        const align = this.getColumnProp('alignHeader') || this.getColumnProp('align');
         const className = classNames(this.getColumnProp('headerClassName'), this.getColumnProp('className'), {
             'p-sortable-column': this.getColumnProp('sortable'),
             'p-resizable-column': this.props.resizableColumns,
             'p-highlight': sortMeta.sorted,
             'p-frozen-column': this.getColumnProp('frozen'),
             'p-selection-column': this.getColumnProp('selectionMode'),
             'p-sortable-disabled': this.getColumnProp('sortable') && isSortableDisabled,
-            'p-reorderable-column': this.props.reorderableColumns && this.getColumnProp('reorderable')
+            'p-reorderable-column': this.props.reorderableColumns && this.getColumnProp('reorderable'),
+            [`p-align-${align}`]: !!align
         });
         const tabIndex = this.getColumnProp('sortable') && !isSortableDisabled ? this.props.tabIndex : null;
         const colSpan = this.getColumnProp('colSpan');