ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

[ui5-table]: table column header sticks to the top

Open saurabhmehta02 opened this issue 1 year ago • 2 comments

Bug Description

When we set sticky-column-header prop for the ui5-table component, it always sticks to the top. We need to achieve following interaction - https://ui5.sap.com/resources/sap/ui/documentation/sdk/index.html?sap-ui-xx-sample-id=sap.f.sample.DynamicPageWithStickySubheader&sap-ui-xx-sample-lib=sap.f&sap-ui-xx-sample-origin=.&sap-ui-xx-dk-origin=https%3A%2F%2Fui5.sap.com&sap-ui-theme=sap_horizon&sap-ui-rtl=false&sap-ui-density=sapUiSizeCompact

Where there is one fixed header section in the page and on scroll the table fetches more records, column header and actions toolbar is sticky but appears below the fixed header section.

Affected Component

ui5-table

Expected Behaviour

We need to achieve following interaction - https://ui5.sap.com/resources/sap/ui/documentation/sdk/index.html?sap-ui-xx-sample-id=sap.f.sample.DynamicPageWithStickySubheader&sap-ui-xx-sample-lib=sap.f&sap-ui-xx-sample-origin=.&sap-ui-xx-dk-origin=https%3A%2F%2Fui5.sap.com&sap-ui-theme=sap_horizon&sap-ui-rtl=false&sap-ui-density=sapUiSizeCompact

Here the table column header and toolbar action is sticky but appears below the content area above the table. Also user can pin the top area using the pin icon, in that case too table column header shouldn't stick to the top.

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-nc7zy2?file=/index.html

Steps to Reproduce

  1. Please open following codepen - https://codesandbox.io/s/ui5-webcomponents-forked-nc7zy2?file=/index.html
  2. On scroll down, the growing table fetches more data but the column headers are sticky at top and filter section above the table is not in the view.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

latest

Browser

Chrome, Firefox

Operating System

MacOS

Additional Context

No response

Organization

No response

Declaration

  • [X] I’m not disclosing any internal or sensitive information.

saurabhmehta02 avatar Oct 11 '23 06:10 saurabhmehta02

Hello https://github.com/orgs/SAP/teams/ui5-webcomponents-topic-rl,

The issue is reproducible using ui5-table component. Here is an isolated example: https://codesandbox.io/s/ui5-webcomponents-forked-nc7zy2?file=/index.html

Could you please look over?

Kind Regards, Todor

Todor-ads avatar Oct 13 '23 04:10 Todor-ads

Hi @saurabhmehta02 ,

In order to allow this to work, we will have to expose part for additional stylisation. We will move this to the feature board and plan it according to our other BLIs and priorities.

Internal BLI created: FIORITECHP1-28937

Best Regards, Hristo

hristop avatar Oct 31 '23 06:10 hristop