Рубрики
Без рубрики

Как сортировать данные таблицы с реагированием

Зачастую, когда у вас есть таблица с информацией, которую вы хотите иметь возможность отсортировать информацию в таблице в порядке возрастания или убывания, особенно когда вы имеете дело с цифрами. В этом руководстве мы увидим, как именно это сделать, чтобы использовать inventjs. Вот что мы идем

Автор оригинала: Florin Pop.

Зачастую, когда у вас есть таблица с информацией, которую вы хотите иметь возможность отсортировать информацию в таблице в порядке возрастания или убывания, особенно когда вы имеете дело с цифрами.

В этом руководстве мы увидим, как именно это сделать, чтобы использовать inventjs.

Вот что мы собираемся построить:

У нас есть список топ-10 миллиардеров в мире, и мы хотим отсортировать список на основе чистой стоимости миллиардеров. Я получил информацию о списке от veek.co.uk. Веб-сайт.

Предпосылки

Прежде чем мы будем двигаться дальше, давайте посмотрим на то, что мы собираемся использовать в этом руководстве:

  1. Fontawesome – для иконок
  2. Фонд – для общего стиля. Мы используем это особенно для стайлинга стола, поскольку мы не хотим отвлекаться от укладки в этом руководстве
  3. Rectjs – пожалуйста Примечание Что я не собираюсь объяснить основы реагирования в этом руководстве. Продолжая, я предполагаю, что вы работали с ним раньше (хотя то, что мы собираемся делать, не сложно вообще?)
  4. Данные – как упомянутые выше, мы получим список топ-10 миллиардеров в мире плюс их нетто

Данные

Мы собираемся создать массив с объектами, содержащими имя миллиардеров и их чистой стоимостью в миллиардах 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
	}
];

Компонент приложения

Этот компонент будет главным, который будет сгенерирован на странице. У него есть только текст + <Таблица/> составная часть и это передает к нему то Табледата Мы объявили выше.

const App = () => (
	

		
A list of top 10 richest billionaires.

		

			Click on the icon next to "Net Worth" to see the sorting functionality
		


		


		
			* Data gathered from{' '}
			
				theweek.co.uk
			
		
	

);

ReactDOM.render(, document.getElementById('app'));

Теперь, когда все это не в пути, мы можем сосредоточиться на том, что важно?

Компонент таблицы

Это будет компонент класса, так как нам нужно использовать в нем состояние, но сначала давайте сосредоточимся на оказывать метод. Мы будем карта над данные Это происходит от родительского компонента, и мы создадим строку стола ( TR ) для всех данных в массиве. Наряду с тем, что у нас есть базовая структура стола ( таблица> Thead + Tbody ).

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

		return (
			data.length > 0 && (
				
						{data.map(p => (
							
						))}
					

					
						

							Name
							Net Worth
						

					
					

								{p.name}
								${p.net_worth}b
							

				

			)
		);
	}
}

Далее, сортировка …

У нас будет 3 типа сортов: «По умолчанию» , «вверх» (по возрастанию), «вниз» (по убыванию). Эти типы будут изменены с помощью кнопки, которая будет иметь значок Fontawesome в зависимости от того, какой тип сортировки в настоящее время активен. Давайте создадим объект, который даст нам необходимую информацию:

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
	}
};

Как видите, у нас есть два реквизита для каждого типа сортов:

  1. Класс – это будет использоваться значком в кнопке, как мы увидим, какое состояние в настоящее время активно
  2. FN – Это будет Функция Что мы будем использовать для сортировки элементов в массиве до того, как мы отображим его в таблице. В основном мы сравниваем net_worth Свойство объектов

До сих пор! ?

Нам также нужно добавить Currentsort Состояние в Таблица Компонент, который будет отслеживать активный тип сортировки и, наконец, у нас будет onsortchange Метод, который будет называться каждый раз, когда кнопка сортировки будет нажата, и она изменит Currentsort ценить.

Много слов?, Но давайте посмотрим код, и я поспорил, вы поймете?

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 && (
				
						{[...data].sort(sortTypes[currentSort].fn).map(p => (
							
						))}
					

					
						

							Name
							
								Net Worth
								
							
						

					
					

								{p.name}
								${p.net_worth}b
							

				

			)
		);
	}
}

Обратите внимание, что мы не меняем оригинал данные Массив, но мы создаем другой массив с ... (Спред) Оператор, а затем мы используем FN дано sorttypes объект для сортировки массива соответственно.

Заключение

Это в значительной степени! Теперь вы знаете, как сортировать таблицу на основе значений в столбце. Поздравляю!

Счастливое кодирование!

Первоначально опубликовано www.florin-pop.com

Читайте ещё по теме: