We Keep Coding

How to make two rows inside one row react-virtualized?

I need to make for some rows react-virtualized from table, create 2 rows, 1 row it is row react-virtualized second row it is my custom row
Ho to do it, maybe has some example?
I tried use defaultTableRowRenderer() function,as far as I understand, this embeds newlines in react-virtualized table, but I not need this
its must look like this
table
My code look like this
return (
<>
<div style={{ height: "90vh" }}>
<AutoSizer>
{({ width, height }) => (
<TableVirtualized
headerHeight={70}
height={height}
overscanRowCount={5}
rowHeight={ 80}
rowCount={rowItems.length}
rowGetter={({index}) => rowItems[index]}
width={width}
className={className}
rowRenderer={rowRenderer}
>
{headerTitles.map((v:any, i:any)=>{
const key = Object.keys(v);
return (
<Column
label={v[`${key}`]}
dataKey={key}
width={200}
cellRenderer={(v: any)=> cell(v)}
key={i}
headerRenderer={()=> formatHeader(v[`${key}`])}
/>
)
}
)}
</TableVirtualized>
)}
</AutoSizer>
this my rowRender function. I think this is a bad way, because row react-virtualized height is fixed
const rowRenderer = (props: any) => {
const { index, style, className, key, rowData } = props;
if(rowData.attributes){
return (
<div className={cellProps.attributes.className}>
{defaultTableRowRenderer(props)}
<div className='blabla'>1</div>
</div>
)
}
return defaultTableRowRenderer(props);
}

how to dynamically add SelectOption in React.js

There is a list l:
l = [
["a","b"],
["c","d"]
]
I want to make a SelectOption field dynamically with this list for which I write:
<Field
name="successData.val"
render={({ field: { name } }) => (
<Column>
<Select
onChange={value => setFieldValue(name, value)}
placeholder="dummy"
width={300}
>
{l.forEach(key => (
<SelectOption
value={key[0]}
label={key[1]}
/>
))}
</Select>
</Column>
)}
/>
But when I click the drop down button, the list doesn't appear, just the upper borderline of the box gets highlighted, it seems the drop down is getting generated, but not correctly.
Can anyone please suggest what might be wrong in this implementation?

Use map()
{l.map(key => (
<SelectOption
value={key[0]}
label={key[1]}
/>
))}

React Virtualized table with CellMeasurer is not calculating the height properly

I have a strange issue going on. The react-virtualized table with CellMeasurer is not calculating the height properly.
My render function looks something like this :-
<Table
deferredMeasurementCache={this._cache}
className={mainClasses}
width={500}
height={500}
headerHeight={headerHeight}
rowHeight={this._cache.rowHeight}
rowCount={dataList.length}
sort={this.sort}
sortBy={sortBy}
sortDirection={sortDirection}
rowGetter={({ index }) => dataList[index]}
rowRenderer={this.rowRenderer}
overscanRowCount={overscanRowCount}
onRowClick={onRowClick}
>
{
columnsDef.map((item, index) => {
if (index === 0) {
return (
<Column
key={item.dataKey}
dataKey={item.dataKey}
width={25}
cellRenderer={this.checkboxCellRenderer}
disableSort={!this.isSortEnabled(item)}
headerRenderer={this.checkBoxHeaderRenderer}
/>
);
}
return (
<Column
key={item.dataKey}
dataKey={item.dataKey}
width={item.width ? item.width : 0}
label={item.label}
cellRenderer={this.dynamicCellRenderer}
disableSort={!this.isSortEnabled(item)}
headerRenderer={this.headerRenderer}
flexGrow={item.flexGrow}
/>
);
})
}
</Table>
My dynamic cell renderer function is as follows :-
dynamicCellRenderer = (data) => {
return (
<CellMeasurer
cache={this._cache}
columnIndex={0}
key={data.cellData}
parent={data.parent}
rowIndex={data.rowIndex}
>
<div
style={{
whiteSpace: 'normal'
}}
>
{data.cellData}
</div>
</CellMeasurer>
);
}
I have cache defined in constructor :-
constructor(props) {
super(props);
this._cache = new CellMeasurerCache({ minHeight: props.rowHeight, fixedWidth: true });
}
Can anyone please help me with where am I going wrong. Am I missing something with implementation of CellMeasurer? Any help is appreciated. Thanks in advance.

I had the same issue.
I think that the problem is because each cell's height is calculated before it's content is loaded.
I used the parameter measure of the CellMeasurer and call it when the content is loaded
<CellMeasurer
cache={cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
width={width}
>
{({measure}) => (
<Content onLoad={measure} />
)}
</CellMeasurer>

Changing format of Server-Side data inside react-virtualized table

I'm making a React app that has two view options:
cards and
lists (tables).
I'm using react-virtualized for the list-view option. The problem is that I need to change the format of the server-side data I get when the data type is number. I've already done that in the card-view option. For example, this is my ItemCard Component:
<div className="container">
<div>{id}</div>
<div>{name}</div>
<div>{parseFloat(inventory).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</div>
<div>{parseFloat(unitprice).toFixed(2)}</div>
</div>
which I use in the ItemList Component like this:
beautifiedData.map((product, i) => {
return (
<ItemCard
key={i}
id={item.No}
name={item.name}
inventory={item.Inventory}
unitprice={item.UnitPrice}
/>
)
})
How should I do the exact same thing with react-virtualized table which looks like this:
<Table className="items-table"
width={1300}
height={400}
headerHeight={20}
rowHeight={30}
rowCount={list.length}
rowGetter={({ index }) => list[index]}
sortBy={this.state.sortBy}
sortDirection={this.state.sortDirection}
sort={this.sort}
>
<Column
label={content[langProp].ID}
dataKey= 'No'
width={150}
/>
<Column
label={content[langProp].Name}
dataKey= 'Name'
width={150}
/>
<Column
label={content[langProp].Inventory}
dataKey= 'Inventory'
width={150}
/>
<Column
label={content[langProp].UnitPrice}
dataKey= 'UnitPrice'
width={150}
/>
How can I change the format of 'Inventory' and 'UnitPrice' server-side data whose type is string?

I found a solution, I used cellDataGetter like this:
<Column
label={content[langProp].Inventory}
cellDataGetter={({ rowData }) => parseFloat(rowData.Inventory).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
dataKey='Inventory'
width={150}
/>

autoHeight with WindowScroller doesn't render full List

when i use autoHeight parameter on WindowScroller's child (List),
it doesn't render whole list of items (only few of them), but without autoHeight everything renders, but the rest of page is not scrolling.
Thank you, there is my code and screenshot:
const bars = this.props.bars
const rowRenderer = ({ index, key, style }) => {
const bar = bars.get(index)
return (
<div key={key} style={style}>
<BarListItem
key={key}
onClick={this.props.onBarClick}
{...this.props}
{...bar}
/>
</div>
)
}
return <WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<AutoSizer disableHeight>
{({ width }) => (
<List
autoHeight
onScroll={onChildScroll}
ref="List"
height={height}
rowCount={bars.size}
rowRenderer={rowRenderer}
rowHeight={height/5.5}
width={width}
isScrolling={isScrolling}
// onChildScroll={onChildScroll}
scrollTop={scrollTop}
/>)}
</AutoSizer>
)}
</WindowScroller>
screenshot