fix: center empty-content slot vertically and horizontally

[ljanner]

Apply flex centering on datatable-scroller when it contains empty-content to ensure vertical and horizontal centering within the body.

What kind of change does this PR introduce? (check one with "x")

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Other... Please describe:

What is the current behavior? (You can also link to an open issue here)

The empty-content slot only uses computed sizes and does not do any vertical or horizontal alignment.

What is the new behavior?

The empty-content slot does vertical and horizontal alignment of the content.

Does this PR introduce a breaking change? (check one with "x")

• Yes
• No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:

[gemini-code-assist]

Code Review

This pull request introduces CSS changes to center the empty content message within the ngx-datatable body and updates the basic empty template example to include a fixed height and vertical scrollbar. The reviewer suggested refining the CSS to handle horizontal scrolling and white-space inheritance to ensure the centering logic works reliably across different configurations, while also noting browser compatibility considerations for the :has() pseudo-class.

[Copilot]

Pull request overview

Centers the datatable’s empty state content by applying flex layout to the body scroller when rendering the empty-content slot, and updates the empty-template demo to better showcase the behavior within a fixed-height, vertically scrollable table.

Changes:

• Add a :has([empty-content]) CSS rule on datatable-scroller to center empty content vertically and horizontally.
• Update the empty-template demo to enable vertical scrolling and set a fixed height.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/app/basic/empty-template.component.ts	Adjusts the demo table height and enables vertical scrolling to demonstrate centering.
projects/ngx-datatable/src/lib/components/body/body.component.scss	Adds a :has([empty-content]) rule to flex-center projected empty content inside the scroller.

Comments suppressed due to low confidence (1)

projects/ngx-datatable/src/lib/components/body/body.component.scss:25

• This rule sets display: flex on datatable-scroller to vertically center its children. However, datatable-scroller may have an inline height set via [scrollHeight] (e.g., virtualization/external virtual scrolling), which can be much larger than the viewport. In that case, centering occurs within the large scroller height and can push the empty content far out of view at scrollTop=0. Consider centering relative to the body viewport instead (e.g., apply flex styles to the scroll container for the empty state, or avoid applying centering when scrollHeight is set).

  &:has([empty-content]) {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.