react-virtualized | 易学教程

React Virtualized - onclick, expand Rows for additional details

阅读更多关于 React Virtualized - onclick, expand Rows for additional details

问题 I have a requirement to open/close additional row details. Has anyone implemented or have ideas on how to go about implementing expand/collapse feature for each row? 回答1: There's a template of sorts for this sort of thing (demo, source) The important bit is that you'll need to tell your List / Grid /whatever when an open/close has changed (aka when size might have changed), eg: this._listRef.recomputeRowHeights(indexOfChangedRow) // Clear cached size this._listRef.forceUpdateGrid() //

VirtualScroll rowRenderer method is called many times while scrolling

阅读更多关于 VirtualScroll rowRenderer method is called many times while scrolling

问题 I have a react-virtualized's infinite scroll list, (Most of the setup is copied from this example). I'm providing it with a rowRenderer function like the specs requires. this works fine if the rowRenderer function is very lightweight (i.e returns a very basic component as row). but the rendering of my RowComponent includes some Array.map over some properties. this shouldn't cause any problem except that the rowRenderer functions is being called tens or even hundreds of times while scrolling.

Using react-sortable-hoc with react-virtualized Grid

阅读更多关于 Using react-sortable-hoc with react-virtualized Grid

问题 I want to use react-sortable-hoc with react-virtualized's Grid where the rows are sortable. I cannot use the List as I have multiple columns and I cannot use it with the Table because I have too many columns and therefore need horizontal scrolling. The issue that I am facing is that the Grid does not have a rowRenderer callback as the Table or List has (it only has cellRenderer and cellRenderer), thus I don't know what to wrap the SortableElement around. I would appreciate any ideas or

How to add sorting to table with react virtualized?

阅读更多关于 How to add sorting to table with react virtualized?

I am trying to add sorting to my project with the table sorting demo on Github . My code: import React from 'react'; import PropTypes from 'prop-types'; import { Table, Column, SortDirection, SortIndicator } from 'react-virtualized'; import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; import 'react-virtualized/styles.css'; class NewTable extends React.Component { constructor(props) { super(props); this.dataList = props.list; this.state = { headerHeight: 50, rowHeight: 25, rowCount: this.dataList.length, height: 400, sortBy: 'columnone', sortDirection: SortDirection.ASC, }; this

how to scroll to index in deeply hierarchical list in react-virtualized

阅读更多关于 how to scroll to index in deeply hierarchical list in react-virtualized

问题 The List component of react-virtualized offers a property scrollToIndex to enable scrolling to a list item that is currently not visible. The official tree example builds a hierarchical list with hierarchically stacked ul elements - just as expected. So if index x is scrolled to, this row contains the entire hierarchy that resides under this specific tree element. In my case there are very few level one elements. But in level 3 there are up to 600 elements. So it is important to be able to

How to use public method updatePosition of react-virtualized?

阅读更多关于 How to use public method updatePosition of react-virtualized?

The docs: https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md#updateposition But I checkout the source: https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.js It's not a public method, so how can I use this method to update scroll position when other element size changed? But I checkout the source...It's not a public method It's right here and it has some unit tests too . To use it you'll need to set a ref to WindowScroller . Here's a minimal example of what I mean: class YourComponent extends React.Component { render() {

How to use public method updatePosition of react-virtualized?

阅读更多关于 How to use public method updatePosition of react-virtualized?

问题 The docs: https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md#updateposition But I checkout the source: https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.js It's not a public method, so how can I use this method to update scroll position when other element size changed? 回答1: But I checkout the source...It's not a public method It's right here and it has some unit tests too. To use it you'll need to set a ref to