反应虚拟化表X滚动

Question

是否可以在react-virtualized中设置x滚动？我有一个固定宽度的表格，要显示的列比表格中的空间多，所以我需要一个 x-scrollinig。在我的测试中，如果我这样做了，表格就会缩小，并且如果表格空间不足，则只会显示内容“...”。

Answer 1

我自己也为此苦苦挣扎了一段时间。我通过将表格的宽度设置为

width={Object.keys(rows[0]).length*150}

并将每列的最小宽度设置为 150 （或者您选择的任何内容，只需确保它在表格中相同）来做到这一点。

然后用Paper包起来，并给它一个宽度和overflowX:'auto'

类似这样的：

const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);

export default function DataPreview(props) {


const rows =  [{ One: 'one', Two: 'Two',Three: 'Three',Four:'Four', Five:'Five', Six:'Six'}]

return (
    <Paper style={{ height: 400, width:700, overflowX: 'auto'}}>
        <VirtualizedTable

         width={Object.keys(rows[0]).length*150}
        
            rowCount={rows.length}
            rowGetter={({ index }) => rows[index]}
            
            columns={Object.keys(rows[0]).map(head=>{return(
                {
                    minWidth:150,
                    label:head,
                    dataKey:head
                }
            )})}
        />
    </Paper>
 );
}

Answer 2

react-virtualized Table

文档的介绍段落

（已添加重点）：

具有固定标题和窗口行的表格组件，以改进 大数据集的性能。该组件需要明确的

width

 和 

height

 参数。 

Table

 内容可以垂直滚动，但
  它并不意味着水平滚动。

您也许可以破解它，但它并不支持水平滚动，因此它可能无法工作。如果您的应用程序有此要求，请考虑使用

Grid

 或 

MultiGrid

。

Answer 3

基于

bvaughn已接受的答案，水平可滚动表格的黑客可能看起来像this，但是，请注意此黑客带来的以下警告：

您溢出的表格列将
• 不会被虚拟化
滚动焦点由包装器的 x 轴滚动捕获，您需要在内部 Table 组件中单击以重新聚焦并重新获得 y 轴滚动。这对于使用起来非常令人沮丧，尤其是在移动设备上。

Answer 4

我通过虚拟化实现了水平滚动，如下所示：

import {
  CSSProperties,
  MouseEvent,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import List, {
  ListRowProps,
} from 'react-virtualized/dist/commonjs/List'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import _ from 'lodash'
import { useSize } from '@termsurf/vine'
import cx from 'classnames'

export default function HexViewer({
  className,
  input,
  hoveredClassName,
  rightClassName,
}: {
  hoveredClassName?: string
  className?: string
  rightClassName?: string
  input?: ArrayBuffer
}) {
  const [buffer, setBuffer] = useState(input)
  const [hoveredPosition, setHoveredPosition] =
    useState<HexPositionCast>()
  const byteArray = useMemo(
    () => buffer && [...new Uint8Array(buffer)],
    [buffer],
  )
  const bodySizeRef = useRef(null)
  const bodySize = useSize(bodySizeRef)
  // const bodySizeRef = useRef(null)
  // const bodySize = useSize(bodySizeRef)

  useEffect(() => {
    setBuffer(input)
  }, [input])

  return (
    <div
      className={cx('relative horizontal-virtual-list', className)}
      ref={bodySizeRef}
    >
      <HexBody
        hoveredPosition={hoveredPosition}
        width={bodySize?.width ?? 128}
        height={bodySize?.height ? bodySize.height : window.innerHeight}
        list={byteArray}
        onHovered={setHoveredPosition}
        hoveredClassName={hoveredClassName}
        rightClassName={rightClassName}
      />
    </div>
  )
}

type HexPositionCast = {
  row: number
  column: number
}

function HexBody({
  width,
  height,
  list,
  onHovered,
  hoveredPosition,
  hoveredClassName,
  rightClassName,
}: {
  hoveredPosition?: HexPositionCast
  onHovered: (pos: HexPositionCast) => void
  width: number
  height: number
  list?: Array<number>
  hoveredClassName?: string
  rightClassName?: string
}) {
  const rows = useMemo(() => {
    const chunkArray = _.chunk(list, 16)

    return chunkArray.map((row, i) => ({
      left: i.toString(16).padStart(8, '0').toUpperCase(),
      middle: row.map(x =>
        x.toString(16).padStart(2, '0').toUpperCase(),
      ),
      right: row.map(x => String.fromCharCode(x)),
    }))
  }, [list])
  const rowCount = rows.length
  const rowRenderer = ({
    index,
    isScrolling,
    isVisible,
    key,
    style,
  }: {
    index: number
    isScrolling: boolean
    isVisible: boolean
    key: string
    style: CSSProperties
  }) => {
    const row = rows[index]

    return (
      <div
        className="relative flex pb-4 last:pb-0"
        style={style}
        key={key}
      >
        {/* <div className="relative pl-16 pr-8">{row.left}</div> */}
        <div className="relative flex gap-8 pl-8 pr-8">
          {row.middle.map((code, i) => (
            <span
              key={i}
              className={cx('relative inline-block')}
            >
              <span
                className={cx(
                  'rounded-sm',
                  hoveredPosition &&
                    hoveredPosition.row === index &&
                    hoveredPosition.column === i
                    ? hoveredClassName
                    : undefined,
                  'absolute -left-4 -right-4 top-0 bottom-0 pointer-events-none',
                )}
              />
              <span
                className="relative code cursor-default"
                data-i={index}
                data-j={i}
              >
                {code}
              </span>
            </span>
          ))}
        </div>
        <div className={cx(rightClassName, 'relative pl-8 pr-16 flex')}>
          {row.right.map((text, i) => (
            <span
              key={i}
              className={cx('relative inline-block w-16 text-center')}
            >
              <span
                className={cx(
                  'rounded-sm',
                  hoveredPosition &&
                    hoveredPosition.row === index &&
                    hoveredPosition.column === i
                    ? hoveredClassName
                    : undefined,
                  'absolute -left-4 -right-4 top-0 bottom-0 pointer-events-none',
                )}
              />
              <span
                className="relative code cursor-default"
                data-i={index}
                data-j={i}
              >
                {text}
              </span>
            </span>
          ))}
        </div>
      </div>
    )
  }

  if (!rowCount) {
    return null
  }

  return (
    <List
      autoContainerWidth
      height={height}
      overscanRowCount={10}
      rowCount={rowCount}
      rowHeight={32}
      rowRenderer={rowRenderer}
      // scrollToIndex={scrollToIndex}
      width={width}
      // autoWidth
    />
  )
}

.horizontal-virtual-list .ReactVirtualized__Grid__innerScrollContainer {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: auto !important;
}

基本上，添加这 3 个 CSS 属性并根据父宽度设置显式宽度。

有效！