DataView number of columns

[chrishj]

I have followed the demo code but my panels stretch the entire width on the page when using the Grid item In the showcase there are 4 items per row.

Could you let me know the setting I need to change to get multiple items per line?

In the jsf version in the dataGrid there is a "columns" attribute. Have I missed a similar setting in PrimeReact version?

Code: Select all

renderGridItem(flkrImg){
 return (
  <div style={{ padding: '.5em' }} className="p-col-12 p-md-3">
   <Panel header={flkrImg.id} style={{ textAlign: 'center' }}>
    <img src={flkrImg.url} alt={flkrImg.id} />
   </Panel>
  </div>
 );
}

Code: Select all

 const header = this.renderHeader();

  return(
    <Fragment>
      <div className="content-section implementation">
       <DataView value={pics} layout={this.state.layout} header={header}
        itemTemplate={this.itemTemplate} paginatorPosition={'both'} paginator={true} rows={20}
        sortOrder={this.state.sortOrder} sortField={this.state.sortField} />
      </div>
    
   </Fragment>
  )

My package.json is:

Code: Select all

dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-brands-svg-icons": "^5.7.2",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@material-ui/core": "^3.9.2",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "classnames": "^2.2.6",
    "jquery": "^3.3.1",
    "lodash.isempty": "^4.4.0",
    "popper.js": "^1.14.7",
    "primeflex": "^1.0.0-rc.1",
    "primeicons": "^1.0.0",
    "primereact": "^3.1.0",
    "prop-types": "^15.5.6",
    "react": "^16.8.1",
    "react-dom": "^16.8.3",
    "react-redux": "^6.0.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "react-transition-group": "^2.5.1",
    "redux": "^4.0.1",
    "styled-components": "^4.1.3",
    "typescript": "*"

Thank you,

[chrishj]

Update:
I have reduced the span on te panel to a page by the following update in css but items are still displayed 1 per row and not filling each row

Code: Select all

.p-panel{
 width: 150px !important;

}

[kevinraian]

It's been a long time since you asked but you can just set columns attribute at p:dataViewGridItem component.