Add percentage based column widths

[pzuraq]

It should be possible to specify column widths as percentages of the container

[cah-danmonroe]

I would like to see this as being able to set widths as percentages OR by px. Some of my columns, I don't want to change size while the others I want as percentages. For example, I have my last column that contains an icon(s) and I always want that one to be 70px. While the others I may want 25%, 30%, etc.

[pzuraq]

To be clear, I'm assuming you want the percentage behavior to work with whatever is remaining after the fixed columns are put in place. So for instance, if you had columns that were ['10px', '50%', '50%'] and the container was 100px wide, you would want the final widths to be 10px, 45px, and 45px.

This is tricky, because now we're no longer mirroring the behavior of CSS, and creating our own DSL for widths, and it's strictly less flexible. For instance, what if someone wants all columns to be 1/4th the container width, but has more than 4 columns? With straight percentage based columns this case makes sense still, with the model above it does not.

We could also attempt to mirror CSS calc's behavior (e.g. calc(50% - 5px)) but then we're basically reimplementing CSS 😅

I would err on keeping things simpler so we can expand the behavior later, and possibly solve it in other ways. For instance, percentage widths like above combined with widthConstraint could get the end effect you're looking for.

[cah-danmonroe]

I got this to work without changes with:

let columns = [
	{
        name: 'Name 1',
        valuePath: 'name',
        cssClass: 'customCSS1'
    }, 
    {
        name: 'Column 2',
        valuePath: 'foo',
        cssClass: 'customCSS2'
    }, 
    {
        name: 'Column N',
        valuePath: 'bar',
        cssClass: 'customCSS3'
	}
];

{{#header.row as |headerrow|}}
    {{headerrow.cell class=headerrow.columnValue.cssClass}}
{{/header.row}}

{{#row.cell class=row.columnValue.cssClass as |cellValue|}}

    td, th {
        &.customCSS1 {
            width: 50px !important;
        }
        &.customCSS2 {
            width: 15% !important;
        }
        &.customCSS3 {
            width: 35% !important;
        }
    }

Thanks for chatting about it in Slack!