Hilla-react Auto Grid with GridSelectionColumn

[cvmabilin]

Good day, I would like to know how can we use the GridSelectionColumn on Auto Grid feature? I have tried the following and the column (main checkbox) is not rendered.

used in customColumn

output screen

Thank you.

Expected-behavior

I think the output should be the same as the Grid Component. Please let me know if I am missing some procedure.

Reproduction

Here is my AutoGrid code:

  <AutoGrid
    className="m-l"
    service={AdminOrderServiceCallable}
    model={AdminOrderDtoModel}
    ref={autoGridRef}
    visibleColumns={
      [
        "selection",
        "createdBy",
        "category",
        "service", 
        "link", 
        "quantity",
        "rate",
        "status",
        "createdAt",
        "action"
      ]
    }
    columnOptions={{
      createdAt: {
        renderer: readColumnItem
      }
    }}
    customColumns={[
      <GridSelectionColumn
        key="selection"
      />,
      <GridColumn 
        key="action" 
        renderer={({ item }: {item: AdminOrderDto}) => <TableActionComponent/>} 
        header={t("page.table.actions")}
        autoWidth 
      />,
    ]}
  />

System Info

Java version: 17 Hilla version: 2.5.6

[taefi]

Thanks @cvmabilin, for creating this issue, it is a bug indeed.

Apart from the reported bug, my personal preference would be to see a new property e.g. called selectionColumn in AutoGrid, so that the user don't need to deal with customColumns and visibleColumns for this purpose. A quick draft would look like this.

However, it seems regardless of the way you try adding the <GridSelectionColumn /> to the AutoGrid, the "Select All" checkbox becomes hidden as you reported. Looking at the elements shows that it is present on the header but something's making it hidden (though, solely making it visible will not fix the issue):

First, I thought maybe having a GridColumnGroup for the header filters is the cause, but adding a noHeaderFilter didn't alleviate the problem either. Seems not like a regression in Grid component either, since the same functionality is working fine in a normal Grid. Haven't investigate it further yet.

[taefi]

Well, more investigation shows that the behavior is coming from the fact that <GridSelectionColumn /> is behaving this way intentionally when the items is not used to set the data to the Grid. The underlying web-component's implementation makes it hidden explicitly: https://github.com/vaadin/web-components/blob/e7aba8b2d5c4856c3cc7832059d52a7d1822d860/packages/grid/src/vaadin-grid-selection-column-mixin.js#L176-L178 The reason is the assumption that instead of loading the items lazily, it would have to fetch all items when select-all checkbox is selected, which is not intended when using a data provider.