SusDataTable

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

Пакет

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

SusKit · Data

Свойства

Имя	Тип	По умолчанию
`Controller`	`Prop<SusTableController>`	`new SusTableController()`	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
`SearchPlaceholder`	`Prop<string>`	`"Search..."`	v-model
`EmptyText`	`Prop<string>`	`"No data available"`	v-model
`RowsPerPageLabel`	`Prop<string>`	`"Rows per page:"`	v-model
`RowsPerPageAutoLabel`	`Prop<string>`	`"Rows per page: auto"`	v-model
`AllRowsLabel`	`Prop<string>`	`"All"`	v-model

Слоты

Имя
`toolbar`

События

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

Хуки стиля

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

keyboard-focus
sus-data-table
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--fixed-width
sus-data-table__cell--select
sus-data-table__cell--toggle
sus-data-table__cell-wrap
sus-data-table__empty
sus-data-table__empty-frame
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__host--fixed-height
sus-data-table__loading-bar
sus-data-table__loading-overlay
sus-data-table__radio
sus-data-table__radio--disabled
sus-data-table__radio--on
sus-data-table__radio-dot
sus-data-table__row-marker
sus-data-table__row-marker--on
sus-data-table__row-marker--pulse
sus-data-table__search
sus-data-table__skeleton
sus-data-table__skeleton-bar
sus-data-table__skeleton-bar--alt
sus-data-table__skeleton-row
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-healthbar
sus-hidden
sus-select
sus-select__details
sus-select__field
sus-select__value
sus-slot
sus-table__action-btn
sus-table__cell--boxed
sus-table__cell--custom
sus-table__cell--media
sus-table__cell--number
sus-table__cell--progress
sus-table__cell--segments
sus-table__cell--toggle
sus-table__cell--two-line
sus-table__cell-sub
sus-table__cell-title
sus-table__segment
sus-table__segment--on
sus-table__segments
sus-table__segments--full
sus-table__segments-count
sus-textfield
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
unity-multi-column-view__header-container

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

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

csharp

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;

xml

<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`	Подсветка строки при наведении

Двухстрочные ячейки

SusHeaders.TwoLine(key, subKey, title) помещает в одну ячейку два значения: значение key — как заголовок, а значение subKey — более приглушённой второй строкой под ним (SusCellType.TwoLine). Подходит для имени, рядом с которым нужен сервер, регион или подзаголовок.

csharp

ctrl.SetColumns(new List<ColumnDef>
{
    SusHeaders.TwoLine("Name", "World", "Player"),
    SusHeaders.Number("Rating"),
});
ctrl.SetItems(new List<object>
{
    new Dictionary<string, object> { ["Name"] = "Aria", ["World"] = "North Reach", ["Rating"] = 1840 },
    new Dictionary<string, object> { ["Name"] = "Borin", ["World"] = "", ["Rating"] = 1712 },
});

Каждая строка — отдельная метка и обрезается многоточием сама по себе; ни одна строка не переносится, поэтому ячейка никогда не становится выше строки таблицы.
Rich text выключен на обеих строках, поэтому разметка в ваших данных показывается как обычный текст.
Сортировка и глобальный поиск используют только значение key.
Пустая вторая строка получает sus-hidden, и заголовок остаётся в ячейке один.
Хуки стиля: sus-table__cell--two-line (ячейка), sus-table__cell-title, sus-table__cell-sub.

Токены таблицы

Размеры обвязки таблицы задают три токена. Задайте их в USS вашего скина или темы:

Токен	По умолчанию	Что задаёт
`--sk-table-header-underlay`	transparent	Фон под строкой заголовков. Unity-овский `MultiColumnListView` закрашивает эту область цветом темы Unity; kit переопределяет её только внутри `.sus-data-table`, поэтому ваш собственный `MultiColumnListView` сохраняет тему.
`--sk-table-cell-pad-x`	`--sk-space-8`	Левый и правый отступ каждой ячейки. По умолчанию следует лестнице density.
`--sk-table-cell-number-pad-x`	`--sk-table-cell-pad-x`	Левый и правый отступ только числовых ячеек. Он добавляется к отступу обёртки ячейки (`--sk-table-cell-pad-x`, по умолчанию 8 px с каждой стороны), а не заменяет его, поэтому, чтобы короткие числа поместились в узкую колонку, задайте оба токена.

css

.my-skin .sus-data-table {
    --sk-table-header-underlay: rgba(0, 0, 0, 0.35);
    --sk-table-cell-number-pad-x: 2px;
}

Числовые ячейки

По умолчанию числовая ячейка сохраняет естественную ширину. Она не сжимается и никогда не показывает многоточие: число шире колонки заходит в отступ ячейки, а не обрезается. Если вашему скину нужно многоточие, добавьте его на тот же селектор:

css

.my-skin .sus-data-table__cell.sus-table__cell--number {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Хуки скина для типовых переопределений

Если ваш скин раньше латал таблицу вручную, используйте вместо этого встроенные хуки:

Самодельный обход	Встроенный хук
Метка с rich text, уменьшенной второй строкой и снова включённым переносом	`SusHeaders.TwoLine` → `sus-table__cell-title` / `sus-table__cell-sub`
Перекраска серой полосы за заголовком	`--sk-table-header-underlay`
Числа, обрезанные до «2…» в узкой колонке	`--sk-table-cell-number-pad-x` (для многоточия см. Числовые ячейки)

Заметки

Предпочитайте SusDataTable вместо SusTable, когда нужны toolbar, пресеты kind или типизированные ячейки (SusCellType: text · number · icon · image · toggle · badge · progress · description · two-line · actions).
SusTableKind: MainList · Picker · ActionList · ReadOnly · Dev — через ApplyKindDefaults.
Действия над строками / выбор / загрузка задаются на контроллере (Options, RowActionRequested, Loading, …).
Пустой Items показывает встроенное пустое состояние; установите Loading для оверлей-бара.
Известная проблема: пресеты, несущие пресет ширины (SusHeaders.Number, Icon, Image, Active, Actions, Select), игнорируют WithWidth(...), потому что WidthToken побеждает Width. Для точной ширины сбросьте пресет: var col = SusHeaders.Number("Rating").WithWidth(60f); col.WidthToken = null;.

SusDataTable ​

Свойства

Слоты

События

Хуки стиля ​

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

Двухстрочные ячейки ​

Токены таблицы ​

Числовые ячейки ​

Хуки скина для типовых переопределений ​

Заметки ​