Product will eine Tabelle mit fünfzigtausend Zeilen inklusive Sortierung und Inline-Editing. Wie würdest du das bauen?

Pack keine fünfzigtausend Zeilen ins DOM. Virtualisiere, sodass nur das sichtbare Fenster plus ein kleiner Overscan gerendert wird, halt die Zeilenhöhe vorhersagbar oder miss sie, und zieh Sortieren und Filtern aus dem Render heraus in memoisierte abgeleitete Daten oder auf den Server. Paginiere oder streame die Daten selbst, halt den Zustand der bearbeiteten Zeile lokal, damit ein Tastendruck nicht die Tabelle neu rendert, und teste mit gedrosselter CPU.

Das Erste, was ich sage, ist, dass fünfzigtausend Zeilen nie gleichzeitig im DOM sein sollten, weil Layout und Speicher mit der Knotenzahl skalieren, egal wie schnell mein Framework ist. Ich virtualisiere also: die Zeilen im Viewport plus ein kleiner Overscan werden gerendert, absolut positioniert in einem Spacer mit der Gesamthöhe, und beim Scrollen recycelt. Danach behandle ich die Daten als eigenes Problem. Fünfzigtausend Datensätze bei jedem Tastendruck zu sortieren und zu filtern blockiert den Main Thread, entweder macht es also der Server und ich hole eine Seite, oder ich memoisiere das abgeleitete Array, damit es nur neu berechnet wird, wenn sich der Sortierschlüssel wirklich ändert. Für Inline-Editing halte ich den Entwurfswert im State der Zeile selbst und hebe ihn erst beim Commit hoch, sonst rendert jedes Zeichen die Tabelle neu. Was gern vergessen wird, sind Barrierefreiheit und die Seitensuche: Screenreader und die Browser-Suche sehen nur gerenderte Zeilen, ich setze also die Zeilenanzahl-Attribute explizit und baue ein echtes Suchfeld, statt mich auf das des Browsers zu verlassen.