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

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

Для этого мы:

• создали таблицу
• добавили необходимые колонки (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

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