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 | |
|---|---|---|---|---|---|
| Sheldon Wiza | Asia | Opera | Windows | 88 | |
| Yazmin Feil | North America | Opera | Android | 20 | |
| Mafalda Bernhard | Europe | Firefox | Ubuntu | 59 | |
| Roscoe Ondricka | Europe | Edge | Ubuntu | 75 | |
| Mary DuBuque | Africa | Internet Explorer | Mac OS | 90 | |
| Kristina Cormier | Africa | Edge | Mac OS | 62 | |
| Barry Kulas | Europe | Chrome | Windows | 81 | |
| Eloisa Toy | North America | Opera | Android | 10 | |
| Cleve Langosh | South America | Chrome | Mac OS | 12 | |
| Griffin Weimann | Antarctica | Opera | iOS | 88 | |
| Kailyn Dickinson | Asia | Internet Explorer | iOS | 33 | |
| Earnest Grant | South America | Chrome | iOS | 30 | |
| Horacio Murazik | Europe | Internet Explorer | Mac OS | 17 | |
| Carolyne Gorczany | North America | Opera | Windows | 42 | |
| Brenna Hintz | Asia | Opera | iOS | 67 | |
| Carroll Murray | North America | Firefox | Windows | 78 | |
| Abigayle Runolfsson | Australia | Internet Explorer | Ubuntu | 60 | |
| Abigail Hills | Australia | Opera | iOS | 9 | |
| Pierce Cormier | South America | Opera | Mac OS | 35 | |
| Tabitha Kiehn | Europe | Edge | Mac OS | 22 |
<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>
}]
}
}}
/>