Throws run time error- filter is undefined on the page where qgrid is used.

[amexcompliance]

After installing the extension and adding q-grid the page stops loading and the browser console shows the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filter') at Proxy.setColumnsDefinition (QGrid.vue:217:17) at Proxy.created (QGrid.vue:169:10) at callWithErrorHandling (chunk-UDHLJWFM.js?v=c44ac796:1727:32) at callWithAsyncErrorHandling (chunk-UDHLJWFM.js?v=c44ac796:1735:17) at callWithAsyncErrorHandling (chunk-UDHLJWFM.js?v=c44ac796:1745:17) at callHook (chunk-UDHLJWFM.js?v=c44ac796:4358:3) at applyOptions (chunk-UDHLJWFM.js?v=c44ac796:4277:5) at finishComponentSetup (chunk-UDHLJWFM.js?v=c44ac796:7776:7) at handleSetupResult (chunk-UDHLJWFM.js?v=c44ac796:7730:3) at setupStatefulComponent (chunk-UDHLJWFM.js?v=c44ac796:7699:7)

this is the q-grid definition <q-grid :rows="portfolioScoreCards" :columns="columns" row-key="key" :columns_filter="true" table-class="mytable" table-header-class="header"

   rows-per-page-label="records/page"
  icon-first-page="mdi-home"
  icon-last-page="mdi-all-inclusive"
  icon-next-page="mdi-arrow-right"
  icon-prev-page="mdi-arrow-left"
  no-data-label="I can't find any data 😞"
    :loading="true"
  loading-label="Loading Portfolio Scorecards!"
  :global_search="true"
  :visible-columns="[
    'model', 'assetGroup', 'riskLevel', 'region', 'alpha', 'beta', 'ir', 'lpr',
    'm2', 'roi', 'risk', 'sor', 'std', 'cagr', 'maxdd', 'sharpe', 'var1', 'var2'
  ]"

  :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => {
    return `page ${endRowIndex}/${totalRowsNumber}`
  }"
@request="handleSort"

/> I am on quasar , vite, vue 3 latest repo.

[pratik227]

Can you provide sample data as well ?