Tesserae

SortableStack

Description

SortableStack is a stack-based container whose child items can be reordered with drag and drop. It wraps a standard Stack internally, tracks a stable identifier for each item, and reports the updated ordering when the user finishes sorting.

Use it when the visual order matters and you need to persist or react to that order, such as dashboards, pinned lists, or configurable layouts.

Usage

Create a SortableStack through the SortableStack(...), VSortableStack(), or HSortableStack() helpers. Add items with stable identifiers, then listen for sorting changes.

SortableStackItem

Each draggable entry is represented by SortableStackItem.

  • Identifier is the unique key used for ordering.
  • Component is the rendered child component.

API reference

class

SortableStack

public class SortableStack : IComponent, IHasBackgroundColor, IHasMarginPadding, ISpecialCaseStyling, ICanWrap

A Stack component that allows its children to be reordered via drag and drop.

Constructors

Constructor
SortableStack
public SortableStack(Stack.Orientation orientation = Stack.Orientation.Vertical)

Initializes a new instance of the SortableStack class.

Parameters

orientation
The orientation of the stack (vertical or horizontal).

Properties

Property
SortableStack.Background
public string Background { get ; set ; }

Gets or sets the background color.

Property
SortableStack.Margin
public string Margin { get ; set ; }

Gets or sets the margin.

Property
SortableStack.Padding
public string Padding { get ; set ; }

Gets or sets the padding.

Property
SortableStack.StylingContainer
public dom.HTMLElement StylingContainer

Gets the styling container.

Property
SortableStack.PropagateToStackItemParent
public bool PropagateToStackItemParent

Gets whether styling should propagate to the stack item parent.

Property
SortableStack.CanWrap
public bool CanWrap { get ; set ; }

Gets or sets whether the stack can wrap its items.

Methods

Method
SortableStack.Add
public void Add(string identifier, IComponent component)

Adds a component to the sortable stack.

Parameters

identifier
A unique identifier for the component.
component
The component to add.
Method
SortableStack.Add
public void Add(SortableStackItem item)

Adds a SortableStackItem to the stack.

Parameters

item
The item to add.
Method
SortableStack.Children
public SortableStack Children(params SortableStackItem[] children)

Sets the children of the sortable stack.

Parameters

children
The children items.

Returns

The current instance of the type.

Method
SortableStack.Render
public dom.HTMLElement Render()

Renders the sortable stack.

Returns

The rendered HTMLElement.

Method
SortableStack.AlignItemsCenter
public SortableStack AlignItemsCenter()

Aligns items in the center.

Returns

The current instance of the type.

Method
SortableStack.LoadSorting
public void LoadSorting(string[] itemOrder)

Loads the sorting order of the items. Should be called after all items have been added.

Parameters

itemOrder
An array of identifiers in the desired order.
Method
SortableStack.OnSortingChanged
public void OnSortingChanged(Action<string[]> onSortingChanged)

Adds a sorting change event handler.

Parameters

onSortingChanged
The event handler action.
Method
SortableStack.NoWrap
public SortableStack NoWrap()

Disables wrapping of items.

Returns

The current instance of the type.

Method
SortableStack.Wrap
public SortableStack Wrap()

Enables wrapping of items.

Returns

The current instance of the type.

Method
SortableStack.AlignItems
public SortableStack AlignItems(ItemAlign align)

Sets the alignment of items.

Parameters

align
The alignment.

Returns

The current instance of the type.

Method
SortableStack.Relative
public SortableStack Relative()

Sets the stack to use relative positioning.

Returns

The current instance of the type.

Method
SortableStack.AlignContent
public SortableStack AlignContent(ItemAlign align)

Sets the content alignment.

Parameters

align
The alignment.

Returns

The current instance of the type.

Method
SortableStack.JustifyContent
public SortableStack JustifyContent(ItemJustify justify)

Sets the content justification.

Parameters

justify
The justification.

Returns

The current instance of the type.

Method
SortableStack.JustifyItems
public SortableStack JustifyItems(ItemJustify justify)

Sets the item justification.

Parameters

justify
The justification.

Returns

The current instance of the type.

Method
SortableStack.RemovePropagation
public SortableStack RemovePropagation()

Removes event propagation.

Returns

The current instance of the type.

Method
SortableStack.OnMouseOver
public SortableStack OnMouseOver(ComponentEventHandler<Stack, Event> onMouseOver)

Adds a mouse over event handler.

Method
SortableStack.OnMouseOut
public SortableStack OnMouseOut(ComponentEventHandler<Stack, Event> onMouseOut)

Adds a mouse out event handler.

Method
SortableStack.Clear
public void Clear()

Clears all items from the sortable stack.

Method
SortableStack.NoDefaultMargin
public SortableStack NoDefaultMargin()

Removes the default margin from the stack.

Returns

The current instance of the type.

Method
SortableStack.Remove
public void Remove(string identifer)

Removes an item from the sortable stack.

Parameters

identifer
The identifier of the item to remove.
class

SortableStackItem

public class SortableStackItem

Represents an item within a SortableStack.

Properties

Property
SortableStackItem.Component
public IComponent Component { get; set; }

Gets or sets the component.

Property
SortableStackItem.Identifier
public string Identifier { get; set; }

Gets or sets the unique identifier.

See also

Referenced by

© 2026 Tesserae. All rights reserved.