[Bug]: Fluent Table/DataGrid - how to disable toggleRow functionality for loading / skeleton rows?

[arolariu]

Component

Table

Package version

9.55.0

React version

18.2

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 53.59 GB / 62.78 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash

Current Behavior

Hi,

Just a random question - let me know if this is a duplicate:

• how can we leverage Fluent's multiselect table components (Table and DataGrid) to implement a controlled table that has selectable rows (let's call them data rows) and NOT selectable loading/skeleton rows?

Suppose we have a table with 2 elements. One row is a data row - it contains useful data; the other is a loading row - it is a simple loading row with no actual data - just a skeleton/shimmer animation.

I want to be able to only select the first row and that's it.
The behavior should be:

• main checkbox (header row checkbox) is in a true state, not mixed nor false.
• the first row (data row)'s checkbox is in a true state.
• the second row (loading row)'s checkbox is not available anyway - the DOM element is a simple div.

Currently, I am able to achieve this behavior by doing an unconventional method:
I programmatically remove the loading row from the items passed to the useTableFeatures hook:

const { selection } = useTableFeatures(
    {
      columns,
      items: items.filter((row) => row.item.rowType === "DATA"),
      getRowId: (row) => row.rowId,
    },
    [
      useTableSelection({
        selectionMode: "multiselect",
        selectedItems: selectedRows,
        onSelectionChange: onSelectionChange,
      }),
    ]
  );

I can see that internally, in the fluentUI\packages\react-components\react-table\library\src\hooks\useTableSelection.ts file, we do have some code that hints to selectable rows:

  // Selection state can contain obselete items (i.e. rows that are removed)
  const selectableRowIds = React.useMemo(() => {
    const rowIds = new Set<TableRowId>();
    for (let i = 0; i < items.length; i++) {
      rowIds.add(getRowId?.(items[i]) ?? i); 
                                  // ^^---- doesn't this seem wrong? 
                                  // we're basically assigning a number id to a row (`loading row`)
                                  // that shouldn't be selectable anyway... (and presumably should have no id)?
    }

    return rowIds;
  }, [items, getRowId]);

I do not know how to progress further from here.
I have the workaround that I've mentioned above, but I am looking for a concrete answer to my question from the beginning.

Expected Behavior

Proposed expected behavior: Fluent should have a documented, official way to describe how we can implement a controlled multiselect table (Table or DataGrid component) that contains different kinds of row items - actual data rows, loading rows, footer rows, etc.

I was not able to find any story and/or documentation in regards to this behavior.

Reproduction

https://stackblitz.com/edit/bzl56nww?file=src%2Fexample.tsx

All selectable rows selected:

ALl selectable rows deselected:

Steps to reproduce

1. Open StackBlitz and/or copy code to local dev machine.
2. Install packages and run dev.
3. Observe the issue - the checkbox is in a mixed state, even though the only selectable rows are selected!

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[arolariu]

If you want more information on my use case, you can also reach out to me internally - aolariu.
I'm open to collaborate and/or even submit a fix+docs, given enough information on how-to.