Understanding data table column "width"

[Kestami]

Development Relevant Information:

• BalmUI version: 9.38.2
• Browser: Chrome
• Operating System: Win 10

Hi,

I'm just trying to understand how the width custom field works for datatables as detailed here: https://next-material.balmjs.com/#/data-display/table

I can see a width property was added new in 9.7.0 but I'm not quite sure how it works. I've got two data tables, both defined with two columns like so:

thead: [ 
   {
      value: 'column1'
   },
   {
      value: 'column2'
   }
],
tbody: [
   {
      field: 'field1',
      width: 130
   },
   {
      field: 'field2',
      width: 150
   }
]

However the widths of the columns don't seem to respect these values at all. The data within the columns are of different lengths, I wonder what I'm missing?

I assume the "width" value is a measurement in px? should this width be fixed regardless of the length of data inside of them, and a word wrap applied?

Thanks again for all your help, let me know if anything I've described isn't clear.

Cheers.

[Kestami]

Hi,

Apologies for chasing, any update on this?

Cheers.

[elf-mouse]

Hi @Kestami ,

the width field of tbody only used to set column width for fixed cell, like this:

export default {
  data() {
    return {
      data: [
        {
          field1: 'cell 11',
          field2: 'cell 12',
          field3: 'cell 13',
          // more fields
          field4: 'cell 14'
        },
        {
          field1: 'cell 21',
          field2: 'cell 22',
          field3: 'cell 23',
          // more fields
          field4: 'cell 24'
        }
      ],
      thead: [
        {
          value: 'column1'
        },
        {
          value: 'column2'
        },
        {
          value: 'column3'
        },
        // more fields
        {
          value: 'column4'
        }
      ],
      tbody: [
        {
          field: 'field1',
          fixed: 'left',
          width: 100
        },
        {
          field: 'field2',
          width: 400
        },
        {
          field: 'field3',
          width: 800
        },
        // more fields
        {
          field: 'field4',
          fixed: 'right',
          width: 100
        }
      ]
    };
  }
};