UI: Components

Data Grid

<ui-datagrid> is a custom element, you can wrap around an existing <table>, or fill with data using the src-attribute. The latter can be either a stringified object or an endpoint.

Example with data from an endpoint set in src, and most features enabled, including debug, outputting rendering etc. to the console.

Event Playground

See the console

Example: Wrapped around an existing <table>, with custom lang and i18n, set directly in HTML-attributes.

First NameLast NameKnown AsPlace
BruceWayneBatmanGotham City
TonyStarkIron ManMalibu
PeterParkerSpider-ManNew York City
MattMurdockDaredevilNew York City
SteveRogersCaptain AmericaWashington, D.C.
DianaPrinceWonder WomanThemyscira
NatashaRomanoffBlack WidowMoscow
BarryAllenThe FlashCentral City
HalJordanGreen LanternCoast City
WandaMaximoffScarlet WitchTransia
BruceBannerHulkGamma Base
ScottLangAnt-ManSan Francisco
CarolDanversCaptain MarvelHarmony Grove
T'ChallaChallaBlack PantherWakanda

Example: Created from JavaScript with document.createElement('ui-datagrid'), with custom i18n and formatters-objects.