Out of Memory error while 300k plus records are loaded in React Datagrid

[Nandhini Shanmugam]

I am getting out of memory error when trying to load 300K plus records in syncfusion react datagrid.
The issue arises while performing actions like searching and pagination. The whole grid itself becomes slow or not able to type inside the search box itself.
here are the error

Here is the sample code:

import {

  ColumnDirective, ColumnsDirective, Page, Sort, FilterSettingsModel,

  FilterType, Group, Filter, GridComponent, Inject, SelectionSettingsModel,

  CommandColumn

} from '@syncfusion/ej2-react-grids';

import './template/index.css';

import { Freeze } from "@syncfusion/ej2-grids";

const Main= ({ handleAssignSelected, handleManageQueue, arrayName }) => {

 

  const generateDynamicColumns = (data: any[]) => {

    const columns: any[] = [];

    if (data.length > 0) {

      const firstRecord = data[0];

      const keys = Object.keys(firstRecord);

      keys.forEach((key) => {

        columns.push({

          title: key,

          field: key,

          width: 150,

        });

      });

    }

    const orgItems = columns.map(item => ({

      ...item,

      selected: true,

    }));

    setCustomisedFetchedColumns(orgItems);

    return columns;

  };

 

 

  console.log(searchColumns, "searchColumns")

  const searchSettings = {

    fields: searchColumns.map(col => col.field)

  };

  let grid;

  const [isSearchClicked, setIsSearchClicked] = useState(false);

  const onSearchChange = (event) => {

    const searchText = event.target.value;

    setSearchTerm(searchText);

  };

  const handleSearchKeyDown = (event) => {

    if (event.key === 'Enter') {

      if (grid) {

        grid.search(searchTerm);

        setIsSearchClicked(true);

      }

    }

  };

  const handleSearch = () => {

    if (grid) {

      grid.search(searchTerm);

      setIsSearchClicked(true);

    }

  };

  const onClear = () => {

    setSearchTerm('');

    if (grid) {

      grid.search('');

      setIsSearchClicked(false);

    }

  };

  const FilterOptions: FilterSettingsModel = {

    type: 'Excel' as FilterType,

  };

  const selectionSettings: SelectionSettingsModel = {

    type: 'Multiple',

    checkboxOnly: true,

  };

  const pageOptions = { pageSize: 25, pageSizes: ['25', '50', '250', '500', '1000'], pageCount: 5 };

  const handleActionComplete = () => {

    if(grid){

        const scrollableContent = grid.element.querySelector(".e-grid .e-content");

        scrollableContent.scrollTop = 0;

    }

  };

  return (

    <div>

      <div className={`px-4 py-3 flex items-center justify-between text-[#525875] ${arrayName ? 'border-b' : ''}`}>

        <h1 className="text-teritiary text-[20px]">{arrayName}</h1>

        <div className="flex gap-2">

          {arrayName && arrayName.length > 0 && (

            <>

              <div className="pl-2 pr-2 w-[288px] flex justify-between border rounded relative">

                <input

                  type="text"

                  className="searchText block h-[36px] text-[14px] font-[500] w-[225px]"

                  placeholder="Search"

                  onChange={onSearchChange}

                  onKeyDown={handleSearchKeyDown}

                  value={searchTerm}

                />

                {isSearchClicked ? (

                  <button

                    className="cursor-pointer"

                    onClick={() => onClear()}

                  >

                    <img src={ImageAssets.CloseIcon} alt="" />

                  </button>

                ) : (

                  <button

                    className="cursor-pointer"

                    onClick={handleSearch}

                  >

                    <img

                      className="text-gray"

                      alt="searchGrey"

                      width="14px"

                      height="14px"

                      src={ImageAssets.SearchGrey}

                    /></button>)}

              </div>

            </>

          )}

        </div>

      </div>

      {arrayName && arrayName.length > 0 ? (

        <>

          {isLoading ?

            <div className="p-5">Loading...</div> : <>{Data && Array.isArray(Data) && Data.length > 0 ? (

              <GridComponent

                key={gridKey}

                dataSource={Data}

                ref={g => grid = g}

                filterSettings={FilterOptions}

                allowFiltering={true}

                allowPaging={true}

                pageSettings={pageOptions}

                allowSorting={true}

                allowGrouping={true}

                height={565}

                selectionSettings={selectionSettings}

                searchSettings={searchSettings}

                actionComplete={handleActionComplete}

              >

                <ColumnsDirective>

                  <ColumnDirective type="checkbox" width="50" />

                  {tableColumns.map((col, index) => (

                    <ColumnDirective

                      key={index}

                      field={col.field}

                      headerText={col.headerText}

                      width={col.width}

                      autoFit={true}

                      textAlign="Left"

                      clipMode="EllipsisWithTooltip"

                      allowFiltering={!(col.field === "F1" || col.field === "S1")}

                      allowGrouping={!(col.field === "F1" || col.field === "S1")}

                    />

                  ))}

                  {visibleColumn.map((col, index) => (

                    <ColumnDirective

                      key={`visible-${index}`}

                      field={col.field}

                      headerText={col.title}

                      width={col.width}

                      textAlign="Left"

                      freeze="Right"

                      allowFiltering={!(col.field === "F1" || col.field === "S1")}

                      allowGrouping={!(col.field === "F1" || col.field === "S1")}

                      template={col.template}

                    />

                  ))}

                </ColumnsDirective>

                <Inject services={[Filter, Page, Sort, Group, CommandColumn, Freeze]} />

              </GridComponent>

            ) : (

              <p className="p-5">No data available for {arrayName}</p>

            )}</>}

        </>

      ) : (<div className="flex flex-col items-center justify-center h-full mt-[250px]">

        <img src={ImageAssets.AssignedIcon} />

        <p className="text-[#7E8B99] mt-4">No assigned task</p>

      </div>)}

     

    </div>

  );

};

export default Main;

[Dineshnarasimman Muthu]

Hi Nandhini,

Greetings from Syncfusion Support.

Thanks for providing the code information of your grid. It seems when binding 300K records to the grid, upon performing searching and pagination in the grid, it throws out of memory error. We tried to replicate the issue by preparing a sample based on the provided grid code and implemented external input field for searching in grid.  We cannot be able to replicate the issue from our end. We have attached the sample for your reference.

Sample: https://stackblitz.com/edit/react-e8ad9j-2mnqlx?file=index.js,index.html

To improve searching performance in grid when using large dataSet, we suggest you searchSettings.field property of grid. By using searchSettings.fields property, you can define specific fields in which you need to search the data. This will improve the performance of searching when grid as more columns and large set of data. We have attached the code snippet and documentation for your reference.

    <GridComponent

        dataSource={virtualData}

        searchSettings={{ fields: ['FIELD2', 'FIELD3'] }}

        ref={(g) => (gridRef = g)}

 

Documentation: https://helpej2.syncfusion.com/react/documentation/grid/searching#search-specific-columns

We have also attached the documentation of optimizing the performance of Grid when binding large dataset with more number of columns in the grid.

Documentation: https://ej2.syncfusion.com/react/documentation/grid/performance#optimizing-performance-with-column-virtualization-in-large-no-of-columns

Please provide the following information to validate this issue further.

• From the provided code snippet, it seems you are rendering columns from tableColumns array and visibleColumns array. Please provide us how many columns you are rendering in the grid.

• Please replicate the issue in the provided sample which will help us to validate this issue further.

We highly appreciate your co-operation in providing these details.

Regards,

Dineshnarasimman M

Attachment: GridSearching_f3a6b8d4.zip