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 | |
|---|---|---|---|---|---|
| Ana Windler | Africa | Safari | Ubuntu | 82 | |
| Cleta Mraz | Asia | Firefox | Mac OS | 34 | |
| Palma Gaylord | Africa | Internet Explorer | Mac OS | 31 | |
| Jarred Miller | Antarctica | Safari | Android | 20 | |
| Brycen Morar | Asia | Internet Explorer | Mac OS | 32 | |
| Maxwell Monahan | North America | Opera | Android | 67 | |
| Daphney Mante | North America | Opera | iOS | 54 | |
| Marley Rath | South America | Opera | Mac OS | 42 | |
| Shemar Leuschke | Asia | Firefox | Android | 26 | |
| Eliane Boehm | Antarctica | Firefox | Mac OS | 97 | |
| Laisha Howell | Africa | Chrome | Windows | 33 | |
| Natasha Lemke | North America | Edge | Android | 98 | |
| Candida Nicolas | Asia | Opera | Windows | 65 | |
| Helga Hilpert | Europe | Edge | Ubuntu | 17 | |
| Clinton Wilkinson | Australia | Opera | Ubuntu | 39 | |
| Lulu Pagac | South America | Opera | Windows | 6 | |
| Florida Aufderhar | Australia | Chrome | Ubuntu | 4 | |
| Lulu Schulist | North America | Firefox | Mac OS | 41 | |
| Nils Kuvalis | Antarctica | Opera | Mac OS | 36 | |
| Curt Reynolds | South America | Firefox | Ubuntu | 69 |
<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>
}]
}
}}
/>