Data Table

Question

Design a reusable, client-rendered data table component for a large web application. The table should support a fixed header, scrollable rows and columns, declarative column definitions, and cells that can render different kinds of data such as strings, numbers, dates, and images.

Assume the table is used primarily for reading and scanning tabular data rather than spreadsheet-style editing. Unlike the Google Sheets system design article, this question is about designing a reusable table component for a shared component library, not formulas, collaboration, or spreadsheet-style cell editing semantics.

Real-life examples

• TanStack Table
• MUI Data Grid
• AG Grid
• Ant Design Table

Requirements

• The component should be generic enough to reuse across multiple product surfaces.
• The header should remain visible while rows scroll vertically.
• The table should support horizontal scrolling when there are many columns or when columns cannot shrink further.
• Columns should be configurable declaratively and cells should support custom rendering.
• The table should accept an optional outer viewport/container width while still producing sensible default column widths.
• The component should perform well with large datasets such as thousands of rows.
• Focus on the base table design first. Features such as sorting, filtering, column resizing, and fixed columns can be discussed as extensions if time permits.