Grid with Row Expanding
Grid supports rendering rows in multiple lines. Lines can be shown or hidden which is convenient for implementing drill-downs and on demand content. Click on the search icon to expand the grid header with search controls. Click on the arrows to expand individual rows. Please note that search is not implemented in this example.
| Name | Continent | Browser | OS | Visits | |
|---|---|---|---|---|---|
| Vella Stokes | Asia | Internet Explorer | Android | 33 | |
| Vanessa Douglas | Australia | Safari | Ubuntu | 36 | |
| Arjun Lindgren | South America | Opera | Ubuntu | 96 | |
| Giovanny Macejkovic | North America | Firefox | Ubuntu | 22 | |
| Cindy Gerhold | Australia | Safari | Android | 82 | |
| Raina Ebert | Europe | Internet Explorer | Mac OS | 31 | |
| Kim Jewess | Africa | Chrome | Ubuntu | 4 | |
| Monte Pacocha | Africa | Safari | Mac OS | 85 | |
| Skylar Cremin | Australia | Opera | Android | 15 | |
| Marcelo Pacocha | North America | Edge | Ubuntu | 33 | |
| Mariane Ebert | North America | Safari | Windows | 28 | |
| Kariane Bergstrom | Africa | Edge | Windows | 41 | |
| Monica Hodkiewicz | Africa | Chrome | Android | 49 | |
| Andrew Mante | South America | Firefox | iOS | 41 | |
| Darby Rau | Europe | Internet Explorer | Ubuntu | 18 | |
| Asha Hettinger | Australia | Safari | Mac OS | 41 | |
| Emelie Abshire | Africa | Firefox | Mac OS | 11 | |
| Elvie Hamill | North America | Internet Explorer | Ubuntu | 43 | |
| Rita Rippin | Asia | Opera | Ubuntu | 68 | |
| Tiara Boyle | Africa | Internet Explorer | Ubuntu | 78 |
<Grid
records-bind="$page.records"
lockColumnWidths
cached
row={{
style: {
background: {expr: "{$record.showDescription} ? '#fff7e6' : null"}
},
line1: {
columns: [
{
header: "Name",
field: "fullName",
sortable: true
},
{
header: "Continent",
field: "continent",
sortable: true
},
{
header: "Browser",
field: "browser",
sortable: true
},
{
header: "OS",
field: "os",
sortable: true
},
{
header: "Visits",
field: "visits",
sortable: true,
align: "right"
}, {
header: {
items: <cx>
<cx>
<Button
mod="hollow"
icon="search"
onClick={(e, {store}) => {
store.toggle('$page.showGridFilter');
}}
/>
</cx>
</cx>
},
align: "center",
items: <cx>
<cx>
<Button
mod="hollow"
icon="drop-down"
onClick={(e, {store}) => {
store.toggle('$record.showDescription');
}}
/>
</cx>
</cx>
}
]
},
line2: {
showHeader: { expr: '!!{$page.showGridFilter}' },
visible: false,
columns: [
{
header: {
items: <cx>
<TextField
value-bind="$page.filter.fullName"
style="width: 100%"
autoFocus
/>
</cx>
}
},
{
header: {
items: <cx>
<TextField
value-bind="$page.filter.continent"
style="width: 100%"
/>
</cx>
}
},
{
header: {
items: <cx>
<TextField
value-bind="$page.filter.browser"
style="width: 100%"
/>
</cx>
}
},
{
header: {
items: <cx>
<TextField
value-bind="$page.filter.os"
style="width: 100%"
/>
</cx>
}
},
{
header: {
items: <cx>
<NumberField
value-bind="$page.filter.visits"
style="width: 100%"
inputStyle="text-align: right"
/>
</cx>
}
}, {
header: {
align: 'center',
items: <cx>
<cx>
<Button
mod="hollow"
icon="close"
onClick={(e, {store}) => {
store.toggle('$page.showGridFilter');
}}
/>
</cx>
</cx>
}
}
]
},
line3: {
visible: {expr: "{$record.showDescription}"},
columns: [{
colSpan: 1000,
style: 'border-top-color: rgba(0, 0, 0, 0.05)',
items: <cx>
<Svg style="width:100%px; height:400px;">
<Chart offset="20 -10 -40 40"
axes={{x: {type: NumericAxis}, y: {type: NumericAxis, vertical: true}}}>
<Gridlines/>
<LineGraph data-bind="$record.points" colorIndex={8}/>
</Chart>
</Svg>
</cx>
}]
}
}}
/>