UI implement Virtualise list for Volume table

[ChengYanJin]

Component: ui, table

Why this is needed:
Since we have thousands of rows, we may consider using a technique known as “windowing”. It only renders a small subset of the rows at any given time and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

What should be done: Virtualize list

Implementation proposal (strongly recommended):
React-table, the table library we are using has already implemented this feature.
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows

Install dependencies. We’ll use react-window and also react-virtualized-auto-sizer.

import { FixedSizeList as List } from "react-window"
import AutoSizer from "react-virtualized-auto-sizer"

<AutoSizer>
  {({ height, width }) => (
    <List
      className="List"
      height={height}
      itemCount={1000}
      itemSize={35}
      width={width}
    >
      {Row}
    </List>
  )}
</AutoSizer>

Test plan:
TBD