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 | |
|---|---|---|---|---|---|
| Catherine Beatty | Asia | Firefox | Android | 73 | |
| Lorena Witting | Africa | Safari | Android | 10 | |
| Lilly Kozey | South America | Safari | Mac OS | 91 | |
| Joany Kessler | Asia | Opera | Mac OS | 2 | |
| Sam Cronin | Asia | Firefox | Mac OS | 98 | |
| Addie Jast | North America | Chrome | Ubuntu | 66 | |
| Delbert Mayert | Asia | Firefox | Ubuntu | 91 | |
| Gideon Russel | Europe | Internet Explorer | Windows | 12 | |
| Benedict Stark | South America | Opera | Ubuntu | 46 | |
| Lewis Feest | Africa | Opera | Windows | 46 | |
| Kevon Volkman | Antarctica | Internet Explorer | Android | 71 | |
| Nyah Conroy | Asia | Firefox | Mac OS | 48 | |
| Hilma Zemlak | North America | Firefox | Windows | 29 | |
| Trenton Parisian | Australia | Safari | Windows | 78 | |
| Liliane Sawayn | Europe | Edge | Ubuntu | 48 | |
| Frederick Gottlieb | Antarctica | Internet Explorer | Windows | 45 | |
| Isidro Kunde | Europe | Edge | Mac OS | 34 | |
| Peyton McCullough | South America | Firefox | iOS | 50 | |
| Mckenna Pouros | North America | Opera | Ubuntu | 68 | |
| Hillary Champlin | North America | Edge | Ubuntu | 12 |
<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>
}]
}
}}
/>