FAQ react-virtualized questions -
i attempting make grid polished. instead of asking these questions separately, thought gather them altogether in 1 place.
for react-virtualized grid
, how i:
- render decimals precision 2 , trailing zeroes 48.5 shows 48.50.
- put lines in between rows , lines in between columns.
- add column names header @ top of grid.
- change font of text in cell
- change alignment per cell
cellrenderer
looks this:
cellrenderer ({ columnindex, key, rowindex, style }) { const { quotelist } = this.state; const rowclass = this.getrowclassname(rowindex) // first try @ making use of .css customize look. doesn't seen anything. const classnames = cn(rowclass, styles.cell, { [styles.centeredcell]: columnindex > 1 }) return ( <div //classname={classnames} key={key} style={style} > {quotelist[rowindex][columnindex]} </div> ) }
i instantiating grid
this:
render() { return ( <div style={{ textalign: "center" }}> <grid ref={(ref) => this.thegrid = ref} cellrenderer={this.cellrenderer} columncount={7} columnwidth={75} height={quotelist.length * 20} rowcount={quotelist.length} rowheight={20} width={800} /> </div> ); }
i see in 1 of examples .css
file looks this, not sure how apply them [note try inside cellrenderer
].
.gridrow { margin-top: 15px; display: flex; flex-direction: row; } .gridcolumn { display: flex; flex-direction: column; flex: 1 1 auto; } .leftsidegridcontainer { flex: 0 0 50px; } .bodygrid { width: 100%; border: 1px solid #e0e0e0; } .evenrow, .oddrow { border-bottom: 1px solid #e0e0e0; } .oddrow { background-color: #fafafa; } .cell, .headercell { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 .5em; } .cell { border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .headercell { font-weight: bold; border-right: 1px solid #ccc; background-color: #e0e0e0; } .centeredcell { align-items: center; text-align: center; } .topleftcell { border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .lettercell { font-size: 1.5em; color: #fff; text-align: center; } .nocells { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; font-size: 1em; color: #bdbdbd; }
Comments
Post a Comment