Jeffrey Posts - Answer Overflow

Jeffrey

Explore posts from servers

•Created by Jeffrey on 7/3/2024 in #questions

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?

6 replies

Gaming

Programming