##### Question Design and implement a React table component with pagination and sorting. Requirements: clear component decomposition, reasonable state design, support dynamic columns. Follow-up: discuss extensibility and how to support a mobile-responsive layout.

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.

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.

What difficulty level is this interview question?

This is a medium difficulty System Design question, commonly asked during Technical Screen rounds at Meta.

What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Meta during technical interviews.

Implement paginated, sortable dynamic table component

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

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.

Implement paginated, sortable dynamic table component

Quick Overview

Context

Requirements

Follow-up

Constraints

Solution

Submit Your Answer to Earn 20XP

Implement paginated, sortable dynamic table component

Quick Overview

Context

Requirements

Follow-up

Constraints

Solution

Submit Your Answer to Earn 20XP