Architecting a composable DataTable API

WHAT THIS TESTS The interviewer wants senior-level API design judgment: how to keep a complex, extensible component maintainable instead of accreting a prop for every feature.

A GOOD ANSWER COVERS Separate concerns into a headless logic core and a presentation layer. The headless core, often a hook, owns data state: sort state and comparators, selected rows, and derived ordering, exposing state and handlers without rendering markup. Drive the table shape with a column-definition array rather than per-feature props: each column declares an id, a header, an accessor for its value, an optional comparator for sorting, and crucially an optional cell render function so consumers fully customize how any cell renders. Row selection becomes a feature on the core (selection state plus a getSelectionProps helper) instead of scattered props. For surrounding pieces like toolbars, empty states, or expandable rows, prefer composition and render props so consumers plug in custom UI. This is the model behind libraries like TanStack Table: a small, powerful core plus column configs and render functions, which scales to new features by adding a config field or composing a piece, not by adding another boolean to a giant component.

COMMON WRONG ANSWERS A monolithic DataTable with dozens of boolean and callback props that grows unboundedly. Hardcoding cell rendering so custom content is impossible. Coupling sorting and selection logic directly into rendering so neither can be reused or tested in isolation.

LIKELY FOLLOW-UPS How do you handle virtualization for large datasets? How does server-side sorting and pagination fit this API? How do you type column definitions for safety?

ONE CONCRETE EXAMPLE A useTable hook takes data and a columns array and returns sorted rows, sort handlers, and selection state. One column defines a custom cell renderer showing a status badge, another supplies a numeric comparator for sorting, and a checkbox column uses the selection helpers. Adding a new feature like column resizing extends the core and column config rather than adding props to a monolith.