Nds 191 - Table: API/technical Implementation

[aferro-wwnorton]

This is a prelliminary implementation of the new

component.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-351.dmoqt7vj2nim.amplifyapp.com

[sh0ji]

Thanks for the initial PR, @aferro-wwnorton! Could you clarify what type of feedback you're looking for while this is still in draft?

[aferro-wwnorton]

Nothing in particular Evan, Just to keep track of the issue myself

…

________________________________________ De: Evan Yamanishi ***@***.***> Enviado: lunes, 1 de abril de 2024 12:47 Para: wwnorton/design-system Cc: Ferro, Ariel; Mention Asunto: Re: [wwnorton/design-system] Nds 191 - Table: API/technical Implementation (PR #351) EXTERNAL EMAIL Thanks for the initial PR, @aferro-wwnorton<https://github.com/aferro-wwnorton>! Could you clarify what type of feedback you're looking for while this is still in draft? — Reply to this email directly, view it on GitHub<#351 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A64M43RM4IMQNJN46ZFZ6DTY3F6R7AVCNFSM6AAAAABFLJRKG6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZQGAZDQNJZGQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[aferro-wwnorton]

@sh0ji @lucas-contreras @cafrias

Table Component Overview

This Table component implementation is designed to accommodate various use cases, such as:

• static tables
• sorting
• row selection
• and grouping table sections.

Context and State Management

TableContext

TableContext is a React context used to provide the table state to all its subcomponents.
useInitTableState: useInitTableState initializes and manages the state of the table, including selected rows and expanded sections. It provides a set of callbacks to interact with these states.

Table Component and Subcomponents

Table: initializes the table state and provides it to all its children through TableContext.
TableBody: manages the display of table sections, collapsing or expanding them based on state.
TableHeadCell: handles sorting functionality and sets appropriate classes and ARIA attributes for accessibility.
TableHeader: renders the table header and includes a checkbox for selecting all rows if the table is selectable.
TableRow: manages individual row selection and registration, and it can also render section headers.
TableSectionHeader: manages the display and toggling of section headers.

TypeScript Interfaces and types

Interfaces used for typing props and state:

• TableSetup
• TableState
• TableProps
• TableRowProps
• TableHeadCellProps
• TableHeaderProps
• TableBodyProps

Types:

• Choices = Record<string, boolean>;
• TableSections = Record<string, boolean>;

Concerns:

Based on this first implementation, I have the following:

1. the Table "onSelect" function may not be safe in terms of flexibility. I mean, this version executes the passed onSelect fn with the selected rows as a parameter. But the final user might be lmited to receive a parameter of an specific type we define.
2. I wonder if synchronizing complex state like choices and sections could be error-prone?
3. Not sure if this implementation scale well with a large number of rows or sections.
4. Not sure if Checkbox states may synchronize correctly, especially with asynchronous data.

Note:

"The styles and classes of NDS to be used in this implementation have not yet been reviewed. Carlos or Lucas would need to apply them. I'm adding them both as reviewers for this PR as well."

[aferro-wwnorton]

This implementation will be refactored from scratch in a new ticket