feat(datagrid): virtual scroll (#1324)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1749

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

.storybook/helpers/elements.data.ts

@@ -5,11 +5,14 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+import { BehaviorSubject } from 'rxjs';
+
 export interface Element {
  name: string;
  symbol: string;
  number: number;
  electronegativity: number;
+ expanded?: boolean;
 }
 
 export const elements: Element[] = [
@@ -132,3 +135,5 @@ export const elements: Element[] = [
  { name: 'Zinc', symbol: 'Zn', number: 30, electronegativity: 1.65 },
  { name: 'Zirconium', symbol: 'Zr', number: 40, electronegativity: 1.33 },
 ];
+
+export const behaviorElements = new BehaviorSubject(elements);

.storybook/stories/datagrid/datagrid-virtualscroll-detail.stories.ts

@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { ClrConditionalModule, ClrDatagrid, ClrDatagridModule, commonStringsDefault } from '@clr/angular';
+import { action } from '@storybook/addon-actions';
+import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
+
+import { behaviorElements } from '../../helpers/elements.data';
+
+export default {
+ title: 'Datagrid/Virtual Scroll Details',
+ component: ClrDatagrid,
+ decorators: [
+ moduleMetadata({
+ imports: [ClrDatagridModule, ClrConditionalModule],
+ }),
+ ],
+ argTypes: {
+ // inputs
+ clrDgSelected: { control: { disable: true } },
+ clrDgSingleSelected: { control: { disable: true } },
+ // outputs
+ clrDgRefresh: { control: { disable: true } },
+ clrDgSelectedChange: { control: { disable: true } },
+ clrDgSingleSelectedChange: { control: { disable: true } },
+ clrRenderRangeChange: { control: { disable: true } },
+ clrDgActionOverflowOpenChange: { control: { disable: true } },
+ // methods
+ dataChanged: { control: { disable: true } },
+ resize: { control: { disable: true } },
+ // story helpers
+ behaviorElements: { control: { disable: true }, table: { disable: true } },
+ setExpanded: { control: { disable: true }, table: { disable: true } },
+ },
+ args: {
+ // inputs
+ clrDgActionOverflowOpen: false,
+ clrDgActionOverflowButtonLabel: commonStringsDefault.rowActions,
+ clrDetailExpandableAriaLabel: commonStringsDefault.detailExpandableAriaLabel,
+ clrDgLoading: false,
+ clrLoadingMoreItems: false,
+ clrDgPreserveSelection: false,
+ clrDgRowSelection: false,
+ clrDgSingleActionableAriaLabel: commonStringsDefault.singleActionableAriaLabel,
+ clrDgSingleSelectionAriaLabel: commonStringsDefault.singleSelectionAriaLabel,
+ // outputs
+ clrDgRefresh: action('clrDgRefresh'),
+ clrDgSelectedChange: action('clrDgSelectedChange'),
+ clrDgSingleSelectedChange: action('clrDgSingleSelectedChange'),
+ clrRenderRangeChange: action('clrRenderRangeChange'),
+ clrDgActionOverflowOpenChange: action('clrDgActionOverflowOpenChange'),
+ // story helpers
+ behaviorElements,
+ singleSelectable: false,
+ multiSelectable: false,
+ actionOverflow: false,
+ compact: false,
+ hidableColumns: false,
+ height: 480,
+ selectedRows: [],
+ setExpanded,
+ },
+};
+
+const DatagridDetailsTemplate: StoryFn = args => ({
+ template: `
+ <style>
+ .electronegativity-container {
+ background-color: #119cd4;
+ display: inline-block;
+ }
+ .electronegativity-text {
+ width: 3rem;
+ display: inline-block;
+ }
+ </style>
+ <clr-datagrid
+ *ngIf="{ elements: behaviorElements | async }; let data"
+ ${args.height ? '[style.height.px]="height"' : ''}
+ ${args.multiSelectable ? '[clrDgSelected]="[]"' : ''}
+ ${args.singleSelectable ? '[clrDgSingleSelected]="true"' : ''}
+ [ngClass]="{ 'datagrid-compact': compact }"
+ [clrDetailExpandableAriaLabel]="clrDetailExpandableAriaLabel"
+ [clrDgDisablePageFocus]="clrDgDisablePageFocus"
+ [clrDgLoading]="clrDgLoading"
+ [clrDgPreserveSelection]="clrDgPreserveSelection"
+ [clrDgRowSelection]="clrDgRowSelection"
+ [clrDgSingleActionableAriaLabel]="clrDgSingleActionableAriaLabel"
+ [clrDgSingleSelectionAriaLabel]="clrDgSingleSelectionAriaLabel"
+ (clrDgRefresh)="clrDgRefresh($event)"
+ (clrDgSingleSelectedChange)="clrDgSingleSelectedChange($event)"
+ [clrLoadingMoreItems]="clrLoadingMoreItems"
+ >
+ <clr-dg-column [style.width.px]="250">
+ <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Name</ng-container>
+ </clr-dg-column>
+ <clr-dg-column [style.width.px]="250">
+ <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Symbol</ng-container>
+ </clr-dg-column>
+ <clr-dg-column [style.width.px]="250">
+ <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Number</ng-container>
+ </clr-dg-column>
+ <clr-dg-column>
+ <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Electronegativity</ng-container>
+ </clr-dg-column>
+
+ <ng-template
+ *ngIf="data.elements"
+ ClrVirtualScroll
+ let-element
+ let-index="index"
+ [clrVirtualRowsOf]="data.elements"
+ [clrVirtualRowsTemplateCacheSize]="400"
+ (renderedRangeChange)="clrRenderRangeChange($event)"
+ >
+ <clr-dg-row [clrDgItem]="element" [clrDgSelected]="selectedRows.includes(index)">
+ <clr-dg-action-overflow
+ *ngIf="actionOverflow"
+ [clrDgActionOverflowOpen]="clrDgActionOverflowOpen && index === 0"
+ [clrDgActionOverflowButtonLabel]="clrDgActionOverflowButtonLabel"
+ (clrDgActionOverflowOpenChange)="index === 0 && clrDgActionOverflowOpenChange($event)"
+ >
+ <button class="action-item">Edit</button>
+ <button class="action-item">Delete</button>
+ </clr-dg-action-overflow>
+ <clr-dg-cell>{{ element.name }}</clr-dg-cell>
+ <clr-dg-cell>{{ element.symbol }}</clr-dg-cell>
+ <clr-dg-cell>{{ element.number }}</clr-dg-cell>
+ <clr-dg-cell>
+ <span class="electronegativity-text">{{ element.electronegativity }}</span>
+ <span [style.width.%]="(element.electronegativity * 100) / 5" class="electronegativity-container">
+ &nbsp;
+ </span>
+ </clr-dg-cell>
+ </clr-dg-row>
+ </ng-template>
+ <clr-dg-detail [ngClass]="{ highlight }" *clrIfDetail="let detail">
+ <clr-dg-detail-header>{{ detail.name }}</clr-dg-detail-header>
+ <clr-dg-detail-body [ngSwitch]="detailContentType">
+ <pre>{{ detail | json }}</pre>
+ </clr-dg-detail-body>
+ </clr-dg-detail>
+ <clr-dg-footer>{{ data.elements?.length }}</clr-dg-footer>
+ </clr-datagrid>
+ {{ details }}
+ `,
+ props: { ...args },
+});
+
+function setExpanded($event, element) {
+ element.expanded = $event;
+}
+
+export const Datagrid: StoryObj = {
+ render: DatagridDetailsTemplate,
+};
+
+export const Full: StoryObj = {
+ render: DatagridDetailsTemplate,
+ args: {
+ actionOverflow: true,
+ hidableColumns: true,
+ singleSelectable: true,
+ },
+};
+
+export const FullCompact: StoryObj = {
+ render: DatagridDetailsTemplate,
+ args: {
+ actionOverflow: true,
+ compact: true,
+ hidableColumns: true,
+ multiSelectable: true,
+ },
+};