3

I am using the Grid component of react-virtualized, which expects column count and column width as required props. Right now, I am explicitly calculating the screen widths on resizing, and am calculation column width and column count.

My code is as follows:

let gridsNum = this.getColumnCount(this.state.width);
let colWidth = this.state.width / gridsNum;
<Grid
  cellRenderer={this.cellRenderer}
  columnCount={gridsNum}
  columnWidth={colWidth}
  height={window.innerHeight}
  rowCount={this.state.messages.length}
  rowHeight={310}
  onScroll={this.onScroll}
  width={window.innerWidth}
  className="jobs-gridview"
/> 

getColumnCount(width){
 if(width > 1350){
   return 4;
 }else if(width > 1000){
   return 3;
 }else if(width > 650){
   return 2;
 }else{
   return 1;
 }
}

I also went through the earlier plunkr example regarding a similar issue: http://plnkr.co/edit/zjCwNeRZ7XtmFp1PDBsc?p=preview.

I apologize for the poor quality of code. Is there anything better I can do to improve Grids for responsiveness?

Thanks.

raksheetbhat
  • 850
  • 2
  • 11
  • 25
  • It's not really clear what you're asking for. – bvaughn Dec 04 '17 at 03:38
  • I'm sorry if I wasn't clear earlier. I want to make react-virtualized Grids mobile responsive. Since Grids expect colWidth and colCount as required props, should I be using Javascript to explicitly calculate screen widths on resizing? Is there a better way to pass in the colWidth and colCount? – raksheetbhat Dec 04 '17 at 05:18
  • 1
    I guess it's unclear why you want to use a `Grid` specifically. If you want to fit exactly the number of columns, based on width, then why not just use `AutoSizer` and `List` exactly how the example Plnkr you linked to does? – bvaughn Dec 04 '17 at 16:38
  • 1
    Oh okay. Hadn't looked into AutoSizer as I seemed fixated on Grids. Sorry. Will look into your suggestions. Thanks. – raksheetbhat Dec 05 '17 at 05:03

0 Answers0