playbook_ui 14.21.1 → 14.21.2.pre.alpha.PLAY18938263

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0737c92ce3c158f4a4d593ab763d9a708bf1ea647fdaea8476164b892b257b5
-  data.tar.gz: b7eadcb56f9e3082b04d22e91e8da3576141e9e84651a5081399dde83de8eac5
+  metadata.gz: 79e1418032e3a7ddebd1c367b0623b34c597d5f3bdd150dcf1b674fc37249634
+  data.tar.gz: 745eed5d73220bcf2599935c70f19a103c52344f640afad7ad9fb0baceba5e79
 SHA512:
-  metadata.gz: 51d6ccdd8b41cf5109dfe7b357c3c839889980d69116018901ae974629aaa96178f9622698e0f331310137b8437b2e3ad82936e1df193829ba613af6aeefeec6
-  data.tar.gz: d03ea7ef7a82b1caa0f1eed79e107cfa287a9d4e47559c562f27958532ccde311c75158d7635f6163357937836185123cdcdaee68a093f9aad35d316d9dbeb5d
+  metadata.gz: 3e048fea08b7564b2886bcad5151b1528a92f55e35bd7661fc058582be2b64851353f9c398634021197e860550ea0f7cb13d0bafefc7e5b1a9bc92ee15c7d431
+  data.tar.gz: a34cc6f295dcf69a9315853f1ba9c079154b83cd4f94e49b06ffbb810d405b522850ebd4673843ae580b862522cd038ddc4acfd4f05aeb3917b06ad61ec80225

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={"start"}
+          justify="start"
           orientation="row"
       >
         {

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -4,6 +4,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
+import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -25,13 +26,15 @@ const TableCellRenderer = ({
   collapsibleTrail = true,
   loading = false,
   stickyLeftColumn,
-  columnPinning
+  columnPinning,
+  columnDefinitions,
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
+  columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
     <>
@@ -49,10 +52,14 @@ const TableCellRenderer = ({
         })();
 
         const { column } = cell;
-        
+
+        // Find the “owning” colDefinition by accessor. Needed for multi column logic
+        const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
+        const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
+
         return (
           <td
-              align="right"
+              align={cellAlignment}
               className={classnames(
                 `${cell.id}-cell position_relative`,
                 isChrome() ? "chrome-styles" : "",
@@ -117,7 +124,6 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
-
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     return (
@@ -137,6 +143,7 @@ export const RegularTableView = ({
       >
         <TableCellRenderer
             collapsibleTrail={collapsibleTrail}
+            columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             loading={loading}
             row={row}
@@ -197,6 +204,7 @@ export const RegularTableView = ({
               )}
               <TableCellRenderer
                   collapsibleTrail={collapsibleTrail}
+                  columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
                   loading={loading}
                   row={row}

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -15,6 +15,7 @@ import Icon from "../../pb_icon/_icon"
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
+import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -45,6 +46,7 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
+    columnDefinitions,
     expanded,
     setExpanded,
     expandByDepth,
@@ -72,6 +74,18 @@ export const TableHeaderCell = ({
       header?.column.getToggleSortingHandler()(event)
     }
   }
+  const alignmentMap: Record<string, "start" | "center" | "end"> = {
+    left: "start",
+    center: "center",
+    right: "end",
+  };
+
+ // Look up the “owning” columnDefinition by accessor. Needed for multi column logic
+ const colDef = header
+   ? findColumnDefByAccessor(columnDefinitions, header.column.id)
+   : undefined
+
+ const headerAlignment =   colDef?.columnStyling?.headerAlignment ?? colDef?.columnStyling?.headerAligment
 
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
@@ -126,9 +140,15 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-  let justifyHeader:justifyTypes;
+  let justifyHeader: justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading) || (header?.index === 0 && isToggleExpansionEnabled)) {
+  if (headerAlignment && alignmentMap[headerAlignment]) {
+    justifyHeader = alignmentMap[headerAlignment];
+  } else if (
+    (header?.index === 0 && hasAnySubRows) ||
+    (header?.index === 0 && inlineRowLoading) ||
+    (header?.index === 0 && isToggleExpansionEnabled)
+  ) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";
@@ -165,7 +185,7 @@ const isToggleExpansionEnabled =
 
   return (
     <th
-        align="right"
+        align={headerAlignment ? headerAlignment : "right"}
         className={cellClassName}
         colSpan={header?.colSpan}
         id={cellId}
@@ -253,8 +273,8 @@ const isToggleExpansionEnabled =
                     tabIndex: 0,
                   },
                 })}
-              justify={header?.index === 0 && enableSorting ? "between" : "none"}
-              paddingLeft={enableSorting ? "xxs" : "xs"}
+              justify={header?.index === 0 && enableSorting ? "between" : headerAlignment ? alignmentMap[headerAlignment] : "none"}
+              paddingLeft={header?.index === 0 ? enableSorting ? "xxs" : "xs" : "none"}
           >
             <div>
               {flexRender(header?.column.columnDef.header, header?.getContext())}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts

@@ -0,0 +1,15 @@
+export const findColumnDefByAccessor = (
+  defs: any[],
+  targetAccessor: string
+): any | undefined => {
+  for (const def of defs) {
+    if (def.accessor === targetAccessor) {
+      return def;
+    }
+    if (Array.isArray(def.columns) && def.columns.length) {
+      const found = findColumnDefByAccessor(def.columns, targetAccessor);
+      if (found) return found;
+    }
+  }
+  return undefined;
+};

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

@@ -39,7 +39,7 @@
       }
 
       -ms-overflow-style: none !important;
-      scrollbar-width: thin !important;
+      scrollbar-width: thin;
       scrollbar-color: #00000033 transparent !important;
   }
 
@@ -410,7 +410,6 @@
 
   // Make sure all horizontal borders use the default border color
   tr, th, td {
-    border-top-color: $border_light !important;
     border-bottom-color: $border_light !important;
   }
 
@@ -633,7 +632,6 @@
 
     // Make sure all horizontal borders use the default border color in dark mode
     tr, th, td {
-      border-top-color: $border_dark !important;
       border-bottom-color: $border_dark !important;
     }
 

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

@@ -572,4 +572,64 @@ 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");
+});

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/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,5 @@ 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

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

@@ -34,3 +34,5 @@ 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'

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 %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -98,6 +98,9 @@ module Playbook
 
             process_columns(col[:columns], rows, current_depth + 1, max_depth)
           else
+            raw_styling       = col[:column_styling] || {}
+            header_alignment  = raw_styling[:header_alignment]
+
             colspan = 1
             rows[current_depth] << {
               label: col[:label],
@@ -105,6 +108,7 @@ module Playbook
               accessor: col[:accessor],
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
+              header_alignment: header_alignment,
             }
           end
         end
@@ -137,6 +141,7 @@ module Playbook
           accessor: col[:accessor],
           label: col[:label] || "",
           sort_menu: col[:sort_menu] || nil,
+          column_styling: col[:column_styling] || {},
         }
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }

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

@@ -6,7 +6,7 @@
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
         <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+            <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
                         <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
@@ -34,7 +34,7 @@
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
+                        <%= pb_rails("flex/flex_item") do %>       
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -80,6 +80,20 @@ module Playbook
         end
       end
 
+      def justify_for(column, index)
+        if index.zero?
+          "start"
+        else
+          case cell_alignment_for(column)
+          when "left"   then "start"
+          when "center" then "center"
+          when "right"  then "end"
+          else
+            "end"
+          end
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)
@@ -103,6 +117,25 @@ module Playbook
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end
+
+      def find_column_def_by_accessor(defs, target_accessor)
+        defs.each do |col|
+          return col if col[:accessor] == target_accessor
+
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
+
+      def cell_alignment_for(column)
+        return nil unless column[:accessor]
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        orig_def[:column_styling][:cell_alignment] if orig_def && orig_def[:column_styling].is_a?(Hash)
+      end
     end
   end
 end