Data table: set classes on a column level

[juancarlosgzs]

Which scope/s are relevant/related to the feature request?

data-table

Information

Currently when doing the definition of columns, if either your title or the cell content is larger than the other, you will need to manually specify the width of the column, but there is no way to do it directly, so the only way to set the width to both the hlm-th and hlm-td.

Something like the following I think it could help:

<brn-column-def name="reference" class="w-52">
    <hlm-th *brnHeaderDef>
      {{ translate('__reference') }}
    </hlm-th>
    <hlm-td *brnCellDef="let order"> {{ order.reference }} </hlm-td>
  </brn-column-def>

Where the class in the column definition would be passed along to both the th and the td. The same would apply for classes such as sticky and right-0 / left-0.

I think by default the column should have the max length of either the header or the td as Material CDK Table does: https://stackblitz.com/edit/xazfqt?file=src%2Fexample%2Fcdk-table-basic-example.ts

Doing the same example with Spartan's data table would end up with the "Name" title being right beside the "Reference" title, same would apply to the "Quantity" title

Describe any alternatives/workarounds you're currently using

<brn-column-def name="reference">
    <hlm-th class="w-52" *brnHeaderDef>
      {{ translate('__reference') }}
    </hlm-th>
    <hlm-td class="w-52" *brnCellDef="let order"> {{ order.reference }} </hlm-td>
  </brn-column-def>

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [X] No

[goetzrobin]

@juancarlosgzs this will be supported in the next alpha we release

[juancarlosgzs]

@juancarlosgzs this will be supported in the next alpha we release

Great! Is the default width as in the example I provided of @angular/cdk table, included?

[goetzrobin]

@juancarlosgzs this will be supported in the next alpha we release

Great! Is the default width as in the example I provided of @angular/cdk table, included?

I missed that part. I see what you are saying and this is a trade off by going with flex as there is no "CSS native" connection between header and data. I'll have to think if that's possible in an "easy" way

[goetzrobin]

Setting classes like this is now supported. However, we are debating to move to a more Material like implementation, which would allow you to use a native table or a flex based table