Build a Figma-Specified React Data Table

# Build a Figma-Specified React Data Table Build a React component that fetches data and displays it in a table matching a supplied Figma design. Explain component boundaries, request states, table semantics, responsiveness, accessibility, and how visual fidelity will be verified. ### Constraints & Assumptions - The Figma design is authoritative for visible states, but missing interaction rules must be clarified. - The component must handle loading, empty, error, and populated states. - Do not expose secrets or fetch privileged data directly from the browser. ### Clarifying Questions to Ask - What columns, sorting, filtering, and pagination are required? - Is the table usable on narrow screens? - Which design tokens and interaction states are defined in Figma? ```hint Model states before markup Represent request and table states explicitly so the visual implementation cannot hide missing behavior. ``` ### What a Strong Answer Covers - Data-fetching boundary, cancellation, validation, and error handling. - Semantic table structure, component decomposition, keys, and state. - Figma tokens, responsive overflow, loading, empty, and error visuals. - Keyboard access, screen-reader labeling, and visual regression checks. ### Follow-up Questions 1. How would server-side pagination alter cache and selection state? 2. How would you preserve table usability when a translated header is much longer?