Replace GlTable with GlTableLite to reduce size of PageBundle
In GitLab-UI 32.14.0 the `GlTableLite` component was introduced. `GlTableLite` works the exact same way `GlTable` does but does **not** support the following features: - Filtering - Sorting - Pagination - Items provider support - Selectable rows - Busy table state and styling - Fixed top and bottom rows - Empty row support ## Why `GlTableLite`? `GlTableLite` is about 49kb lighter on the JavaScript page-bundle. The majority of our entry-points has a JavaScript page-bundle size around 1MB. This easy fix reduces such a bundle by ~5% ([source](https://gitlab-org.gitlab.io/-/gitlab/-/jobs/1642532525/artifacts/bundle-size-review/comparison.html)). This epic will track the progress of the rollout of the `GlTableLite` Component. `GlTable` can be replaced with `GlTableLite` if none of the above mentioned features are used. Find more information about `GlTableLite` [here](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default). ## How do I know which Table Component to use? **Disclaimer the warning functionality from GitLabUI's `GlTable` has not been merged into our main repo yet, this description is not working yet, I'll remove this disclaimer as soon as it is.** If possible `GlTableLite` is to be preferred due to it's smaller filesize. Still, there are very good reasons to go with a `GlTable` in some cases. Find the Docs about it [here](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default). Checking out if your Table qualifies for a GLTableLite component is super simple to do: 1. open up your gdk 1. go to the site which includes the table component you want to check 1. If there's a warning in the browser console saying: `This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default` 1. Replace GlTable with GlTableLite, check if everything still works as expected, open up a Merge-Request 1. If there's no comment in the Browser Console, then this Table should stay a `GlTable` please leave a comment on the corresponding Issue and close it. Here's a quick video demo of the process. ![gl-table-lite-tour](/uploads/893d40950e58df55e01928dfd94d9f5b/gl-table-lite-tour.mp4) | Example warning: | | ------ | |![GlTableLite_Warning](/uploads/38f671f422c32f12dd404edb877d3102/GlTableLite_Warning.png)| ## I did replace a GlTable with a GlTableLite but the pagebundle size increased The page you’ve been working on most likely includes multiple `GlTable` components, whereas before `GlTable` was loaded once and shared between the multiple instances we are now loading `GlTable` and `GlTableLite` in the same bundle causing this increase in page bundlesize. In best case: The other tables on the page can be refactored to use a `GLTableLite` as well, so this increase is temporary and will sort itself out as soon as all of the tables are refactored. In worst case: There are multiple tables on the page some that can be refactored to GlTableLite others that can’t. In this case it is still good to use `GlTableLite` whenever possible. It might increase our page-bundle size for a few pages, but those are edge-cases. And we are likely to share these components sooner or later. We don’t want any page-specific dependencies on components that will potentially be shared. So it’s a trade-off and the larger page-bundle on handful of pages is the best deal we can make. We are monitoring our page-bundle sizes [here](https://dashboards.gitlab.net/d/000000043/sitespeed-page-summary?orgId=1) and [here](https://dashboards.gitlab.net/d/000000060/leaderboard?orgId=1)
epic