react-virtualized table x-scrolling

Question

Is it possible to set a x-scrolling in react-virtualized? I have a table with a fixed width, and more columns to display than I got space in my table, so I need a x-scrollinig. In my tests if i did it, the table just shrinked up and did just display '...''s for content if the table runs out of space.

lisen kaci · Answer 1 · 2020-07-06T14:25:09.810

I was struggling with this myself for a while. I did it by by setting the width of the table to width={Object.keys(rows[0]).length*150} and set each column min width to 150 (or whatever you choose just make sure it is the same in your table).

Then wrap it in a Paper and give it a width and overflowX:'auto'

something like this:

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

score 3 · Accepted Answer · answered Sep 12 '17 at 16:15

3

Intro paragraph for react-virtualized Table docs (emphasis added):

Table component with fixed headers and windowed rows for improved performance with large data sets. This component expects explicit width and height parameters. Table content can scroll vertically but it is not meant to scroll horizontally.

You might be able to hack it, but it isn't meant to support horizontal scrolling so it probably won't work. Consider using Grid or MultiGrid instead if this is a requirement for your app.

answered Sep 12 '17 at 16:15

bvaughn

13,300
45
46

Am I able too sort the Grid Columns or would I need to implement a selfmade sort function? Best regards and thanks for your answer – Dominic M. Sep 13 '17 at 06:36
You'd need to provide your own sort function either way. `Table` displays the data but doesn't modify it. – bvaughn Sep 13 '17 at 14:21

score 2 · Answer 3 · answered Feb 17 '20 at 21:55

Building on bvaughn's accepted answer, the hack for a horizontally scrollable table could look something like this, however, beware of the following caveats that come with this hack:

Your overflowing Table columns will not be virtualized
The scrolling focus gets captured by the wrapper's x-axis scrolling and you will need to click within the internal Table component to refocus and regain y-axis scrolling. This is incredibly frustrating to use especially on mobile devices.

react-virtualized table x-scrolling

3 Answers3