read only grid

Question

can someone suggest how to implement like this table in the interface. displaying headers only not getting.

Mike Schmitt · Answer

Generally instead of trying to re-invent the wheel, I'd suggest one of 2 potential approaches here (both being a compromise from your original design but accomplishing *most* of it) 
 
 just add the discrete columns, and make the names slightly more "wordy". Instead of "Avg" and "Max" under the combined column "amount", just have "avg amount" / "max amount", and so-on for the other "combined" columns 
 alternatively, add only the "combined" column headers, and put both values for that row in the same cell, utilizing Rich Text and some formatting, it can look really nice - so for the "Amount" column, the row-cell will have 2 lines, saying i.e. "Avg: 63546", then "Max: 7465". This version works and looks great (from having done similar myself in the past), with the caveat that it isn't really sortable.

Mike Schmitt · Answer

Here's a self-contained proof of concept that reproduces your original data set pretty much 1:1 -- 
 
 a!localVariables(
 local!myData: {
 {
 name: "abc",
 customer: "parle",
 avgAmount: 63546,
 maxAmount: 2465,
 avgMM: 363,
 maxMM: 6575,
 avgBond: 6,
 maxBond: 9,
 avgInvest: 24723,
 maxInvest: 76435
 },
 {
 name: "xyz",
 customer: "samsung",
 avgAmount: 438534,
 maxAmount: 7345,
 avgMM: 57683,
 maxMM: 7534,
 avgBond: 4,
 maxBond: 5,
 avgInvest: 7384,
 maxInvest: 45554
 },
 },
 
 a!sectionLayout(
 contents: {
 a!gridField(
 data: local!myData,
 spacing: "DENSE",
 columns: {
 a!gridColumn(
 label: "Name",
 value: fv!row.name
 ),
 a!gridColumn(
 label: "Customer",
 value: fv!row.customer
 ),
 a!gridColumn(
 label: "Amount",
 value: a!richTextDisplayField(
 value: {
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Avg: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.avgAmount
 }
 ),
 char(10),
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Max: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.maxAmount
 }
 )
 }
 )
 ),
 a!gridColumn(
 label: "Money Market",
 value: a!richTextDisplayField(
 value: {
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Avg: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.avgMM
 }
 ),
 char(10),
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Max: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.maxMM
 }
 )
 }
 )
 ),
 a!gridColumn(
 label: "Bond",
 value: a!richTextDisplayField(
 value: {
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Avg: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.avgBond
 }
 ),
 char(10),
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Max: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.maxBond
 }
 )
 }
 )
 ),
 a!gridColumn(
 label: "Investment",
 value: a!richTextDisplayField(
 value: {
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Avg: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.avgInvest
 }
 ),
 char(10),
 a!richTextItem(
 text: {
 a!richTextItem(
 text: "Max: ",
 size: "SMALL",
 style: "STRONG"
 ),
 fv!row.maxInvest
 }
 )
 }
 )
 ),

}
 )
 }
 )
)

read only grid

Top Replies