Implement paginated, sortable dynamic table component
Overview
This question evaluates a candidate's competence in front-end component architecture, React hooks-based state modeling, dynamic column configuration, client-side sorting and pagination, performance considerations, extensibility, and accessibility.
Meta
Aug 4, 2025, 10:55 AM
Software Engineer
Technical Screen
System Design
0
0
React Table Component: Pagination, Sorting, Dynamic Columns
Context
You are building a reusable React table component for a web application. The component must handle typical data-grid needs while remaining simple, performant, and extensible.
Requirements
- Design a clear component decomposition (how you split the UI and logic into components/hooks).
- Propose a reasonable state model (what state lives where: local vs. controlled via props).
- Support dynamic columns (columns are provided via configuration, not hard-coded).
- Implement client-side sorting and pagination.
- Provide a minimal usage example showing how a consumer passes data and column definitions.
Follow-up
- Discuss extensibility: filtering, server-side mode, row selection, virtualization, theming, etc.
- Explain how to make the table mobile-responsive.
Constraints
- Use React (hooks are preferred). You may use TypeScript or JavaScript.
- Avoid external table libraries; small utility packages are fine but not required.
- Accessibility should be considered (keyboard and screen-reader friendly).
Solution
Login required
Show