Skip to main content

Table

Table is visual representation to desplay data in tabular format.

Variants​

Users are provided with 2 different sized tables (SM and MD) in GEL or based on the context the user can create custom table by using the table cell blocks provided by GEL.

Table types

Demo​

Table demo

Guidance​

  • The building blocks of table can be pieced together to create a table.
  • If the situation is sufficed with a table placehodler, consider using the two table components which would save time in return.
  • A pagination element in a table is displayed at the bottom of the table component when displayed.
  • Use button control as table filters with the label floating when active or any value is selected.
  • The following behaviour takes place when a filter is being selected for a table.
  • For bulk actions such as downloads and delete, a pop up should be displayed from the bottom with actionable items.

When to use​

  • Use table component to display the data in a tabular form.
  • Use the building blocks if it requires the table to be custom made.

Designer assets​

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API​

vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP
Last updated on