CODEWITHSUNDEEP
javascriptreactjsnext.js
bannedfromquestioning
bannedfromquestioning

Reputation: 93

I need to render a 6000 record Excel OR html file in React (Next.js) efficiently

TLDR: Does anyone know of a plausible way to tackle rendering out 6000 records on one page from an excel file, or from a pre-existing HTML file that won't slow down my website?

I have built a record keeping system for a client that has many departments. All other departments are using the React CRUD system I set up for them to keep track of and manage the database in full.

I have one person in one particular department who used to populate the website utilizing an HTML file that is generated locally on their machine from an excel file. They will not budge in any way shape or form on migrating to the system I built and insist that I give them a way to upload either an HTML file or Excel file to display data on the website, and they want to manage the information locally, on their own. Furthermore, they want all 6000 records on a single page and will not budge on this either, throwing pagination of any kind out the window (which I previously had built in).

I don't really have any qualms with this other than I have rendered the data in the excel file using Sheet.js (xlsx) to convert the excel file to JSON and then map it out to an HTML table like below. It is just a simple map like any other in React:

<thead className="bg-gray-50">
                  <tr>
                    {libraryColumns.map((column) => (
                      <th
                        className="px-10 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
                        key={column}
                      >
                        {column}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {books.map((book, index) => (
                    <TableRow book={book} key={index} index={index} />
                  ))}
                </tbody>
              </table>

This is working, however it has made this portion of the website painfully slow.

So I have two options, I can continue down this path of populating the page with data by reading the excel file from the server, converting to JSON, and mapping to this table, or I could render the HTML file that the client is able to generate from their excel file. In the case of the latter, I would like custom styling however, and I'm not sure if that's possible. If it's not possible, I am not married to it because at this point I just need to get it done and be done with it.

My question ultimately is what is the best practice for something like this?

Unfortunately, I am required to do what the client wants and cannot modify the requirements, and I'm just not sure how to make this work efficiently, if it's even possible.

thank you.

Upvotes: 2

Views: 465

Answers (1)

Aman Sadhwani
Aman Sadhwani

Reputation: 3658

You need to add functionality of infinite scroll (as the user scrolls you load data on demand) or you can also use react-window library also, I have working code of custom infinite scroll you can check my repo here https://github.com/amansadhwani/all-features-react/tree/master/src/components/InfiniteScroll

Upvotes: 1

Related Questions