SPFx React Web Part - Trying to bind items to a DetailsList

%3CLINGO-SUB%20id%3D%22lingo-sub-2802544%22%20slang%3D%22en-US%22%3ESPFx%20React%20Web%20Part%20-%20Trying%20to%20bind%20items%20to%20a%20DetailsList%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2802544%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20created%20an%20SPFx%20React%20web%20part%20where%20I%20am%20binding%20a%20list%20to%20a%20DetailsList%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20code%20in%20the%20render%20that%20I've%20commented%20out%20works%20just%20fine.%3C%2FP%3E%3CP%3EWhen%20I%20try%20to%20use%20the%20DetailsList%20I%20get%20a%20bunch%20of%20empty%20rows.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnyone%20know%20what%20I'm%20doing%20wrong%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CP%3EP%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20*%20as%20React%20from%20'react'%3B%20%20%0Aimport%20%7B%20css%2C%20DetailsList%2C%20IColumn%20%7D%20from%20'office-ui-fabric-react'%3B%20%20%0Aimport%20styles%20from%20'.%2FSplistitemsdata.module.scss'%3B%20%20%0Aimport%20%7B%20ISplistitemsdataProps%20%7D%20from%20'.%2FISplistitemsdataProps'%3B%20%20%0Aimport%20*%20as%20jquery%20from%20'jquery'%3B%20%0A%0Aexport%20interface%20ISplistitemsState%7B%20%20%0A%20%20items%3A%5B%20%20%0A%20%20%20%20%20%20%20%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Title%22%3Astring%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Id%22%3Astring%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Created%22%3Astring%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Author%22%3A%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20Title%3Astring%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%20%20%20%20%20%20%7D%5D%20%20%0A%7D%0A%0A%0A%0A%0A%0Aexport%20default%20class%20Splistitems%20extends%20React.Component%3CISPLISTITEMSDATAPROPS%3E%20%7B%20%20%0A%0A%20%20private%20_columns%3A%20IColumn%5B%5D%3B%0A%0A%20%20public%20constructor(props%3A%20ISplistitemsdataProps%2C%20state%3A%20ISplistitemsState)%7B%20%20%0A%20%20%20%20super(props)%3B%20%20%0A%20%20%20%20this.state%20%3D%20%7B%20%20%0A%20%20%20%20%20%20items%3A%20%5B%20%20%0A%20%20%20%20%20%20%20%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Title%22%3A%20%22%22%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Id%22%3A%20%22%22%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Created%22%3A%22%22%2C%20%20%0A%20%20%20%20%20%20%20%20%20%20%22Author%22%3A%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Title%22%3A%22%22%20%20%0A%20%20%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%20%20%20%20%5D%20%20%0A%20%20%20%20%7D%3B%20%20%0A%0A%20%20%20%20this._columns%20%3D%20%5B%0A%20%20%20%20%20%20%7B%20key%3A%20'title'%2C%20name%3A%20'Title'%2C%20fieldName%3A%20'title'%2C%20minWidth%3A%20100%2C%20maxWidth%3A%20200%2C%20isResizable%3A%20true%20%7D%2C%0A%20%20%20%20%20%20%7B%20key%3A%20'created'%2C%20name%3A%20'Created'%2C%20fieldName%3A%20'created'%2C%20minWidth%3A%20100%2C%20maxWidth%3A%20200%20%7D%2C%0A%20%20%20%20%5D%3B%0A%20%20%7D%20%20%0A%20%20%0A%20%20public%20componentWillMount()%7B%20%20%0A%20%20%20%20var%20reactHandler%20%3D%20this%3B%20%20%0A%20%20%20%20jquery.ajax(%7B%20%20%0A%20%20%20%20%20%20%20%20url%3A%20%60%24%7Bthis.props.siteurl%7D%2F_api%2Fweb%2Flists%2Fgetbytitle('TestList')%2Fitems%3F%24select%3DTitle%2CId%2CCreated%2CAuthor%2FTitle%26amp%3B%24expand%3DAuthor%60%2C%20%20%0A%20%20%20%20%20%20%20%20type%3A%20%22GET%22%2C%20%20%0A%20%20%20%20%20%20%20%20headers%3A%7B'Accept'%3A%20'application%2Fjson%3B%20odata%3Dverbose%3B'%7D%2C%20%20%0A%20%20%20%20%20%20%20%20success%3A%20function(resultData)%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%2F*resultData.d.results%3B*%2F%20%20%0A%20%20%20%20%20%20%20%20%20%20reactHandler.setState(%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20items%3A%20resultData.d.results%20%20%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%20%20%20%20%20%20%7D%2C%20%20%0A%20%20%20%20%20%20%20%20error%20%3A%20function(jqXHR%2C%20textStatus%2C%20errorThrown)%20%7B%20%20%0A%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%20%20%7D)%3B%20%20%0A%20%20%7D%20%20%0A%0A%20%20%0A%0A%20%20%0A%20%20%0A%20%20%0A%20%20public%20render()%3A%20React.ReactElement%3CISPLISTITEMSDATAPROPS%3E%20%7B%20%20%0A%20%20%20%20return%20(%20%20%0A%20%20%20%20%20%20%2F%2F%20%3CDIV%20classname%3D%22%7Bstyles.listItemsForm%7D%22%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Table%7D%22%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Heading%7D%22%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Cell%7D%22%3ETitle%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Cell%7D%22%3ECreated%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Cell%7D%22%3EAuthor%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%7Bthis.state.items.map(function(item%2Ckey)%7B%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%20%20return%20(%3CDIV%20classname%3D%22%7Bstyles.Row%7D%22%20key%3D%22%7Bkey%7D%22%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Cell%7D%22%3E%7Bitem.Title%7D%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Cell%7D%22%3E%7Bitem.Created%7D%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.Cell%7D%22%3E%7Bitem.Author.Title%7D%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%20%20%20%20%3C%2FDIV%3E)%3B%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%20%20%20%20%7D)%7D%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%2F%2F%20%20%20%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%2F%2F%20%3C%2FDIV%3E%20%20%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%3CDETAILSLIST%20items%3D%22%7Bthis.state.items%7D%22%20columns%3D%22%7Bthis._columns%7D%22%3E%3C%2FDETAILSLIST%3E%0A%0A%20%20%20%20)%3B%20%20%0A%20%20%7D%20%20%0A%7D%20%20%3C%2FISPLISTITEMSDATAPROPS%3E%3C%2FISPLISTITEMSDATAPROPS%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2804217%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20React%20Web%20Part%20-%20Trying%20to%20bind%20items%20to%20a%20DetailsList%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2804217%22%20slang%3D%22en-US%22%3Eyou%20are%20missing%20the%20onRenderItemColumn%20properties%20in%20the%20DetailsList%20and%20it%20needs%20something%20to%20render.%20Example%2C%3CBR%20%2F%3Eprivate%20renderList%20%3D%20(items%3A%20IListItems%2C%20index%3A%20number%2C%20column%3A%20IColumn)%3A%20JSX.Element%20%7C%20string%20%3D%26gt%3B%20%7B%3CBR%20%2F%3Eswitch(column.key)%20%7B%3CBR%20%2F%3Ecase%20'Title'%20%3A%3CBR%20%2F%3Ereturn(%3CBR%20%2F%3E%3CSPAN%3E%7Bitem.Title%7D%3C%2FSPAN%3E%3CBR%20%2F%3E)%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FLINGO-BODY%3E
Occasional Contributor

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} />

    );  
  }  
}  

 

 

4 Replies
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
P

Doing 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}      
      />

    ); 
Actually if I try to do this
const onRenderItemColumn = (item: ISplistitemsState, index: number, column: IColumn) => {
//switch(column.key) {
//case 'title' :
return(
//<span>todo</span>
<span>{column.key} - {column.name} - {item.Title}</span>
//should be returning item.Title?
);

It doesn't let me return item.Title