Forum Discussion
SPFx React Web Part - Trying to bind items to a DetailsList
Hi
I have created an SPFx React web part where I am binding a list to a DetailsList
The code in the render that I've commented out works just fine.
When I try to use the DetailsList I get a bunch of empty rows.
Anyone know what I'm doing wrong?
Thanks
P
import * as React from 'react';
import { css, DetailsList, IColumn } from 'office-ui-fabric-react';
import styles from './Splistitemsdata.module.scss';
import { ISplistitemsdataProps } from './ISplistitemsdataProps';
import * as jquery from 'jquery';
export interface ISplistitemsState{
items:[
{
"Title":string,
"Id":string,
"Created":string;
"Author":{
Title:string;
}
}]
}
export default class Splistitems extends React.Component<ISplistitemsdataProps, ISplistitemsState> {
private _columns: IColumn[];
public constructor(props: ISplistitemsdataProps, state: ISplistitemsState){
super(props);
this.state = {
items: [
{
"Title": "",
"Id": "",
"Created":"",
"Author":{
"Title":""
}
}
]
};
this._columns = [
{ key: 'title', name: 'Title', fieldName: 'title', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'created', name: 'Created', fieldName: 'created', minWidth: 100, maxWidth: 200 },
];
}
public componentWillMount(){
var reactHandler = this;
jquery.ajax({
url: `${this.props.siteurl}/_api/web/lists/getbytitle('TestList')/items?$select=Title,Id,Created,Author/Title&$expand=Author`,
type: "GET",
headers:{'Accept': 'application/json; odata=verbose;'},
success: function(resultData) {
/*resultData.d.results;*/
reactHandler.setState({
items: resultData.d.results
});
},
error : function(jqXHR, textStatus, errorThrown) {
}
});
}
public render(): React.ReactElement<ISplistitemsdataProps> {
return (
// <div className={styles.listItemsForm}>
// <div className={styles.Table}>
// <div className={styles.Heading}>
// <div className={styles.Cell}>Title</div>
// <div className={styles.Cell}>Created</div>
// <div className={styles.Cell}>Author</div>
// </div>
// {this.state.items.map(function(item,key){
// return (<div className={styles.Row} key={key}>
// <div className={styles.Cell}>{item.Title}</div>
// <div className={styles.Cell}>{item.Created}</div>
// <div className={styles.Cell}>{item.Author.Title}</div>
// </div>);
// })}
// </div>
// </div>
<DetailsList items={this.state.items} columns={this._columns} />
);
}
}
- you are missing the onRenderItemColumn properties in the DetailsList and it needs something to render. Example,
private renderList = (items: IListItems, index: number, column: IColumn): JSX.Element | string => {
switch(column.key) {
case 'Title' :
return(
<span>{item.Title}</span>
);
}
}- Thanks
I'm not the best coder and stuck on what exactly I should send to the renderList ...
I add this to DetailsList
onRenderItemColumn={this.renderList(this.state.items)
but that seems different to
items: IListItems
Also what should the index and column paramaeters be?
Thanks for the help
PDoing this still returns blank for every cell ...
public render(): React.ReactElement<ISplistitemsdataProps> { const onRenderItemColumn = (item: ISplistitemsState, index: number, column: IColumn) => { switch(column.key) { case 'Title' : return( <span>todo</span> //<span>{column.key}</span> //should be returning item.Title? ); } // const fieldContent = item[column.fieldName as keyof ISplistitemsState] as any; // switch (column.key) { // case 'Group.Name': // return <span>{item.items. != null ? item.Group.Name : null}</span>; // default: // return <span>{fieldContent != null ? fieldContent.toString() : null}</span>; // } }; return ( // <div className={styles.listItemsForm}> // <div className={styles.Table}> // <div className={styles.Heading}> // <div className={styles.Cell}>Title</div> // <div className={styles.Cell}>Created</div> // <div className={styles.Cell}>Author</div> // </div> // {this.state.items.map(function(item,key){ // return (<div className={styles.Row} key={key}> // <div className={styles.Cell}>{item.Title}</div> // <div className={styles.Cell}>{item.Created}</div> // <div className={styles.Cell}>{item.Author.Title}</div> // </div>); // })} // </div> // </div> <DetailsList selectionMode={SelectionMode.none} items={this.state.items} columns={this._columns} isHeaderVisible = {true} layoutMode = {LayoutMode.justified} constrainMode ={ConstrainMode.unconstrained} checkboxVisibility={CheckboxVisibility.hidden} onRenderItemColumn={onRenderItemColumn} /> );
