SusDataTable

Data grid with toolbar, typed cells, sort / search / pagination — driven by SusTableController.

Package

SusKit · Data (commercial)

Open in Playground

SusKit · Data

Props

Name	Type	Default
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

Slots

Name
toolbar

Events

No public events.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• 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

Usage

Columns and rows live on the controller (SetColumns / SetItems). Optional ApplyKindDefaults applies a SusTableKind preset.

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	Role
Controller	SusTableController — columns, items, sort, search, page
ShowToolbar	Global search + toolbar slot
Density	default · compact · comfortable
Variant	elevated · flat · outlined
Hover	Row hover highlight

Two-line cells

SusHeaders.TwoLine(key, subKey, title) puts two values in one cell: the key value as the title and the subKey value as a quieter second line under it (SusCellType.TwoLine). Use it for a name with a server, a region or a subtitle next to it.

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 },
});

• Each line is its own label and clips with an ellipsis on its own; neither line wraps, so the cell never grows past the row height.
• Rich text is off on both lines, so markup in your data shows as plain text.
• Sort and global search use the key value only.
• An empty second line gets sus-hidden and the title keeps the row alone.
• Style hooks: sus-table__cell--two-line (the cell), sus-table__cell-title, sus-table__cell-sub.

Table tokens

Three tokens size the table chrome. Set them in your skin or theme USS:

Token	Default	What it controls
--sk-table-header-underlay	transparent	Background behind the header row. Unity's MultiColumnListView paints this area from the Unity theme; the kit overrides it only inside .sus-data-table, so your own MultiColumnListView keeps the theme.
--sk-table-cell-pad-x	--sk-space-8	Left and right padding of every cell. Follows the density ladder by default.
--sk-table-cell-number-pad-x	--sk-table-cell-pad-x	Left and right padding of number cells only. It is added to the cell wrap padding (--sk-table-cell-pad-x, 8 px per side by default), not a replacement for it, so to fit short numbers into a slim column set both tokens.

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

Number cells

By default a number cell keeps its natural width. It does not shrink and it never shows an ellipsis: a number wider than its column runs into the cell padding instead of being cut. If your skin prefers an ellipsis, add it on the same selector:

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

Skin hooks for common overrides

If your skin used to patch the table by hand, use the built-in hooks instead:

Custom workaround	Built-in hook
A rich-text label with a smaller second line and wrapping turned back on	SusHeaders.TwoLine → sus-table__cell-title / sus-table__cell-sub
Repainting the grey strip behind the header	--sk-table-header-underlay
Numbers cut to "2…" in a narrow column	--sk-table-cell-number-pad-x (for an ellipsis, see Number cells)

Notes

• Prefer SusDataTable over SusTable when you need toolbar, kind presets, or typed cells (SusCellType: text · number · icon · image · toggle · badge · progress · description · two-line · actions).
• SusTableKind: MainList · Picker · ActionList · ReadOnly · Dev — via ApplyKindDefaults.
• Row actions / selection / loading live on the controller (Options, RowActionRequested, Loading, …).
• Empty Items shows the built-in empty state; set Loading for the overlay bar.
• Known issue: presets that carry a width preset (SusHeaders.Number, Icon, Image, Active, Actions, Select) ignore WithWidth(...), because WidthToken wins over Width. For an exact width, clear the preset: var col = SusHeaders.Number("Rating").WithWidth(60f); col.WidthToken = null;.