feat(filter): add collectionLazy callback to Column Filter (#495)

Author: ghiscoding

docs/README.md

@@ -2,4 +2,4 @@
 
 The [`docs`](https://github.com/ghiscoding/slickgrid-react/tree/master/docs) folder of Slickgrid-React is the one-stop-shop for all project related documentation.
 
-Feel free to contribution documentation fixes by editing any of the markdown files in the [`docs`](https://github.com/ghiscoding/slickgrid-react/tree/master/docs) folder.
+Feel free to contribute documentation fixes by editing any of the markdown files in the [`docs`](https://github.com/ghiscoding/slickgrid-react/tree/master/docs) folder.

docs/column-functionalities/editors/select-dropdown-editor.md

@@ -173,7 +173,7 @@ const columnDefinitions = [
 ```
 
 ### Collection Watch
-Sometime you wish that whenever you change your filter collection, you'd like the filter to be updated, it won't do that by default but you could use `enableCollectionWatch` for that purpose to add collection observers and re-render the Filter DOM element whenever the collection changes. Also note that using `collectionAsync` will automatically watch for changes, so there's no need to enable this flag for that particular use case.
+Sometime you wish that whenever you make a change in your filter collection, you'd like the filter to be updated but it won't do that by default. You could use `enableCollectionWatch` for that purpose which will add a collection observers and re-render the Filter DOM element whenever the collection changes. Also note that using `collectionAsync` will automatically watch for changes, so there's no need to enable this flag for that particular use case.
 
 ```typescript
 const columnDefinitions = [

docs/column-functionalities/filters/select-filter.md

@@ -6,15 +6,16 @@
 - [How to add Translation](#how-to-add-translation)
 - [How to filter empty values](#how-to-filter-empty-values)
 - Collection Options
-   - [Add Blank Entry](#collection-add-blank-entry)
-   - [Add Custom Entry at Beginning/End of Collection](#collection-add-custom-entry-at-the-beginningend-of-the-collection)
-   - [Custom Structure](#custom-structure-keylabel-pair)
-   - [Custom Structure with Translation](#custom-structure-with-translation)
-   - [Collection filterBy/sortBy](#collection-filterbysortby)
-   - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix)
-   - [Collection Label Render HTML](#collection-label-render-html)
-   - [Collection Async Load](#collection-async-load)
-   - [Collection Watch](#collection-watch)
+  - [Add Blank Entry](#collection-add-blank-entry)
+  - [Add Custom Entry at Beginning/End of Collection](#collection-add-custom-entry-at-the-beginningend-of-the-collection)
+  - [Custom Structure](#custom-structure-keylabel-pair)
+  - [Custom Structure with Translation](#custom-structure-with-translation)
+  - [Collection filterBy/sortBy](#collection-filterbysortby)
+  - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix)
+  - [Collection Label Render HTML](#collection-label-render-html)
+  - [Collection Async Load](#collection-async-load)
+  - [Collection Lazy Load](#collection-lazy-load)
+  - [Collection Watch](#collection-watch)
 - [`multiple-select.js` Options](#multiple-selectjs-options)
   - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface)
   - [Display shorter selected label text](#display-shorter-selected-label-text)
@@ -563,6 +564,24 @@ function addItem() {
 }
 ```
 
+### Collection Lazy Load
+In some cases, you might have a grid with a lot of columns and loading the collection only after opening the select dropdown (or never in some cases) might help speeding up the initial grid loading. So for that use case, defining a `collectionLazy` callback can help.
+
+#### Load the collection through an Http callback
+
+```ts
+const columnDefinitions = [
+    {
+    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
+    filterable: true,
+    filter: {
+      collectionLazy: (col: Column) => this.http.fetch('api/data/pre-requisites'),
+      model: Filters.multipleSelect,
+    }
+  }
+];
+```
+
 ### Collection Watch
 We can enable the collection watch via the column filter `enableCollectionWatch` flag, or if you use a `collectionAsync` then this will be enabled by default. The collection watch will basically watch for any changes applied to the collection (any mutation changes like `push`, `pop`, `unshift`, ...) and will also watch for the `filter.collection` array replace, when any changes happens then it will re-render the Select Filter with the updated collection list.
 

package.json

@@ -81,12 +81,12 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~5.13.4",
-    "@slickgrid-universal/custom-footer-component": "~5.13.4",
-    "@slickgrid-universal/empty-warning-component": "~5.13.4",
+    "@slickgrid-universal/common": "~5.14.0",
+    "@slickgrid-universal/custom-footer-component": "~5.14.0",
+    "@slickgrid-universal/empty-warning-component": "~5.14.0",
     "@slickgrid-universal/event-pub-sub": "~5.13.0",
-    "@slickgrid-universal/pagination-component": "~5.13.4",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.13.4",
+    "@slickgrid-universal/pagination-component": "~5.14.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.14.0",
     "dequal": "^2.0.3",
     "i18next": "^23.16.8",
     "sortablejs": "^1.15.6"
@@ -101,13 +101,13 @@
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.1",
-    "@slickgrid-universal/composite-editor-component": "~5.13.4",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.13.4",
-    "@slickgrid-universal/excel-export": "~5.13.4",
-    "@slickgrid-universal/graphql": "~5.13.4",
-    "@slickgrid-universal/odata": "~5.13.4",
-    "@slickgrid-universal/rxjs-observable": "~5.13.4",
-    "@slickgrid-universal/text-export": "~5.13.4",
+    "@slickgrid-universal/composite-editor-component": "~5.14.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.14.0",
+    "@slickgrid-universal/excel-export": "~5.14.0",
+    "@slickgrid-universal/graphql": "~5.14.0",
+    "@slickgrid-universal/odata": "~5.14.0",
+    "@slickgrid-universal/rxjs-observable": "~5.14.0",
+    "@slickgrid-universal/text-export": "~5.14.0",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/node": "^22.15.2",
@@ -155,4 +155,4 @@
   "resolutions": {
     "caniuse-lite": "1.0.30001715"
   }
-}
+}

src/examples/slickgrid/Example33.tsx

@@ -21,7 +21,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import './example33.scss';
 
 const FAKE_SERVER_DELAY = 500;
-const NB_ITEMS = 500;
+const NB_ITEMS = 1000;
 
 const Example33: React.FC = () => {
   const [columnDefinitions, setColumnDefinitions] = useState<Column[]>([]);
@@ -30,6 +30,7 @@ const Example33: React.FC = () => {
   const [serverWaitDelay, setServerWaitDelay] = useState<number>(FAKE_SERVER_DELAY);
   const [editCommandQueue] = useState<EditCommand[]>([]);
   const [hideSubTitle, setHideSubTitle] = useState(false);
+  const [showLazyLoading, setShowLazyLoading] = useState(false);
 
   const serverWaitDelayRef = useRef(serverWaitDelay);
   const reactGridRef = useRef<SlickgridReactInstance | null>(null);
@@ -240,18 +241,32 @@ const Example33: React.FC = () => {
         },
         filter: {
           // collectionAsync: fetch(SAMPLE_COLLECTION_DATA_URL),
-          collectionAsync: new Promise((resolve) => {
-            window.setTimeout(() => {
-              resolve(Array.from(Array(dataset?.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
+          // collectionAsync: new Promise((resolve) => {
+          //   window.setTimeout(() => {
+          //     resolve(Array.from(Array(dataset.value?.length).keys()).map((k) => ({ value: k, label: `Task ${k}` })));
+          //   });
+          // }),
+          collectionLazy: () => {
+            setShowLazyLoading(true);
+
+            return new Promise((resolve) => {
+              window.setTimeout(() => {
+                setShowLazyLoading(false);
+                resolve(Array.from(Array((dataset || []).length).keys()).map((k) => ({ value: k, label: `Task ${k}` })));
+              }, serverWaitDelayRef.current);
             });
-          }),
+          },
+          // onInstantiated: (msSelect) => console.log('ms-select instance', msSelect),
           customStructure: {
             label: 'label',
             value: 'value',
             labelPrefix: 'prefix',
           },
           collectionOptions: {
-            separatorBetweenTextLabels: ' '
+            separatorBetweenTextLabels: ' ',
+          },
+          filterOptions: {
+            minHeight: 70,
           },
           model: Filters.multipleSelect,
           operator: OperatorType.inContains,
@@ -519,13 +534,17 @@ const Example33: React.FC = () => {
         </ul>
       </div>
 
-
-      <div style={{ marginBottom: '20px' }}>
-        <label htmlFor="pinned-rows">Simulated Server Delay (ms): </label>
-        <input type="number" id="server-delay" data-test="server-delay" style={{ width: '60px' }}
-          value={serverWaitDelay}
-          onInput={($event) => handleServerDelayInputChange($event)}
-        />
+      <div className="row">
+        <div className="col" style={{ marginBottom: '20px' }}>
+          <label htmlFor="pinned-rows">Simulated Server Delay (ms): </label>
+          <input type="number" id="server-delay" data-test="server-delay" style={{ width: '60px' }}
+            value={serverWaitDelay}
+            onInput={($event) => handleServerDelayInputChange($event)}
+          />
+        </div>
+        <div className={`alert alert-info is-narrow col ${!showLazyLoading ? 'invisible' : ''}`} data-test="alert-lazy">
+          Lazy loading collection...
+        </div>
       </div>
 
       <div id="smaller-container" style={{ width: '950px' }}>

src/styles.scss

@@ -43,6 +43,10 @@ $primary-color: #0e6cfa;
   display: none;
 }
 
+.invisible {
+  opacity: 0;
+}
+
 .btn-icon {
   display: inline-flex;
   align-items: center;

test/cypress/e2e/example33.cy.ts

@@ -1,5 +1,18 @@
 describe('Example 33 - Regular & Custom Tooltips', () => {
-  const titles = ['', 'Title', 'Duration', 'Description', 'Description 2', 'Cost', '% Complete', 'Start', 'Finish', 'Effort Driven', 'Prerequisites', 'Action'];
+  const titles = [
+    '',
+    'Title',
+    'Duration',
+    'Description',
+    'Description 2',
+    'Cost',
+    '% Complete',
+    'Start',
+    'Finish',
+    'Effort Driven',
+    'Prerequisites',
+    'Action',
+  ];
   const GRID_ROW_HEIGHT = 33;
 
   it('should display Example title', () => {
@@ -15,7 +28,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => {
   });
 
   it('should change server delay to 10ms for faster testing', () => {
-    cy.get('[data-test="server-delay"]').type('{backspace}{backspace}{backspace}10');
+    cy.get('[data-test="server-delay"]').clear().type('50');
   });
 
   it('should mouse over 1st row checkbox column and NOT expect any tooltip to show since it is disabled on that column', () => {
@@ -98,8 +111,11 @@ describe('Example 33 - Regular & Custom Tooltips', () => {
     cy.get('@desc6-cell').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('be.visible');
-    cy.get('.slick-custom-tooltip').should('not.contain', `regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`);
-    cy.get('.slick-custom-tooltip').should('contain', `This is a sample task description.\nIt can be multiline\n\nAnother line...`);
+    cy.get('.slick-custom-tooltip').should(
+      'not.contain',
+      'regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...'
+    );
+    cy.get('.slick-custom-tooltip').should('contain', 'This is a sample task description.\nIt can be multiline\n\nAnother line...');
 
     cy.get('@desc6-cell').trigger('mouseout');
   });
@@ -110,7 +126,10 @@ describe('Example 33 - Regular & Custom Tooltips', () => {
     cy.get('@desc2-5-cell').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('be.visible');
-    cy.get('.slick-custom-tooltip').should('contain', `regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`);
+    cy.get('.slick-custom-tooltip').should(
+      'contain',
+      'regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...'
+    );
 
     cy.get('@desc2-5-cell').trigger('mouseout');
   });
@@ -189,27 +208,38 @@ describe('Example 33 - Regular & Custom Tooltips', () => {
     cy.get('@finish-filter').trigger('mouseout');
   });
 
+  it('should open PreRequisite dropdown and expect it be lazily loaded', () => {
+    cy.get('.slick-headerrow-columns .slick-headerrow-column:nth(10)').as('checkbox10-header');
+    cy.get('@checkbox10-header').click();
+    cy.get('[data-test="alert-lazy"]').should('be.visible');
+    cy.wait(50);
+    cy.get('@checkbox10-header').click();
+    cy.get('[data-test="alert-lazy"]').should('not.be.visible');
+  });
+
   it('should mouse over header-row (filter) Prerequisite column and expect to see tooltip of selected filter options', () => {
-    cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(10)`).as('checkbox10-header');
+    cy.get('.slick-headerrow-columns .slick-headerrow-column:nth(10)').as('checkbox10-header');
     cy.get('@checkbox10-header').trigger('mouseover');
 
-    cy.get('.filter-prerequisites .ms-choice span').contains('15 of 500 selected');
+    cy.get('.filter-prerequisites .ms-choice span').contains('15 of 1000 selected');
     cy.get('.slick-custom-tooltip').should('be.visible');
-    cy.get('.slick-custom-tooltip').contains('Task 1, Task 3, Task 5, Task 7, Task 9, Task 12, Task 15, Task 18, Task 21, Task 25, Task 28, Task 29, Task 30, Task 32, Task 34');
+    cy.get('.slick-custom-tooltip').contains(
+      'Task 1, Task 3, Task 5, Task 7, Task 9, Task 12, Task 15, Task 18, Task 21, Task 25, Task 28, Task 29, Task 30, Task 32, Task 34'
+    );
 
     cy.get('@checkbox10-header').trigger('mouseout');
   });
 
   it('should mouse over header title on 1st column with checkbox and NOT expect any tooltip to show since it is disabled on that column', () => {
-    cy.get(`.slick-header-columns .slick-header-column:nth(0)`).as('checkbox-header');
+    cy.get('.slick-header-columns .slick-header-column:nth(0)').as('checkbox-header');
     cy.get('@checkbox-header').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
     cy.get('@checkbox-header').trigger('mouseout');
   });
 
   it('should mouse over header title on 2nd column with Title name and expect a tooltip to show rendered from an headerFormatter', () => {
-    cy.get(`.slick-header-columns .slick-header-column:nth(1)`).as('checkbox0-header');
+    cy.get('.slick-header-columns .slick-header-column:nth(1)').as('checkbox0-header');
     cy.get('@checkbox0-header').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('be.visible');
@@ -222,7 +252,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => {
   });
 
   it('should mouse over header title on 2nd column with Finish name and NOT expect any tooltip to show since it is disabled on that column', () => {
-    cy.get(`.slick-header-columns .slick-header-column:nth(8)`).as('finish-header');
+    cy.get('.slick-header-columns .slick-header-column:nth(8)').as('finish-header');
     cy.get('@finish-header').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
@@ -231,27 +261,16 @@ describe('Example 33 - Regular & Custom Tooltips', () => {
 
   it('should click Prerequisite editor of 1st row (Task 2) and expect Task1 & 2 to be selected in the multiple-select drop', () => {
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).as('prereq-cell');
-    cy.get('@prereq-cell')
-      .should('contain', 'Task 2, Task 1')
-      .click();
+    cy.get('@prereq-cell').should('contain', 'Task 2, Task 1').click();
 
-    cy.get('div.ms-drop[data-name=editor-prerequisites]')
-      .find('li.selected')
-      .should('have.length', 2);
+    cy.get('div.ms-drop[data-name=editor-prerequisites]').find('li.selected').should('have.length', 2);
 
-    cy.get('div.ms-drop[data-name=editor-prerequisites]')
-      .find('li.selected:nth(0) span')
-      .should('contain', 'Task 1');
+    cy.get('div.ms-drop[data-name=editor-prerequisites]').find('li.selected:nth(0) span').should('contain', 'Task 1');
 
-    cy.get('div.ms-drop[data-name=editor-prerequisites]')
-      .find('li.selected:nth(1) span')
-      .should('contain', 'Task 2');
+    cy.get('div.ms-drop[data-name=editor-prerequisites]').find('li.selected:nth(1) span').should('contain', 'Task 2');
 
-    cy.get('div.ms-drop[data-name=editor-prerequisites]')
-      .find('.ms-ok-button')
-      .click();
+    cy.get('div.ms-drop[data-name=editor-prerequisites]').find('.ms-ok-button').click();
 
-    cy.get('div.ms-drop[data-name=editor-prerequisites]')
-      .should('not.exist');
+    cy.get('div.ms-drop[data-name=editor-prerequisites]').should('not.exist');
   });
 });