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 | |
|---|---|---|---|---|---|
| Victor Fadel | Asia | Internet Explorer | Ubuntu | 22 | |
| Tyrell Weissnat | South America | Edge | Ubuntu | 20 | |
| Stanford Roberts | South America | Firefox | Ubuntu | 41 | |
| Icie Medhurst | Asia | Firefox | Windows | 74 | |
| Alayna Von | Asia | Safari | Windows | 60 | |
| Nellie Lesch | Africa | Safari | Mac OS | 84 | |
| Irving Schowalter | North America | Opera | Mac OS | 20 | |
| Tremayne Larson | South America | Opera | Android | 62 | |
| Cristal Ferry | Antarctica | Opera | iOS | 88 | |
| Yadira Streich | Australia | Firefox | Android | 89 | |
| Joshua Ebert | South America | Edge | Android | 29 | |
| Michael Schroeder | Europe | Internet Explorer | Mac OS | 94 | |
| Lloyd Cassin | Australia | Edge | Windows | 46 | |
| Christy Stehr | Australia | Safari | Windows | 11 | |
| Cristal Grimes | Australia | Opera | Ubuntu | 9 | |
| Noelia Schaden | Australia | Safari | Android | 45 | |
| Cleta Kuphal | South America | Chrome | Mac OS | 37 | |
| Larue Oberbrunner | Australia | Chrome | Mac OS | 31 | |
| Bridget Gulgowski | Australia | Internet Explorer | Windows | 78 | |
| Karlee Balistreri | Africa | Firefox | Android | 51 |
<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>
}]
}
}}
/>