Single entity rows not clickable after first row

When using a list in an attribute of a single entity to populate rows, only the first row is clickable.

While clicking any row would exhibit identical behavior since there is only one entity, it is still desirable that all rows honor the clickable option.

Consider this configuration:

type: custom:flex-table-card
entities:
  include: sensor.wine_inventory
clickable: true
columns:
  - name: Vintage
    data: inventory
    modify: >-
      if(parseFloat(x.Vintage).toFixed(0) == 1001) {"N.V."}
      else{parseFloat(x.Vintage).toFixed(0)}
  - name: Wine
    data: inventory
    modify: x.Wine

The "inventory" attribute of the entity contains:

inventory: 
- Vintage: '2020'
  Wine: Cinder Syrah Snake River Valley
- Vintage: '2020'
  Wine: Famille De Boel France Côtes du Rhône Villages Massif d'Uchaux Aleph
- Vintage: '2015'
  Wine: Fernández de Manzanos Rioja Gran Reserva
...

The result is a table where only the first row is clickable. It returns the more-info dialog for the sensor.wine_inventory entity.

Wine

Fortunately, the fix is trivial, I believe. The root cause is that all rows possess the identical "id", so the "onclick" event only gets attached to the first row. Simply adding the row index to the "id" fixes this, and does not seem to impact the more typical case of displaying multiple entities.

PR to follow.

custom-cards / flex-table-card

Single entity rows not clickable after first row #101