我需要在 React (Next.js) 中有效地渲染一个 6000 记录的 Excel 或 html 文件

Question

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.

Answer 1

您需要添加无限滚动的功能（当用户滚动您按需加载数据时），或者您也可以使用 react-window 库，我有自定义无限滚动的工作代码，您可以在此处查看我的仓库https://github。 com/amansadhwani/all-features-react/tree/master/src/components/InfiniteScroll