Theo's Typesafe Cult•6mo ago

Most Performant Way of Implementing Dialog/Sheet for Row Click in a large DataTable

What's the most efficient way to displaying a large data table and display a dialog upon clicking each row for detail in react? I'm using Sheet and DataTable component from Shadcn. I tried memoized the DataTable, and wrapping the DataTable with Sheet:

const [sheetState, setSheetState] = useState<{
  open: boolean;
  playerId?: string;
}>({ open: false, playerId: undefined });

...
<Sheet
  open={sheetState.open}
  onOpenChange={(open) => setSheetState({ open })}
>
  <div>PlayerId: {sheetState.playerId}</div>
  <DataTable
    columns={columnDefs}
    data={displayData}
    onRowClick={handleRowClick}
  />
  <SheetContent>
    {sheetState.playerId && (
      <PlayerDetailContent playerId={sheetState.playerId} />
    )}
  </SheetContent>
</Sheet>

const [sheetState, setSheetState] = useState<{
  open: boolean;
  playerId?: string;
}>({ open: false, playerId: undefined });

...
<Sheet
  open={sheetState.open}
  onOpenChange={(open) => setSheetState({ open })}
>
  <div>PlayerId: {sheetState.playerId}</div>
  <DataTable
    columns={columnDefs}
    data={displayData}
    onRowClick={handleRowClick}
  />
  <SheetContent>
    {sheetState.playerId && (
      <PlayerDetailContent playerId={sheetState.playerId} />
    )}
  </SheetContent>
</Sheet>

However, the click event is still dependent on the size of the table, with 1k rows taking around 1 seconds. I tried commenting out <SheetContent>...</SheetContent>, and it drastically improved the speed to seem almost instant (under 100ms). Why is that? Also, once I refresh the page, the first row click took several seconds and the later ones took under 100ms (with SheetContent commented out), is this a dev server behavior? If not, what would be the reason for this delay? What's the most performant way in this situation?

1 Reply

Luke•6mo ago

I'm a little late to the party here But I quite literally just dealt with a nearly identical case today Was adding some filter components using shadcn's "combobox" to a data table, and one of the filters was a "select a user" type situation, where there are about 5000~ users to select from. Not an insane number by any means, but, when I went to open the combobox, my laptop would freeze up for a second, was defintely not a great feeling I ended up implementing react-window (https://github.com/bvaughn/react-window), worked like a charm, didn't require too much effort either

Gaming

Programming

Most Performant Way of Implementing Dialog/Sheet for Row Click in a large DataTable