Virtual Scrolling 处理数十亿行数据 — 来自 HighTable 的技术

TL;DR: In this post, I present five techniques related to vertical scrolling used in <HighTable>, a React component that can display billions of rows in a table while keeping good performance and accessibility.

TL;DR: 在本文中，我介绍了 <HighTable> 中使用的五种与垂直滚动相关的技术，这是一个 React 组件，能够在保持良好性能和可访问性的同时显示表格中的数十亿行数据。

It's a long post, which reflects the complexity of rendering billions of rows in a table, and the amount of work we put into building the React component.

这是一篇长文，它反映了在表格中渲染数十亿行数据的复杂性，以及我们为构建 React 组件所投入的大量工作。

Table of contents:

目录：

Introduction

介绍

Showing data in a table is one of the first exercises you'll find in HTML 101 courses.

在表格中显示数据是你在 HTML 101 课程中会遇到的第一个练习之一。

<table> <thead> <tr><th>Name</th><th>Age</th></tr> </thead> <tbody> <tr><td>Alice</td><td>64</td></tr> <tr><td>Bob</td><td>37</td></tr> </tbody>
</table>

But, as often in data science, what works for simple cases breaks when the size increases.

但是，正如数据科学中常见的那样，适用于简单情况的东西在规模增大时会失效。

In this post, I'll showcase five techniques we use to solve challenges related to vertical scrolling in the <HighTable> React component to handle billions of rows.

在本文中，我将展示我们在 <HighTable> React 组件中用于解决垂直滚动相关挑战的五种技术，以处理数十亿行数据。

The component also provides features for columns (sort, hide, resize), rows (select), cells (keyboard navigation, pointer interactions, custom rendering). Feel free to ask and look at the code if you're interested in knowing more.

该组件还为列提供功能（排序、隐藏、调整大小），行（选择），单元格（键盘导航、指针交互、自定义渲染）。如果您想了解更多，请随时询问并查看代码。

The <HighTable> component is developed at hyparam/hightable. It was created by Kenny Daniel for Hyperparam, and I've had the chance to contribute to its development for one year now.

<HighTable> 组件在 hyparam/hightable 进行开发。它由 Kenny Daniel 为 Hyperparam 创建，我已经有机会为其开发贡献了一年时间。

This blog post was sponsored by Hyperparam. Thanks for the support and for challenging me to solve the fascinating problem of rendering billions of rows in the browser!

本文由 Hyperparam 赞助。感谢支持，并挑战我解决在浏览器中渲染数十亿行的迷人问题！

Demo

演示

Try the hightable demo:

尝试 hightable demo：

HighTable is also used in the ...