With tables you can create data grids. Tables have build-in goodies like being sortable. Click on the headers for a demo.
The Id of a table MAY NOT CONTAIN A _ CHARACTER!. This is because of the inner working of nested table and the _ character is reserved.
First Name | Last Name | Sales Profit | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Stephanie | Rogiers | $-2931 | |||||||||
Stephanie | Rogiers | $-1545 | |||||||||
Charles | Klinger | $13687 | |||||||||
Paul | Grant | $4267 | |||||||||
Bert | Rodrigues | $8034 | |||||||||
Paul | Klinger | $10330 | |||||||||
Bert | Klinger | $9986 | |||||||||
Charles | Bailleul | $11886 | |||||||||
Bertrande | Dougherty | $-8935 | |||||||||
Jos | Bailleul | $10159 | |||||||||
This is a footer that appears on the bottom of the table. |
Tables can be scrollable. You'll need to set the height of the parent cell and specify the column widths.
First Name | Last Name | Sales Profit | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Bertrande | Kenyon | $-13426 | |||||||||
Stephanie | Sheffield | $3784 | |||||||||
Stephanie | Kenyon | $-2247 | |||||||||
James | Sheffield | $1413 | |||||||||
Alain | Rodrigues | $-6635 | |||||||||
James | Kenyon | $4197 | |||||||||
Stephanie | Sheffield | $7893 | |||||||||
Bert | Grant | $-4584 | |||||||||
James | Grant | $4816 | |||||||||
Paul | Kenyon | $13649 | |||||||||
This is a footer that appears on the bottom of the table. |
Tables can contain all kind of ABM components. In the example below we have Cards and even another table (the profits) as a column. Also, it is made interactive so we receive a clicked() event when we click into a cell. Check the source code of this page on how it is done.
Because the profits are random created, the value it reutrns will not match the one you clicked. This is because when the page was build other values were saved in the html than the ones shown. In a real world app you would get the values from a database for example so they would match.
Card | First Name | Last Name | Sales Profit | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
![]() This is my card content... |
Julie | Rodrigues |
|
||||||||||||||||||
![]() This is my card content... |
Paul | Rogiers |
|
||||||||||||||||||
![]() This is my card content... |
Charles | Kenyon |
|
||||||||||||||||||
![]() This is my card content... |
Stephanie | Rodrigues |
|
||||||||||||||||||
![]() This is my card content... |
Bert | Klinger |
|
||||||||||||||||||
![]() This is my card content... |
Paul | Rodrigues |
|
||||||||||||||||||
![]() This is my card content... |
Alain | Klinger |
|
||||||||||||||||||
![]() This is my card content... |
Bert | Kenyon |
|
||||||||||||||||||
![]() This is my card content... |
Paul | Sheffield |
|
||||||||||||||||||
![]() This is my card content... |
Julie | Kenyon |
|
||||||||||||||||||
This is a footer that appears on the bottom of the table. |