Index Table Bulk Select (Poor documentation)

Built for Shopify
1

I’ve popped this in here as its probably the closest category. It’s very disappointing to see how poorly written the documentation is for Polaris when its a requirement for BFS.

I’m currently trying to implement the ‘Select X+ in this store’ in the IndexTable. Basically after selecting the entire page of data, you can then display ‘Select all’. I’ve managed to get it to this point (after sifting through the source code) but I’m still at a bit of a road block where once you’ve checked the select all checkbox, I’m unable to uncheck it. It works when unchecking a single row

Screenshot 2024-10-25 at 15.37.16
Screenshot 2024-10-25 at 15.37.16664×184 15.3 KB

Using what I understand from the source code, I’ve used the following for onSelectionChange on the IndexTable:

onSelectionChange={(selectionType, isSelecting, selection, position) => {
  switch (selectionType) {
    case 'all':
      handleSelectionChange(
        selectionType,
        isSelecting,
        allProducts.map((product) => product.id)
      );
      break;
    case 'page':
      handleSelectionChange(
        selectionType,
        isSelecting,
        paginatedProducts.map((product) => product.id)
      );
      break;
    case 'multi':
      handleSelectionChange(selectionType, isSelecting, selection);
      break;
    case 'single':
      handleSelectionChange(selectionType, isSelecting, selection);
      break;
    case 'range':
      handleSelectionChange(selectionType, isSelecting, selection, position);
      break;
    default:
      console.warn(`Unhandled selection type: ${selectionType}`);
  }
}}

The documentation does explain at all how to do this, the available props also miss countless options that are available in the source. So to close this off does anybody have any ideas how to allow the uncheck all to work.

And finally, I beg can we please get documentation updated, including all available props and having some clear examples with clear code (also not using legacy components would be great too)

2

Maybe I just do not understand what’s wrong here but this documentation seems to demonstrate the “Select X+ in this store” which does allow for selection and deselection.

3

Yes it has that but its missing so much more. For example if you just use the following, how do you actually set the selectedResources to be all the data rather than your current page? The example is labelled as ‘bulk selection across pages’ but doesn’t explain how you provide all the data rather than the current page.

onSelectionChange={handleSelectionChange}

Then continuing on from there, I’m having an issue where when I select the page (20 results in this case), I’m unable to uncheck it. But if I then click ‘Select all products’, I can uncheck it.

I’m also having an issue where when selecting the page, the checkbox is showing a dash instead of a check (which the docs example does). The dash should only be shown when selecting individual rows. So I’m also not sure what’s wrong here.