I'm having trouble with react-virtualized Table (inside InfiniteLoader inside AutoSizer) with custom row renderer. Header row is rendered, but no data rows. Neither rowRenderer or rowGetter even get called for any row. I checked the data is there (this.props.requests).
What am I missing, or, how do I go about debugging?
<AutoSizer>
{({ height, width }) => (
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={this.props.loadMoreEntries}
rowCount={(this.props.requests || []).length}
>
{({ onRowsRendered, registerChild }) => (
<Table
deferredMeasurementCache={this._cache}
onRowsRendered={onRowsRendered}
overscanRowCount={2}
ref={registerChild}
height={height}
headerHeight={50}
rowCount={(this.props.requests || []).length}
rowHeight={this._cache.rowHeight}
rowRenderer={this._rowRenderer}
rowGetter={this._rowGetter}
onRowClick={this.rowClicked}
width={width}
>
<Column
dataKey="requestType"
label="RqType"
width={100}
cellRenderer={this._renderRequestType}
/>
...
</Table>
)}
</InfiniteLoader>
)}
</AutoSizer>
My guess would be that the container div has no fixed height, and since you are using the Autosizer your table ends up with height = 0. Try with a fixed height in the props of Table and for the container div (maybe based on the current number of rows * row height).
You can also check that the rowCount is positive, but it should be ok as far as I can tell.
Related
I have an multigrid table in react virtualized and I cant change the style yo rtl .
I tried the props in document didn't work :(
I want my fixed columns to start from right
<AutoSizer>
{({ height, width }) => (
<MultiGrid
style={{ direction: "rtl" }}
cellRenderer={cellRenderer}
fixedColumnCount={2}
fixedRowCount={1}
height={500}
rowHeight={40}
rowCount={heightcount}
columnCount={headercolumns.length}
columnWidth={({ index }) => headercolumns[index].width}
width={width}
scrollToAlignment="end"
/>
)}
</AutoSizer>
I am using react virtualize table with many sub components in it and have very bad performance when rendering it.
it gets more aweful after scrolling, clicking buttons...
<TableContainer className={classes.table}>
<AutoSizer>
{({ height, width }) => (
<Table
height={height}
width={width}
rowHeight={64}
headerHeight={84}
rowCount={!isLoading ? tableRowsData.length : LOADING_ROWS_COUNT}
gridStyle={{
direction: 'inherit',
}}
rowGetter={({ index }) => getRowRow(index)}
className={classes.table}
rowClassName={getRowClassName}
noRowsRenderer={noRowsRendererHandler}
disableHeader={showEmptyState}
>
{Object.keys(headersConfig).map((key) => {
return (
<Column
key={key}
headerRenderer={({dataKey}) => headersConfig[dataKey].content}
cellRenderer={({ cellData }) => cellData}
dataKey={key}
width={headersConfig[key].width}
/>
)
})}
</Table>
)}
</AutoSizer>
</TableContainer>
the headerConfig is an object with all the column components.
how can I use this table wiser? how can I prevent many unnecessary re-renders?
am I need to use the rowRenderer prop? if so, can I get an example or a link to understand the implementation?
tnx
cheers
I use react-virtualized Table to render data in real time.
render() {
...
return(
<div>
<AutoSizer disableHeight>
{({width}) => (
<Table
ref="Table"
headerClassName={styles.headerColumn}
height={height}
noRowsRenderer={this._noRowsRenderer}
rowHeight={ rowHeight}
rowGetter={rowGetter}
rowCount={rowCount}
scrollToIndex={scrollToIndex}
sort={this._sort}
sortBy={sortBy}
sortDirection={sortDirection}
width={width}>
<Column
label="Index"
cellDataGetter={({rowData}) => rowData.index}
dataKey="index"
disableSort={!this._isSortEnabled()}
width={60}
/>
<Column
dataKey="name"
disableSort={!this._isSortEnabled()}
headerRenderer={this._headerRenderer}
width={90}
/>
</Table>
)}
</AutoSizer>
</div>
);
}
I want to add glow effect to cells that have been updated. The glow effect can be implemented with css animation
#-webkit-keyframes glow-effect {
from {background-color: red;}
to {background-color: yellow;}
}
How can I know which cells have been updated recently so I can use the glow effect css class to render them?
Is there a way I can change the default static classname for List and/or Grid?
className="sample-classname" just appends to the current classsname :(
here is my sample code
<WindowScroller>
{({ height, width, isScrolling, onChildScroll, scrollTop }) => (
<List
className="sample-classname"
ref={setRef}
autoHeight
height={height}
width={1140}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={data.size}
rowHeight={this.rowHeight}
rowRenderer={this.rowRenderer}
scrollTop={scrollTop}
overscanRowCount={1}
/>
)}
</WindowScroller>
I am trying to combine a custom CSS table with the react virtualized window scroller. I currently can get the table to display, but am having trouble figuring out how to combine styling to that table, or add any logic to the table rows.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
autoHeight
width={1000}
height={700}
headerHeight={20}
rowHeight={30}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={table.length}
scrollTop={scrollTop}
rowGetter={({ index }) => table[index]}
>
<Column
label='Item1'
dataKey='item1'
width={150}
/>
<Column
width={200}
label='item2'
dataKey='item2'
/>
<Column
width={200}
label='item3'
dataKey='item3'
/>
<Column
width={150}
label='item4'
dataKey='item4'
/>
<Column
width={200}
label='item5'
dataKey='item5'
/>
</Table>
)}
</WindowScroller>
Definitely review the docs. You'll likely be passing both some type of style props and event props to the components - so you need to understand how those components define and accept those props. This is only possible by reviewing the documentation of the library.
EDIT:
Here are the propTypes for the <Table /> component:
https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md
You'll see that it accepts custom event handlers like onRowClick but also style props like rowStyle