Стилизация полей таблицы. Как улучшить дизайн таблиц на сайте

В этом примере мы реализовали вывод таблицы со стилизацией полей.

Для этого мы:

  • создали таблицу
  • добавили необходимые колонки (id, customer, product, created, statusPrice, price)
  • настроили процедуру GetItem, где для стилизации полей использовали различные префиксы: desc_{имя колонки}, icon_{имя колонки}, modal_{имя колонки}, dropdown_{имя колонки}, color_{имя колонки}, marker_{имя колонки}, suffix_{имя колонки}, prev_{имя колонки}, prevcolor_{имя колонки}, barPercent_{имя колонки}, barClass_{имя колонки}.
CREATE PROCEDURE [dbo].[crud_watch_style_getItems]
	@filters CRUDFilterParameter READONLY,
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare   @ids TABLE (id int)

	-- filters...
	declare @filterName nvarchar(128)
	select @filterName = Value from @filters where [Key] = 'name'

	insert into @ids
	select id
	from tst_orders

	-- SELECT 1
	select
		o.id id,
		c.name customer,
        c.fio desc_customer,
        'fas fa-user' icon_customer,
        (select name from  tst_products where id = productID) product,
        'Просмотреть' modal_product,
		FORMAT(created, 'dd.MM.yyyy') created,
        'Время - 12:05' dropdown_created,
        'blue' color_created,
		(select name from tst_statuses where id = o.statusID) as status,
        'purple' marker_status,
        ' заказ' suffix_status,
		isnull([price], 0) price,
        '1000' prev_price,
        'green' prevcolor_price,
        '1000' barPercent_price,
        'success' barClass_price,
        'lavender' color
	from tst_orders o
    join tst_customers c on c.id = o.customerID
	where o.id in (select id from @ids)
	order by
        case when @sort = ''  then created end desc,
		case when @sort = 'name' and @direction = 'down' then name end desc,
		case when @sort = 'name' and @direction = 'up' then name end asc
	OFFSET @PageSize * (@Page - 1) ROWS
	FETCH NEXT @PageSize ROWS ONLY;

	-- SELECT 2
	select count(*) from @ids

	-- SELECT 3
	Select  '  ' Title, 1 HideTitleCount

END

Примечание: для  стилизации полей в колонки таблиц не добавлять поля со специальными префиксами.

Другие модули

Последние обновления

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства