Adesea, atunci când aveți un tabel cu informații, ați dori să puteți sorta informațiile din tabel în ordine crescătoare sau descendentă, mai ales atunci când aveți de-a face cu numere.

În acest tutorial vom vedea cum să facem exact asta folosind ReactJS.

Iată ce vom construi:

ad-banner

Avem o listă cu primii 10 miliardari din lume și vrem să sortăm lista pe baza valorii nete a miliardarilor. Am primit informațiile din listă theweek.co.uk site-ul web.

Conţinut

Condiții prealabile

Înainte de a trece mai departe, să vedem lucrurile pe care le vom folosi în acest tutorial:

  1. FontAwesome – pentru icoane
  2. fundație – pentru stil general. Folosim acest lucru în special pentru stilul de masă, deoarece nu vrem să ne distragem atenția cu stilul din acest tutorial
  3. ReactJS – Vă rog Notă că nu voi explica noțiunile de bază ale React în acest tutorial. Continuând presupun că ați mai lucrat cu el (deși lucrurile pe care le vom face nu sunt deloc grele?)
  4. Datele – așa cum s-a menționat mai sus, vom obține o listă a primilor 10 miliardari din lume, plus valoarea lor netă

Datele

Vom crea o matrice cu obiecte care conțin numele miliardarilor și valoarea lor netă în miliarde USD:

const tableData = [
	{
		name: 'Amancio Ortega',
		net_worth: 62.7
	},
	{
		name: 'Bernard Arnault',
		net_worth: 76
	},
	{
		name: 'Bill Gates',
		net_worth: 96.5
	},
	{
		name: 'Carlos Sim Helu',
		net_worth: 64
	},
	{
		name: 'Jeff Bezos',
		net_worth: 131
	},
	{
		name: 'Larry Ellison',
		net_worth: 58
	},
	{
		name: 'Larry Page',
		net_worth: 50.8
	},
	{
		name: 'Mark Zuckerberg',
		net_worth: 62.3
	},
	{
		name: 'Michael Bloomberg',
		net_worth: 55.5
	},
	{
		name: 'Warren Buffet',
		net_worth: 82.5
	}
];

Componenta aplicației

Această componentă va fi cea principală care va fi generată pe pagină. Are doar ceva text + <Table /> componentă și se transmite la ea tableData am declarat mai sus.

const App = () => (
	<div className="text-center">
		<h4>A list of top 10 richest billionaires.</h4>
		<p>
			Click on the icon next to "Net Worth" to see the sorting functionality
		</p>

		<Table data={tableData} />

		<small>
			* Data gathered from{' '}
			<a
				href="https://www.theweek.co.uk/people/57553/top-billionaires-who-richest-person-world"
				target="_blank">
				theweek.co.uk
			</a>
		</small>
	</div>
);

ReactDOM.render(<App />, document.getElementById('app'));

Acum, că toate acestea sunt în afara drumului, ne putem concentra asupra a ceea ce este important?:

Componenta Tabel

Va fi o componentă de clasă, deoarece trebuie să folosim starea în ea, dar mai întâi să ne concentrăm asupra render metodă. Bine map peste data care provine din componenta părinte și vom crea un rând de tabel (tr) pentru fiecare dată din matrice. În plus, avem o structură de bază a tabelului (table > thead + tbody).

class Table extends React.Component {
	render() {
		const { data } = this.props;

		return (
			data.length > 0 && (
				<table className="text-left">
					<thead>
						<tr>
							<th>Name</th>
							<th>Net Worth</th>
						</tr>
					</thead>
					<tbody>
						{data.map(p => (
							<tr>
								<td>{p.name}</td>
								<td>${p.net_worth}b</td>
							</tr>
						))}
					</tbody>
				</table>
			)
		);
	}
}

Apoi, sortarea …

Vom avea 3 tipuri de feluri: 'default', 'up' (ascendent), 'down' (Descendentă). Aceste tipuri vor fi schimbate cu ajutorul unui buton care va avea o pictogramă FontAwesome în funcție de tipul de sortare care este activ în prezent. Să creăm un obiect care să ne ofere informațiile necesare:

const sortTypes = {
	up: {
		class: 'sort-up',
		fn: (a, b) => a.net_worth - b.net_worth
	},
	down: {
		class: 'sort-down',
		fn: (a, b) => b.net_worth - a.net_worth
	},
	default: {
		class: 'sort',
		fn: (a, b) => a
	}
};

După cum puteți vedea, avem două elemente de recuzită pentru fiecare tip de tip:

  1. class – aceasta va fi utilizată de pictograma din buton, deoarece vom vedea care este starea activă în prezent
  2. fn – acesta va fi function pe care le vom folosi pentru a sorta elementele din matrice înainte de ao afișa în tabel. Practic comparăm net_worth proprietatea obiectelor

Super până acum! ?

De asemenea, trebuie să adăugăm un currentSort stat la Table componentă care va ține evidența tipului de sortare activ și, în cele din urmă, vom avea un onSortChange metoda care va fi apelată de fiecare dată când se va face clic pe butonul de sortare și va schimba fișierul currentSort valoare.

O mulțime de cuvinte?, Dar hai să vedem codul și pun pariu că vei înțelege?:

class Table extends React.Component {
	// declaring the default state
	state = {
		currentSort: 'default'
	};

	// method called every time the sort button is clicked
	// it will change the currentSort value to the next one
	onSortChange = () => {
		const { currentSort } = this.state;
		let nextSort;

		if (currentSort === 'down') nextSort="up";
		else if (currentSort === 'up') nextSort="default";
		else if (currentSort === 'default') nextSort="down";

		this.setState({
			currentSort: nextSort
		});
	};

	render() {
		const { data } = this.props;
		const { currentSort } = this.state;

		return (
			data.length > 0 && (
				<table className="text-left">
					<thead>
						<tr>
							<th>Name</th>
							<th>
								Net Worth
								<button onClick={this.onSortChange}>
									<i className={`fas fa-${sortTypes[currentSort].class}`} />
								</button>
							</th>
						</tr>
					</thead>
					<tbody>
						{[...data].sort(sortTypes[currentSort].fn).map(p => (
							<tr>
								<td>{p.name}</td>
								<td>${p.net_worth}b</td>
							</tr>
						))}
					</tbody>
				</table>
			)
		);
	}
}

Observați că nu schimbăm originalul data , dar creăm o altă matrice cu ... (spread) operator, și apoi folosim fn dat de sortTypes obiect pentru a sorta matricea în consecință.

Concluzie

Cam asta e tot! Acum știți cum să sortați un tabel pe baza valorilor dintr-o coloană. Felicitări!

Codificare fericită!

Postat inițial pe www.florin-pop.com