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