diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
index 68f57eaec..26ae8a1b8 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -107,6 +107,8 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
[rows]="rows"
[columns]="columns"
[template]="summaryRowTemplate()"
+ [animate.enter]="summaryRowAnimateEnter()"
+ [animate.leave]="summaryRowAnimateLeave()"
/>
}
}
}
@@ -295,6 +299,8 @@ export class DataTableBodyComponent implements OnInit, O
readonly summaryPosition = input.required();
readonly summaryHeight = input.required();
readonly summaryRowTemplate = input>();
+ readonly summaryRowAnimateEnter = input();
+ readonly summaryRowAnimateLeave = input();
readonly rowDraggable = input();
readonly rowDragEvents = input.required>();
readonly disableRowCheck = input<(row: TRow) => boolean | undefined>();
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html
index c0865d26f..8402ae593 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.html
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.html
@@ -60,6 +60,8 @@
[summaryHeight]="summaryHeight()"
[summaryPosition]="summaryPosition()"
[summaryRowTemplate]="summaryRowDirective()?.template"
+ [summaryRowAnimateEnter]="summaryRowAnimateEnter()"
+ [summaryRowAnimateLeave]="summaryRowAnimateLeave()"
[verticalScrollVisible]="verticalScrollVisible"
[ariaRowCheckboxMessage]="messages().ariaRowCheckboxMessage ?? 'Select row'"
[ariaGroupHeaderCheckboxMessage]="
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
index bfe2ed77f..45319d5db 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.ts
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -397,6 +397,18 @@ export class DatatableComponent
*/
readonly summaryPosition = input('top');
+ /**
+ * CSS class to apply when the summary row enters (appears).
+ * Use this to customize the enter animation.
+ */
+ readonly summaryRowAnimateEnter = input();
+
+ /**
+ * CSS class to apply when the summary row leaves (disappears).
+ * Use this to customize the leave animation.
+ */
+ readonly summaryRowAnimateLeave = input();
+
/**
* A function you can use to check whether you want
* to disable a row. Example: