props columns at q-table showing error when using typescript

[argaWirawan1234-tech]

when I use quasar typescript and use q-table, there is an error underlined at columns props which have value from columns variable I return from setup(using composition api) like this :

the error says:

Type '{ name: string; align: string; label: string; field: string; sortable: boolean; }[]' is not assignable to type '{ name: string; label: string; field: string | ((row: any) => any); required?: boolean | undefined; align?: "center" | "left" | "right" | undefined; sortable?: boolean | undefined; sort?: ((a: any, b: any, rowA: any, rowB: any) => number) | undefined; ... 5 more ...; headerClasses?: string | undefined; }[]'.

the columns variable returned from setup:
const columns = [ { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true } ]

I think the element of columns array is match with the type of QTableProps.columns with the required and optional property, but it still give the error like in image preview

[metalsadman]

see the pinned messages in our discord server https://discord.com/channels/415874313728688138/807654245640962059/949981798811729980

[aktentasche]

I created a discord account, gave discord my phone number, installed the app, joined the quasar discord just to get this ;)

<template>
  <q-table :rows="users" :columns="columns" />
</template>

<script lang="ts" setup>
import { QTableColumn } from 'quasar';
import { ref } from 'vue';

interface User {
  id: number;
  name: string;
  address: {
    city: string;
    country: string;
  };
}

// You will get auto-complete on properties like `align`('left', 'right', etc.), `field`('id', 'name' and 'address' because of User), etc.
const columns: QTableColumn<User>[] = [
  { name: 'name', align: 'left', label: 'Name', field: 'name' },
  {
    name: 'city',
    align: 'left',
    label: 'City',
    // row is type of User, we get IntelliSense, etc.
    field: (row) => row.address.city,
  },
];

const users = ref<User[]>([/* ... */]);
</script>

[yusufkandemir]

You can use the QTableColumn type for this.

<template>
  <q-table :rows="users" :columns="columns" />
</template>

<script lang="ts" setup>
import { QTableColumn } from 'quasar';
import { ref } from 'vue';

interface User {
  id: number;
  name: string;
  address: {
    city: string;
    country: string;
  };
}

// You will get auto-complete on properties like `align`('left', 'right', etc.), `field`('id', 'name' and 'address' because of User), etc.
const columns: QTableColumn<User>[] = [
  { name: 'name', align: 'left', label: 'Name', field: 'name' },
  {
    name: 'city',
    align: 'left',
    label: 'City',
    // row is type of User, we get IntelliSense, etc.
    field: (row) => row.address.city,
  },
];

const users = ref<User[]>([/* ... */]);
</script>

[itsalb3rt]

Thanks! this works