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')
);