[STICKY] Tell me how you're using react-virtualized

bvaughn commented 8 years ago

A better understanding of how react-virtualized is being used will help me better prioritize features and shape the roadmap going forward. So if you're using this project, I'd love for you to leave a comment and tell me the following:

What are you using react-virtualized for (eg. form controls, data grids, etc)?
Which component(s) do you find most useful?
(Optional) What product(s) / project(s) are you using react-virtualized in?

andrewmclagan commented 7 years ago

Currently writing a medium article on best practices for integration with a redux stack. Such a powerful combination.

bvaughn commented 7 years ago

Can't wait to read it! :)

On Aug 29, 2016 5:02 PM, "Andrew McLagan" notifications@github.com wrote:

Currently writing a medium article on best practices for integration with a redux stack. Such a powerful combination.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bvaughn/react-virtualized/issues/147#issuecomment-243294343, or mute the thread https://github.com/notifications/unsubscribe-auth/AABzncKK1Io2oTY1E3L6cYmu2q_hvUlFks5qk3MqgaJpZM4HrE7D .

JobLeonard commented 7 years ago

@bvaughn The website is currently broken for other reason (dirty use of globals and leaky state all over the place), once I got those issues figured out I'll get back to fixing the react-select component and share a demo page with you in private, ok? :)

JobLeonard commented 7 years ago

Wondering if you've seen the react-select-fast-filter-options library yet for filtering react-select options? If you have so many options you would likely see further performance benefits from using that library.

Thanks for that shout-out, btw! Some of our datasets have almost 30000 genes to filter through so we were choking on that for sure..

jayryemure commented 7 years ago

Wondering if you've seen the react-select-fast-filter-options library yet for filtering react-select options? If you have so many options you would likely see further performance benefits from using that library.

Yes, that was extremely helpful thank you. I'm indeed using js-search for fast filtering the 100,000 items and forgot to mention it. And now to actually answer your question:

What are you using react-virtualized for (eg. form controls, data grids, etc)? For now just managing custom drop down grids but I can totally seeing using this anywhere when displaying collections of data. (Just started a monster website and my first time using React).
Which component(s) do you find most useful? AutoSizer, VirtualScroll, CellMeasurer, InfiniteLoader. This list will probably increase as time goes on.
(Optional) What product(s) / project(s) are you using react-virtualized in? Developing our new MVP website. It's a beast of a website using an MVC back-end and a React (no flux, yet) front-end. No server-side React rendering. Talk is cheap but when it nears launching I'll be requesting sponsorship.

bvaughn commented 7 years ago

Sounds great @JobLeonard. I look forward to seeing it. 😁

And thanks for the follow-up info @jayryemure. Glad to hear that js-search and react-virtualized are working out well for you! Good luck on your MVP!

JobLeonard commented 7 years ago

BTW, before if I selected an item with a "multi"-enabled react-virtualized-select, the item would disappear from the list. After adding react-select-fast-filter-options this no longer happens. Is this a bug, or did I miss an option that I have to set when I provide a custom filter option?

amertak commented 7 years ago

Using the FlexTable for the visitors list on the website. The number of visitors could be really huge so having a dynamic FlexTable is really useful.

bvaughn commented 7 years ago

@JobLeonard Was an oversight. Fixed in 0.0.5 (just released a moment ago).

JobLeonard commented 7 years ago

Just a heads-up, but it's still broken here, using these versions:

"react-select": "^0.9.1",
"react-select-fast-filter-options": "^0.0.5",
"react-virtualized-select": "^1.3.0",

(Not a big deal for us until we figure out all the other issues anyway)

bvaughn commented 7 years ago

@JobLeonard File an issue against react-select-fast-filter-options with repro case. I tested it earlier though, before I left my comment, and it seemed fine. However you're using an old version of react-select which might be the problem.

renebrandel commented 7 years ago

We are using react-virtualized to visualize the data browser in our GraphQL Backend-as-a-Service. Since www.graph.cool could potentially serve millions of data items we need a UI that can scale as well. The Grid, AutoSizer and InfiniteLoader is truly amazing and a perfect fit for our use case!

ritz078 commented 7 years ago

Thanks @bvaughn for this awesome component.

We are using react-virtualised to render our infinite list of properties. There are some issues which I will be adding separately but it has been great for us so far.

You can see the video here. You can also see the FPS in video.

You can read the blog about the implementation on medium. We will be presenting the product in JsFoo this month.

bvaughn commented 7 years ago

Hey @ritz078. Great write up! Really enjoyed it. Shared it to Twitter. :smile:

Hope the presentation goes well. It looks like you've done great work on the site!

ritz078 commented 7 years ago

Thanks. Glad you liked it. kudos to my whole team for pulling it off. 😄

istarkov commented 7 years ago

https://github.com/istarkov/revue github code review tool, published at revue.io

bvaughn commented 7 years ago

Looks slick @istarkov!!

jedwards1211 commented 7 years ago

@bvaughn I'm using List in an IoT app to scroll through plots of historical data on numerous channels efficiently. Each plot uses a canvas. I subscribe/unsubscribe to data in a declarative fashion, meaning whatever props are mounted by List control what gets subscribed to. I just realized I want to make a PR to pass an isOverscan property to rowRenderer so that I can keep around DOM elements for overscan rows without actually subscribing to extra data or drawing anything to their canvasses.

bvaughn commented 7 years ago

Neat idea, @jedwards1211. I might name the property isVisible since I don't know how standard the "overscan" term really is. But I support the general idea!

jedwards1211 commented 7 years ago

Right, I just thought since it's consistent with the overscanRows prop it would be clear what it means. isVisible seems kind of ambiguous to me, but maybe I'm thinking about it too hard.

bvaughn commented 7 years ago

Hm. I see your point. Guess I don't feel strongly about it either way. This would be more of an advanced property anyway.

jedwards1211 commented 7 years ago

@bvaughn true. And you know, I fixed some other things and discovered I don't need it to get good performance in my app after all :P On the other hand, I was thinking of rewriting a Tree component in my app to use react-virtualized...

bvaughn commented 7 years ago

Share it back here if you do. 😄 I have a branch with a virtualized tree that I haven't finished enough to release. And there's also fritz-c/react-sortable-tree. But in general, trees are cool and I would like to see more uses of virtualized trees.

nhducit commented 7 years ago

I'm trying to implement a comparison table like scroll sync example

hmeerlo commented 7 years ago

He just wanted to let you know what I'm building with react-virtualized. It is a planning tool showing workorders and planned personnel and machinery, with the sidebar showing availability for the chosen period. All scrollable parts (almost all views) are based on Grid or List. Keep up the good work on this project!

bvaughn commented 7 years ago

Whoa @hmeerlo! That looks freakin' cool! Thanks for sharing 😁

sontek commented 7 years ago

What are you using react-virtualized for (eg. form controls, data grids, etc)? We are a conference registration and survey company. We are using react-virtualized for all our datatable needs:

List of events
List of attendees (sort, filter, add/remove columns, etc)
Sortable / Movable questions on a survey

Which component(s) do you find most useful? Grid, ScrollSync, and WindowScroller

We also use react-sortable-hoc with it.

ArcanisCz commented 7 years ago

We are now using react-virtualized for similar thing as @hmeerlo - for bus planning for bus travelling company. Contract is for potentially up to 600 buses to be listed on screen (=not paging) with all planned journeys for them. Having it all rendered with normal scrolling was huge strain for processor... (there are features as DnD you can imagine). After using react-virtualized, everything became smooth again :)

At first, i wanted to try https://github.com/implausible/rickscroll but it seems they are doing things in very obscure way...

(Currently using only List and that AutoHeight thing, but can imagine usefulness of other components very well)

tiberiumaxim commented 7 years ago

Hi @bvaughn and thanks for your awesome work.

I am using it to display a long list (500-7000 text items) which consists of law elements: chapters, article titles, paragraphs, etc.

I am using WindowScroller, CellMeasurer and List in order to achieve this. The only problem I have is using scrollToIndex. I found that it doesn't work with WindowScroller. Do you have any work around for this? I would like to create links inside the law content.

bvaughn commented 7 years ago

Hey @tiberiumaxim I don't actually use WindowScroller for anything outside of the react-virtualized demo site so it doesn't get as much attention. If you're using it, and willing to lend a hand, I'd be excited to get a PR from you adding support for scrollToIndex.

tiberiumaxim commented 7 years ago

Hi @bvaughn. I would also be delighted to contribute. Can you give me some guidance on how to approach this task? I barely know a thing about the module and I'm kinda new to React. How can we get in touch regarding this feature? I feel this is not the place to discuss this matter :) We could open a new issue for it.

bvaughn commented 7 years ago

See #540; it's all yours

bunterWolf commented 7 years ago

I use react-virtualized to speed up my electron file-manager. Which works great, thanks! ;)

But could not find any reference on how to add padding-top and padding-bottom to the list, which works with scrollTo. Now I have a solution which works for me. Do you think this is a solid way for others too?


const PADDING_TOP = 50
const PADDING_BOTTOM = 50

<AutoSizer>
  {({ width, height }) => (
    <List
      height={(height - PADDING_TOP - PADDING_BOTTOM)}
      style={{
        // I overwrite the box-sizing to content-box to able to use the height without the padding
        boxSizing: 'content-box',
        // now we add padding and the file height of the list, will be the same as the Autosizer
        paddingTop: PADDING_TOP,
        paddingBottom: PADDING_BOTTOM
      }}

      // With position relative, the items position themselves at the innercontainer
      containerStyle={{position: 'relative'}} 
      ....
    />
)}
</AutoSizer>

Keyboard-Arrow navigation is made with scrollTo test2

screen shot 2017-01-20 at 18 04 19

bvaughn commented 7 years ago

Hey @bunterWolf! Thanks for sharing. That's a really cool solution, and a really neat looking widget! 😁 Love it!

szahn commented 7 years ago

Most free or commercial data grid components on the web aren't as fast as react virtualized, so I'm really grateful for this contribution. However, I did notice poor performance on older browsers (mostly IE, Firefox). SlickGrid actually outperformed MultiGrid in IE and Edge! Chrome always performs the best. There is still a need for good performance on legacy browsers and lower end CPUs, especially in the enterprise industry, and I find support for this lacking, although I understand how supporting both green and old browsers can be difficult due to time. This is why I feel we need a serious commercial data grid component built using modern concepts that can also support older browsers and out-perform all other libraries out there. For my scenario, I forked the virtual data grid and highly customized it. Added resizable, reorderable columns with search boxes to do column based searching, so had to build a forms-based component just for the grid headers. In addition, I also added alternating row colors and ability to select rows. Additional cell render templates were added for image cells.

I noticed that the grid component does not use css 3d transforms, is there a reason to not do this? I read it's faster to use transforms and positioning and utilizes the GPU. Wouldn't it also be faster to group cells into rows, therefore only transforming the y coordinate once per row? Grouping or caching cells by rows is also useful when having to do row selection which is something I needed. There are still performance issues when rendering 20+ columns and 5000+ rows on older browsers. I hope to see future improvements to this. Has anyone read this article (http://blog.atom.io/2015/06/24/rendering-improvements.html) and considering using quadrants/tiles instead of rows and cells to optmize rendering and caching?

offsky commented 7 years ago

At Toodledo.com we are using react-virtualized to display the user's to-do list, which could be as few as 0 items or as many as 20,000. We also have different row renderers based on the user's preferences, and screen size. Its really nice to be able to use the same list and just swap out the row renderer.

We have variable height rows that can grow upon user interaction, and the entire list is responsive as well, so we use <AutoSizer> and <CellMeasurer>. We also have a sticky header who's scroll needs to be synchronized with the List, so a lot is going on.

We needed a way to have consistent performance both with the initial load, and with the scrolling and react-virtualized does a nice job of both. Our rows are quite heavy at desktop size so we are struggling a bit the with unrendered rows coming into view on quick scrolling, but its manageable and better than what we have now. I am confident that we will be able to fine tune it before we release.

Thanks!

taylorlee commented 7 years ago

First of all, thanks for this library, it has been immensely useful!

What are you using react-virtualized for?

A simple spreadsheet editor for viewing / modifying data

Which component do you find most useful?

Grid! The HOCs are nice, but Grid is definitely the heavy lifter.

More context:

I needed to build a spreadsheet-like table with a header that was fixed vertically but not horizontally. None of the HOCs worked out of the box for me, because I needed:

vertical scrolling over thousands of rows
horizontal scrolling over tens of columns without altering column width (the rounded borders or the header and grid should scroll off the page, not slide into the grid-edge)
scroll synchronization between the header and the body
scrolling anywhere in the window triggers scrolling in the body
page resize should resize header and body
Arrow keys step through grid
other bells and whistles: sorting, searching, etc.

I tried combining many of the HOCs in various ways, (ScrollSync+WindowScroller+AutoSizer+ArrowKeyStepper+etc...) but it was relatively painful.

1 & 3 worked well with a ScrollSync and two Grids.
For 2, I made the Grid render with full width to prevent virtual scrolling.
For 4, I used the onWheel event on an outer element to proxy to the horizontal/vertical scroll handlers.
For 5, I used forceUpdate combined with a standard resize handler like https://developer.mozilla.org/en-US/docs/Web/Events/resize#setTimeout
For 6, I used document.activeElement + cartesian coordinates + Grid.scrollToCell (if cell not already in DOM)
7 was relatively straightforward with state-modifying actions.

Here is a snippet of roughly how I implemented 1-4: https://gist.github.com/taylorlee/01954d237d61a3ec9b4a324f92a87291

Thanks again!

oyeanuj commented 7 years ago

@offsky I am very interested in your solution, especially since you have variable height rows that grow on user interaction, (and you use a sticky header) as well. I've had a really hard time making all that work with AutoSizer and CellMeasurer.

We have variable height rows that can grow upon user interaction, and the entire list is responsive as well, so we use and . We also have a sticky header who's scroll needs to be synchronized with the List, so a lot is going on.

Do you have a public link or gist for the same that you could share?

jonikorpi commented 7 years ago

At https://kausi.xyz/ I'm using <List> to infinite-scroll viewport-sized chunks of textareas. The implementation has some issues right now, but the app is live and usable. I previously used react-list, but switched to this library as it appears to be more mature and active, and I wanted to learn it for another project that I describe below.

Couple of the issues:

Tabbing between textareas in some browsers can make a part of the page go off-screen, because of the "Hey I see you focused on a form element that's not in the viewport. Let me scroll it into view for you." -thing some browsers do, even if overflow is supposed to be hidden.
Scrolling performance is terrible in desktop Safari. (Haven't had time to check yet, but I may be accidentally triggering some re-renders while scrolling.)

I'm currently also developing a strategy game using <Grid>! I'm using it to create an infinitely scrollable hex grid: https://www.dropbox.com/s/e9tlhbmyvhbnm17/Screenshot%202017-04-29%2018.10.04.png?dl=0

Each grid cell renders a rectangular chunk of hexagons in the shape of a rhombus, which are then offset on the x-axis depending on the chunk's index to stitch the hexes together. Performance is great so far! I first tried using <Collection> to render hex-shaped chunks, but the initialization was way too slow, as the docs say.

mking-clari commented 7 years ago

We are using react-virtualized at my startup, Clari.

We use react-virtualized to implement data tables, messaging components, and option lists. For data tables, AutoSizer, ArrowKeyStepper, Grid, and ScrollSync are most useful. For messaging components, CellMeasurer is also useful because we have variable height messages. For option lists (normally based on results from a backend endpoint), List is most useful.

We do not use MultiGrid because we need a fixed footer in addition to a fixed header and fixed left column. It's straightforward to implement our custom multigrid using ScrollSync and Grid.

MrNice commented 6 years ago

At Waypoint Building, we use react-virtualized for interactive data tables and arbitrarily large lists. Our users can have tables with thousands of elements in them, but can quickly sort and filter the columns and rows. Our one list view which doesn't use react-virtualized loads extremely slowly.

We use Higher Order Components heavily to inject props into our cellRenderers so that we can build components by composing behaviors / styles. For example, there is a defaultStyle HOC which allows any cell type to have bold text when the column is selected and a blue background if the row is selected. This makes it pretty easy to consolidate behavior - a money HOC transforms numeric cellData into a pretty string, then an indicator HOC can color the text RED if it is negative, green if its positive. Finally, default styles are applied.

Doing this has kept a complicated codebase with many different kinds of data and data cells fairly easy to maintain and extend.

bvaughn commented 6 years ago

That's cool, @MrNice! Any chance you'd be able to share some of those HoCs (as a Gist or similar)? I understand if you can't, or don't have the time. Just seems like a useful thing to have as a reference for others.

MrNice commented 6 years ago

This is a WIP but shows our approach, based on the patterns from: Higher Order Components in Depth

export const CellRenderer = ({ cellData, ...rest }) => (
    <div title={cellData} {...rest} >
        {cellData}
    </div>
)

CellRenderer.propTypes = {
    cellData: React.PropTypes.any,
}

// NOTE: PP suffix indicates props proxy higher order component (HOC)
export function defaultStylePP(WrappedComponent) {
    class DefaultCellStyle extends React.Component {
        render() {
            const {style, selectedRow, selectedColumn, ...rest} = this.props
            const defaultStyle = {
                display: 'flex',
                alignItems: 'center',
                paddingLeft: '4px',
                fontSize: '16px',
                fontWeight: selectedColumn ? 600 : 'inherit',
                // FIXME (NICHOLAS): Choose the correct row background color
                backgroundColor: selectedRow ? '#239cb6' : 'inherit',
            }

            return <WrappedComponent style={assign({}, style, defaultStyle)} {...rest} />
        }
    }

    DefaultCellStyle.propTypes = {
        style: React.PropTypes.object,
        selectedRow: React.PropTypes.bool,
        selectedColumn: React.PropTypes.bool,
    }

    return DefaultCellStyle
}

export const DefaultCellRenderer = defaultStylePP(CellRenderer)

const moneyFormatter = d3.format('$,.2f')
export function moneyPP(WrappedComponent) {
    class MoneyCell extends React.Component {
        render() {
            const {cellData, ...rest} = this.props
            // NOTE: We must pass rest through instead of spreading props
            //       So that we don't overwrite the formatted cellData
            return <WrappedComponent cellData={moneyFormatter(cellData)} {...rest} />
        }
    }

    MoneyCell.propTypes = {
        style: React.PropTypes.object,
        cellData: React.PropTypes.any,
    }

    return MoneyCell
}

export const MoneyCellRenderer = compose(
    moneyPP,
    defaultStylePP
)(CellRenderer)

export function variancePP(WrappedComponent) {
    class VarianceCell extends React.Component {
        render() {
            const {cellData, selectedColumn, style, ...rest} = this.props

            const isNegative = isString(cellData) ?
                cellData.indexOf('-') === 0 :
                Number(cellData) < 0

            // TODO (Nicholas): Can d3 do this formatting for us?
            const prefix = isNegative ? '' : '+'

            // FIXME (NICHOLAS): Choose correct variance colors
            const color = isNegative ? '#F00' : '#0F0'
            const proxiedStyle = selectedColumn ? Object.assign({}, style, { color }) : style

            // NOTE: We must explicitly pass through selectedColumn
            //       To avoid the props spread operation
            //       which would overwrite our style and cellData changes
            return (
                <WrappedComponent style={proxiedStyle}
                    cellData={`${prefix}${cellData}`}
                    selectedColumn={selectedColumn}
                    {...rest}
                />
            )
            //      (We pull selectedColumn out of props to make
            //       integration points obvious, else we could use
            //       this.props.selectedColumn AND {...rest})
        }
    }

    VarianceCell.propTypes = {
        style: React.PropTypes.object,
        cellData: React.PropTypes.any,
        selectedColumn: React.PropTypes.bool,
    }

    return VarianceCell
}

// NOTE: Variance Must run AFTER Money
//       Remember compose applies right to left
//       But the renders happen left to right
//       (And I might have gotten these things confused)
export const VarianceCellRenderer = compose(
    moneyPP,
    variancePP,
    defaultStylePP
)(CellRenderer)

@bvaughn Would you prefer this in a gist, or can it stay in this sticky thread?

chenlanlan commented 6 years ago

@bvaughn Have been using react-virtualized in a UI project to render large data set in a data table. Many modules/functionalities in data tables are very useful, like Scroll, Selection, Sort...

For one thing, I want to ask you for suggestion. Since react-virtualized is using DOM recycling, only contents visible are going into DOM. Do you have any suggestion for supporting somthing like Ctrl+F search in data tables. I saw your reply to @BTMPL, I wonder if that is similar as using redux-search in data tables?

Thanks!

bvaughn commented 6 years ago

Native browser search is not supported by any windowing library unfortunately. You can use a custom solution, like js-worker-search/js-search/redux-search. That's the best solution I'm aware of at the moment.

On Aug 9, 2017 11:52 AM, "Sally Chen" notifications@github.com wrote:

@bvaughn https://github.com/bvaughn Have been using react-virtualized in a UI project to render large data set in a data table. Many modules/functionalities in data tables are very useful, like Scroll, Selection, Sort...

For one thing, I want to ask you for suggestion. Since react-virtualized is using DOM recycling, only contents visible are going into DOM. Do you have any suggestion for supporting somthing like Ctrl+F search in data tables. I saw your reply to @BTMPL https://github.com/btmpl, I wonder if that is similar as using redux-search in data tables?

Thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bvaughn/react-virtualized/issues/147#issuecomment-321348118, or mute the thread https://github.com/notifications/unsubscribe-auth/AABznSlSV5_aT8elxsizVkkYbzag_Nscks5sWgAGgaJpZM4HrE7D .

dingchaoyan1983 commented 6 years ago

e5ebz2d2da MultiGrid that can fixedRightColumn and fixedLeftColumn you can check the source code from here

turnerniles commented 6 years ago

@bvaughn We built a pivot component based on react-virtualized, react-virtualized-pivot.

bvaughn commented 6 years ago

Oh that's cool! Thanks for sharing :)

xiaodaigh commented 6 years ago

I am using virtualize to show a long list of credit card transactions. So I am happy for it to be fixed width but want the height to vary. Also to make it responsive

Codelica commented 6 years ago

I'm using AutoSizer, List and my own cache based on how CellMeasurerCache works (thanks for the tips on Slack :) )

My use is for a realtime app that evaluates incoming API calls providing stats and logs (the List component) for dev/troubleshooting. This project was a godsend for the logs. Thanks again...

econnect - pos tcp api testing

bvaughn / react-virtualized