[Data table] Header should be sticky

Use this template if you want to request a new feature, or a change to an existing feature.

If you are reporting a bug or problem, please use the bug template instead.

Summary

The head of the data table should be ‘sticky’ and only the table body will be scrolled so when user looks at the data, they can reference the column name quickly without back-and-forth scrolling.

Another problem with it is if tbody ends up being very tall, user can not see the horizontal scroll bar as the visual cue which indicates there are more columns to the right. (see below)

require review from both design and development

Justification

It’s a pretty standard data table / grid behavior for the ease of use when number of rows cause the parent container to scroll.

Desired UX and success metrics

1. it should be flexible - user should not need to be asked to defined the specific dimension.
2. width of the columns should still be dynamic based on the content - just like the way it is right now

“Must have” functionality

same as the previous section

Specific timeline issues / requests

2019 Q1

Available extra resources

N/A

Extra

I raised this question on slack, was suggested to try out: https://github.ibm.com/IBMDecisionOptimization/dd-carbon-addons-do and a demo here https://pages.github.ibm.com/IBMDecisionOptimization/dd-carbon-addons-do/packages/carbon-addons-do-react-grids/storybook/

Even though it has what I wanted - sticky table head, this add-on is not compatible with our analytics platform styles (ap styles) as the grid itself doesn’t share the bx class names. Moreover, the significant API changes will require us more time on the migration.

[lovemecomputer]

@rraavi to your point tho, i’ll comment back here once a PR is up for review so you can check our solution. happy to hear your thoughts!

[aagonzales]

I would like to see a fleshed out design of this before agreeing to the pattern.