feat: support bulk actions via summary row directive

[chintankavathia]

Add DatatableSummaryRowDirective ([ngx-datatable-summary-row]) that allows rendering a bulk actions bar in the summary row position. When rows are selected, users can project action controls (e.g. delete, export) that appear as a sticky row at the top of the datatable body.

The directive reuses the existing summary row infrastructure, extending it with a template input that bypasses per-column computation and renders the provided content directly.

Usage:

<ngx-datatable [rows]="rows" selectionType="checkbox" [(selected)]="selected">
  [@if](https://github.com/if) (selected.length) {
    <ng-template ngx-datatable-summary-row>
      <span>{{ selected.length }} selected</span>
      <button (click)="delete()">Delete</button>
    </ng-template>
  }
</ngx-datatable>

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)

What is the new behavior?

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]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the ngx-datatable library by introducing a dedicated component for handling bulk actions. The new ngx-datatable-bulk-actions-row component provides a sticky, customizable area that appears when rows are selected, allowing users to perform actions like export or delete on multiple items. This feature improves user experience by centralizing bulk operations and providing clear feedback on selected items.

Highlights

• New Bulk Actions Row Component: Introduced a new ngx-datatable-bulk-actions-row component that provides a sticky row at the top of the datatable body for displaying bulk action controls when rows are selected.
• Demo Example: Added a new demo example showcasing the usage of the bulk actions row with checkbox selection and interactive action buttons (Export, Delete, Cancel).
• End-to-End Tests: Included new Playwright end-to-end tests to verify the conditional visibility of the bulk actions row based on the selection state of datatable rows.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new DataTableBulkActionsRowComponent to the ngx-datatable library, providing a sticky row for displaying bulk action controls when table rows are selected. The changes include the creation of the new component, its integration into the datatable's body and main component, and updates to the public API. A new demo component, BulkActionsSelectionComponent, has been added to showcase this functionality, along with corresponding Playwright E2E tests and a visual snapshot. Feedback suggests improving the styling of the bulk actions row to avoid tight coupling with summary row styles and converting the selected property in the demo component to an Angular Signal for consistency and to leverage modern Angular practices.

[spike-rabbit]

What is difference between this and the summary row?

[chintankavathia]

What is difference between this and the summary row?

summary row is designed to render same number of cells as defined by columns config. user needs to pass summaryCellTemplate on each column config in order to render something customized and they remain within that particular column size. bulk actions on the other hand needs to be rendered irrespective of column cells.

[spike-rabbit]

I had chat with @fh1ch we both don't like to call it bulk actions, as technically this "row" is not restricted to some element pattern.

What this PR provides is basically still a summary, just column independent.
So renaming the directive to ngx-datatable-summary-row and reusing the existing classes, would be better.

[Copilot]

Pull request overview

This PR extends the datatable’s existing “summary row” feature to support a custom, sticky template (used to implement a bulk-actions bar shown when rows are selected), and wires it into the demo app and Playwright coverage.

Changes:

• Add ngx-datatable-summary-row directive and plumb its TemplateRef from DatatableComponent → DataTableBodyComponent → DataTableSummaryRowComponent.
• Update DataTableSummaryRowComponent to render custom template content (and add sticky styling/tests).
• Add a new selection demo route + Playwright e2e coverage and snapshot for the bulk actions example.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/app/selection/selection-bulk-actions.component.ts	New demo showing a bulk actions bar rendered via the summary-row template when selection is non-empty.
src/app/app.component.html	Adds nav link to the new bulk actions selection demo.
src/app/app-routing.module.ts	Registers a lazy-loaded route for the new bulk actions selection demo.
projects/ngx-datatable/src/public-api.ts	Exposes the new summary-row directive as part of the public API.
projects/ngx-datatable/src/lib/ngx-datatable.module.ts	Makes the new directive available via NgxDatatableModule.
projects/ngx-datatable/src/lib/components/datatable.component.ts	Adds a content query for the new directive so the template can be passed down.
projects/ngx-datatable/src/lib/components/datatable.component.html	Passes the queried template into the body component.
projects/ngx-datatable/src/lib/components/body/summary/summary-row.directive.ts	Introduces the ngx-datatable-summary-row directive for providing a custom summary-row template.
projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts	Adds template-based rendering path + sticky class behavior to the summary row component.
projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.spec.ts	Adds unit tests asserting template rendering and sticky class behavior.
projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.scss	Adds sticky positioning styles for the template-based summary row.
projects/ngx-datatable/src/lib/components/body/body.component.ts	Renders the summary row when either computed summary is enabled or a template is provided; forwards the template input.
playwright/e2e/selection.spec.ts	Adds e2e coverage ensuring the bulk actions bar is hidden/shown based on selection and runs visual/a11y checks.
playwright/snapshots/e2e/selection.spec.ts-snapshots/bulk-actions-selection--bulk-actions-single-selection-chromium-linux.png	Adds a snapshot for the bulk actions selection state.

---

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