feat: add action align & columnWidth for actions

[Sobyt483]

What changed

• Actions column is now right-aligned Edit and delete
  buttons are grouped under group.name: 'actions' content
  alignment is controlled via uiSettings.align: 'end', which maps to
  justify-content: flex-end on the cell's flex wrapper.

• First-field rule for group columns. When multiple TableFieldDefinition
  entries share the same group.name, the first field in the array is the
  primary field — its uiSettings.columnWidth and uiSettings.align set the
  column-level configuration. Subsequent fields in the group inherit this
  layout; their own columnWidth/align values are ignored. This means custom
  action buttons placed before the built-in edit/delete actions will naturally
  own the column width.

• UI5 column width constraint documented. uiSettings.columnWidth must be
  a valid CSS <length> (px, rem, em, %, calc()). Sizing keywords
  like min-content and max-content are silently rejected by UI5's internal
  validation and cause the column to fall back to equal-stretch distribution.
  The declarative-table docs now call this out explicitly.

• uiSettings.align ('start' | 'center' | 'end') is a new property on
  UiSettings. It works for both standalone columns and group columns (driven
  by the first field).

Summary by CodeRabbit

• New Features

  • Added cell content alignment control (start, center, end) for table cells.
  • Added column width configuration for table headers.
  • Enhanced action buttons with support for custom actions and improved configuration options.

• Documentation

  • Expanded documentation with new table component configuration details and examples.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds an optional align property to column UiSettings and template/CSS support to apply uiSettings.columnWidth and horizontal alignment for grouped and non-grouped table cells. The DeclarativeTableCard sets action columns to align: 'end'. Storybook stories and documentation demonstrate custom action buttons and the grouped-columns “first field wins” rule; tests updated to use group-name-based test-ids.

Changes

Column Alignment and Width Configuration

Layer / File(s)	Summary
Type definition for column alignment projects/ngx/declarative-ui/models/ui-definition.ts	UiSettings interface extended with optional align?: 'start' | 'center' | 'end' to allow column-level horizontal alignment.
Template and CSS: apply columnWidth and align projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html, projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.scss	Grouped header cells bind [width]="column.uiSettings?.columnWidth ?? 'auto'"; grouped and non-group body cells are wrapped in a .flex container with justifyContent driven by column.uiSettings?.align and column.group.multiline; grouped sub-field test-ids now include column.group.name.
Actions column wiring projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts	addActionsColumn now sets uiSettings.align: 'end' for built-in edit and delete action columns to right-align button content; small formatting tweak to buildInitialValues.
Stories demonstrating actions and narrow column projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts, projects/ngx/declarative-ui/stories/declarative-table.stories.ts	Import UI5 detail-view icon and add WithCustomActions, WithTextActions, and WithNarrowActionsColumn stories showcasing icon/text actions and usage of uiSettings.columnWidth; update Angular story wrapper to import DeclarativeTable and render mfp-declarative-table.
Documentation: column width, align, and actions column docs/declarative-table.md, docs/declarative-table-card.md	Document uiSettings.columnWidth (UI5 <length>), uiSettings.align mapping to flex justify-content, grouped-columns “first field wins” behavior, and a new “Actions column” section describing built-in buttons, customization, custom actions, and width control.
Tests: grouped test-id updates projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts	Updated tests to query grouped headers and grouped sub-field cells by group.name-based test-ids and adjusted assertions accordingly.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit nudges columns straight and neat,
With flexy paws it shapes each seat,
Align to end, center, or the start,
Actions sit snug, each work of art,
🐇✨📊

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main changes: adding align and columnWidth features to the actions column, which aligns with the core modifications across component files, documentation, and stories.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch actions-allignement

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts`:
- Around line 237-239: The hardcoded columnWidth: '90px' in the edit-action
config causes text buttons to be truncated; update the code that constructs the
edit action config (the object with keys columnWidth, displayAs, align) to only
set columnWidth when needed (e.g., for icon/buttons) or set it to 'auto' /
undefined for text actions—use displayAs to decide: if displayAs === 'text' omit
columnWidth (or set 'auto'), otherwise keep the fixed width; adjust the
action-building logic so columnWidth is conditional based on displayAs.

In
`@projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html`:
- Around line 33-63: The grouped fields wrapper currently forces a horizontal
layout via the hardcoded class "flex", breaking column.group.multiline; update
the wrapper (the div with class "flex" that binds [style.justifyContent]) to
only apply the flex display when column.group.multiline is false (e.g. change to
a conditional class or binding such as [class.flex]="!column.group.multiline" or
set display style conditionally), so when column.group.multiline is true the
fields render stacked on separate lines while preserving the existing logic for
rendering fields (column.group.fields, columnTrackBy) and delimiters.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62ebfb5e-dd93-476e-a189-940fd4b2cf16

📥 Commits

Reviewing files that changed from the base of the PR and between 9ac3460 and 4a23fd5.

📒 Files selected for processing (6)

• docs/declarative-table.md
• projects/ngx/declarative-ui/models/ui-definition.ts
• projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts
• projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts
• projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html
• projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.scss

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts`:
- Around line 437-439: The first field in the "actions" grouped column for the
DeclarativeTableCard story is missing alignment and causing the whole actions
group to render left-aligned; update the story's actions group definition by
adding align: 'end' to the first field of that actions group (the same field
block that currently contains uiSettings: { columnWidth: '90px' }) so the
grouped-column alignment is right-aligned consistently.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0acf885f-3f7e-48e8-ac2f-93c199b0e476

📥 Commits

Reviewing files that changed from the base of the PR and between 4a23fd5 and c1f081f.

📒 Files selected for processing (7)

• docs/declarative-table-card.md
• projects/ngx/declarative-ui/stories/declarative-table-card.stories.ts
• projects/ngx/declarative-ui/stories/declarative-table.stories.ts
• projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts
• projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html
• projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.scss
• projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts

✅ Files skipped from review due to trivial changes (1)

• docs/declarative-table-card.md

🚧 Files skipped from review as they are similar to previous changes (1)

• projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html