<data-grid> is a custom element, you can wrap around an existing <table>, or fill with data using the data-attribute. The latter can be either a stringified object or an endpoint.
Example with data from an endpoint set in data, and most features enabled, including debug, outputting rendering etc. to the console.
See the console
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 |
With data set as JSON directly in the data-attribute:
Example with data being fetched on a dg:pagechange-event, also setting and removing the loading-attribute.
Example: Created from JavaScript with document.createElement('data-grid'), with custom i18n and formatters-objects.