React-virtualized: FlexTable: allow horizontal scroll

[Guria]

FlexTable very convenient wrapper for Grid with great way to define columns data keys, but it lacks of horizontal scroll support.
It can be enabled by providing contentWidth property which will be used as width for flex row. Minor drawback is absence of column virtualization since only only one Grid__cell used per row.

[Guria]

BTW, width property are missed on FlexTable props list.

[bvaughn]

Interesting suggestion. I'll give it some thought.

width property are missed on FlexTable props list.

Feel free to contribute PRs for things like this if you notice them.

[bvaughn]

Looked into this a bit this evening. Unfortunately the solution isn't as simple as adding an additional, width property as you suggested. The inner Grid enables/disables scrolling (overflow) based on the size of its content (which it assumes to always be equal to or smaller than the its outer dimensions). Changing that would be complicated.

Alternately I tried making the Grid itself wider but then the scrollbars either got pushed outside of the FlexTable _or_ stacked (double bars).

Anyway, since a straight forward solution doesn't seem to exist for this- and since I haven't heard this feature requested, I'm going to leave off here. Feel free to submit a PR if you have other ideas of how to tackle this. :)

[Guria]

Thanks for trying. There is a chance that I would happy with placing FlexTable into another scrollable container. Would update if I will have any new suggestions.

[mwilliamson-healx]

Horizontal scrolling, along with being able to set fixed columns, is something that would be useful for me at the moment. We're currently using FixedDataTable, but looking at alternatives since it appears to be unmaintained and has a few bugs.

Putting the FlexTable into another scrollable container doesn't work since the vertical scrollbar is then not visible until you scroll right.

One thought was to use a Grid instead of a FlexTable. The headers would become the first row so that horizontal scrolling works on both the data rows and the headers, but then the issue is that you want the headers to be visible when scrolling down. (Having the first n columns still visible when scrolling to the right seems fine since you can still render each row as one cell in the Grid, and use some absolute positioning for each table cell.) I can't think of a particularly pleasant way to get the header rows always visible off the top of my head, but I might be missing something obvious.

[bvaughn]

One thought was to use a Grid instead of a FlexTable. The headers would become the first row so that horizontal scrolling works on both the data rows and the headers, but then the issue is that you want the headers to be visible when scrolling down.

@mwilliamson-healx: You actually have 2 options for this.

One would be to use two Grids - one as a fixed header and one as a body - and the ScrollSync component to sync their scrolling (see demo, source, docs).

The other would be to use the more recent renderCellRanges property of Grid to control the rendering of a range of cells. Along with the cells you could also render a fixed header.

I think people have used both approaches to create spreadsheets and gantt chart type layouts so I would think it should work for your purposes. I'd like to keep the FlexTable HOC's focus on simplicity. Since it just wraps a Grid anyway, anything you want to do with one you could do with the other.

[mwilliamson-healx]

Ah, I was just in the middle of trying to do something with synchronized scrolling, but was just hoping that there was a simpler solution. Still, I think what you've described makes sense and shouldn't be too much trouble. Thanks for the helpful (and speedy!) reply, and indeed the entire library!

[bvaughn]

Happy to help :)

[brandonchoe]

I'm having trouble using renderCellRanges to render a fixed header. Is there an example in the docs? I couldn't find one.

[bvaughn]

@brandonchoe No example in the docs currently. If you want to put together a Plunker to share with me I'd be happy to take a look.

[brandonchoe]

Well, I'm not sure what the right approach is. I naively thought that I just had to add a conditional to the default renderCellRanges that checked if the rowIndex matched the rowStartIndex, then render a header or body cell accordingly. It does sort of work, but instead of remaining static, the "header" is just the first visible row. So, when you scroll down, the "header" jumps down the rows, which is not really a fixed header.

[bvaughn]

If you'll share what you've done, via Plunker (or similar), I'll take a look and make suggestions. :)

Fairly swamped at the moment though so I don't have the bandwidth to put together examples myself. Sorry! :(

[brandonchoe]

I'm not sure how to use Plunker, but here it is: https://plnkr.co/edit/RqW1TG4j0dro7eCrKlW2?p=preview
I'm pretty sure this is not even in the right direction.

It's okay! You're real responsive. Plus, it's not urgent - I'm currently using the two Grids method, which is working for now.

[bvaughn]

@brandonchoe It's probably easiest to copy one of these files:
https://github.com/bvaughn/react-virtualized/tree/master/playground

Just swap out my JS rendering with yours. If you need to, run it through Babel first (be sure to check "react").

[brandonchoe]

Huh? None of these use renderCellRanges. Am I missing something here?

[bvaughn]

I was pointing you at a quick HTML and JS setup that could be put in Plunker in order to create something that you can show me, and I can run and see in the browser. What you linked me to on Plunker above doesn't run.

[brandonchoe]

I can't get Plunker to work. Besides, I don't have anything to show. Thank you for trying! I'll be sure to come to you once I make some progress or figure out Plunker. I'll just go with the two Grids for now.

[bvaughn]

No worries. If I find time to put together an example for you I will. :)

[brandonchoe]

Don't worry about it! After talking to my friend, I think we're better off with a Collection, rather than a Grid. But I appreciated your time.

[bvaughn]

👍 Sounds good.

[mlukaszczyk]

Hey!

Is there a best practice now for horizontal scrolling with the table component? I would prefer to use the table component instead of customizing the grid. I would appreciate a working example.

Best regards,

Michael

[bvaughn]

Table is focused on the use-case of resizing columns to fit the available width. It's probably possible to make it horizontally scroll but it is not the main intent (and it's not something I've spent much time/effort on) so I don't have any examples. If you create one and would like to share it back, let me know and I'll happily add it to the playground.

[jasonnathan]

@bvaughn, any clues to how I would implement the horizontal scrolling for the fixed header? I'm using the <Grid /> now with a custom header component but it's not playing nice when there are too many columns... :(

[bvaughn]

Table is not built/designed to horizontally scroll. I don't think there's a reasonable way to add it. I would suggest building your own Table-like component that wraps a Grid.

[jasonnathan]

Thanks
On Fri, 20 Jan 2017 at 1:53 PM, Brian Vaughn [e-mail]
wrote:

Table is not built/designed to horizontally scroll. I don't think there's
a reasonable way to add it. I would suggest building your own Table-like
component that wraps a Grid.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/bvaughn/react-virtualized/issues/120#issuecomment-273983863,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAvnfTQ-5G1cwpyPGJFT7o4cbHYQpPZTks5rUEvAgaJpZM4Hhk9m
.

--
Sent from my mobile

[aviklar10]

Table is not built/designed to horizontally scroll. I don't think there's a reasonable way to add it. I would suggest building your own Table-like component that wraps a Grid.

Hey @bvaughn , is it still correct? Do you have some example of using horizontal scroll with Table component, after all ?
tahnks