<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.
See the console
Example: Wrapped around an existing <table>, with custom lang and i18n, set directly in HTML-attributes.
| ID | First Name | Last Name | Known As | Place |
|---|---|---|---|---|
| 1 | Bruce | Wayne | Batman | Gotham City |
| 2 | Clark | Kent | Superman | Metropolis |
| 3 | Tony | Stark | Iron Man | Malibu |
| 4 | Peter | Parker | Spider-Man | New York City |
| 5 | Matt | Murdock | Daredevil | New York City |
| 6 | Steve | Rogers | Captain America | Washington, D.C. |
| 7 | Diana | Prince | Wonder Woman | Themyscira |
| 8 | Arthur | Curry | Aquaman | Atlantis |
| 9 | Natasha | Romanoff | Black Widow | Moscow |
| 10 | Barry | Allen | The Flash | Central City |
| 11 | Hal | Jordan | Green Lantern | Coast City |
| 12 | Wanda | Maximoff | Scarlet Witch | Transia |
| 13 | Bruce | Banner | Hulk | Gamma Base |
| 14 | Scott | Lang | Ant-Man | San Francisco |
| 15 | Carol | Danvers | Captain Marvel | Harmony Grove |
| 16 | T'Challa | Challa | Black Panther | Wakanda |
Example: Created from JavaScript with document.createElement('ui-datagrid'), with custom i18n and formatters-objects.