When a QTable `columns` prop has the `align` set to `'left'` or `'right'` or `'center'` it throws a TypeScript error

What happened?

When a QTable columns prop has the align set to 'left' or 'right' or 'center' it throws this TypeScript error:

Type '({ name: string; label: string; field: string; required: boolean; align: string; sortable: boolean; format?: undefined; } | { name: string; label: string; field: string; sortable: boolean; required?: undefined; align?: undefined; format?: undefined; } | { ...; })[]' is not assignable to type '{ name: string; label: string; field: string | ((row: any) => any); required?: boolean | undefined; align?: "left" | "right" | "center" | undefined; sortable?: boolean | undefined; sort?: ((a: any, b: any, rowA: any, rowB: any) => number) | undefined; ... 5 more ...; headerClasses?: string | undefined; }[]'.
  Type '{ name: string; label: string; field: string; required: boolean; align: string; sortable: boolean; format?: undefined; } | { name: string; label: string; field: string; sortable: boolean; required?: undefined; align?: undefined; format?: undefined; } | { ...; }' is not assignable to type '{ name: string; label: string; field: string | ((row: any) => any); required?: boolean | undefined; align?: "left" | "right" | "center" | undefined; sortable?: boolean | undefined; sort?: ((a: any, b: any, rowA: any, rowB: any) => number) | undefined; ... 5 more ...; headerClasses?: string | undefined; }'.ts(2322)
[index.d.ts(10354, 3): ]()The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & VNodeProps & AllowedComponentProps & ComponentCustomProps & QTableProps'

The align property of QTableProps.columns is typed as align?: "left" | "right" | "center" | undefined; which looks correct. So I have no idea why this is happening.

What did you expect to happen?

No TypeScript error should be showing.

Reproduction URL

n/a

How to reproduce?

1. Create a new Quasar app using the Quasar CLI. Settings: TypeScript, Sass with SCSS Syntax, EsLint, Composition API, Prettier, NPM.
2. Create a QTable <q-table title="Tickets" row-key="id" :rows="rows" :columns="columns"></q-table>
3. Set the align property on the columns prop like so:

const columns = [
  {
    name: 'calories',
    label: 'Calories',
    field: 'calories',
    align: 'center',
  },
];

Now there will be a TypeScript error on :columns.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

TypeScript Support

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(21.4.0) - darwin/x64
NodeJs - 14.17.6

Global packages
  NPM - 8.5.4
  yarn - 1.22.11
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.4.2
  cordova - Not installed

Important local packages
  quasar - 2.6.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.4.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.13.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.13
  pinia - 2.0.11 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.5 -- Babel compiler core.
  webpack - 5.70.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - MacBook-Pro.local
  en0 - 192.168.20.11

Relevant log output

No response

Additional context

No response

[BenJackGill]

Hi thanks for the help.

Unfortunatley this did not work for me, it was showing the same error as before:

import { QTableColumn } from 'quasar'

const columns: QTableColumn[] = [
  {
    name: 'calories',
    label: 'Calories',
    field: 'calories',
    align: 'center',
  },
];

But this other solution did work, which was found in the comment you linked:

import { QTableProps } from 'quasar';

const columns: QTableProps['columns'] = [
  {
    name: 'calories',
    label: 'Calories',
    field: 'calories',
    align: 'center',
  },
];

[taai]

Hi thanks for the help.

Unfortunatley this did not work for me, it was showing the same error as before:

import { QTableColumn } from 'quasar'

const columns: QTableColumn[] = [
  {
    name: 'calories',
    label: 'Calories',
    field: 'calories',
    align: 'center',
  },
];

But this other solution did work, which was found in the comment you linked:

import { QTableProps } from 'quasar';

const columns: QTableProps['columns'] = [
  {
    name: 'calories',
    label: 'Calories',
    field: 'calories',
    align: 'center',
  },
];

@BenJackGill Thank you! I spent hours to figure this out and finally I came here and saw your solution. I was about to create a new issue, but wanted to check if someone else has created it (to avoid issue duplicates)… Please, include this solution in documentation! 🙏