DRYL COMPONENTS
Color mode: System — switch to light
2.20.1
Data

DrylTable

AI-aware

Glass data table with declarative columns, click-to-sort, global search, per-column filters, pagination, grouping, row-expansion, bulk actions, virtualization, column visibility, state persistence and row selection.

Basic

Declarative columns with a custom CellTemplate for status and latency.

Toolbar — search, sort & select

Add ShowToolbar + Searchable for global search, Sortable columns for click-to-sort, and Selectable for row checkboxes.

Grouping & detail rows

GroupBy clusters rows under collapsible headers; DetailTemplate adds an expand chevron with a detail panel.

Inline editing

Editable plus per-column EditTemplate turns rows into inline editors. Double-click or the pencil starts editing; Enter commits via OnRowCommitted, Escape cancels. CloneRow edits an isolated copy so cancel reverts cleanly.

Double-click a row or press the pencil to edit. Enter saves, Escape cancels.

Animated reorder — view transitions

AnimateReorder morphs rows to their new position with a same-document view transition — drag the grip (or Alt+Arrow) and rows glide instead of snapping; click-to-sort glides too. RowIdSelector gives each row a stable morph identity. Falls back to an instant update in browsers without the View Transition API or when reduced motion is set.

AI streaming — rows glide in

Set Ai to Streaming/Generated and the table treats new rows as an AI insert: on a plain client-side list the surrounding rows glide down via a same-document view transition instead of snapping, while the new row keeps its accent-flash entry. Automatic — no extra parameter. RowIdSelector gives each row a stable morph identity. Falls back to the flash-only entry without the View Transition API, under reduced motion, or when Virtualize/GroupBy/DataProvider is set.

No leads yet — hit Generate rows to watch them stream in.

Resizable, reorderable & pinned columns

ResizableColumns adds drag handles to header edges; ReorderableColumns lets you drag headers (or Alt+Arrow) to reorder. Per-column Pinned freezes Region to the left and Growth to the right during horizontal scroll. With PersistStateKey, widths and order survive reloads.

Drag a column header to reorder, or focus one and press Alt + Arrow Left/Right. Drag a header's right edge to resize. The Region and Growth columns are frozen to the edges.

An unhandled error has occurred. Reload x

Reconnecting to the server…

Attempt /

Next try in s