Skip to content

feat: improve gl-table stacked feature

New Proposal

This MR aims to override the stacked mode of b-table to be more similar to the current implementation of our custom table, the implementation is completely based on CSS override.

Video:

screen-capture__16_

Caveats:

  • There is still cross browser testing to do and some overflow to be fixed
  • The implementation may have to be revised with the new version of bootstrap

Tested in:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Chrome on Android
  • Safari on Iphone 11

Nb: storybook does not work on browserstack + ie11 or iphone X, syntax error in the console

# Old proposal (kept for context)

This MR aims to extend `gl-table` to have a responsive solution similar to the one that is currently shown in this screenshot:

https://gitlab.com/gitlab-org/gitlab/uploads/dd6be55b24a81daeabf1b89617a8dc07/Screenshot_2019-11-18_at_17.50.50.png

And implemented in pure SCSS, this MR aims to 'bring in' the functionality and looks of the attempted new component from this MR !931


## Proposal

- add a new prop called `gl-responsive` ( to not conflict with vue-boostrap `responsive` prop )
- add a new prop called `gl-responsive-default-column-size` ( again to avoid risk of conflicts with vue-boostrap props)
- if `gl-responsive` is true do not load b-table but load another markup ( based on the one described in the MR )
- use 3 types of slots for customisation
  - normal header
  - mobile header
  - cell header
- keep the slots naming convention the same as b-table ( plus the new mobile slot )
- use utility first approach everywhere is possible
- add extensive documentation of what gl-responsive markup can or cannot do

the idea is to iteratively add more and more functionality to the 'responsive mode' in an iterative fashion

## Downsides:

- With this approach toggling a prop means swapping completely the markup, we should probably discourage the users to do dynamically and make the prop a 'initialisation parameter' only, I will try to see if we can implement this easily.
- We should be wary of props clashing between our custom solution and b-table, maybe with a unit-test I will see if that is achievable as well.
- **This will make GlTable not complaint with Pajama anymore**

## Note

When the upgrade to vue-boostrap is done we will need to rework the slot naming to be consistent with the new names.

Context / Previous attempt:

!931 (comment 251353135)

Related to #269 (closed)

Edited by Nicolò Maria Mezzopera

Merge request reports