score:1

here you go, brief explanation in code sample. i setup 2 columns only, cause i am lazy, sorry.

fiddle: https://jsfiddle.net/u1wru0gb/1/

const data = [
    { id: 1, name: 'bruce' },
    { id: 3, name: 'martin' },
    { id: 2, name: 'andrew' },
];

/**
 * nothing interesting, just render...
 */
function table({ data, sortbykey }) { 
    const renderrow = ({ id, name }, idx) => (
        <tr key={idx}>
            <td>{id}</td>
            <td>{name}</td>
        </tr>
    )

    return (
        <table>
            <tr>
                <th onclick={sortbykey('id')}>id</th>
                <th onclick={sortbykey('name')}>name</th>
            </tr>
            { data.map(renderrow) }
        </table>
    );
}

class container extends react.component {
    constructor(props) {
        super(props);
        this.state = {
            sort: {
                key: undefined,
                // 0 - not ordering
                // 1 - asc
                // 2 - desc
                order: 0,
            },
        };

        this.sortbykey = this.sortbykey.bind(this);
    }

    sorteddata() {
        const { key, order } = this.state.sort;

        // only sort if key is provided & order != 0.
        if (key && order) {
            // comparison function for "asc" sorting.
            function compare(a, b) {
                if (a[key] < b[key]) return -1;
                if (a[key] > b[key]) return 1;
                return 0;
            }

            // attention! sort mutates array, clone first.
            return [...this.props.data].sort((a, b) => {
                // interesting part. sort in "asc" order. flip if want "desc" order!
                return compare(a, b) * (order === 1 ? 1 : -1);
            });
        }

        // return original data (order = 0)
        return this.props.data;
    }

    sortbykey(key) {
        return () => {
            const sort = (this.state.sort.key === key)
                // key matches, update order
                ? { key, order: (this.state.sort.order + 1) % 3 }
                // key differs, start with "asc" order
                : { key, order: 1 };
            this.setstate({ sort });
        }
    }

    render() {
        return (
            <table data={this.sorteddata()} sortbykey={this.sortbykey} />
        );
    }
}

reactdom.render(
    <container data={data} />,
    document.getelementbyid('container')
);

Related Query

More Query from same tag