필터링 및 정렬 반응

Question

새로운 것을 발견했습니다. 필자는 테이블에 필터와 정렬 기능을 추가해야하는 곳에서 프로젝트를 시작할 수 있습니다. 아래 템플릿 : 어떻게 진행할 수 있습니까?

import * as React from 'react'; 
 
import { SPComponentLoader } from '@microsoft/sp-loader'; 
 

 
import styles from '../components/SearchSpfx.module.scss'; 
 
import { ISearchSpfxWebPartProps } from '../ISearchSpfxWebPartProps'; 
 

 
import * as moment from 'moment'; 
 

 
export interface ITableTemplate extends ISearchSpfxWebPartProps { 
 
\t results: any[]; 
 
} 
 

 
export default class TableTemplate extends React.Component<ITableTemplate, {}> { 
 
\t private iconUrl: string = "https://spoprod-a.akamaihd.net/files/odsp-next-prod_ship-2016-08-15_20160815.002/odsp-media/images/filetypes/16/"; 
 
\t private unknown: string[] = ['aspx', 'null']; 
 

 
\t private getAuthorDisplayName(author: string): string { 
 
\t \t if (author !== null) { 
 
\t \t \t const splits: string[] = author.split('|'); 
 
\t \t \t return splits[1].trim(); 
 
\t \t } else { 
 
\t \t \t return ""; 
 
\t \t } 
 
\t } 
 

 
\t private getDateFromString(retrievedDate: string): string { 
 
\t \t if (retrievedDate !== null) { 
 
\t \t \t return moment(retrievedDate).format('DD/MM/YYYY'); 
 
\t \t } else { 
 
\t \t \t return ""; 
 
\t \t } 
 
\t } 
 

 
\t public render(): JSX.Element { 
 
\t \t // Load the Office UI Fabrics components css file via the module loader 
 
    \t SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css'); 
 

 
\t \t return (
 
\t \t \t <div className={styles.searchSpfx}> 
 
\t \t \t \t { 
 
\t \t \t \t \t (() => { 
 
\t \t \t \t \t \t // Check if you need to show a title 
 
\t \t \t \t \t \t if (this.props.title !== "") { 
 
\t \t \t \t \t \t \t return <h1 className='ms-font-xxl'>{this.props.title}</h1>; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t })() 
 
\t \t \t \t } 
 

 
\t \t \t \t <table className={`ms-Table ${styles.templateTable}`}> 
 
\t \t \t \t \t <thead> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>Type</th> 
 
\t \t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t \t <th>Modified</th> 
 
\t \t \t \t \t \t \t <th>Modified by</th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </thead> 
 
\t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t this.props.results.map((result, index) => { 
 
\t \t \t \t \t \t \t \t return (<tr key={index}> 
 
\t \t \t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <a href={result.Path}><img src={`${this.iconUrl}${result.Fileextension !== null && this.unknown.indexOf(result.Fileextension) === -1 ? result.Fileextension : 'code'}.png`} alt="File extension"/></a> 
 
\t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <a href={result.Path}>{result.Filename !== null ? result.Filename.substring(0, result.Filename.lastIndexOf('.')) : ""}</a> 
 
\t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t <td>{this.getDateFromString(result.ModifiedOWSDATE)}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t <td>{this.getAuthorDisplayName(result.EditorOWSUSER)}</td> 
 
\t \t \t \t \t \t \t \t \t \t </tr>); 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}

는 반환하기 전에 당신에게 당신은 필터링 및 분류 렌더링 할 수있는 사람

Answer 1

()을 감사드립니다.

this.props.results.filter(item => item.keep).sort((item1, item2) => item1.value - item2.value); 

Answer 2

여기 필터링 및 정렬 할 수있는 테이블을 구현하는 방법에 대한 작동 코드가 있습니다. 여기에서 행 머리글을 클릭 할 때마다 정렬이 발생합니다.

[ 
    {"Type":"foo", "Name": 0, "Modified": "3/20/2017", "ModifiedBy":"Me"}, 
    {"Type":"foo", "Name": 2, "Modified": "3/15/2017", "ModifiedBy":"You"}, 
    {"Type":"buzz", "Name": 1, "Modified": "3/20/2017", "ModifiedBy":"Me"} 
]; 

그리고 클래스는 반응 :이 예를 들어 this.props.data이다

const SortableFilterableTable = React.createClass({ 
    getInitialState: function(){ 
     return({data:this.getSortedData('Type')}); 
    }, 
    render: function(){ 

     let rows = this.state.data.map((rowData) =>{ 
      return(
       <tr> 
        <td>{rowData.Type}</td> 
        <td>{rowData.Name}</td> 
        <td>{rowData.Modified}</td> 
        <td>{rowData.ModifiedBy}</td> 
       </tr> 
      ); 
     }); 
     return(
      <div> 
       <input type="text" id="filter" onChange={this.filterTable}/> 
       <table> 
        <thead> 
         <tr> 
          <th onClick={()=>this.setSortedData('Type')}>Type</th> 
          <th onClick={()=>this.setSortedData('Name')}>Name</th> 
          <th onClick={()=>this.setSortedData('Modified')}>Modified</th> 
          <th onClick={()=>this.setSortedData('Modified By')}>Modified By</th> 
         </tr> 
        </thead> 
        <tbody> 
         {rows} 
        </tbody> 
       </table> 
      </div> 
     ); 
    }, 
    setSortedData: function(sortBy){ 
     this.setState({data:this.getSortedData(sortBy)}); 
    }, 
    getSortedData: function(sortBy){ 
     //data handed down from props 
     let dataToSort = this.props.data; 

     //you can implement your own sorting algorithm here. I think this one 
     //will only work if the properties are integers. 
     dataToSort.sort(function(a,b){ 
      if(sortBy === 'Type') 
       return a.Type - b.Type; 
      if(sortBy === 'Name') 
       return a.Name - b.Name; 
      if(sortBy === 'Modified') 
       return a.Modified - b.Modified; 
      if(sortBy === 'Modified By') 
       return a.ModifiedBy - b.ModifiedBy; 
     }); 
     return dataToSort; 
    }, 
    filterTable: function(e){ 
     let text = e.target.value; 
     let filterFunc = (value) => { 
      console.log(value) 
      if(value.Type.indexOf(text) >= 0 || value.Name.toString().indexOf(text) >= 0 || value.Modified.indexOf(text) >= 0 || value.ModifiedBy.indexOf(text) >= 0) 
       return true; 
      console.log('made it ') 
      return false; 
     }; 

     let dataForState = this.props.data.filter(filterFunc); 
     this.setState({data:dataForState}); 
    } 
}); 

당신은 문자열과 날짜를 일 자신의 정렬 알고리즘을해야합니다. 이 코드를 사용하면 테이블 머리글을 클릭 할 때 올바르게 정렬되는 유일한 열은 Name 열입니다.