feat(components/ag-grid): add right aligned column type (#2917)

blackbaud · Nov 21, 2024 · 1a874d6 · 1a874d6
1 parent d029b55
commit 1a874d6
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2 deletions.
diff --git a/apps/playground/src/app/components/ag-grid/readonly-grid/readonly-grid.component.ts b/apps/playground/src/app/components/ag-grid/readonly-grid/readonly-grid.component.ts
@@ -66,7 +66,7 @@ export class ReadonlyGridComponent implements OnInit {
     {
       field: 'startDate',
       headerName: 'Start Date',
-      type: SkyCellType.Date,
+      type: [SkyCellType.RightAligned, SkyCellType.Date],
     },
     {
       field: 'endDate',

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts
@@ -454,6 +454,12 @@ export class SkyAgGridService implements OnDestroy {
           cellEditor: SkyAgGridCellEditorNumberComponent,
           headerClass: getHeaderClass(SkyHeaderClass.RightAligned),
         },
+        [SkyCellType.RightAligned]: {
+          cellClassRules: {
+            [SkyCellClass.RightAligned]: cellClassRuleTrueExpression,
+          },
+          headerClass: getHeaderClass(SkyHeaderClass.RightAligned),
+        },
         [SkyCellType.RowSelector]: {
           cellClassRules: {
             [SkyCellClass.RowSelector]: cellClassRuleTrueExpression,

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-class.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-class.ts
@@ -9,6 +9,7 @@ export enum SkyCellClass {
   Invalid = 'sky-ag-grid-cell-invalid',
   Lookup = 'sky-ag-grid-cell-lookup',
   Number = 'sky-ag-grid-cell-number',
+  RightAligned = 'sky-ag-grid-cell-right-aligned',
   RowSelector = 'sky-ag-grid-cell-row-selector',
   Template = 'sky-ag-grid-cell-template',
   Text = 'sky-ag-grid-cell-text',

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts
@@ -66,6 +66,12 @@ export enum SkyCellType {
    * Combines SkyCellType.Number and SkyCellType.Validator, where the value is displayed as a number and passed to a validator function.
    */
   NumberValidator = 'skyCellNumberValidator',
+  /**
+   * **Edit and read-only modes**
+   * <br/>
+   * The header and cells in the column will render right aligned.
+   */
+  RightAligned = 'skyCellRightAligned',
   /**
    * **Edit and read-only modes**
    * <br/>

diff --git a/libs/components/ag-grid/src/lib/styles/_base.scss b/libs/components/ag-grid/src/lib/styles/_base.scss
@@ -319,9 +319,14 @@ ag-grid-angular {
     display: none;
   }
   .sky-ag-grid-cell-number,
-  .sky-ag-grid-cell-currency {
+  .sky-ag-grid-cell-currency,
+  .sky-ag-grid-cell-right-aligned {
     text-align: right;
     padding-right: 12px;
+  }
+
+  .sky-ag-grid-cell-number,
+  .sky-ag-grid-cell-currency {
     font-variant-numeric: tabular-nums;
   }