# grid-virtual-scrolling

> Data grid with virtual scrolling for large orders plus rating templates and status indicators.

**Framework:** javascript  **Component:** Grid  **Variant:** virtual-scrolling

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/javascript/grid-virtual-scrolling.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-grids
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-virtual-scrolling/virtual-scrolling.html

```html
<script type="text/x-template" id="paymentTemplate">
    ${paymentTemplate(data)}
</script>
<template>
    <input class="rating">
</template>
<script type="text/x-jsrender" id="ratingTemplate">
    ${ratingDetail(data)}
</script>
<script type="text/x-jsrender" id="priorityTemplate">
    ${priorityDetail(data)}
</script>
<script type="text/x-jsrender" id="paymentStatusTemplate">
    ${paymentStatusDetail(data)}
</script>
<script type="text/x-jsrender" id="orderStatusTemplate">
    ${orderStatusDetail(data)}
</script>
<script type="text/x-jsrender" id="stockStatusTemplate">
    ${stockStatusDetail(data)}
</script>
<script type="text/x-jsrender" id="stockLevelTemplate">
    ${stockLevelDetail(data)}
</script>
<!-- custom code start -->
<style>
    .custom-rating.e-rating-container .e-rating-item-container,
    .e-bigger .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon,
    .e-bigger.custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {
        font-size: 11px;
    }

    .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {
        -webkit-text-fill-color: lightgrey;
        -webkit-text-stroke: 1px lightgrey;
    }

    .custom-rating.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon {
        background: linear-gradient(to right, #ffa600 var(--rating-value), #ffa600 var(--rating-value));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #ffa600;
    }

    .virtual-statustemp {
        position: relative;
        padding: 15px 0;
        border-radius: 5px;
        text-align: center
    }

    .virtual-statustemp.e-highcolor {
        background-color: #f8d7da;
    }

    .virtual-statustemp.e-lowcolor {
        background-color: #d4edda;
    }

    .virtual-statustemp.e-mediumcolor {
        background-color: #fff3cd;
    }

    .virtual-statustemp.e-criticalcolor {
        background-color: #efacac;
    }

    td.e-rowcell .virtual-statustxt.e-highcolor {
        color: #b21f2d;
    }

    td.e-rowcell .virtual-statustxt.e-lowcolor {
        color: #155724;
    }

    td.e-rowcell .virtual-statustxt.e-mediumcolor {
        color: #856404;
    }

    td.e-rowcell .virtual-statustxt.e-criticalcolor {
        color: darkred;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-highcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-highcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-highcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-highcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-highcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-highcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-highcolor {
        color: #FF6F61;
    }

    .material3-dark .virtual-statustemp.e-highcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-highcolor,
    .fluent2-dark .virtual-statustemp.e-highcolor,
    .tailwind3-dark .virtual-statustemp.e-highcolor,
    .fluent2-highcontrast .virtual-statustemp.e-highcolor,
    .fluent-dark .virtual-statustemp.e-highcolor,
    .highcontrast .virtual-statustemp.e-highcolor {
        background-color: #3E1F1F;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-lowcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-lowcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-lowcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-lowcolor {
        color: #81C784;
    }

    .material3-dark .virtual-statustemp.e-lowcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-lowcolor,
    .fluent2-dark .virtual-statustemp.e-lowcolor,
    .tailwind3-dark .virtual-statustemp.e-lowcolor,
    .fluent2-highcontrast .virtual-statustemp.e-lowcolor,
    .fluent-dark .virtual-statustemp.e-lowcolor,
    .highcontrast .virtual-statustemp.e-lowcolor {
        background-color: #1F3A2E;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-mediumcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-mediumcolor {
        color: #FFD54F;
    }

    .material3-dark .virtual-statustemp.e-mediumcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-mediumcolor,
    .fluent2-dark .virtual-statustemp.e-mediumcolor,
    .tailwind3-dark .virtual-statustemp.e-mediumcolor,
    .fluent2-highcontrast .virtual-statustemp.e-mediumcolor,
    .fluent-dark .virtual-statustemp.e-mediumcolor,
    .highcontrast .virtual-statustemp.e-mediumcolor {
        background-color: #3A2E1F;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-criticalcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-criticalcolor {
        color: #F28B82;
    }

    .material3-dark .virtual-statustemp.e-criticalcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-criticalcolor,
    .fluent2-dark .virtual-statustemp.e-criticalcolor,
    .tailwind3-dark .virtual-statustemp.e-criticalcolor,
    .fluent2-highcontrast .virtual-statustemp.e-criticalcolor,
    .fluent-dark .virtual-statustemp.e-criticalcolor,
    .highcontrast .virtual-statustemp.e-criticalcolor {
        background-color: #5A1A1A;
    }

    .image {
        position: absolute;
        background-repeat: no-repeat;
        background-image: url('src/grid/images/spinner.gif');
        background-position: center;
        width: 16px;
        height: 28px;
    }

    .e-bigger .image {
        height: 36px;
    }

    #popup {
        position: absolute;
        background-color: transparent;
        display: none;
        z-index: 100;
    }

    .div-button {
        margin: 5px 5px 5px 0;
    }

    #performanceTime {
        float: right;
        margin-top: 3px;
    }

    .e-bigger #performanceTime {
        margin-top: 8px;
    }

    .virtual-statustemp.e-paidcolor {
        background-color: #e6f4ea;
    }

    .virtual-statustxt.e-paidcolor {
        color: #155724;
    }

    .virtual-statustemp.e-pendingcolor {
        background-color: #fff8e1;
    }

    .virtual-statustxt.e-pendingcolor {
        color: #856404;
    }

    .virtual-statustemp.e-refundcolor {
        background-color: #fff0f0;
    }

    .virtual-statustxt.e-refundcolor {
        color: #b21f2d;
    }

    .virtual-statustemp.e-deliveredcolor {
        background-color: #e6f3ea;
    }

    .virtual-statustxt.e-deliveredcolor {
        color: #2e7d32;
    }

    .virtual-statustemp.e-shippedcolor {
        background-color: #e7f0fb;
    }

    .virtual-statustxt.e-shippedcolor {
        color: #1565c0;
    }

    .virtual-statustemp.e-processingcolor {
        background-color: #fff8e6;
    }

    .virtual-statustxt.e-processingcolor {
        color: #ff9800;
    }

    .virtual-statustemp.e-packedcolor {
        background-color: #fff7ed;
    }

    .virtual-statustxt.e-packedcolor {
        color: #d97706;
    }

    .virtual-statustemp.e-returnedcolor {
        background-color: #FCE4E4;
    }

    .virtual-statustxt.e-returnedcolor {
        color: #8B0000;
    }

    .virtual-statustemp.e-cancelcolor {
        background-color: #f2f2f2;
    }

    .virtual-statustxt.e-cancelcolor {
        color: #6b6b6b;
    }

    .virtual-statustemp.e-orderedcolor {
        background-color: #E0F2F1;
    }

    .virtual-statustxt.e-orderedcolor {
        color: #00796B;
    }

    .virtual-statustemp.e-failedcolor {
        background-color: #f2f2f2;
    }

    .virtual-statustxt.e-failedcolor {
        color: #6b6b6b;
    }

    .material3-dark .virtual-statustemp.e-paidcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-paidcolor,
    .fluent2-dark .virtual-statustemp.e-paidcolor,
    .tailwind3-dark .virtual-statustemp.e-paidcolor,
    .fluent2-highcontrast .virtual-statustemp.e-paidcolor,
    .fluent-dark .virtual-statustemp.e-paidcolor,
    .highcontrast .virtual-statustemp.e-paidcolor {
        background-color: #133b2b;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-paidcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-paidcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-paidcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-paidcolor {
        color: #81C784;
    }

    .material3-dark .virtual-statustemp.e-pendingcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-pendingcolor,
    .fluent2-dark .virtual-statustemp.e-pendingcolor,
    .tailwind3-dark .virtual-statustemp.e-pendingcolor,
    .fluent2-highcontrast .virtual-statustemp.e-pendingcolor,
    .fluent-dark .virtual-statustemp.e-pendingcolor,
    .highcontrast .virtual-statustemp.e-pendingcolor {
        background-color: #3a331f;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-pendingcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-pendingcolor {
        color: #FFD54F;
    }

    .material3-dark .virtual-statustemp.e-refundcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-refundcolor,
    .fluent2-dark .virtual-statustemp.e-refundcolor,
    .tailwind3-dark .virtual-statustemp.e-refundcolor,
    .fluent2-highcontrast .virtual-statustemp.e-refundcolor,
    .fluent-dark .virtual-statustemp.e-refundcolor,
    .highcontrast .virtual-statustemp.e-refundcolor {
        background-color: #3a1f1f;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-refundcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-refundcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-refundcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-refundcolor {
        color: #FF8A80;
    }

    .material3-dark .virtual-statustemp.e-deliveredcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-deliveredcolor,
    .fluent2-dark .virtual-statustemp.e-deliveredcolor,
    .tailwind3-dark .virtual-statustemp.e-deliveredcolor,
    .fluent2-highcontrast .virtual-statustemp.e-deliveredcolor,
    .fluent-dark .virtual-statustemp.e-deliveredcolor,
    .highcontrast .virtual-statustemp.e-deliveredcolor {
        background-color: #173924;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-deliveredcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-deliveredcolor {
        color: #A5D6A7;
    }

    .material3-dark .virtual-statustemp.e-shippedcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-shippedcolor,
    .fluent2-dark .virtual-statustemp.e-shippedcolor,
    .tailwind3-dark .virtual-statustemp.e-shippedcolor,
    .fluent2-highcontrast .virtual-statustemp.e-shippedcolor,
    .fluent-dark .virtual-statustemp.e-shippedcolor,
    .highcontrast .virtual-statustemp.e-shippedcolor {
        background-color: #12321f;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-shippedcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-shippedcolor {
        color: #A5D6A7;
    }

    .material3-dark .virtual-statustemp.e-processingcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-processingcolor,
    .fluent2-dark .virtual-statustemp.e-processingcolor,
    .tailwind3-dark .virtual-statustemp.e-processingcolor,
    .fluent2-highcontrast .virtual-statustemp.e-processingcolor,
    .fluent-dark .virtual-statustemp.e-processingcolor,
    .highcontrast .virtual-statustemp.e-processingcolor {
        background-color: #332f1f;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor {
        color: #FFD54F;
    }

    .material3-dark .virtual-statustemp.e-cancelcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-cancelcolor,
    .fluent2-dark .virtual-statustemp.e-cancelcolor,
    .tailwind3-dark .virtual-statustemp.e-cancelcolor,
    .fluent2-highcontrast .virtual-statustemp.e-cancelcolor,
    .fluent-dark .virtual-statustemp.e-cancelcolor,
    .highcontrast .virtual-statustemp.e-cancelcolor {
        background-color: #3a1a1a;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-cancelcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-cancelcolor {
        color: #F28B82;
    }

    /* additional dark-theme overrides for new badge classes */
    .material3-dark .virtual-statustemp.e-packedcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-packedcolor,
    .fluent2-dark .virtual-statustemp.e-packedcolor,
    .tailwind3-dark .virtual-statustemp.e-packedcolor,
    .fluent2-highcontrast .virtual-statustemp.e-packedcolor,
    .fluent-dark .virtual-statustemp.e-packedcolor,
    .highcontrast .virtual-statustemp.e-packedcolor {
        background-color: #5c3a11;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-packedcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-packedcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-packedcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-packedcolor {
        color: #FFD54F;
    }

    .material3-dark .virtual-statustemp.e-processingcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-processingcolor,
    .fluent2-dark .virtual-statustemp.e-processingcolor,
    .tailwind3-dark .virtual-statustemp.e-processingcolor,
    .fluent2-highcontrast .virtual-statustemp.e-processingcolor,
    .fluent-dark .virtual-statustemp.e-processingcolor,
    .highcontrast .virtual-statustemp.e-processingcolor {
        background-color: #5a3a00;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-processingcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor {
        color: #FFD54F;
    }

    .material3-dark .virtual-statustemp.e-returnedcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-returnedcolor,
    .fluent2-dark .virtual-statustemp.e-returnedcolor,
    .tailwind3-dark .virtual-statustemp.e-returnedcolor,
    .fluent2-highcontrast .virtual-statustemp.e-returnedcolor,
    .fluent-dark .virtual-statustemp.e-returnedcolor,
    .highcontrast .virtual-statustemp.e-returnedcolor {
        background-color: #3a2a28;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-returnedcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-returnedcolor {
        color: #FFCDD2;
    }

    .material3-dark .virtual-statustemp.e-orderedcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-orderedcolor,
    .fluent2-dark .virtual-statustemp.e-orderedcolor,
    .tailwind3-dark .virtual-statustemp.e-orderedcolor,
    .fluent2-highcontrast .virtual-statustemp.e-orderedcolor,
    .fluent-dark .virtual-statustemp.e-orderedcolor,
    .highcontrast .virtual-statustemp.e-orderedcolor {
        background-color: #2b2b2b;
        border-color: #444;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-orderedcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-orderedcolor {
        color: #ECEFF1;
    }

    .material3-dark .virtual-statustemp.e-failedcolor,
    .bootstrap5\.3-dark .virtual-statustemp.e-failedcolor,
    .fluent2-dark .virtual-statustemp.e-failedcolor,
    .tailwind3-dark .virtual-statustemp.e-failedcolor,
    .fluent2-highcontrast .virtual-statustemp.e-failedcolor,
    .fluent-dark .virtual-statustemp.e-failedcolor,
    .highcontrast .virtual-statustemp.e-failedcolor {
        background-color: #4a4a4a;
    }

    .material3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,
    .bootstrap5\.3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,
    .fluent2-dark td.e-rowcell .virtual-statustxt.e-failedcolor,
    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,
    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-failedcolor,
    .fluent-dark td.e-rowcell .virtual-statustxt.e-failedcolor,
    .highcontrast td.e-rowcell .virtual-statustxt.e-failedcolor {
        color: #ffffff;
    }

    td.e-rowcell .e-payment-info {
        display: flex;
        align-items: center;
    }

    td.e-rowcell .e-payment-info img {
        margin-right: 5px;
    }

    .material3-dark td.e-rowcell .e-payment-info img,
    .bootstrap5\.3-dark td.e-rowcell .e-payment-info img,
    .fluent2-dark td.e-rowcell .e-payment-info img,
    .tailwind3-dark td.e-rowcell .e-payment-info img,
    .fluent2-highcontrast td.e-rowcell .e-payment-info img,
    .fluent-dark td.e-rowcell .e-payment-info img,
    .highcontrast td.e-rowcell .e-payment-info img {
        filter: brightness(0) invert(1);
    }

    .fluent2-highcontrast td.e-rowcell .e-row:hover .e-payment-info img,
    .fluent2-highcontrast td.e-rowcell .e-rowcell.e-selectionbackground .e-payment-info img {
        filter: none;
    }
</style>
<!-- custom code end -->
<div class="control-section">
    <div class="content-wrapper">
        <div class='div-button'>
            <button id='genarate' class="e-info"> Load 100K Data</button>
            <span id="popup">
                <span id="gif" class="image"></span>
            </span>
            <span id="performanceTime">Time Taken: 0 ms</span>
        </div>
        <div id="Grid">
        </div>
    </div>
</div>

```

### src/components/grid-virtual-scrolling/virtual-scrolling.ts

```typescript
import { VirtualScroll, Grid, Edit, Toolbar } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { createVirtualOrderData, virtualOrderData } from '../data-source';
import { Rating } from '@syncfusion/ej2-inputs';
/**
 * virtualscrolling sample
 */
Grid.Inject(VirtualScroll, Edit, Toolbar);

(window as any).default = (): void => {
    let date1: number; let flag: boolean = true; let genarateData: Button = new Button({}, '#genarate');
    let data: Object[] = [];
    genarateData.element.onclick = () => {
        if (!data.length) {
            show(); createVirtualOrderData(); date1 = new Date().getTime(); grid.dataSource = data = virtualOrderData;
        }
    };
    let grid: Grid = new Grid(
        {
            dataSource: [], enableVirtualization: true, enableColumnVirtualization: true, height: 400, rowHeight: 50,
            editSettings: { allowEditing: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' },
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
            clipMode:'EllipsisWithTooltip',
            columns: [
                { field: 'OrderID', headerText: 'Order ID', width: 110, isPrimaryKey: true, validationRules: { required: true } },
                { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd', textAlign: 'Right', editType: 'datepickeredit' },
                { field: 'ShipDate', headerText: 'Ship Date', width: 140, format: 'yMd', textAlign: 'Right', editType: 'datepickeredit' },
                { field: 'OrderStatus', headerText: 'Order Status', width: 140, textAlign: 'Center', editType: 'dropdownedit', template: '#orderStatusTemplate', validationRules: { required: true } },
                { field: 'Priority', headerText: 'Priority', width: 110, textAlign: 'Center', editType: 'dropdownedit', template: '#priorityTemplate' },
                { field: 'CustomerName', headerText: 'Customer Name', width: 190, validationRules: { required: true } },
                { field: 'CustomerID', headerText: 'Customer ID', width: 110, visible: false },
                { field: 'Email', headerText: 'Email', width: 200 },
                { field: 'Phone', headerText: 'Phone Number', width: 140, textAlign: 'Right' },
                { field: 'ShipAddress', headerText: 'Ship Address', width: 180 },
                { field: 'ShipCity', headerText: 'Ship City', width: 120 },
                { field: 'ShipState', headerText: 'Ship State Code', width: 130 },
                { field: 'ShipPostalCode', headerText: 'Ship Postal Code', width: 130, textAlign: 'Right' },
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
                { field: 'ProductName', headerText: 'Product Name', width: 250 },
                { field: 'ProductID', headerText: 'Product ID', width: 110, visible: false },
                { field: 'Category', headerText: 'Category', width: 120 },
                { field: 'Warehouse', headerText: 'Ware house', width: 110, editType: 'dropdownedit', visible: false },
                { field: 'InventoryCount', headerText: 'Inventory Count', width: 150, textAlign: 'Right', visible: false },
                {
                    field: 'Quantity', headerText: 'Quantity', width: 100, textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                {
                    field: 'UnitPrice', headerText: 'Unit Price', width: 110, format: 'C2', textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                {
                    field: 'Discount', headerText: 'Discount (%)', width: 120, textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                {
                    field: 'Tax', headerText: 'Tax (%)', width: 100, textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                {
                    field: 'SubTotal', headerText: 'Sub Total', width: 110, format: 'C2', textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                {
                    field: 'TaxAmount', headerText: 'Tax Amount', width: 110, format: 'C2', textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                {
                    field: 'ShipFee', headerText: 'Ship Fee', width: 120, format: 'C2', textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                {
                    field: 'TotalAmount', headerText: 'Total Amount', width: 120, format: 'C2', textAlign: 'Right', editType: 'numericedit',
                    edit: { params: { showSpinButton: false } }
                },
                { field: 'PaymentMethod', headerText: 'Payment Method', width: 140, editType: 'dropdownedit', template: '#paymentTemplate', validationRules: { required: true } },
                { field: 'PaymentStatus', headerText: 'Payment Status', width: 140, textAlign: 'Center', editType: 'dropdownedit', template: '#paymentStatusTemplate', validationRules: { required: true } },
                {
                    field: 'Rating', headerText: 'Delivery Rating', width: 160, textAlign: 'Center', visible: false,
                    template: '#ratingTemplate', editType: 'dropdownedit'
                }
            ],
            dataBound: hide,
            load: function (args: any) {
                if (grid.enableVirtualization) {
                    args.enableSeamlessScrolling = true;
                }
            }
        });
    grid.appendTo('#Grid');

    function show(): void {
        document.getElementById('popup')!.style.display = 'inline-block';
    }
    function hide(): void {
        if (flag && date1) {
            let date2: number = new Date().getTime();
            document.getElementById('performanceTime')!.innerHTML = 'Time Taken: ' + (date2 - date1) + 'ms';
            grid.editSettings.allowAdding = true;
            flag = false; genarateData.disabled = true;
        }
        document.getElementById('popup')!.style.display = 'none';
    }
    (window as { ratingDetail?: (e: any) => any }).ratingDetail = (e: any): any => {
        const temp: HTMLTemplateElement = document.getElementsByTagName("template")[0];
        const cloneTemplate: any = temp.content.cloneNode(true);
        const ratingElement: HTMLElement = cloneTemplate.querySelector(".rating");
        const rating = new Rating({
            value: e.Rating,
            readOnly: true,
            cssClass: 'custom-rating'
        });
        rating.appendTo(ratingElement);
        return (ratingElement as any).ej2_instances[0].wrapper.outerHTML;
    };
    (window as { priorityDetail?: (e: any) => any }).priorityDetail = (e: any): any => {
        const div: Element = document.createElement('div');
        const span: Element = document.createElement('span');
        if (e.Priority === 'High') {
            span.className = 'virtual-statustxt e-highcolor';
            span.textContent = 'High';
            div.className = 'virtual-statustemp e-highcolor';
        } else if (e.Priority === 'Low') {
            span.className = 'virtual-statustxt e-lowcolor';
            span.textContent = 'Low';
            div.className = 'virtual-statustemp e-lowcolor';
        } else if (e.Priority === 'Medium') {
            span.className = 'virtual-statustxt e-mediumcolor';
            span.textContent = 'Medium';
            div.className = 'virtual-statustemp e-mediumcolor';
        } else {
            span.className = 'virtual-statustxt e-criticalcolor';
            span.textContent = 'Critical';
            div.className = 'virtual-statustemp e-criticalcolor';
        }
        div.appendChild(span);
        return div.outerHTML;
    };
    (window as { paymentStatusDetail?: (e: any) => any }).paymentStatusDetail = (e: any): any => {
        const div: Element = document.createElement('div');
        const span: Element = document.createElement('span');
        const val = (e.PaymentStatus || '').toString();
        if (val === 'Paid' || val === 'Authorized') {
            span.className = 'virtual-statustxt e-paidcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-paidcolor';
        } else if (val === 'Pending') {
            span.className = 'virtual-statustxt e-pendingcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-pendingcolor';
        } else if (val === 'Refunded') {
            span.className = 'virtual-statustxt e-refundcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-refundcolor';
        } else {
            span.className = 'virtual-statustxt e-failedcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-failedcolor';
        }
        div.appendChild(span);
        return div.outerHTML;
    };
    (window as { orderStatusDetail?: (e: any) => any }).orderStatusDetail = (e: any): any => {
        const div: Element = document.createElement('div');
        const span: Element = document.createElement('span');
        const val: string = (e.OrderStatus || '').toString();
        if (val === 'Delivered') {
            span.className = 'virtual-statustxt e-deliveredcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-deliveredcolor';
        } else if (val === 'Shipped') {
            span.className = 'virtual-statustxt e-shippedcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-shippedcolor';
        } else if (val === 'Packed') {
            span.className = 'virtual-statustxt e-packedcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-packedcolor';
        } else if (val === 'Processing') {
            span.className = 'virtual-statustxt e-processingcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-processingcolor';
        } else if (val === 'Canceled') {
            span.className = 'virtual-statustxt e-cancelcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-cancelcolor';
        } else if (val === 'Returned') {
            span.className = 'virtual-statustxt e-returnedcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-returnedcolor';
        } else {
            span.className = 'virtual-statustxt e-orderedcolor';
            span.textContent = val;
            div.className = 'virtual-statustemp e-orderedcolor';
        }
        div.appendChild(span);
        return div.outerHTML;
    };
    (window as { paymentTemplate?: (e: any) => any }).paymentTemplate = (e: any): any => {
        const divElement: Element = document.createElement('div');
        divElement.className = 'e-payment-info';
        const imgElement: any = document.createElement('img');
        imgElement.src = 'src/grid/images/payment/' + e.PaymentMethod + '.svg';
        imgElement.alt = e.PaymentMethod;
        const nameElement: HTMLElement = document.createElement('span');
        nameElement.innerText = e.PaymentMethod;
        divElement.appendChild(imgElement);
        divElement.appendChild(nameElement);
        return divElement.outerHTML;
    };
};

```