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[bot]]

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[bot]]

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.

https://github.com/user-attachments/assets/21fbe2d8-dd86-4deb-8ccc-62abfd510fe2

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

https://github.com/Shopify/polaris/blob/2e767c9e1e6d11b5d69ad1b501944cf7d8656a04/polaris-react/src/components/IndexTable/IndexTable.module.css#L91-L97

and this:

https://github.com/Shopify/polaris/blob/2e767c9e1e6d11b5d69ad1b501944cf7d8656a04/polaris-react/src/components/IndexTable/IndexTable.module.css#L131-L137

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):

https://github.com/Shopify/polaris/blob/2e767c9e1e6d11b5d69ad1b501944cf7d8656a04/polaris-react/src/components/IndexTable/IndexTable.module.css#L1108

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

[hardydo]

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

[tona3922]

add a div before the first IndexTable.Cell and also set a heading to ['','id','date'] for the first value

<IndexTable.Row id={id} key={id} position={index}>
      <div></div>
        <IndexTable.Cell>{id}</IndexTable.Cell>
      <IndexTable.Cell>{date}</IndexTable.Cell>
</IndexTable.Row>

it worked for me

[muchisx]

cc. @kyledurand @alex-page

This is something that is even happening in Shopify's own UI, I think it's quite a priority issue!

I've gathered some debugging data.

It doesn't happen in Safari or Chrome in Mac (double check this one) I see it in Windows Chrome

[muchisx]

I've refined a bit of @ngbrown 's styles (thank you for giving the first version!) to account for subheaders and using :is to regroup similar selectors

.Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky
  :is(.Polaris-IndexTable__TableRow, .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader)
  .Polaris-IndexTable__TableCell:first-child {
  background-color: transparent;
}

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

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

Using a css only solution works much better than adding a ghost row+cell, that caused me a set of other issues that I wouldn't want to make live in my app.

[github-actions[bot]]

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.