Filtering and Sorting

Question

I am new to development. React I have a project in which I have to add a filter and sort on my table, and I really don't know where to start. Template below: How can I continue?

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 {
	results: any[];
}

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

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

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

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

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

				<table className={`ms-Table ${styles.templateTable}`}>
					<thead>
						<tr>
							<th>Type</th>
							<th>Name</th>
							<th>Modified</th>
							<th>Modified by</th>
						</tr>
					</thead>
					<tbody>
						{
							this.props.results.map((result, index) => {
								return (<tr key={index}>
											<td>
												<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>
											</td>
											<td>
												<a href={result.Path}>{result.Filename !== null ? result.Filename.substring(0, result.Filename.lastIndexOf('.')) : ""}</a>
											</td>
											<td>{this.getDateFromString(result.ModifiedOWSDATE)}</td>
											<td>{this.getAuthorDisplayName(result.EditorOWSUSER)}</td>
										</tr>);
							})
						}
					</tbody>
				</table>
			</div>
		);
	}
}

Run codeHide result

Thanks guys,

Answer 1

Here is a working code on how to implement a table that can be filtered and sorted. Here the sorting happens whenever you click on the title bar. this.props.datafor this example:

[
    {"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"}
];

And the reaction class:

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.

Answer 2

render() .

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