Setting auto-width on a column without defining q-td

[anli-xsigns]

Hello quasar community!

I have a QTable with defined columns. I want to set the max-width of the first column (ID) to e. g. 200px. I experimented with the style property of the column but that gave no results. I found the auto-width property of QTd API but I want to avoid defining the html like in
https://stackoverflow.com/questions/63589658/id-value-on-q-td-for-quasar-qtable-when-displaying-complex-content-in-table-cell because I want to reuse the QTable code in a component. I didn't find a proper way to set the column to a smaller width. Do you have any ideas? Thanks a lot for your thoughts in advance!

[MilosPaunovic]

You could make use of classes attribute while defining columns.

{
  name: 'members',
  label: 'Members',
  required: true,
  align: 'left',
  field: (row) => row.members,
  classes: 'q-table--col-auto-width',
  sortable: false,
},

[anli-xsigns]

Great idea! Works like charm! Thanks a lot! Have a great day 🥳

[pratik227]

@anli-xsigns

Use Style.

{
    name: 'name',
    required: true,
    label: 'Dessert (100g serving)',
    align: 'left',
    field: row => row.name,
    format: val => `${val}`,
    sortable: true,
    style: 'width: 200px',
  }

https://codepen.io/Pratik__007/pen/oNqGGxK

[Scanvaegt]

In your codepen, try having less columns (e.g. only 3 columns), and you will see the there is a problem. The width is not 200px. Even if you change the style to e.g. 'max-width: 50px' the column is much wider.

[pratik227]

It's 200px only

[Scanvaegt]

Indeed, you are complete right!
Thanks for the quick reply.
The center alignment of 'Calories' tricked me 🙂