javascript - Problem with react-window won't show result

Question

I applied the react-window setting but I don't know why it wont show the result of the cell.

This is how I render the children for react window

This i how I apply the Reactwindow import { VariableSizeList as List } from 'react-window'

 const renderBodyColumn = (cell: any, row: any, renderRowSubComponent: any) => {
  const classTd = classname({
    td: true,
    [cell.column.columnClassName]: cell.column.columnClassName
  })
  const styles = {
    flex: cell.column.width + ' 0 auto',
    width: cell.column.width,
    maxWidth:
      cell.column.maxWidth && cell.column.maxWidth <= 1000
        ? cell.column.maxWidth + 'px'
        : 'auto'
  }

  const RenderRow = ({ index, style }) => {
    return (
      <div style={style} key={index}>
        {cell.render('Cell')}
      </div>
    )
  }
  return (
    <div {...cell.getCellProps()} className={classTd} style={{ ...styles }}>
      <List
        height={50}
        itemCount={row.length}
        itemSize={(index) => (index % 2 ? 100 : 100)}
      >
        {RenderRow(cell)}
      </List>
      {renderRowSubComponent && renderRowSubComponent
        ? renderRowSubComponent({ row })
        : ''}
    </div>
  )
}

this is the applied code for props

<div className='tbody' {...getTableBodyProps()}>
    {page.map((row: any, index: number) => {
        prepareRow(row)
        return (
            <div className='tr' key={index} {...row.getRowProps()} {...getTrProps(row)}>
            {row.cells.map((cell: any, index: number) => {
                return (
                <React.Fragment key={index}>
                    {renderBodyColumn(cell, row, renderRowSubComponent)}
                </React.Fragment>
                )
            })}
            </div>
        )
    }
</div>

question from:https://stackoverflow.com/questions/65651272/problem-with-react-window-wont-show-result

Answer 1

Waitting for answers