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, because it will allow users to [insert use case in the context of the app/feature].link).
{F34604811}
**Acceptance criteria**
[] The Simple table is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8653%3A09691%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 behaviours
[] The table's component-level tokens are created according to the naming convention used to style the component
[] The table is displayed in Storybook according to the specifications (see below)
[] The table should have acomponent has browser tests implemented.
**States**
[List of the states that the component should display, mapping the specs]**//Table//**:
[] Default
[] Active and/or Focus
[] Loading
**Sizes**
The table does not have different sizes.**//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 "Basic""Simple table" page that presents the controllable component, and "All" page including the Active, Focus and Loading states of the table for visual regression testing purposes.
[] Behavior: users should be able to interact with the table: navigating through the content, opening or closand seeing the dialog when clicking the "Read More" in the "Upload Info" columneffect of hovering over cells.
[] Controls: users should be able to read the content and navigate the tIn case the loading state is captured in a `prop`, users should be allowed to enable usingit from controls.
**Notes:**
[] What about the different states?- 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, Here were only listed Defaultexternal border) and unnecessary functionality (no table heading, Active,no footer). FocusFrom all the `props` listed in the Figma specifications, Loadingonly `loading` applies to the Simple table component.
- Responsive behavior: The table component is linearised into a list to adjust to smaller viewports: This approach converts table rows into lists or cards.