<template>
  <q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true" selection="multiple"
          :csv_download="true" file_name="sample" :groupby_filter="true"
          :selected="selected"
          @selected-val="GetSelected($event)"></q-grid>

  <div class="q-mt-md">
    Selected: {{ JSON.stringify(selected) }}
  </div>


</template>

**....**

export default defineComponent({
  name: "GroupingComponent",
  setup() {
    return {
      columns,
      data,
      selected:ref([]),
      GetSelected(Selected) {
        console.log(Selected)
        console.log(this.selected)
      }
    }
  }
})
</script>

                   vue/no-deprecated-v-on-native-modifier

                   vue/no-deprecated-slot-attribute

                   vue/no-deprecated-slot-scope-attribute

                   vue/no-deprecated-slot-attribute

                   vue/no-deprecated-slot-scope-attribute

                   vue/no-deprecated-dollar-scopedslots-api

  <div class="q-pa-md">
    <q-table
      ref="tableRef"
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="id"
      v-model:pagination="pagination"
      :loading="loading"
      :filter="filter"
      binary-state-sort
      @request="onRequest"
    >
      <template v-slot:top-right>
        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>

    </q-table>
  </div>
</template>

          let column_option = []

          for ( let col of column_option_simple) {
              column_option.push({'label' : col.toString(), 'value': col.toString().toLowerCase().replace(/_/g, '_')})
          }

          return column_option
        }`

   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"

<q-grid :data="data" :columns="columns" :columns_filter="true">
     <template v-slot:body="props">
        <q-tr :props="props">
          <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>
        </q-tr>
      </template>
</q-grid>

<q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true">
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="name">
              {{ props.row.name }}
            </q-td>
.....

  at <Test1 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <QPageContainer> 
  at <QLayout view="lHh Lpr lFf" > 
  at <MyLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>

 "Extension(qgrid): is not compatible with quasar v1
.12.3. Required version: ^2.0.0-beta.12"

<q-grid
      :data="rows"
      :columns="columns"
      :columns_filter="true"
      :draggable="true"
      selection="multiple"
      :selected="selected"
      row_key="name"
      @selected-val="GetSelected($event)"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td>
            <q-checkbox
              color="primary"
              v-model="selected"
              :val="props.row"
              @update:model-value="sendToSelected(props.row.id)"
            />
          </q-td>
          <q-td key="id">
            {{ props.row.id }}
          </q-td>
          <q-td key="owner">
            {{ props.row.owner }}
          </q-td>
          <q-td key="lotNumber">
            {{ props.row.lotNumber }}
          </q-td>
          <q-td key="productId">
            {{ props.row.productId }}
          </q-td>
          <q-td>
            <q-btn
              icon="message"
              flat
              color="accent"
              @click="dataAndShow(props.row)"
            />
          </q-td>
        </q-tr>
      </template>
    </q-grid>

    const columns = [
      {
        name: "id",
        required: true,
        label: "idHeader",
        field: (row) => row.id,
        align: "center",
        sortable: true,
      },
      {
        name: "owner",
        required: true,
        label: "owner",
        align: "center",
        field: (row) => row.owner,
        format: (val) => `${val}`,
        sortable: true,
      },
      {
        name: "lotNumber",
        required: true,
        label: "lotNumber",
        align: "center",
        field: (row) => row.lotNumber,
        format: (val) => `${val}`,
        sortable: true,
      },
      {
        name: "productId",
        required: true,
        label: "productId",
        align: "center",
        field: (row) => row.productId,
        format: (val) => `${val}`,
        sortable: true,
      },
    ];
    const rows = ref([]);

 rows.value.push({
              id: element.attrs[0].value
                .toString()
                .substr(0, element.attrs[0].value.indexOf("#")),
              owner: element.attrs[1].value.toString(),
              lotNumber: element.attrs[2].value.toString(),
              productId: element.attrs[3].value.toString(),
              sellable: element.attrs[4].value.toString(),
              claimed: element.attrs[5].value.toString(),
            });

      {
          "_id": "12132",
          "externalcode": "1",
          "name": "Doe",
          "address": {
              "street": "Lorem",
              "zipcode": "123",
              "city": "Lorem",
          },
}

const columns = [
  {
    name: 'city',
    required: true,
    label: 'city',
    field: 'address.city',
    sortable: true,
  },
];

const columns = [
  {
    name: "evrakTip",
    align: "center",
    label: "Evrak Tipi",
    field: (row) => row.DocTypes.TypeCode,
    sortable: true,
    filter_type: "select",
    show_filter: true,
  },
  ...
];

TypeError: Cannot read property 'toString' of null
    at eval (QGrid.vue?a3f7:320)
    at Array.filter (<anonymous>)
    at VueComponent.getFilteredData (QGrid.vue?a3f7:314)
    at Watcher.get (vue.runtime.esm.js?5593:4479)
    at Watcher.evaluate (vue.runtime.esm.js?5593:4584)
    at VueComponent.computedGetter [as getFilteredData] (vue.runtime.esm.js?5593:4836)
    at VueComponent.getFilteredValuesData (QGrid.vue?a3f7:333)
    at Watcher.get (vue.runtime.esm.js?5593:4479)
    at Watcher.evaluate (vue.runtime.esm.js?5593:4584)
    at VueComponent.computedGetter [as getFilteredValuesData] (vue.runtime.esm.js?5593:4836)

columns: [
    { name: "name", label: "name", field: "name" },
    { name: "function", label: "function", field: "function" }
]

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... quasar-project
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite (BETA stage)
√ Package name: ... quasar-project
√ Project product name: (must start with letter if building mobile apps) ... Quasar App
√ Project description: ... A Quasar Project
√ Author: ... Thomas <[email protected]>
√ Pick a Vue component style: » Composition API
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » ESLint
√ Pick an ESLint preset: » Prettier

 Quasar • Generating files...

 - index.html
 - postcss.config.js
 - quasar.config.js
 - README.md
 - .editorconfig
 - .gitignore
 - package.json
 - tsconfig.json
 - public/favicon.ico
 - src/App.vue
 - src/env.d.ts
 - src/quasar.d.ts
 - src/shims-vue.d.ts
 - .vscode/extensions.json
 - .vscode/settings.json
 - public/icons/favicon-128x128.png
 - public/icons/favicon-16x16.png
 - public/icons/favicon-32x32.png
 - public/icons/favicon-96x96.png
 - src/assets/quasar-logo-vertical.svg
 - src/boot/.gitkeep
 - src/components/EssentialLink.vue
 - src/components/ExampleComponent.vue
 - src/components/models.ts
 - src/layouts/MainLayout.vue
 - src/pages/ErrorNotFound.vue
 - src/pages/IndexPage.vue
 - src/router/index.ts
 - src/router/routes.ts
 - src/css/app.scss
 - src/css/quasar.variables.scss
 - .eslintignore
 - .eslintrc.js
 - .prettierrc

 Quasar •  SUCCESS  • The project has been scaffolded

 App • Running "qgrid" Quasar App Extension...

 App • ⚠️  Extension(qgrid): Dependency not found - @quasar/app. Please install it.

❯ npm i @quasar/app

added 520 packages, and audited 921 packages in 25s

136 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (3 high, 2 critical)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

❯ quasar dev

 App • ⚠️  Error. This command must be executed inside a Quasar v1+ project folder.

<q-grid :data="data" :columns="columns" :columns_filter="true"></q-grid>

 "dependencies": {
    "@quasar/extras": "^1.8.1",
    "axios": "^0.19.0",
    "git-branch": "^2.0.1",
    "global": "^4.4.0",
    "quasar": "^1.12.1",
    "shipit-nvm": "^0.0.6",
    "shipit-shared": "^4.4.2"
  },
  "devDependencies": {
    "@quasar/app": "^1.2.4",
    "@quasar/quasar-app-extension-icon-genie": "^1.1.2",
    "@quasar/quasar-app-extension-qenv": "^1.0.0-beta.2",
    "babel-eslint": "^10.0.2",
    "cypress": "^4.0.1",
    "eslint": "^6.1.0",
    "eslint-config-standard": "^13.0.1",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-cypress": "^2.6.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "node-sass": "^4.12.0",
    "quasar-app-extension-qgrid": "^0.0.2",
    "sass-loader": "^7.1.0",
    "shipit-cli": "^5.0.0",
    "shipit-deploy": "^5.0.0"
  },
  "engines": {
    "node": ">= 10.20.1",
    "npm": ">= 6.14.15",
    "yarn": ">= 1.22.4"
  },

<template>
  <q-page padding>
    <q-grid :data="data" :columns="columns" :columns_filter="true"></q-grid>
  </q-page>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            name: 'name',
            required: true,
            label: 'Dessert (100g serving)',
            align: 'left',
            field: 'name',
            sortable: true
          },
          {name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true},
          {name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true},
          {name: 'carbs', label: 'Carbs (g)', field: 'carbs'},
          {name: 'protein', label: 'Protein (g)', field: 'protein'},
          {name: 'sodium', label: 'Sodium (mg)', field: 'sodium'},
          {
            name: 'calcium',
            label: 'Calcium (%)',
            field: 'calcium',
            sortable: true,
            sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
          },
          {
            name: 'iron',
            label: 'Iron (%)',
            field: 'iron',
            sortable: true,
            sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
          }
        ],
        data: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            sodium: 87,
            calcium: '14%',
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            sodium: 129,
            calcium: '8%',
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            sodium: 337,
            calcium: '6%',
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            sodium: 413,
            calcium: '3%',
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            sodium: 327,
            calcium: '7%',
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            sodium: 50,
            calcium: '0%',
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            sodium: 38,
            calcium: '0%',
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            sodium: 562,
            calcium: '0%',
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            sodium: 326,
            calcium: '2%',
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            sodium: 54,
            calcium: '12%',
            iron: '6%'
          }
        ]
      }
    }
  };
</script>

<q-grid
                :row_key="'Id'"
                :data="rows"
                :columns="columns"
                :columns_filter="true"
                `selection="multiple"`
                :selected="selected"
                @selected-val="GetSelected($event)"
              >                
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td>
                      <q-checkbox color="secondary" v-model="props.selected" />
                    </q-td>
                   ...
                  </q-tr></template
                >
              </q-grid>


const columns = [
  { name: "durum",label: "Durum",field: "DurumAciklama",sortable: true,align: "left",filter_type: "select",},
  { name: "cari",label: "Cari Adı",field: "CariAd",sortable: true,align: "left",required: true,},
  { name: "islem",label: "Link Tip",field: "TipAciklama",sortable: true,align: "left",},
  { name: "tarih",label: "Tarih",align: "left",field: "Tarih",sortable: true,filter_type: "date",},
  { name: "belgeNo",label: "Belge No",field: "BelgeNo",sortable: true,align: "left",},
  { name: "link", label: "Link", field: "Link", sortable: true, align: "left" },
];

setup() {
...
const GetSelected = (s) => {
      selected.value = s
    };

 return {      
      selected: ref([]),
      GetSelected
      ...    
    }},;