Page MenuHomePhabricator

create simple table component with default states
Closed, ResolvedPublic

Description

Problem:
We want the first basic version of the simple table that only covers the default state of the table and cells.

Screenshots/mockups:

Screenshot 2021-08-19 at 12.27.57.png (382×1 px, 26 KB)

Figma link

Acceptance criteria:

  • basic table component behaves and is styled as specified in the Figma file, excluding the hover, loading state and sorting capabilities
  • basic table component is usable for T289556

Notes:

  • Responsiveness is confirmed as a part of the "default state", with a mobile first approach to be used. Implementers should be able to define the breakpoint that triggers the responsive version of the table in the context of the consuming application (e.g. the table should be told to show the mobile view via a simple string prop).
  • At this stage we do not need it to handle loading, hover, etc.
  • The table cells should be able to include interactive elements (dropdown, link).
  • The hike team is free to decide how data can be included in the upcoming vue table component. The use of, for example, slots, is acceptable.
  • https://blog.easy-designs.net/archives/responsive-tables/ on how to create a responsive table with CSS only

Event Timeline

Regarding the responsive breakpoint of the table component, we might want to find a soft spot in the context of our application, rather than relying on any predefined number of pixels (e.g. the 720px tablet breakpoint in WiKit). The decision should be based on the data-heaviness of the table, and be focused on improving readability: based on this, we might want to switch to a responsive display below 1024px, instead (this is just an example), to make sure that the content remains easy to consume and to interact with.

With this in mind, we should discuss the idea of incorporating a mobileBreakpoint property to the table, in order to ensure that we make its responsive behavior sensitive to the context.

Notes from task breakdown:

  • No outline of how the table component should handle the data has been proposed so far, @Sarai-WMDE will discuss with the minions and add the results to this ticket
  • Additional ACs will describe a minimal version of the table that is needed for Mismatch Finder
Sarai-WMDE renamed this task from create table component with default states to create simple table component with default states.Wed, Sep 15, 9:34 AM
Sarai-WMDE updated the task description. (Show Details)

This can only be tested/verified in dev environments at this point, wich is fine for a "tech task":

  • a basic table component has been implemented according to the Figma file (excluding the hover, loading state and sorting capabilities)
  • responsiveness is confirmed with a linearised mobile view, which can be triggered at three breakpoints "mobile", "tablet" and "desktop"
  • the table cells have been tested to include links
  • the hike team has decided to include data by the use of slots