Page MenuHomePhabricator

[Epic] Create Simple Table component
Closed, ResolvedPublic


Description: a table is an efficient format for comparative data analysis on categorical objects. Usually, the items being compared are placed in a column, while the categorical objects are in the rows. The quantitative value is then placed at the intersection of the row and column, called the cell.

As a WD/WB designer and developer, I want to contribute with a new Simple table component to our component library and reuse it in the Mismatch Finder, because it will allow users to view existing mismatches. In the context of the Mismatch finder, table sorting is not necessary, but the table cells should be able to include interactive elements (dropdown, link).

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

Acceptance criteria

  • The Simple table is implemented according to the Figma specs (which are fully outlined using tokens)
  • The table follows the component documentation and displays the predefined accessible and responsive behaviors
  • The table's component-level tokens are created according to the naming convention used to style the component (Find draft PR containing component tokens here)
  • The table is displayed in Storybook according to the specifications (see below)
  • The table component has browser tests implemented (if needed)



  • Default

Table cells:

  • Default
  • Hover (Hovering over a table cell affects the whole row)


  • Structure: the table has its own section is Storybook, called "Table". The section contains a "Simple table" page that presents the controllable component.
  • Behavior: storybook users should be able to interact with the table: navigating through the content, and seeing the effect of hovering over cells.
  • Controls: No controls are needed.


  • The Simple table is a stripped down, simplified version of the Table component. It presents data in a minimalistic way that dispenses of any non-data ink (vertical lines, external border) and unnecessary functionality (no table heading, no footer). From all the props listed in the Figma specifications, only loading applies to the Simple table component.
  • Responsive behavior: The table component is linearized into a list to adjust to smaller viewports: This approach converts table rows into lists or cards (see designs) below a certain breakpoint (default: $width-breakpoint-tablet) that implementers should be able to override in the context of the application if needed.

Screenshot 2021-09-08 at 12.30.20.png (644×338 px, 30 KB)

Event Timeline

@Sarai-WMDE you can find the table component ticket. Feel free to take over.

Sarai-WMDE renamed this task from Create Table component to [Epic] Create Table component.Aug 18 2021, 4:54 PM
Sarai-WMDE renamed this task from [Epic] Create Table component to [Epic] Create Simple Table component.Aug 19 2021, 11:28 AM
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE claimed this task.
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE updated the task description. (Show Details)