IndexTable: Override dataPrimaryLink for individual cells

Polaris
1

Using the IndexTable I’m trying to emulate the functionality that the Shopify admin Companies page uses, where the row can be clicked anywhere as the main navigation link, but also has links in specific cells that work independently to the default navigation link:

Screenshot 2025-08-03 165132
Screenshot 2025-08-03 1651322545×667 90.3 KB

(independent override links highlighted)

If I use the dataPrimaryLink on my primary link, then my cells with independent links won’t work - any clicks to these links just get captured and go to the primary link instead.

If I don’t use the dataPrimaryLink then all links work independently as desired, but clicking in other white space in the row no longer navigates to the primary link.

Any ideas how I can get the components to emulate the Companies table behavior?

Here’s my code when dataPrimaryLink is in play:

<IndexTable.Row id={location.shopifyLocationId} key={location.shopifyLocationId} position={index}>
  <IndexTable.Cell>
    <Link dataPrimaryLink removeUnderline monochrome url={`/app/locations/${location.shopifyLocationId}`}>
      <Text as="span" fontWeight="medium">
        {location.name}
      </Text>
    </Link>
  </IndexTable.Cell>
  <IndexTable.Cell>
    <Link removeUnderline monochrome url={`shopify:admin/orders?status=open&reference_location_id=${location.shopifyLocationId}`}>
      <Text as="span">
        {location._count.fulfillments} {location._count.fulfillments === 1 ? 'fulfillment' : 'fulfillments'}
      </Text>
    </Link>
  </IndexTable.Cell>
  <IndexTable.Cell>
    {location.active && <Badge tone="success">Active</Badge>}
    {!location.active && <Badge>Inactive</Badge>}
  </IndexTable.Cell>
  <IndexTable.Cell>
    <Link removeUnderline monochrome url={`/app/connections/${location.connection.id}`}>
      <Text as="span">
        {location.connection.name}
      </Text>
    </Link>
  </IndexTable.Cell>
</IndexTable.Row>