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).
{F34604811}
**Acceptance criteria**
[] The Simple table is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=9691%3A12186 | Figma specs]] (which are fully outlined using tokens)
[] The table follows the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8680%3A18909 | 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 [[ https://github.com/wmde/wikit/pull/469 | here ]])
[] The table is displayed in Storybook according to the specifications (see below)
[] The table component has browser tests implemented (if needed)
**States**
**//Table//**:
[] Default
**//Table cells//**:
[] Default
[] Hover (Hovering over a table cell affects the whole row)
**Storybook:**
[] 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.
**Notes:**
- 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 (please 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.