Таблица - навигация по ячейкам таблицы с помощью стрелок клавиатуры. Аналог Excel таблицы на сайте

Name: Таблица - навигация по ячейкам таблицы с помощью стрелок клавиатуры. Аналог Excel таблицы на сайте
Availability: InStock
Author: Falcon Space

Описание, как реализовать

Мы реализовали процесс работы с таблицей по аналогии с таблицей Excel - двигаемся по ячейкам с помощью клавиш вверх, вниз, вправо, влево (с зажатым CTRL) с мгновенным сохранением значений.

Как реализовать

Создаем необходимые столбцы (с редактированием), и ставим instant:true для режима редактирования.

CREATE PROCEDURE [dbo].[crud_watch_excelMode_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare   @ids TABLE (id int)

	
	insert into @ids
	select id
	from watch_excel
	
	-- SELECT 1
	select 
		isnull([id], '') [id],        
		isnull([a], '') [a],
		isnull([b], '') [b],
		isnull([c], '') [c],
		isnull([d], '') [d],
		isnull([e], '') [e],
		isnull([f], '') [f],
		isnull([g], '') [g],
		isnull([h], '') [h],
		'{"instant": true}' editable_a, '{"instant": true}' editable_b, '{"instant": true}' editable_c, '{"instant": true}' editable_d,
        '{"instant": true}' editable_e, '{"instant": true}' editable_f, '{"instant": true}' editable_g, '{"instant": true}' editable_h
	from watch_excel 
	where id in (select id from @ids)
	order by id
	OFFSET @PageSize * (@Page - 1) ROWS
	FETCH NEXT @PageSize ROWS ONLY;
	
	-- SELECT 2
	select count(*) from @ids	

	-- SELECT 3
    select 1 HideTitleCount, 1 Compact, 
    	'h3' HeaderTag, 
        'Перемещайтесь между ячейками с помощью стрелок клавиатуры с зажатым Ctrl' subtitle
END

Другие демостенды

— Как редактировать поля прямо в таблице на сайте
— Стилизация полей таблицы. Как улучшить дизайн таблиц на сайте
— Редактирование данных в таблице в личном кабинете через элементы управления прямо в таблице

Что есть в базе знаний по этой теме

— Работа с таблицами
— Отображение таблиц на смартфоне
— Как добавить новый элемент, если в списке на форме его нет
— Создание сущности с учетом значений фильтров
— Сортировка drag n drop строк в таблице
— Как гибко управлять видимостью столбцов таблицы

В чем выгода для бизнеса?

Навигация по ячейкам таблицы с помощью клавиатуры (как в Excel). Ускоряет ввод данных, делает работу с таблицами привычной и эффективной для пользователей.