Skip to content

Table scroll#123

Open
Sobyt483 wants to merge 3 commits into
mainfrom
table-scroll
Open

Table scroll#123
Sobyt483 wants to merge 3 commits into
mainfrom
table-scroll

Conversation

@Sobyt483
Copy link
Copy Markdown
Contributor

@Sobyt483 Sobyt483 commented May 15, 2026

Summary by CodeRabbit

  • New Features

    • Table now supports two pagination modes: button-based "Load More" and scroll-based loading
    • Configurable table height for scroll-based pagination
    • Custom "Load More" button text
    • Sticky header behavior when using scroll mode
  • Documentation

    • Updated table configuration documentation with new pagination and sizing options

Review Change Stack

Sobyt483 added 3 commits May 15, 2026 16:09
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
@Sobyt483 Sobyt483 requested review from a team as code owners May 15, 2026 12:26
@Sobyt483 Sobyt483 self-assigned this May 15, 2026
@Sobyt483 Sobyt483 added the enhancement New feature or request label May 15, 2026
@Sobyt483 Sobyt483 moved this to In review in OpenMFP Development May 15, 2026
@Sobyt483 Sobyt483 enabled auto-merge (squash) May 15, 2026 12:30
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 15, 2026

📝 Walkthrough

Walkthrough

This PR adds configurable pagination growth modes and height styling to DeclarativeTable. New input signals control whether load-more uses a button or scrolling, enable sticky headers with scroll mode, and customize the button text. The feature is integrated across the component model, template, tests, table-card wrapper, documentation, and Storybook examples.

Changes

Pagination Growth Mode & Height Feature

Layer / File(s) Summary
Config interfaces and type contracts
projects/ngx/declarative-ui/table-card/models/configs.ts, docs/declarative-table-card.md, docs/declarative-table.md
TableConfig interface extended with optional height, growMode ('Scroll' | 'Button'), and loadMoreButtonText fields. New API inputs documented with examples.
Component input signals and template bindings
projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.ts, projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html
DeclarativeTable adds three input signals: growMode (defaults 'Button'), loadMoreButtonText (defaults 'Load More'), and height. Template conditionally applies height as inline style, controls sticky header based on Scroll mode + height presence, and binds mode/text to ui5-table-growing.
Component test coverage for inputs and behavior
projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts
Test harness extended to wire new inputs. Test suites verify height styling, growMode default and sticky header conditional logic, and loadMoreButtonText passthrough to the growing element when hasMore is true.
TableCard component integration and passthrough
projects/ngx/declarative-ui/table-card/declarative-table-card.component.html, projects/ngx/declarative-ui/table-card/declarative-table-card.component.spec.ts
TableCard template forwards new config properties to inner mfp-declarative-table. Tests verify values are correctly exposed through tableConfig() signal.
API and usage documentation
docs/declarative-table.md
Pagination section expanded with detailed load-more strategy descriptions and code examples showing both Button and Scroll modes, including height configuration for scroll variant.
Storybook story wrapper and pagination examples
projects/ngx/declarative-ui/stories/declarative-table.stories.ts
Wrapper migrated from web component to Angular DeclarativeTable with input/output bindings. Meta updated with growMode control. Two new stories (Pagination_Scroll and Pagination_Button) demonstrate both growth modes. Existing story descriptions reformatted for consistency.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A table grows two ways, we now declare,
With scrolling grace or buttons bright and fair—
Sticky headers rise when heights align,
Each growth mode customized, the docs now shine!
The wrapper hops to Angular's embrace,
Stories show the scrolling and button grace. 🎉

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'Table scroll' is partially related to the changeset. It refers to one aspect of the changes (scroll-based pagination via growMode), but doesn't capture the full scope which includes button-based pagination, configurable height, and load-more button text customization across multiple files. Consider a more comprehensive title like 'Add configurable table growth modes (scroll and button pagination)' to better reflect all changes in the PR.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
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.

✏️ 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 table-scroll

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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts (1)

17-17: 💤 Low value

Remove redundant | undefined from optional property.

The ? operator already makes the property optional (can be undefined), so explicitly adding | undefined to the type union is redundant.

♻️ Simplified type
-  growMode?: 'Scroll' | 'Button' | undefined;
+  growMode?: 'Scroll' | 'Button';
🤖 Prompt for 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.

In
`@projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts`
at line 17, The type declaration for the optional property growMode in the
DeclarativeTable spec is redundant because the ? already permits undefined;
update the declaration from "growMode?: 'Scroll' | 'Button' | undefined" to
"growMode?: 'Scroll' | 'Button'" in the declarative-table.component.spec.ts
(look for the growMode property) so the union no longer explicitly includes
undefined.
🤖 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.stories.ts`:
- Around line 118-120: The onPageSizeChange handler currently types its
parameter as CustomEvent<number> and uses limit.detail, which is wrong because
DeclarativeTable emits the number directly; change the parameter signature of
onPageSizeChange to accept a plain number (e.g., limit: number) and update the
body to use the number directly (set this.paginationLimit = limit and slice
this.resources using that value) so it no longer accesses .detail; update any
related references to onPageSizeChange to match the new parameter type if
necessary.

In
`@projects/ngx/declarative-ui/table-card/declarative-table-card.component.spec.ts`:
- Around line 791-814: Replace the unsafe (component as any) casts in the three
specs by defining a narrow test accessor type for the component that exposes the
tableConfig() signal (e.g., an interface or type alias like TestAccessor {
tableConfig(): ReturnType<DeclarativeTableCardComponent['tableConfig']> }) and
use that type when retrieving the component from setup (const { component } =
setup(...) as unknown as TestAccessor) or by creating a small helper
getTestAccessor(component) that returns the typed accessor; update the three
assertions to call tableConfig() through that typed accessor so the inline
ESLint disables and any casts are removed while keeping the same expectations
for growMode, height and loadMoreButtonText.

In
`@projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.ts`:
- Around line 50-51: The inputs growMode and loadMoreButtonText currently
include | undefined which allows callers to explicitly pass undefined and
override the provided defaults; remove the | undefined from their generic types
so the defaults are enforced (change input<'Scroll' | 'Button' |
undefined>('Button') to input<'Scroll' | 'Button'>('Button') and input<string |
undefined>('Load More') to input<string>('Load More')), update any related type
annotations or usages referencing growMode or loadMoreButtonText if needed to
match the non-undefined types, and run tests/compile to ensure no downstream
type conflicts.

---

Nitpick comments:
In
`@projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts`:
- Line 17: The type declaration for the optional property growMode in the
DeclarativeTable spec is redundant because the ? already permits undefined;
update the declaration from "growMode?: 'Scroll' | 'Button' | undefined" to
"growMode?: 'Scroll' | 'Button'" in the declarative-table.component.spec.ts
(look for the growMode property) so the union no longer explicitly includes
undefined.
🪄 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: 1cb438bc-d528-497c-a5cc-3f80f0cdfc56

📥 Commits

Reviewing files that changed from the base of the PR and between c6951f9 and 61ef265.

📒 Files selected for processing (9)
  • docs/declarative-table-card.md
  • docs/declarative-table.md
  • projects/ngx/declarative-ui/stories/declarative-table.stories.ts
  • projects/ngx/declarative-ui/table-card/declarative-table-card.component.html
  • projects/ngx/declarative-ui/table-card/declarative-table-card.component.spec.ts
  • projects/ngx/declarative-ui/table-card/models/configs.ts
  • projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html
  • projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts
  • projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.ts

Comment thread projects/ngx/declarative-ui/stories/declarative-table.stories.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

Status: In review

Development

Successfully merging this pull request may close these issues.

Table card component should have possibility to set it's height Extend the declarative table growing functionality with scroll

1 participant