4

I'm basically looking to do this with react-virtualized Table:

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

That demo is perfect but it uses a List + Grid which aren't sortable.

The table demo has fixed header and sortability:

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

But what I basically want to happen is:

  • Each cell autoexpands to the size they need (no truncating)
  • Header stays fixed during scrolling
  • First column stays fixed during horizontal scrolling
  • Can order ascending / descending any of the columns.

I've created a basic codepen example of a table to start the tinkering:

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

If you don't want to visit the codepen, here is the 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')
);
sontek
  • 12,111
  • 12
  • 49
  • 61
  • 1
    This is not currently supported. For now you're stuck with using `ScrollSync` + `Grid` and controlling your own column sizes to mimic what `Table` does. (It isn't that complex actually.) And for what it's worth- `Table` doesn't actually sort data; it just provides a convenient hook for sorting. (You still have to implement your own sort function that gets called and you could easily do that with `Grid` too.) I'm currently considering a way to better support stick columns in a `Table` which you can track here: https://github.com/bvaughn/react-virtualized/issues/485 – bvaughn Dec 05 '16 at 06:12

0 Answers0