Implement paginated, sortable dynamic table component

Q: Implement paginated, sortable dynamic table component

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.

Q: How do I approach System Design interview questions?

System Design questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master system design interviews.

Question

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).

Implement paginated, sortable dynamic table component

Context

Requirements

Follow-up

Constraints

Solution

Comments (0)