playbook_ui 14.21.2.pre.alpha.PLAY2020sidebarfilterPOC8265 → 14.21.2.pre.alpha.PLAY2241tablestickycolumnsdatanotids8357

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -63,11 +63,30 @@
     width: 100%;
   }
 
-  // Virtualized table styles
+  // Virtualized Table and Rows for Infinite Scroll
+  scrollbar-gutter: stable right-edges;
+  .virtualized-header-row-header {
+    width: 100% !important;
+    .table-header-cells:first-child {
+      min-width: 180px;
+    }
+  }
+
+  .virtualized-footer {
+    width: 100% !important;
+    td {
+      border-bottom-left-radius: 4px !important;
+      border-bottom-right-radius: 4px !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .virtualized-table-row {
     display: table !important;
     table-layout: fixed !important;
-    width: 100% !important;
+    box-sizing: border-box !important;
 
     td {
       display: table-cell !important;
@@ -104,7 +123,7 @@
 
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
-    }
+  }
   
 
   .row-selection-actions-card {
@@ -193,7 +212,6 @@
 
     // Fix virtualized row borders
     tr.virtualized-table-row {
-      border-bottom: 1px solid $border_light;
 
       &.bg-silver {
         td:first-child {
@@ -606,6 +624,16 @@
         td.sticky-left {
           border-right: 1px solid $border_light !important;
         }
+        // Virtualized Table in Responsive Styles
+        .virtualized-header,
+        .virtualized-header-row-header,
+        .virtualized-table-row,
+        .virtualized-footer {
+          border-right: 1px solid $border_light !important;
+          .table-header-cells:first-child {
+            box-shadow: 0 0 10px 0 rgba($shadow, 0.16) !important;
+          }
+        }
       }
     }
   }
@@ -621,6 +649,23 @@
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
 
+  // For Rails, we can't target the &:last-child since collapsed rows are display: none;
+  // With JS, we add a .last-visible-row class and add rounded corners to bottom row
+  .last-visible-row {
+    td, .pb_table_td {
+      border-width: 0 0 1px 0;
+
+      &:first-child {
+        border-radius: 0 0 0 4px;
+        border-width: 0 0 1px 1px;
+      }
+      &:last-child {
+        border-radius: 0 0 4px 0;
+        border-width: 0 1px 1px 0;
+      }
+    }
+  }
+
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -266,6 +266,29 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Visibility flag for action bar
   const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
+  // The actual Main <Table /> element
+  const tableElement = (
+    <Table
+        className={`${loading ? "content-loading" : ""}`}
+        dark={dark}
+        dataTable
+        numberSpacing="tabular"
+        responsive="none"
+        {...tableProps}
+    >
+      {children ? (
+        children
+      ) : (
+        <>
+          <TableHeader />
+          <TableBody   
+              isFetching={isFetching}
+          />
+        </>
+      )}
+    </Table>
+  )
+
   return (
     <>
       {/* Top Pagination */}
@@ -322,6 +345,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             table={table}
             tableContainerRef={tableWrapperRef}
             toggleExpansionIcon={toggleExpansionIcon}
+            totalAvailableCount={fullData.length}
             virtualizedRows={virtualizedRows}
         >
           <React.Fragment>
@@ -333,24 +357,14 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
-            {/* Main Table */}
-            <Table
-                className={`${loading ? "content-loading" : ""}`}
-                dark={dark}
-                dataTable
-                numberSpacing="tabular"
-                responsive="none"
-                {...tableProps}
-            >
-              {children ? (
-                children
-              ) : (
-                <>
-                  <TableHeader />
-                  <TableBody />
-                </>
-              )}
-            </Table>
+            {/* Virtualized wrapper div only if virtualizedRows is true */}
+            {virtualizedRows ? (
+              <div style={{ overflow: 'auto', width: '100%' }}>
+                {tableElement}
+              </div>
+            ) : (
+              tableElement
+            )}
           </React.Fragment>
         </AdvancedTableProvider>
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -572,4 +572,83 @@ test("pinnedRows prop renders pinned rows at top", () => {
   const firstPinnedRow = pinnedRows[0]
   expect(firstPinnedRow).toHaveStyle("position: sticky")
   expect(firstPinnedRow).toHaveStyle("background-color: white")
-})
+})
+
+test("columnStyling.headerAlignment aligns header as expected", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { headerAlignment: "left" },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const headerCell = screen.getByText("New Enrollments").closest("th");
+  expect(headerCell).toHaveAttribute("align", "left");
+});
+
+test("columnStyling.cellAlignment sets each <td> align attribute as expected", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { cellAlignment: "left" },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveAttribute("align", "left");
+});
+
+test("renders virtualized table rows and header", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA_WITH_ID}
+        virtualizedRows
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const virtualizedHeader = kit.querySelector('.virtualized-header-row-header')
+  expect(virtualizedHeader).toBeInTheDocument()
+
+  const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
+  expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
+})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb

@@ -55,4 +55,4 @@
   },
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -0,0 +1,51 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnStyling = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{headerAlignment: "left", cellAlignment: "left"},
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{headerAlignment: "center", cellAlignment: "center"},
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStyling

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -0,0 +1,7 @@
+The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+
+1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+`columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import MOCK_DATA from "./advanced_table_mock_data.json";
+
+const AdvancedTableColumnStylingColumnHeaders = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+              columnStyling:{headerAlignment: "left", cellAlignment: "left"},
+
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              columnStyling:{headerAlignment: "center", cellAlignment: "center"},
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  );
+};
+
+export default AdvancedTableColumnStylingColumnHeaders

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md

@@ -0,0 +1 @@
+`columnStyling` can also be used with the multi column logic. When used in this way, `columnStyling` must be used within the leaf column's columnDefinition as shown.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb

@@ -0,0 +1,63 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+            column_styling:{header_alignment:"left", cell_alignment:"left"}
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+            column_styling:{header_alignment:"center", cell_alignment:"center"}
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md

@@ -0,0 +1 @@
+`column_styling` can also be used with the multi column logic. When used in this way, `column_styling` must be used within the leaf column's column_definition as shown.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -0,0 +1,38 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling:{header_alignment:"left", cell_alignment:"left"}
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      column_styling:{header_alignment:"center", cell_alignment:"center"}
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md

@@ -0,0 +1,7 @@
+The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+
+1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
+
+`column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md

@@ -0,0 +1,3 @@
+The `virtualizedRows` boolean prop enables the rendering of a virtualized table using [Tanstack's Virtualizer Library](https://tanstack.com/virtual/v3/docs/api/virtualizer) with infinite scroll capabilities for large data sets.
+
+**Note:** Not all Advanced Table props work perfectly with the Virtualized Table - for complex table configurations with many added features or controls consider using the [Pagination](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination) version instead. Additionally, it is a known issue that due to the use of absolute positioning for the virtualized header, it does not render in Safari.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
+<%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx

@@ -47,14 +47,14 @@ const CustomActions = () => {
       <CircleIconButton
           icon="file-csv"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
+            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be exported!')
           }
           variant="link"
       />
       <CircleIconButton
           icon="trash-alt"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
+            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be deleted!')
           }
           variant="link"
         />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb

@@ -88,10 +88,11 @@ actions = [
     if (!selectedRowIds || selectedRowIds.length === 0) {
       alert('No Selection Made');
     } else {
+      const selectedRowsString = selectedRowIds.join(', ');
       if (actionType === 'export') {
-        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+        alert('Row ids ' + selectedRowsString + ' will be exported!');
       } else if (actionType === 'delete') {
-        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+        alert('Row ids ' + selectedRowsString + ' will be deleted!');
       }
     }
   };

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -19,6 +19,8 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  # - advanced_table_column_styling_rails: Column Styling
+  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -57,3 +59,6 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_column_styling: Column Styling
+  - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_infinite_scroll: Infinite Scroll

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -34,3 +34,6 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
+export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
+export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
+export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -266,6 +266,25 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.updateTableSelectedRowsAttribute();
       });
     }
+    this.addBorderRadiusOnLastVisibleRow()
+  }
+
+  addBorderRadiusOnLastVisibleRow() {
+    const parentElement = this.element.closest('.pb_advanced_table');
+    
+    const table = document.getElementById(parentElement.id);
+
+    if (table) {
+      const visibleRows = table.querySelectorAll('tr.is-visible, tr:not(.toggle-content)');
+  
+      visibleRows.forEach(row => row.classList.remove('last-visible-row'));
+  
+      const lastVisibleRow = visibleRows[visibleRows.length - 1];
+
+      if (lastVisibleRow) {
+        lastVisibleRow.classList.add('last-visible-row');
+      }
+    }
   }
 
 
@@ -367,6 +386,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       row.classList.toggle("bg-silver", !isVisible);
       row.classList.toggle("bg-white", isVisible);
     }
+
+    this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>