Перейти к содержимому

CoreDataTable

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Таблица данных: колонки и строки — массивы объектов, заголовок, сортировка, выбор строк. Массивы передаются JSON-биндингом :columns='[…]' — одинарные кавычки снаружи, JSON внутри.

Базовая таблица

Статусы компонентов
КомпонентСтатус
CoreButtonстабильный
CoreInputстабильный

С сортировкой

sort-by + sort-dir задают начальную сортировку.

КомпонентСтатус
CoreButtonстабильный
CoreTabsстабильный

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.
MDC
Таблица данных: колонки и строки — массивы объектов, заголовок, сортировка, выбор строк. Массивы передаются JSON-биндингом `:columns='[…]'` — одинарные кавычки снаружи, JSON внутри.

### Базовая таблица

::core-data-table{:columns='[{"key":"name","label":"Компонент"},{"key":"status","label":"Статус"}]' :rows='[{"name":"CoreButton","status":"стабильный"},{"name":"CoreInput","status":"стабильный"}]' caption="Статусы компонентов"}
::

### С сортировкой

`sort-by` + `sort-dir` задают начальную сортировку.

::core-data-table{:columns='[{"key":"name","label":"Компонент"},{"key":"status","label":"Статус"}]' :rows='[{"name":"CoreButton","status":"стабильный"},{"name":"CoreTabs","status":"стабильный"}]' sort-by="name"}
::