Oct 01 2021 04:58 AM
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} />
);
}
}
Oct 01 2021 02:02 PM
Oct 02 2021 05:52 AM
Oct 02 2021 07:06 AM
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}
/>
);
Oct 02 2021 07:21 AM