Table rendering slow with medium sized data

[hawkEye-01]

I am using material table to show rows some data as follows

It takes about 10 seconds to render 300 rows with 8 columns. Is this ok? Why is this so slow? Am i doing something wrong? Pagination makes it better but i want scroll bar for my rows.

<MaterialTable
          tableRef={tableRef}
          columns={tableColumns.current}
          data={data}
          parentChildData={(row, rows) =>
            rows.find(
              (a) =>
                a?.uniqueKey ===
                row?.parentUniqueKey
            )
          }
          // onOrderChange={(event, orderBy, order) => handleSort(event, orderBy)}
          options={{
            sorting: true,
            search: true,
            searchFieldAlignment: "right",
            searchAutoFocus: true,
            searchFieldVariant: "standard",
            filtering: false,
            paging: false,
            maxBodyHeight: 400,

              // fixedColumns: {
              //   left: 1,
              // },
              headerStyle: {
                position: "sticky",
                top: 0,
                whiteSpace: "nowrap",
                backgroundColor: themesConfig.defaultDark.palette.primary.dark,
                color: "#FFF",
              },

            // pageSizeOptions: [5, 20, 50, 100].map((e) => e),
            // pageSize: 5,
            // virtualization: true, // enable virtualization
            // paginationType: "stepped",
            // showFirstLastPageButtons: false,
            // paginationPosition: "bottom",
            exportButton: false,
            exportAllData: true,
            exportFileName: "TableData",
            addRowPosition: "first",
            actionsColumnIndex: -1,
            selection: false,
            showSelectAllCheckbox: false,
            showTextRowsSelected: false,

            grouping: false,
            columnsButton: false,
            rowStyle: (rowData) => {
              if (
                rowData.tableData.isTreeExpanded === false &&
                rowData.tableData.path.length === 1
              ) return ;

              const rowBackgroundColor =
                pathColors[rowData.tableData.path.length];
              return { backgroundColor: rowBackgroundColor };
            },
          }}
          actions={[
            {
              icon: () => (
                <div variant="outlined" color="warning">
                  <FileDownloadOutlinedIcon />
                </div>
              ), // you can pass icon too
              onClick: () => excelDownloader(),
              isFreeAction: true,
            },
          ]}
          title={
            <>
              {levelTitle.current}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              {measureTitle.current}
            </>
          }
          components={{
            // Body: (props) => (
            //   <TableBody
            //     {...props}
            //     headerHeight={tableHeaderHeight}
            //     tableWidth={1500}
            //     tableHeight={500}
            //     scrollIndex={scrollIndex}
            //   />
            // )

          }}
        />

Thanks

[Domino987]

@hawkEye-01 Hi, that cells alone would be 2800 react elements plus all the extra stuff per cell. The recommended amount of node on one page < 1500. Can you add a sandbox and Ill check if I can see where the slow down comes from?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.