Getting the checkbox checked/unchecked in datatable becomes slow on ~400 rows

[hpit]

It seems if there are some rows (just around 400 rows) with multiple columns in the datatable and I'd like to click the checkbox to select the row, the style of the checkbox becoming checked/unchecked is pretty slow. Since the current behavior of the checkbox selection is implemented by functionalities in PrimeReact, I'm not sure if this performance issue is from the library. Is there any solution I can do to improve performance except pagination? Thanks.

Codes looks as follows:

Code: Select all

<DataTable
        value={tableData} ref={dataTableRef} loading={loading}
        emptyMessage={emptyMessage}
        sortMode="multiple" removableSort
        selectionMode="checkbox" selection={selectedData} onSelectionChange={onSelectionChange}
        scrollable scrollHeight={expanded ? "70vh" : "250px"}
        resizableColumns columnResizeMode="expand"
        editMode="row" editingRows={editingRows} onRowEditChange={(e) => setEditingRows(e.data)}
        onRowClick={(e) => setEditingRows([e.data])}
        style={{width: "100%"}} frozenWidth="3em"
        tableClassName="p-text-nowrap" cellClassName={selectionBody}
        dragSelection={isDragSelection}
      >
        <Column selectionMode="multiple" headerStyle={{width: '3em', height: '6em'}} bodyStyle={{height: '2em'}} frozen></Column> // the row of checkbox to select the row
        <Column field="abc" header="abc" filter sortable></Column>
        <Column field="def" header="abc" filter sortable></Column>
        <Column field="ghi" header="abc" filter sortable></Column>
        <Column field="jkl" header="abc" filter sortable></Column>
        <Column field="mno" header="abc" filter sortable></Column>