Add sticky option to Table

[mimarz]

Our example of sticky Table header does not work, because position:sticky on thead messes with its width. 😫

Using position:sticky on th does work, but a bug in styled-components with as, prevents us from extending our <Cell /> with styled() as it looses all its styling applied in the component.

The bug as been "fixed" by styled-components by introducing a forwardedAs which is intended to be used, but as long as there is an "as" prop (even when used for something completely else)styled-components fumbles

#997 Fixes our issue with not being able to style/extend <Cell /> for our users.

Suggest we introduce a sticky prop to Table or Head, which applies the necessary css to our th for it to be sticky. This should avoid confusion and make it easier to our users to apply it without having to extend <Cell />.

Notes:

• https://css-tricks.com/position-sticky-and-table-headers/
• https://styled-components.com/docs/api#forwardedas-prop

• Decide on design in Figma.
• Implement in Table (Implement sticky option to Table #1031)

[cbuv]

Could this sticky option also support sticky columns?
cases where first or last column is also sticky.

[mimarz]

Could this sticky option also support sticky columns?
cases where first or last column is also sticky.

Good question. We are planning on bringing this up for discussion on todays planning meeting as we are not sure wether we should implement this inside the component or let users do it themselves based on needs.

The solution is pretty straight forward, example using styled-components here:

const StickyTopCell = styled(Cell)`
  position: sticky;
  top: 0;

A sticky column first or last column would then be just changing the position of the element from top to left or right.

const StickyLeftCell = styled(Cell)`
  position: sticky;
  left: 0;

const StickyRightCell = styled(Cell)`
  position: sticky;
  right: 0;

[lucasveil]

Can you have a check @BirteThornquist Little bit unsure how to solve this one in Figma. If we want the drop shadow effect, either we have to introduce a new variant for the whole component or we have to introduce a "line" asset.

[mimarz]

@lucasveil @BirteThornquist Don't forget we also need to verify that the design works in code :)

[lucasveil]

No worries @mimarz, we have that in the back of our head. We will have a review with dev when we are ready with the design.

[mimarz]

Due to technical limitation we have only implemented sticky table header in #1031 @equinor/eds-ux @cbuv

[lucasveil]

@equinor/eds-ux agreed on a drop shadow effect that will need to be implemented in code for sticky table header

[mimarz]

@equinor/eds-ux agreed on a drop shadow effect that will need to be implemented in code for sticky table header

ok, which elevation type did you use?

[lucasveil]

Going with sticky. Will update documentation for design but will not be a component in the library.

[mimarz]

Going with sticky. Will update documentation for design but will not be a component in the library.

Ok, I will update react component