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

Copper 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