Ordinamento alfabetico nelle tabelle di Ant Design e React

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!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2707 articoli
310 commenti
21 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy