First column of Index Table does not have border when selectable=false

[schiller-manuel]

Issue summary

I noticed that for the first column of an Index Table no border is shown when selectable=false

Expected behavior

All columns should have border.

Actual behavior

First column does not have border:

Steps to reproduce the problem

Use an Index Table with prop selectable={false}

I noticed that there is a white background for this column:

When disabling the white background,

almost all borders are correctly displayed, only the header row is missing its bottom border:

Reduced test case

This is directly visible in the Index Table documentation example "without checkboxes" on https://polaris.shopify.com/components/tables/index-table

The example code is located at: https://codesandbox.io/s/yubt4v?module=App.tsx&file=/App.tsx

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: latest, i.e. 11.4.3
• Browser: Firefox
• Device: MacBook
• Operating System: macOS 12.5

[github-actions]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[schiller-manuel]

still relevant

[github-actions]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[schiller-manuel]

seems to be fixed

[ngbrown]

This is still an issue with the current version of Polaris 13.9.2. It's happening in my app on Polaris and, even though it's not immediately visible, in the documentation. If you resize the width of the documentation preview or open the CodeSandbox (https://codesandbox.io/p/sandbox/lv94sl), it can be illustrated.

It seems to have something to do with when the table is scrolling or not, the cells move down slightly, covering the border.

Preview.-.nodebox.-.CodeSandbox.-.Google.Chrome.2025-03-08.13-05-21.mp4

This up/down jank when the scrollbar appears is also present without selectable={false}, but the background color isn't applied until the table actually starts scrolling.

I think the fix would be for this

polaris/polaris-react/src/components/IndexTable/IndexTable.module.css

Lines 91 to 97 in 2e767c9

	.TableCell-first,
	.TableCell-first + .TableCell,
	.TableHeading-first,
	.TableHeading-second {
	visibility: visible;
	background-color: var(--p-color-bg-surface);
	}

and this:

polaris/polaris-react/src/components/IndexTable/IndexTable.module.css

Lines 131 to 137 in 2e767c9

	&.Table-unselectable {
	/* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
	.TableHeading-second,
	.TableCell:first-child {
	visibility: visible;
	}
	}

to be merged (or at least add background-color to the Table--unselectable definition).

And this removed (remove background-color from the .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell:first-child definition):

polaris/polaris-react/src/components/IndexTable/IndexTable.module.css

Line 1108 in 2e767c9

background-color: var(--p-color-bg-surface);

As proof, I've overwritten the styles with the following CSS to get it working in my app:

.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky
  .Polaris-IndexTable__TableCell:first-child {
  background-color: transparent;
}

.Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--unselectable
  .Polaris-IndexTable__TableHeading--second,
.Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--unselectable
  .Polaris-IndexTable__TableHeading--second,
.Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--unselectable
  .Polaris-IndexTable__TableCell:first-child,
.Polaris-IndexTable__StickyTable--scrolling.Polaris-IndexTable__Table--unselectable
  .Polaris-IndexTable__TableCell:first-child {
  background-color: var(--p-color-bg-surface);
}

See CodeSandbox with the CSS applied: https://codesandbox.io/p/sandbox/interesting-saha-vlr3px

[dwchau]

i have a trick to fix it, with a code example like @ngbrown , i'll update it:

In rowMarkup, when you loop through the rows of the table, you just need to insert one "fake" column at the beginning. For example, if you have 6 columns, insert 1 column at the start, making a total of 7. For that first column, set display: none. Well, the problem is that this works for me.

in rowMarkup inside <IndexTable>{rowMarkup}</IndexTable>:

  const rowMarkup = orders.map(
    (
      { id, order, date, customer, total, paymentStatus, fulfillmentStatus },
      index
    ) => (
      <IndexTable.Row id={id} key={id} position={index}>
        {/* ========================= INSERT FAKE CELL HERE */}
          <IndexTable.Cell />

        <IndexTable.Cell>
          <Text variant="bodyMd" fontWeight="bold" as="span">
            {order}
          </Text>
        </IndexTable.Cell>
        <IndexTable.Cell>{date}</IndexTable.Cell>
        <IndexTable.Cell>{customer}</IndexTable.Cell>
        <IndexTable.Cell>
          <Text as="span" alignment="end" numeric>
            {total}
          </Text>
        </IndexTable.Cell>
        <IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
        <IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
      </IndexTable.Row>
    )
  );

and in index.module.css

:global(.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell:first-child) {
  display: none;
}

:global(.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell:nth-child(2)) {
  background-color: unset;
}

:global(.Polaris-IndexTable__Table--scrolling.Polaris-IndexTable__Table--sticky.Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableCell:nth-child(2)) {
  left: 0;
  position: sticky;
  z-index: var(--pc-index-table-sticky-cell);
  background-color: var(--p-color-bg-surface);
  filter: drop-shadow(0.0625rem 0 0 var(--p-color-border-secondary));
}

Code for test: https://codesandbox.io/p/devbox/hopeful-bird-pv23hz