详细信息列表过滤器ui面料

Question

我想过滤我的办公室ui面料详细信息列表。我想对列表中的所有列进行过滤。

列表中的信息来自Office365，两者之间有自定义api。

我尝试使用文本框进行过滤，但没有成功。还是有可能像在office365中一样进行过滤？我现在使用的代码包含在下面。我用于排序的代码。这没有任何问题。

export interface Basics {
  key: number;
  name: string;
}

export interface MyState{
  requestListItems: any[];
  columns: IColumn [];
}
class Requests extends Component<any, MyState>{
  private _allItems: Basics[];
  constructor(props:{}) {
    super(props);
    const columns: IColumn[] = [{
      key:'Title',
      name:'Title',
      fieldName:'Title',
      maxWidth:150,
      minWidth:150,
      isSorted: true,
      isSortedDescending:false,
      sortAscendingAriaLabel: 'Sorted A to Z',
      sortDescendingAriaLabel: 'Sorted Z to A',
      onColumnClick: this._onColumnClick
    },
    {
      key:'Request_type',
      name:'Request type',
      fieldName:'Request_type',
      minWidth:150,
      maxWidth:150,
      isSorted: true,
      isSortedDescending:false,
      sortAscendingAriaLabel: 'Sorted A to Z',
      sortDescendingAriaLabel: 'Sorted Z to A',
      onColumnClick: this._onColumnClick
    },
    {
      key:'Request_template',
      name:'Template',
      fieldName:'Request_template',
      maxWidth:150,
      minWidth:150,
      isSorted: true,
      isSortedDescending:false,
      sortAscendingAriaLabel: 'Sorted A to Z',
      sortDescendingAriaLabel: 'Sorted Z to A',
      onColumnClick: this._onColumnClick
    },
    {
      key:'Version',
      name:'Version', 
      fieldName:'Version', 
      maxWidth:150,
      minWidth:150,
      isSorted: true,
      isSortedDescending:false,
      sortAscendingAriaLabel: 'Sorted A to Z',
      sortDescendingAriaLabel: 'Sorted Z to A',
      onColumnClick: this._onColumnClick
    },
    {
      key:'Request_status',
      name:'Request status', 
      fieldName:'Request_status', 
      maxWidth:150,
      minWidth:150,
      isSorted: true,
      isSortedDescending:false,
      sortAscendingAriaLabel: 'Sorted A to Z',
      sortDescendingAriaLabel: 'Sorted Z to A',
      onColumnClick: this._onColumnClick
    },
    {
      key:'Request_destination_url',
      name:'Request destination url', 
      fieldName:'Request_destination_url', 
      maxWidth:150,
      minWidth:150,
      isSorted: true,
      isSortedDescending:false,
      sortAscendingAriaLabel: 'Sorted A to Z',
      sortDescendingAriaLabel: 'Sorted Z to A',
      onColumnClick: this._onColumnClick
    },
    {
      key:'Request_details',
      name:'Request details', 
      fieldName:'Request_details', 
      maxWidth:150,
      minWidth:150,
      isSorted: true,
      isSortedDescending:false,
      sortAscendingAriaLabel: 'Sorted A to Z',
      sortDescendingAriaLabel: 'Sorted Z to A',
      onColumnClick: this._onColumnClick
    }
  ];
  this.state = {
      requestListItems:[{
          Title: '',
          requestType: '',
          template:'',
          version:'',
          requestStatus:'',
          destinationUrl:'',
          details:''
        }
      ],
      columns:columns
    };

    this._allItems = [];
}  
componentDidMount() {  
  // Custom function to retrieve the list info  
  this.GetRequestList();  
}  

GetRequestList(){  
  var reactHandler = this;  
  var request = new XMLHttpRequest();  
  request.open('GET', '.../api/requests/getRequests/all', true);  
  request.setRequestHeader("Accept","application/json");  
  //this callback gets called when the server responds to the ajax call  
  request.onreadystatechange = function(){  
      if (request.readyState === 4 && request.status === 200){  
          var result = JSON.parse(request.responseText);  
          console.log("Result data: " + result.Data);
          console.log("Result data length: " + result.Data.length);
          reactHandler.setState({  
            requestListItems: result.Data  
          });   

      }  
      else if (request.readyState === 4 && request.status !== 200){  
          console.log('Error in retrieving data!');  
      }  
  }; 
  request.send();  
} 

public render() {
  let column = this.state.columns;
  let RequestItems: any[];
  RequestItems =[""];
  this.state.requestListItems.map((requests,key) =>{
        RequestItems = [{Title: requests.title, 
          Request_type: requests.requestType, 
          Version: requests.version, 
          Request_template: requests.template, 
          Request_status: requests.requestStatus, 
          Request_destination_url: requests.destinationUrl, 
          Request_details: requests.details}]
  }) 
    return (
                <div className="ms-Grid-col ms-sm6 ms-md8 ms-lg10"><h1>REQUESTS</h1>
                <p>
                <TextField label="Filter by title:" onChange={this._onFilter}/>
                </p>
                  <p>
                  <DetailsList items={RequestItems} columns={column}/>
                  </p>
                </div>        );

  }
  private _onFilter = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
    this.setState({
      requestListItems: newValue ? this._allItems.filter(i => i.name.toLowerCase().indexOf(newValue) > -1) : this._allItems
    });
  };

export default Requests;