SusTable

Лёгкий header + scrollable rows + pagination footer — тот же SusTableController, что у DataTable, без toolbar / typed-cell chrome.

Пакет

SusKit · Данные (коммерческий)

Открыть в песочнице

SusKit · Data

Свойства

Имя	Тип	По умолчанию
Controller	Prop<SusTableController>	new()	v-model

Слоты

Слотов нет.

События

Публичных событий нет.

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• sus-button
• sus-table
• sus-table__action-btn
• sus-table__body
• sus-table__cell
• sus-table__cell--actions
• sus-table__cell--align-center
• sus-table__cell--align-end
• sus-table__cell--description
• sus-table__cell--ellipsis
• sus-table__cell--number
• sus-table__cell--progress
• sus-table__footer
• sus-table__footer-actions
• sus-table__footer-btn
• sus-table__footer-info
• sus-table__header
• sus-table__header-cell
• sus-table__header-row
• sus-table__header-title
• sus-table__header-title--align-center
• sus-table__header-title--align-end
• sus-table__header-title--sortable
• sus-table__media--clip
• sus-table__media--rounded
• sus-table__row
• sus-table__row--hoverable
• sus-table__row--selected
• sus-table__row--striped
• sus-table__rows
• sus-table__sort-btn
• sus-table__sort-btn--active

Использование

Настройте колонки и элементы на контроллере, затем присвойте его вью.

var ctrl = new SusTableController();
ctrl.SetColumns(new List<ColumnDef>
{
    new() { Key = "name", Title = "Name", Sortable = true },
    new() { Key = "role", Title = "Role", Sortable = true },
    new() { Key = "lvl", Title = "Lvl", Sortable = true },
});
ctrl.SetItems(new List<object>
{
    new Dictionary<string, object> { ["name"] = "Aria", ["role"] = "Tank", ["lvl"] = 12 },
    new Dictionary<string, object> { ["name"] = "Borin", ["role"] = "DPS", ["lvl"] = 9 },
    new Dictionary<string, object> { ["name"] = "Cira", ["role"] = "Heal", ["lvl"] = 14 },
});
ctrl.SetItemsPerPage(5);

var table = new SusTable();
table.Controller.Value = ctrl;

<template>
  <sus:SusTable :Controller="TableCtrl.Value" />
</template>

<script>
public Prop<SusTableController> TableCtrl = new(new());
// Populate TableCtrl columns/items in code (see above).
</script>

Prop	Роль
Controller	SusTableController — колонки, элементы, сортировка, страница

Заметки

• Проще, чем SusDataTable: нет слота toolbar, нет chrome для kind-пресетов, ячейки рендерятся как текст.
• Футер пагинации появляется, когда TotalPages > 1.
• Для типизированных ячеек / глобального поиска / колонки выбора — используйте SusDataTable.