Describe the bug (required)
When I try to connect Virtualized Rows (React-Window) and Sub Components and I clicked on a row in the table I do not see the sub component open under the row I clicked.
Provide an example via Codesandbox! (required)
const RenderRow = useCallback( ({ index, style }) => { const row = rows[index]; const tableRowStyle = cn(styles.table_row, styles.table_row_hover, { [styles.expanded_row]: row.isExpanded }, { [styles.show_cursor]: props.onRowClick }, { [styles.active_row]: activeRowId === row.id }); prepareRow(row); return ( <Fragment key={row.id}> <div role='button' tabIndex={0} onClick={() => handleRowClick(row)} {...row.getRowProps({ className: tableRowStyle, style })} > {row.cells?.map((cell: any) => ( <div role='button' tabIndex={0} onClick={(e: Event) => { handleCellClick(cell, row); e.stopPropagation(); }} key={cell.column.id} title={cell.value} className={cn('table-column', styles.table_row_td, cell.column.cellClassName)} {...cell.getCellProps(cellProps)} > {cell.render(ColumnFieldType.CELL)} </div> ))} </div> {row.isExpanded && props.SubComponent && ( <div className={cn({ [styles.table_row_sub_component]: visibleColumns.length }, styles.table_row)}> <div className={styles.table_row_td}> <props.SubComponent row={row.original} /> </div> </div> )} </Fragment> ); }, // eslint-disable-next-line react-hooks/exhaustive-deps [prepareRow, rows, props, visibleColumns.length], );
<div {...getTableProps()} className={styles.table}> <TableHeader {...tableHeaderProps} /> <div {...getTableBodyProps()}> <FixedSizeList height={props.tableHeight} itemCount={rows.length} itemSize={53} width='100%' > {RenderRow} </FixedSizeList> </div> </div>
Steps To Reproduce (required)
Steps to reproduce the behavior:
- click on row
Expected behavior (Recommended)
click on row should open sub component under the clicked row
Additional context
Im using latest react version & typescript.
using react hooks
Describe the bug (required)
When I try to connect
Virtualized Rows (React-Window)andSub Componentsand I clicked on a row in the table I do not see the sub component open under the row I clicked.Provide an example via Codesandbox! (required)
const RenderRow = useCallback( ({ index, style }) => { const row = rows[index]; const tableRowStyle = cn(styles.table_row, styles.table_row_hover, { [styles.expanded_row]: row.isExpanded }, { [styles.show_cursor]: props.onRowClick }, { [styles.active_row]: activeRowId === row.id }); prepareRow(row); return ( <Fragment key={row.id}> <div role='button' tabIndex={0} onClick={() => handleRowClick(row)} {...row.getRowProps({ className: tableRowStyle, style })} > {row.cells?.map((cell: any) => ( <div role='button' tabIndex={0} onClick={(e: Event) => { handleCellClick(cell, row); e.stopPropagation(); }} key={cell.column.id} title={cell.value} className={cn('table-column', styles.table_row_td, cell.column.cellClassName)} {...cell.getCellProps(cellProps)} > {cell.render(ColumnFieldType.CELL)} </div> ))} </div> {row.isExpanded && props.SubComponent && ( <div className={cn({ [styles.table_row_sub_component]: visibleColumns.length }, styles.table_row)}> <div className={styles.table_row_td}> <props.SubComponent row={row.original} /> </div> </div> )} </Fragment> ); }, // eslint-disable-next-line react-hooks/exhaustive-deps [prepareRow, rows, props, visibleColumns.length], );<div {...getTableProps()} className={styles.table}> <TableHeader {...tableHeaderProps} /> <div {...getTableBodyProps()}> <FixedSizeList height={props.tableHeight} itemCount={rows.length} itemSize={53} width='100%' > {RenderRow} </FixedSizeList> </div> </div>Steps To Reproduce (required)
Steps to reproduce the behavior:
Expected behavior (Recommended)
click on row should open sub component under the clicked row
Additional context
Im using latest react version & typescript.
using react hooks