Product wants to show a table of fifty thousand rows with sorting and inline editing. How would you build it?

Do not put fifty thousand rows in the DOM. Virtualize so only the visible window plus a small overscan is rendered, keep row height predictable or measure it, and move sorting and filtering out of render into memoized derived data or the server. Paginate or stream the data itself, keep the edited row's state local so a keystroke does not re render the table, and test with a throttled CPU.

The first thing I say is that fifty thousand rows should never be in the DOM at once, because layout and memory scale with node count no matter how fast my framework is. So I virtualize: render the rows in the viewport plus a small overscan, absolutely position them inside a spacer with the total height, and recycle as the user scrolls. Then I treat the data as a separate problem. Sorting and filtering fifty thousand records on every keystroke will block the main thread, so either the server does it and I request a page, or I memoize the derived array so it only recomputes when the sort key really changes. For inline editing I keep the draft value in the row's own state and only lift it on commit, otherwise every character re renders the table. The parts people forget are accessibility and find in page: screen readers and browser search only see rendered rows, so I set the row count attributes explicitly and provide a real search box rather than relying on the browser's.