JSFiddle - React, Tailwind, and code Playground

HTML

<!-- блок всего контента -->
<div id="content">

	<!-- таблица -->
	<table>
		<!-- tr строки таблицы -->
		<tr class="nav">
			<!-- левая ячейка-->
			<td class="new">new</td>
			<!-- правая ячейка -->
			<td class="edit" data-func="edit">edit</td>
		</tr>
		<tr class="nav">
			<!-- левая ячейка-->
			<td class="save">save</td>
			<!-- правая ячейка -->
			<td class="cancel">cancel</td>
		</tr>
		<tr class="nav">
			<td class="arrow prev">🞀</td>
			<td class="arrow next">🞂</td>
		</tr>
		<!-- и так дальше-->
		<tr>
			<td>№ п/п</td>
			<td>
				<!-- поле ввода -->
				<input type="number" name="number" />
			</td>
		</tr>
		<tr>
			<td>Дата</td>
			<td>
				<input type="date" name="date" />
			</td>
		</tr>
		<tr>
			<td>Ваше имя</td>
			<td>
				<input type="text" name="user" />
			</td>
		</tr>
		<tr>
			<td>Категория</td>
			<td>
				<select name="category" >
					<option value="Подарки">Подарки</option>
					<option value="Кафе и рестораны">Кафе и рестораны</option>
					<option value="Спорт">Спорт</option>
					<option value="Еда">Еда</option>
					<option value="Транспрт">Транспорт</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Наименование</td>
			<td>
				<input type="text" name="nomination" />
			</td>
		</tr>
		<tr>
			<td>Стоимость, руб.</td>
			<td>
				<input type='number' name='sum' value='0' />
			</td>
		</tr>
		<tr>
			<td>ИТОГО:</td>
			<td class="allsum">
				<!-- здесь поля ввода не надо -->
			</td>
	</table>
	<!-- конец таблицы -->

</div>
<!-- конец блока всего контента -->

CSS

/* общие стили */
#content {
	font-size: 100%; /* размер текста */
}

/* общий стиль таблицы */
#content table {
	font-size: 100%; /* размер текста */
	margin: 5px auto; /* отступ таблицы сверху и по сторонам */
	border-collapse: inherit; /* сжатие рамки */
}

/* строка таблицы */
#content table tr {

	/* пока правил нет */
}

/* строки таблицы с навигацией*/
#content table tr.nav td {
	font-family: monospace; /* шрифт моноширинный*/
	text-align: center; /* выравнивание по центру*/
	background: #c1b7f9 !important; /* цвет бекграунда важно*/
	cursor: pointer; /* курсор в виде пальца */
	border-bottom: 1px solid #FFF; /* снизу белая рамка */
}

/* строки таблицы с навигацией первые ячейки*/
#content table tr.nav td:first-of-type {
	border-right: 1px solid #FFF; /* справа белая рамка */
}

/* строка таблицы с навигацией при наведении мыши*/
#content table tr.nav td:hover {
	background: #a091f7 !important; /* цвет бекграунда важно*/
}

/* строка таблицы с навигацией неактивная*/
#content table tr.nav td.disabled {
	color: #999;
	pointer-events: none;
}

/* строка таблицы -> обе ячейки*/
#content table tr td {
	width: 50%;	/* ширина ячейки */
	line-height: 40px; /* высота ячейки*/
}

/* строка таблицы -> первая ячейка */
#content table tr td:first-of-type {
	padding: 0 15px; /* отступы сверху и по сторонам */
	border-right: 1px solid #FFF; /* справа белая рамка */
}

/* строка таблицы -> обе ячейки -> поля ввода + выбор select */
#content table tr td input,
#content table tr td select {
	line-height: 40px; /* высота поля ввода*/
	padding: 0 15px; /* отступы сверху и по сторонам */
	color: #000; /* цвет текста */
	font-size: 90%; /* размер текста */
	text-align: right; /* выравнивание текста направо */
	border-radius: 3px; /* скругление углов */
	cursor: pointer; /* курсор в виде пальца */
}

#content table tr td.allsum {
	line-height: 40px; /* высота поля ввода*/
	padding: 0 15px; /* отступы сверху и по сторонам */
	text-align: right; /* выравнивание текста направо...

JavaScript

// выделение текста при клике на поле ввода
function selectInputText(table) {
	$('input', table).on('focus', function() {
		$(this).select();
	});

}

// деактивировать поля
function deactiveInput(table) {
	$('input', table).attr('disabled', 'disabled').removeClass('active');
	$('select', table).attr('disabled', 'disabled').removeClass('active');
}

// активировать поля
function activeInput(table) {
	$('input[name="user"]', table).removeAttr('disabled').addClass('active');
	$('input[name="date"]', table).removeAttr('disabled').addClass('active');
	$('select[name="category"]', table).removeAttr('disabled').addClass('active');
	$('input[name="nomination"]', table).removeAttr('disabled').addClass('active');
	$('input[name="sum"]', table).removeAttr('disabled').addClass('active');
}

// навигация вперёд/назад
function navPrevNext(table) {
	$('td.arrow', table).on('click', function() {
		if (localStorage['data']) {
			var data = JSON.parse(localStorage['data']);
			var dataLength = Object.keys(data).length;
			if (Cookies.get('data')) {
				cookies = Cookies.get('data');
				if ($(this).hasClass('prev')) {
					if (cookies != 1) {
						cookies = parseInt(cookies) - 1;
					}
				} else {
					if (cookies < dataLength) {
						cookies = parseInt(cookies) + 1;
					}
				}
				$('input[name="number"]', table).val(data[cookies].number);
				$('input[name="user"]', table).val(data[cookies].user);
				$('input[name="date"]', table).val(data[cookies].date);
				$('select[name="category"]', table).val(data[cookies].category);
				$('input[name="nomination"]', table).val(data[cookies].nomination);
				$('input[name="sum"]', table).val(data[cookies].sum);
				Cookies.set('data', cookies);
			}
		}
	});
}

// получить данные с хранилища
function getData(table) {
	if (localStorage['data']) {
		var data = JSON.parse(localStorage['data']);
		if (Cookies.get('data')) {
			cookies = Cookies.get('data');
			$('input[name="number"]',...