<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. You can also set data directly in JavaScript.
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>.
| 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:requestpagechange-event, translations loaded from i18n-attribute, with lang="da". Also dispatching the dg:loading:start and dg:loading:end events.
Example: Created from JavaScript with document.createElement('data-grid'), with custom i18n and formatters-objects, and page set to 2 (beginning from 0) and nosortable.