feat(Table): Add scrollable behaviour to the Table component

[Artikodin]

• Feature
• Fix
• Enhancement

Description

We want to display severals rows and columns in a table. To avoid an unreadable shrink result we want to made our table scrollable in both axes (x & y).

The specifications says the total row should be visible if the user scroll to the bottom of the table. After reflexion with Mayssa we found that can be painful if there are a lots of rows. So we decided to stick it to the bottom.

What's new:

• a total row is displayed only if there is a dataTotal props passed to component
• if the isScrollable props is passed to it, the table will be scrollable when the number of columns or rows overflow the container
• a row header is added to each row if it's defined in column definition (ref: colsDef props)

⚠️ Last commit is still in work in progress. ⚠️

After @spartDev review that PR he ask me to add some shadow when the table content overflow.
I started to develop that feature but I've no time to finish it.

What's missing:

• put top, left, right, bottom state in an object
• rework handleScroll method to avoid that huge amount of condition
• clean the mess I've made at the end of style file (Table/elements.js)
• handle the case when the footer row is missing
• make the shadow follow the header row width when it's stretching on the large screen

I you find a better way to handle the shadow you're welcome to integrate it.

Related / Associated Jira Cards :

BP-369

Todo - Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.

[Artikodin]

Ok guys I need to know what do think about that. Should I let component as method here or put it in an external file TableHeader. Same question for the body and footer component.