Table not loading after 2000 rows with 8 columns

Tags: #<Tag:0x00007efc648b1390>
#1

Hi,

Today first time I’m trying to use Handsontable with Laravel. Just started with basic tables and generated data with loops. Everything working till 2014 row. :slight_smile: If I get 2015 row, the table not even loading. But I need to loop over 50,000 rows. Is it right approach to load all data at once or you suggest any different ways?

This is my configuration. (In the same page, not in a separate page since I want to use loops with Laravel blade).

var
  objectData = [
      @foreach($reports as $report)
      {
          inspection_number: '{{$report-inspection_number}}',
          identification_of_inspection: '{{$report-identification_of_inspection}}',
          date: '{{\Carbon\Carbon::parse($report-request_or_planned_date)-format('d/m/Y')}}',
          first_name: '{{$report-employee-first_name ?? ''}}',
          last_name: '{{$report-employee-last_name ?? ''}}',
          place: '{{$report-place-place_code ?? ''}}',
          type_of_inspection: '{{$report-type_of_inspection ?? ''}}',
          department: '{{$report-employee-department-name ?? ''}}',
      },
      @endforeach
  ],
  container = document.getElementById('example6'),
  hot6;

hot6 = new Handsontable(container, {
  data: objectData,
  height: 750,
  dropdownMenu: true,
  rowHeaders: true,
  filters: true,
  colHeaders: ['Inspection Number', 'Identification of Inspection', 'Request or Planned Date', 'Name', 'Last Name', 'Place', 'Type of Inspection','Department'],
  columnSorting: true,
  columns: [
      {data: 'inspection_number'},
      {data: 'identification_of_inspection', type: 'text'},
      {data: 'date', type: 'date'},
      {data: 'first_name'},
      {data: 'last_name'},
      {data: 'place'},
      {data: 'type_of_inspection'},
      {data: 'department'},
  ],
  minSpareRows: 0
});

PS. I forgot to write, if I reduce the loop columns to 2, it loads all over 50k row but with the columns I desired to list, not woking as I mentioned.

#2

Hi @muratgokoglu

Thank you for contacting us. As Handsontable is JavaScript library we don’t have much of experience with Laravel. Would it be possible to you to recreate the issue in some code playground?

#3

Hi @adrian.szymanski

Since code not loading for the following data after 2014 I can’t show with code playground but yesterday I noticed something about the problem.

I’m using data which is imported from an excel file. The cell that stop’s the code has "alt+enter"ed content. It was really hard to notice but let me show you some screenshot.

image
image.png453×512 35.3 KB

I edited the 2014th row (which has alt+entered Random Nightshift) manually to is if it’s the problem, and yes, that was the problem. Is that normal behavior or I’m missing something in the configuration?

#4

Didn’t see any solution on docs but I chose a different solution. Since somehow newline breaks the code, so replaced the entry with preg_replace.

preg_replace('/\r\n|\r|\n/', ' ', $report->identification_of_inspection)

Now it loads over 50k rows. It’s a little bit slow (it takes about 12 seconds to load) though. If you have any suggestion about performance tricks, I’m open to ideas. :slight_smile:

#5

Hi @muratgokoglu

I’m glad that you’ve found a solution. Regarding performance issues, here we have some tips that might help with that:

#6

Hi @adrian.szymanski

I’ve checked the performance notes and I applied tips that I can and this is the result:

colWidths: [225, 225, 170, 150, 150, 100, 150, 225],
columns: [
{data: ‘identification_of_inspection’, editor: false},
{data: ‘date’, type: ‘date’, editor: false},
{data: ‘end_date’, type: ‘date’, editor: false},
{data: ‘first_name’, editor: false},
{data: ‘last_name’, editor: false},
{data: ‘place’, editor: false},
{data: ‘type_of_inspection’, editor: false},
{data: ‘department’, editor: false},
],
minSpareRows: 0,
autoRowSize: false,
autoColumnSize: false,
viewportColumnRenderingOffset: 1,
viewportRowRenderingOffset: 50,

image

55418 rows and 10 seconds of loading time with render. I wish I could lower that time. I tried paginate the results but in that case I won’t be able to filter because filtering function works for listed data on the screen. So, I’m a little bir out of options. :slight_smile:

#7

Hi @muratgokoglu

Currently, that’s all available options for performance boost. I wanted to suggest pagination also but you already mentioned it. I see that you didn’t set renderAllRows to false. In a case with bigger data set that might also give some boost to the performance.

#8

I’ve set renderAllRows to false but nothing changed. Still 10 seconds… I wish. there was something like infinite scroll or pagination with filtering but I guess it’s a little tricky process. But thank you for the Grid. It’s really something. :clap:

2 Likes
#9