UUI icon indicating copy to clipboard operation
UUI copied to clipboard

[DataTable]: header's padding are not aligned with the cell's padding when columnsGap and renderRow props are applied

Open mari-shakhanava opened this issue 1 year ago • 0 comments

Steps to Reproduce

  1. There is DataTable component with default props and following props applied
columnsGap="12"
size="30"
renderRow = {}
  1. textAlign: "left" for the first column

Example: https://codesandbox.io/p/sandbox/uui-forked-l3f33k?file=%2FExample.tsx%3A106%2C7-108%2C11

Actual result

Header's padding is not aligned with the cell's padding when columnsGap prop applied. Cell has --uui-dt-cell-padding-start: 24px; Header cell has --uui-dt-cell-padding-start: 12px; 2024-10-25_13h00_51 2024-10-25_12h58_15

Expected result

The header's and cell's text are aligned in the first column, as well as they are aligned in the other columns, or as well as they are aligned without the renderRow option passed to the DataTable props. 2024-10-25_13h12_16

Environment

  • UUI version: latest
  • Browser name: latest
  • Operating System: windows

mari-shakhanava avatar Oct 25 '24 11:10 mari-shakhanava