Fluxo UIFluxo UIv0.4.1

Tables in Report Builder

The table component is the workhorse of Report Builder. It has one prop entry (datasourceId) plus a recursive column tree, optional row groups, head / footer rows, pivot mode, multi-item cells, and conditional formatting — all driven by the same typed expression language.

Each demo below is a live ReportViewer. Open the Definition tab to copy the JSON; open the Expressions tab to see the key expressions called out with an explanation.

1 · Basics

A flat list of columns with sort, resize, reorder, copy-to-clipboard.

Orders

The simplest table. A datasource, a flat list of columns, and sorting enabled. Click a header to sort; drag a header edge to resize; drag a header body to reorder.

Order
Region
Category
Product
Units
Revenue
ORD-1000EastSportsWater Bottle13$689
ORD-1001WestApparelT-Shirt1$70
ORD-1002EastApparelT-Shirt1$60
ORD-1003WestApparelT-Shirt5$357
ORD-1004WestElectronicsWireless Buds14$4,942
ORD-1005WestSportsYoga Mat10$470
ORD-1006EastApparelSneakers3$261
ORD-1007SouthApparelSneakers9$738
ORD-1008WestHomeThrow Pillow16$888
ORD-1009NorthElectronicsSmart Watch4$1,392
ORD-1010EastApparelJacket8$440
ORD-1011WestElectronicsSmart Watch15$5,073
ORD-1012NorthSportsWater Bottle12$492
ORD-1013SouthApparelJeans13$949
ORD-1014SouthApparelSneakers7$413
ORD-1015EastApparelJeans9$540
ORD-1016WestApparelT-Shirt8$584
ORD-1017WestHomeDesk Lamp14$812
ORD-1018EastSportsWater Bottle14$588
ORD-1019SouthElectronicsWireless Buds15$5,895
ORD-1020EastApparelT-Shirt12$936
ORD-1021NorthHomeThrow Pillow7$296
ORD-1022EastHomeThrow Pillow19$779
ORD-1023EastSportsYoga Mat12$432
ORD-1024EastHomeCandle Set2$71
ORD-1025EastElectronicsWireless Buds11$3,080
ORD-1026SouthSportsRunning Shoes7$315
ORD-1027EastHomeCandle Set13$728
ORD-1028WestSportsDumbbells13$689
ORD-1029SouthApparelJeans15$915
ORD-1030EastElectronicsWireless Buds9$3,078
ORD-1031NorthElectronicsLaptop Pro14$3,485
ORD-1032SouthHomeCandle Set13$585
ORD-1033SouthHomeThrow Pillow14$859
ORD-1034SouthElectronicsUSB Hub13$3,302
ORD-1035SouthSportsWater Bottle9$477
ORD-1036WestElectronicsSmart Watch5$1,350
ORD-1037EastSportsWater Bottle12$451
ORD-1038WestSportsDumbbells4$204
ORD-1039NorthHomeRug 5x820$1,180
ORD-1040EastApparelJeans18$1,188
ORD-1041EastHomeDesk Lamp17$697
ORD-1042SouthApparelJeans1$72
ORD-1043WestHomeCandle Set10$500
ORD-1044NorthHomeCandle Set19$779
ORD-1045EastHomeCandle Set20$1,180
ORD-1046NorthSportsYoga Mat16$656
ORD-1047WestApparelT-Shirt3$186
ORD-1048EastApparelJacket18$1,134
ORD-1049SouthSportsWater Bottle20$760
ORD-1050EastApparelSneakers4$303
ORD-1051EastHomeCandle Set2$122
ORD-1052NorthHomeDesk Lamp4$228
ORD-1053EastSportsWater Bottle12$402
ORD-1054SouthSportsDumbbells20$1,060
ORD-1055WestSportsYoga Mat11$526
ORD-1056WestSportsYoga Mat8$256
ORD-1057SouthApparelJeans14$1,008
ORD-1058WestHomeThrow Pillow9$341
ORD-1059SouthElectronicsSmart Watch14$3,780
ORD-1060SouthApparelJeans2$122
ORD-1061WestApparelT-Shirt19$1,292
ORD-1062WestElectronicsLaptop Pro11$3,729
ORD-1063EastSportsRunning Shoes8$392
ORD-1064SouthApparelSneakers12$852
ORD-1065EastSportsYoga Mat1$37
ORD-1066EastApparelJacket15$960
ORD-1067NorthApparelT-Shirt12$684
ORD-1068NorthElectronicsUSB Hub8$2,056
ORD-1069SouthSportsRunning Shoes14$714
ORD-1070WestHomeRug 5x817$1,037
ORD-1071NorthSportsWater Bottle14$600
ORD-1072EastElectronicsWireless Buds5$1,275
ORD-1073WestSportsRunning Shoes6$216
ORD-1074EastHomeDesk Lamp9$489
ORD-1075WestElectronicsSmart Watch9$2,718
ORD-1076NorthHomeRug 5x816$688
ORD-1077SouthSportsRunning Shoes2$90
ORD-1078SouthApparelSneakers19$1,501
ORD-1079SouthApparelT-Shirt6$336

2 · Nested Column Headers

Three top-level groups — Personal, Role, Compensation — rendered via colSpan/rowSpan in the header matrix.

Employee Roster

Columns are organised under three top-level groups: Personal, Role, Compensation. Group nodes can nest recursively — the header matrix is computed from the tree depth automatically.

PersonalRoleCompensation
ID
Name
Location
Department
Level
Manager
Salary
Rating
EMP-0200Luis MartínezNYEngineeringJuniorCara Wong$68,8333.4
EMP-0201Carlos SilvaTokyoOperationsSeniorDavid Kim$121,1883.2
EMP-0202Grace DuboisLondonEngineeringMidDavid Kim$97,0024.2
EMP-0203Carlos SilvaTokyoOperationsJuniorBob Patel$64,2243.8
EMP-0205Grace DuboisLondonMarketingLeadDavid Kim$166,2294.9
EMP-0206Luis LeeSFMarketingLeadCara Wong$168,1064.5
EMP-0207Faisal SmithNYMarketingLeadAnn Lee$150,2324.9
EMP-0208Hugo SmithTokyoMarketingJuniorDavid Kim$71,2494.2
EMP-0209Grace LeeTokyoEngineeringLeadCara Wong$171,5394.2
EMP-0210Luis KhanTokyoMarketingSeniorCara Wong$119,7473.9
EMP-0212Faisal MartínezLondonEngineeringMidCara Wong$100,0024.6
EMP-0213Grace DuboisTokyoMarketingMidBob Patel$99,3663.6
EMP-0214Faisal DuboisSFSalesMidCara Wong$88,4633.4
EMP-0215Kira KhanLondonMarketingLeadAnn Lee$166,4344.3
EMP-0216Elena RossiTokyoMarketingLeadBob Patel$157,9352.9
EMP-0217Jun CostaLondonOperationsLeadCara Wong$159,7774.5
EMP-0218Hugo RossiLondonMarketingSeniorCara Wong$126,5974
EMP-0219Ben RossiTokyoOperationsJuniorDavid Kim$68,2523.4
EMP-0220Jun SilvaNYOperationsSeniorDavid Kim$119,1873
EMP-0221Hugo RossiSFOperationsMidAnn Lee$104,4873
EMP-0222Dana KhanLondonOperationsSeniorDavid Kim$119,2003.5
EMP-0223Carlos MartínezLondonOperationsJuniorAnn Lee$63,0603
EMP-0224Grace SharmaNYMarketingMidAnn Lee$98,5283.3
EMP-0225Aditi CostaLondonOperationsJuniorCara Wong$59,2663
EMP-0226Aditi LeeSFMarketingLeadBob Patel$153,8803.6
EMP-0227Jun MartínezLondonOperationsLeadBob Patel$157,7164.3
EMP-0228Hugo MartínezLondonEngineeringMidBob Patel$92,9873.7
EMP-0229Grace SmithTokyoEngineeringSeniorCara Wong$132,8084.3
EMP-0230Jun KhanTokyoOperationsJuniorCara Wong$79,9924.9
EMP-0231Aditi MartínezSFSalesJuniorBob Patel$71,6224
EMP-0232Ines RossiLondonSalesSeniorCara Wong$126,3354.6
EMP-0233Grace DuboisLondonMarketingLeadCara Wong$169,0914.7
EMP-0234Ben RossiNYMarketingSeniorCara Wong$133,6784.6
EMP-0235Ines SmithTokyoEngineeringMidAnn Lee$82,3653.4
EMP-0236Aditi CostaSFEngineeringSeniorBob Patel$134,2543.6
EMP-0237Ines SilvaSFOperationsSeniorDavid Kim$120,6283.2
EMP-0238Luis FischerNYEngineeringMidAnn Lee$84,9173.7
EMP-0239Elena SharmaSFEngineeringMidBob Patel$81,0754.5
EMP-0240Luis CostaTokyoMarketingSeniorCara Wong$138,4134.4
EMP-0241Elena DuboisNYSalesLeadCara Wong$161,4674.8
EMP-0242Faisal SharmaLondonEngineeringSeniorDavid Kim$133,3344.5
EMP-0243Kira LeeTokyoMarketingLeadBob Patel$169,8843.7
EMP-0244Ines SilvaLondonSalesLeadDavid Kim$165,5093
EMP-0245Elena MartínezTokyoOperationsJuniorAnn Lee$79,7584.2
EMP-0246Grace SilvaNYMarketingMidDavid Kim$84,8313
EMP-0247Elena DuboisLondonSalesSeniorDavid Kim$117,5562.9

3 · Multi-level Row Groups

Region → Category → orders. Each parent renders a collapsible row; per-bucket variables feed the column formats and group footers.

Region → Category Breakdown

Recursive row groups. Region groups contain Category groups, which contain the raw order rows. Each group computes its own per-bucket variables (regionTotal, categoryTotal) and renders a footer showing the aggregate. Click parent rows to collapse/expand.

Order
Date
Product
Sales Rep
Units
Revenue
% of Region
regionGroup:East
categoryGroup:Apparel
ORD-10022025-06-25T-ShirtB. Patel1$600.3%
ORD-10062025-09-29SneakersB. Patel3$2611.3%
ORD-10102025-10-13JacketD. García8$4402.2%
ORD-10152025-09-25JeansF. O'Brien9$5402.7%
ORD-10202025-05-26T-ShirtA. Chen12$9364.6%
ORD-10402025-01-12JeansC. Nguyen18$1,1885.8%
ORD-10482025-08-14JacketF. O'Brien18$1,1345.6%
ORD-10502025-07-14SneakersG. Müller4$3031.5%
ORD-10662025-04-26JacketF. O'Brien15$9604.7%
categoryGroup:Electronics
ORD-10252025-10-02Wireless BudsC. Nguyen11$3,08015.2%
ORD-10302025-05-19Wireless BudsH. Tanaka9$3,07815.2%
ORD-10722025-07-03Wireless BudsH. Tanaka5$1,2756.3%
categoryGroup:Home
ORD-10222025-02-18Throw PillowB. Patel19$7793.8%
ORD-10242025-01-26Candle SetE. Johnson2$710.3%
ORD-10272025-04-12Candle SetH. Tanaka13$7283.6%
ORD-10412025-08-06Desk LampH. Tanaka17$6973.4%
ORD-10452025-11-20Candle SetF. O'Brien20$1,1805.8%
ORD-10512025-01-20Candle SetG. Müller2$1220.6%
ORD-10742025-07-25Desk LampH. Tanaka9$4892.4%
categoryGroup:Sports
ORD-10002025-04-01Water BottleB. Patel13$6893.4%
ORD-10182025-10-17Water BottleC. Nguyen14$5882.9%
ORD-10232025-08-20Yoga MatC. Nguyen12$4322.1%
ORD-10372025-11-12Water BottleF. O'Brien12$4512.2%
ORD-10532025-05-16Water BottleD. García12$4022.0%
ORD-10632025-10-31Running ShoesA. Chen8$3921.9%
ORD-10652025-02-21Yoga MatD. García1$370.2%
regionGroup:North
categoryGroup:Apparel
ORD-10672025-09-06T-ShirtH. Tanaka12$6845.5%
categoryGroup:Electronics
ORD-10092025-05-17Smart WatchF. O'Brien4$1,39211.1%
ORD-10312025-10-04Laptop ProD. García14$3,48527.8%
ORD-10682025-01-07USB HubD. García8$2,05616.4%
categoryGroup:Home
ORD-10212025-05-21Throw PillowD. García7$2962.4%
ORD-10392025-02-22Rug 5x8D. García20$1,1809.4%
ORD-10442025-01-03Candle SetG. Müller19$7796.2%
ORD-10522025-04-25Desk LampD. García4$2281.8%
ORD-10762025-06-10Rug 5x8H. Tanaka16$6885.5%
categoryGroup:Sports
ORD-10122025-02-26Water BottleH. Tanaka12$4923.9%
ORD-10462025-08-13Yoga MatD. García16$6565.2%
ORD-10712025-07-29Water BottleF. O'Brien14$6004.8%
regionGroup:South
categoryGroup:Apparel
ORD-10072025-04-08SneakersC. Nguyen9$7383.0%
ORD-10132025-06-13JeansH. Tanaka13$9493.8%
ORD-10142025-08-18SneakersB. Patel7$4131.7%
ORD-10292025-09-01JeansF. O'Brien15$9153.7%
ORD-10422025-08-22JeansE. Johnson1$720.3%
ORD-10572025-10-24JeansB. Patel14$1,0084.1%
ORD-10602025-09-27JeansE. Johnson2$1220.5%
ORD-10642025-03-20SneakersG. Müller12$8523.4%
ORD-10782025-01-21SneakersC. Nguyen19$1,5016.1%
ORD-10792025-02-21T-ShirtA. Chen6$3361.4%
categoryGroup:Electronics
ORD-10192025-08-02Wireless BudsA. Chen15$5,89523.8%
ORD-10342025-04-23USB HubE. Johnson13$3,30213.3%
ORD-10592025-06-01Smart WatchC. Nguyen14$3,78015.3%
categoryGroup:Home
ORD-10322025-02-02Candle SetH. Tanaka13$5852.4%
ORD-10332025-09-16Throw PillowE. Johnson14$8593.5%
categoryGroup:Sports
ORD-10262025-09-25Running ShoesF. O'Brien7$3151.3%
ORD-10352025-09-12Water BottleB. Patel9$4771.9%
ORD-10492025-06-24Water BottleC. Nguyen20$7603.1%
ORD-10542025-08-08DumbbellsE. Johnson20$1,0604.3%
ORD-10692025-03-04Running ShoesB. Patel14$7142.9%
ORD-10772025-10-26Running ShoesD. García2$900.4%
regionGroup:West
categoryGroup:Apparel
ORD-10012025-07-21T-ShirtE. Johnson1$700.3%
ORD-10032025-07-16T-ShirtA. Chen5$3571.4%
ORD-10162025-03-10T-ShirtE. Johnson8$5842.2%
ORD-10472025-01-17T-ShirtC. Nguyen3$1860.7%
ORD-10612025-09-06T-ShirtF. O'Brien19$1,2924.9%
categoryGroup:Electronics
ORD-10042025-08-06Wireless BudsC. Nguyen14$4,94218.8%
ORD-10112025-01-16Smart WatchD. García15$5,07319.3%
ORD-10362025-09-12Smart WatchF. O'Brien5$1,3505.1%
ORD-10622025-06-26Laptop ProG. Müller11$3,72914.2%
ORD-10752025-05-21Smart WatchE. Johnson9$2,71810.4%
categoryGroup:Home
ORD-10082025-04-14Throw PillowA. Chen16$8883.4%
ORD-10172025-06-17Desk LampA. Chen14$8123.1%
ORD-10432025-07-07Candle SetD. García10$5001.9%
ORD-10582025-07-26Throw PillowE. Johnson9$3411.3%
ORD-10702025-01-01Rug 5x8G. Müller17$1,0374.0%
categoryGroup:Sports
ORD-10052025-04-29Yoga MatA. Chen10$4701.8%
ORD-10282025-10-04DumbbellsC. Nguyen13$6892.6%
ORD-10382025-06-17DumbbellsB. Patel4$2040.8%
ORD-10552025-11-21Yoga MatB. Patel11$5262.0%
ORD-10562025-06-19Yoga MatH. Tanaka8$2561.0%
ORD-10732025-04-29Running ShoesG. Müller6$2160.8%
Grand Total860$83,831

4 · Multi-item Cells + Click Actions

Order ids are drill-able — clicking one writes Variables.selectedOrder. Status cells use conditional formatting based on the status value.

Multi-item cells + click actions

A cell can contain multiple items (text, expression, image, field value, parameter value). Each item has a click action — link, drill (write a variable), or set-variable. Click the order id to set Variables.selectedOrder and watch the callout below update.

No row selected. Click an Order id below.

Order
Region
Product
Status
Revenue
EastWater BottleSHIPPED$689
WestT-ShirtPENDING$70
EastT-ShirtCANCELLED$60
WestT-ShirtSHIPPED$357
WestWireless BudsPAID$4,942
WestYoga MatPAID$470
EastSneakersSHIPPED$261
SouthSneakersCANCELLED$738
WestThrow PillowPENDING$888
NorthSmart WatchPAID$1,392
EastJacketPAID$440
WestSmart WatchPAID$5,073
NorthWater BottlePAID$492
SouthJeansPAID$949
SouthSneakersPAID$413
EastJeansREFUNDED$540
WestT-ShirtCANCELLED$584
WestDesk LampPAID$812
EastWater BottleSHIPPED$588
SouthWireless BudsPAID$5,895
EastT-ShirtPAID$936
NorthThrow PillowSHIPPED$296
EastThrow PillowPAID$779
EastYoga MatPAID$432
EastCandle SetPAID$71
EastWireless BudsPAID$3,080
SouthRunning ShoesSHIPPED$315
EastCandle SetCANCELLED$728
WestDumbbellsSHIPPED$689
SouthJeansCANCELLED$915
EastWireless BudsPENDING$3,078
NorthLaptop ProCANCELLED$3,485
SouthCandle SetPAID$585
SouthThrow PillowPAID$859
SouthUSB HubCANCELLED$3,302
SouthWater BottlePAID$477
WestSmart WatchPAID$1,350
EastWater BottlePAID$451
WestDumbbellsPENDING$204
NorthRug 5x8PENDING$1,180
EastJeansSHIPPED$1,188
EastDesk LampCANCELLED$697
SouthJeansPAID$72
WestCandle SetPAID$500
NorthCandle SetSHIPPED$779
EastCandle SetREFUNDED$1,180
NorthYoga MatREFUNDED$656
WestT-ShirtCANCELLED$186
EastJacketPAID$1,134
SouthWater BottleSHIPPED$760
EastSneakersPAID$303
EastCandle SetPAID$122
NorthDesk LampCANCELLED$228
EastWater BottlePENDING$402
SouthDumbbellsPAID$1,060
WestYoga MatPAID$526
WestYoga MatPAID$256
SouthJeansSHIPPED$1,008
WestThrow PillowPENDING$341
SouthSmart WatchPAID$3,780
SouthJeansSHIPPED$122
WestT-ShirtPENDING$1,292
WestLaptop ProPAID$3,729
EastRunning ShoesPAID$392
SouthSneakersREFUNDED$852
EastYoga MatPAID$37
EastJacketSHIPPED$960
NorthT-ShirtPAID$684
NorthUSB HubPAID$2,056
SouthRunning ShoesPAID$714
WestRug 5x8PAID$1,037
NorthWater BottlePAID$600
EastWireless BudsREFUNDED$1,275
WestRunning ShoesPAID$216
EastDesk LampPENDING$489
WestSmart WatchSHIPPED$2,718
NorthRug 5x8CANCELLED$688
SouthRunning ShoesREFUNDED$90
SouthSneakersREFUNDED$1,501
SouthT-ShirtPENDING$336

6 · Pivot Mode

Region rows × Category columns × Sum(revenue). The renderer builds the column matrix from the data at render time.

Pivot mode

Set pivotMode to true and specify the row, column, value fields, and the aggregation. Here: Region rows × Category columns × Sum of revenue. The renderer builds the column matrix from the distinct values seen in the data.

regionApparelElectronicsHomeSports
East5822743340662991
West24891781235782361
South69061297714443416
North684693331711748

Notes

  • Column tree is canonical. The flat columns and columnGroups arrays are kept in sync alongside it for fast lookups. When writing programmatically, update columnTreeand derive the mirrors via columnTreeToLegacy.
  • Row-group engine applies dataset → filter → sort → keys → variables in that order. Keys can be an array for multi-key grouping. Variables are computed per bucket and cached.
  • Conditional format firing order: first match wins. Put the most specific rules first. A conditional format can set backgroundColor, textColor, fontWeight, fontStyle.
  • Drill-through writes Variables, never Parameters. This is a hard architectural rule — click actions inside the viewer can freely set Variables; Parameters only change via the parameter-panel Apply button.