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...

pmwhelan

Copper Contributor

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

pmwhelan

Copper Contributor

Oct 02, 2021

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

    );

pmwhelan
Copper Contributor
Oct 02, 2021
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

Forum Discussion

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

Share

Resources