[IndexTable] Flexible positioning of cells within grid template

[fbasmaison-lucca]

https://github.com/LuccaSA/lucca-front/blob/9c8aa69d9da13ee330f44fd4e29f24870f88a781/packages/scss/src/components/indexTable/mods.scss#L147

@BertrandPodevin : I’m wondering why each cell is forced to start at column 1.

Maybe I’m missing something, but should we make this a var(--components-indexTable-cell-colum-start, auto) to allow alignment on any column specified by --components-indexTable-row-responsive-grid-template-*, without using !important?

[fbasmaison-lucca]

Alternatively, could we remove the value altogether, and leave it to each implementation to deal with the alignment of each column or area?

[BertrandPodevin]

That because the responsiveCardList default (basic) layout is a one column grid where cells automaticaly flow on the vertical axis without any further code needed.

Customs layouts are still entirely possibles, an example of it is documented here : Responsive card list personnalisée

I think that those layouts should be hosted in their own mod to gain more specificity and prevent the needs for !important

[BertrandPodevin]

To add more flexibility, cells default grid-columns could indeed be defined with a var + fallback

[fbasmaison-lucca]

I understand the intention of defining a default, but I’m having trouble dealing with it.

I’m trying to do the following layout, assigning the different cells to their respective area:

:host {
  --components-indexTable-row-responsive-grid-template-areas:
    'merchant merchant amount'
    'date     event    amount'
  ;
  --components-indexTable-row-responsive-grid-template-columns: min-content auto min-content;
  --components-indexTable-row-responsive-grid-template-rows: auto;
}

.operation-event {
  @include media.max('S') {
    grid-area: event;
  }
}

.operation-merchant {
  @include media.max('S') {
    grid-area: merchant;
  }
}

[…]

This results in the following layout:

Disabling grid-column-start: 1; gives me the expected layout:

Adding a grid-column-start: var(--components-indexTable-cell-colum-start, auto) !important; will still require to add the variable in every cell selector, along the grid-area I’m using, which will also need an !important or that I specify each property instead of using grid-area, otherwise spanning cells seem to not work properly (unless we add span in the mix).

Is there a better way to deal with this layout than adding a series of !important for each area?