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
Alain Dougherty $-12686
Stephanie Rodrigues $5330
Charles Kenyon $2299
Julie Kenyon $8310
Paul Rodrigues $9178
James Grant $7163
Paul Grant $6797
Charles Dougherty $6310
James Grant $-12685
James Dougherty $9333

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

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
Bert Sheffield

This is my card content...

Bert Sheffield
$-12934
$9030
$-14103
$5119
$1275
$7874
$-4419
$-9632
$4051
$-3166
$-2805
$4396
$-13227
$-10970
$7244
$-14384
Charles Rodrigues

This is my card content...

Charles Rodrigues
$10491
$-13097
$8993
$-5142
$-13992
$3539
$2300
$8972
$14525
$2894
Jos Kenyon

This is my card content...

Jos Kenyon
$5964
$-11871
$-4369
$13772
$2905
$14822
$-9883
$-9039
$-8961
$-10297
Paul Rodrigues

This is my card content...

Paul Rodrigues
$-1920
$-14665
$13855
$8521
$-9304
$-9059
$-6416
$-10862
$-2488
$8376
$4536
$1131
$3368
$5681
$12571
$-3376
$-13432
$4357
$-14966
Stephanie Rogiers

This is my card content...

Stephanie Rogiers
$-9696
$-8705
$6435
$13279
$-9231
$12532
$5915
$9987
Paul Rogiers

This is my card content...

Paul Rogiers
$-11625
$-10161
$3832
$-12724
$-10311
$-13284
$3523
$-3450
$-7097
$5811
$3109
$-9868
$5032
Bertrande Bailleul

This is my card content...

Bertrande Bailleul
$-4889
$-11362
$6131
$8540
$-8785
$-2449
Bert Ostrander

This is my card content...

Bert Ostrander
$3931
$-6958
$5580
$10818
$12193
$10935
$-1898
$-1702
$5061
$11752
$-9948
$6434
$-5374
$1247
$9160
$5449
$-1088
$-14324
$14958
Alain Ostrander

This is my card content...

Alain Ostrander
$9484
$4539
$14076
$-2135
$-8827
$-14244
$-6438
$-4079
$-1460
$9815
$-5764
$-2436
$14338
$-5671
$-14952
Jos Kenyon

This is my card content...

Jos Kenyon
$-14690
$-6758
$-9727
$-11773
$-11522
$-10180
$7545
$-11827
$4346
$-9314
$11064
$5184
$-5922
$-13904
$-7160
$-5553
$13355
$4233
$1472