SusDataTable

Таблица данных с toolbar, типизированными ячейками, sort / search / pagination — на SusTableController.

Пакет

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

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

SusKit · Data

Свойства

Имя	Тип	По умолчанию
Controller	Prop<SusTableController>	new()	v-model
ShowToolbar	Prop<bool>	true	v-model
Density	Prop<string>	"default"	v-model
Variant	Prop<string>	"elevated"	v-model
Hover	Prop<bool>	true	v-model

Слоты

Имя
toolbar

События

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

Хуки стиля

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

• sus-data-table__action-btn
• sus-data-table__cell
• sus-data-table__cell--actions
• sus-data-table__cell--align-center
• sus-data-table__cell--align-end
• sus-data-table__cell--description
• sus-data-table__cell--number
• sus-data-table__cell--select
• sus-data-table__cell--toggle
• sus-data-table__cell-wrap
• sus-data-table__empty
• sus-data-table__empty-text
• sus-data-table__footer
• sus-data-table__footer-btn
• sus-data-table__footer-info
• sus-data-table__footer-left
• sus-data-table__footer-right
• sus-data-table__footer-select
• sus-data-table__header-cell
• sus-data-table__header-cell--sort-wired
• sus-data-table__header-cell--sortable
• sus-data-table__header-title
• sus-data-table__header-title--align-center
• sus-data-table__header-title--align-end
• sus-data-table__header-title--sortable
• sus-data-table__host
• sus-data-table__loading-bar
• sus-data-table__loading-overlay
• sus-data-table__search
• sus-data-table__sort-btn
• sus-data-table__sort-btn--active
• sus-data-table__toolbar
• sus-data-table__toolbar-actions
• sus-data-table__view
• sus-data-table--density-comfortable
• sus-data-table--density-compact
• sus-data-table--hover
• sus-data-table--variant-flat
• sus-data-table--variant-outlined
• sus-select
• sus-select__details
• sus-select__field
• sus-select__value
• sus-slot
• sus-table__action-btn
• sus-table__cell--toggle
• unity-collection-view__item
• unity-collection-view__item--selected
• unity-list-view__item
• unity-list-view__item--alternated
• unity-list-view__item--selected
• unity-multi-column-header
• unity-multi-column-header__column
• unity-multi-column-header__column__sort-indicator
• unity-multi-column-header__column-sorting
• unity-multi-column-header__column-sorting-indicator

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

Колонки и строки задаются на контроллере (SetColumns / SetItems). Опциональный ApplyKindDefaults применяет пресет SusTableKind.

var ctrl = new SusTableController();
ctrl.ApplyKindDefaults(SusTableKind.MainList);
ctrl.SetColumns(new List<ColumnDef>
{
    new() { Key = "Name", Title = "Name", MinWidth = 140f, Sortable = true, Searchable = true },
    new() { Key = "Role", Title = "Role", Width = 100f, Sortable = true },
    new() { Key = "Level", Title = "Lvl", Width = 72f, Align = "end",
            CellType = SusCellType.Number, Sortable = true },
});
ctrl.SetItems(new List<object>
{
    new Dictionary<string, object> { ["Name"] = "Aria", ["Role"] = "Tank", ["Level"] = 12 },
    new Dictionary<string, object> { ["Name"] = "Borin", ["Role"] = "DPS", ["Level"] = 9 },
});
ctrl.SetItemsPerPage(5);

var table = new SusDataTable();
table.Controller.Value = ctrl;
table.ShowToolbar.Value = true;
table.Density.Value = "default";
table.Variant.Value = "elevated";
table.Hover.Value = true;

<template>
  <sus:SusDataTable :Controller="TableCtrl.Value"
                    :ShowToolbar="ShowToolbar.Value"
                    :Density="Density.Value"
                    :Variant="Variant.Value"
                    :Hover="Hover.Value">
    <template #toolbar>
      <!-- Optional actions next to global search -->
    </template>
  </sus:SusDataTable>
</template>

<script>
public Prop<SusTableController> TableCtrl = new(new());
public Prop<bool> ShowToolbar = new(true);
public Prop<string> Density = new("default");
public Prop<string> Variant = new("elevated");
public Prop<bool> Hover = new(true);
// Populate TableCtrl columns/items in code (see above).
</script>

Prop	Роль
Controller	SusTableController — колонки, элементы, сортировка, поиск, страница
ShowToolbar	Глобальный поиск + слот toolbar
Density	default · compact · comfortable
Variant	elevated · flat · outlined
Hover	Подсветка строки при наведении

Заметки

• Предпочитайте SusDataTable вместо SusTable, когда нужны toolbar, пресеты kind или типизированные ячейки (SusCellType: text · number · icon · image · toggle · badge · progress · description · actions).
• SusTableKind: MainList · Picker · ActionList · ReadOnly · Dev — через ApplyKindDefaults.
• Действия над строками / выбор / загрузка задаются на контроллере (Options, RowActionRequested, Loading, …).
• Пустой Items показывает встроенное пустое состояние; установите Loading для оверлей-бара.