search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.84k stars 1.81k forks source link

[Bug]: Data table stickyHeader prop causes row incorrect spacing #10395

Closed kenguo573 closed 2 weeks ago

kenguo573 commented 2 years ago

Package

carbon-components-react

Browser

Chrome

Package version

7.50.0

React version

17.0.2

Description

when data wraps onto another line, there's no bottom spacing for columns that wrapped disabling stickyHeader fixes the issue, alternatively setting size to short also fixes it

image

CodeSandbox example

https://codesandbox.io/s/wonderful-poincare-o7hjd?file=/index.js

Steps to reproduce

  1. enable stickyHeader
  2. set size to normal
  3. in data table, have columns that wraps onto another line

Code of Conduct

jagathgj commented 8 months ago

while adding prop like stickyHeader we have to unset the defined height of row in data table so that rows won't overlap.

.bx--data-table--sticky-header tr {
  height: auto;
}

And for checkboxes alignment, we need to change it like below

.bx--data-table--sticky-header tbody tr td.bx--table-column-checkbox {
  align-items: flex-start;
  padding-top: 0.875rem;
}

Sandbox

Hope this would be fixed in V11.

carbon-bot commented 2 weeks ago

Hi there! 👋 You may have seen that v10 reached it's end of support on September 30, 2024. In the interest of keeping a tidy issue queue, issues flagged as relating to v10 will be closed.

If this issue is still relevant, please open a new issue with a link to this issue and a reproduction that uses v11.

Thanks again for your participation and contributions to this issue and the Carbon ecosystem! 💙