Ordinamento alfabetico nelle tabelle di Ant Design e React

Sto provando Ant Design per React, e devo dire che non è male.

Facile da integrare e con una ottima documentazione.

Il componente Table ci permette di stabilire un sorter per ogni colonna.

Il sorter è personalizzabile con qualunque algoritmo vogliamo.

Oggi vediamo come ordinare una colonna alfabeticamente.

Vi mostro solo la parte del codice interessata, omettendo tutto il resto della classe:

    render() {
        const columns = [
            {
                title: 'Titolo',
                dataIndex: 'nome',
                key: 'name',
                sorter: (a, b) => {
                    if (a.nome < b.nome) {
                        return -1;
                    }
                    if (a.nome > b.nome) {
                        return 1;
                    }
                },
                sortDirections: ['descend'],
            }
        ];

        return (
            <div id="home">
                <Row type="flex" justify="space-around" align="middle">
                    <Col span={12}>
                        <Table
                            dataSource={this.state.films}
                            columns={columns}
                            bordered
                            title={() => 'Films'}
                            size="middle"
                            rowKey="id"/>
                    </Col>
                </Row>
            </div>
        );
    }

Come vedete qui non ho fatto altro che confrontare a e b.

Come già detto potete usare anche algoritmi più complessi.

Enjoy!