4

我基本上希望使用 react-virtualized Table 来做到这一点：

https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/ScrollSync

该演示非常完美，但它使用了不可排序的 List + Grid。

表格演示具有固定的标题和可排序性：

https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/Table

但我基本上想要发生的是：

  • 每个单元格自动扩展为他们需要的大小（不截断）
  • 标题在滚动期间保持固定
  • 第一列在水平滚动期间保持固定
  • 可以对任何列进行升序/降序排序。

我创建了一个表格的基本 codepen 示例来开始修补：

http://codepen.io/sontek/pen/yVvdWw

如果你不想访问 codepen，这里是 JS：

const { AutoSizer, Column, Table } = ReactVirtualized;

class NewTable extends React.Component {
    render() {
        const list = [
            { name: 'Brian Vaughn', description: 'Software engineer' },
            { name: 'John Michael Anderson', description: 'Designer' },
            { name: 'Joseph Lombrozo', description: 'Football Player' },
            { name: 'Hoover Von Hacker', description: 'Software engineer' }
        ];

        const renderTable = ({height, width}) => {
            console.log("HEIGHT!!!!", "WIDTH!!!", height, width);
            return (
                <Table
                    width={width}
                    height={height}
                    headerHeight={20}
                    rowHeight={30}
                    rowCount={list.length}
                    rowGetter={({ index }) => list[index]}
                >
                    <Column
                        label="Name"
                        dataKey="name"
                        width={100}
                    />
                    <Column
                        width={200}
                        label="Description"
                        dataKey="description"
                    />
                </Table>
            );
        };

        return (
            <AutoSizer>
                {renderTable}
            </AutoSizer>
        );
    }
}

// Render your list
ReactDOM.render(
  <NewTable />,
  document.getElementById('example')
);
4

0 回答 0