You're viewing the legacy site. Visit cxjs.io/docs for the latest documentation. Legacy site. Visit cxjs.io/docs for new docs.

Documentation

Report Edit

Dynamic Grouping in Grids

Grid control supports multiple levels of grouping and aggregation.

Group by:
 
NameContinentBrowserOSVisits
Vincenza CreminAfricaOperaiOS37
Guido MarksNorth AmericaInternet ExplorerUbuntu58
Grayson BayerSouth AmericaChromeAndroid22
Carey KerlukeSouth AmericaFirefoxAndroid97
Ebba OberbrunnerEuropeEdgeMac OS52
Linda DurganAsiaInternet ExplorerMac OS84
Bernice CollierAfricaSafariiOS22
Samanta KemmerNorth AmericaInternet ExplorerMac OS89
Johnathan FisherSouth AmericaFirefoxWindows84
Micah ConroySouth AmericaEdgeUbuntu78
Titus HahnEuropeOperaiOS14
Cloyd StrackeAsiaFirefoxWindows55
Addison MacejkovicSouth AmericaEdgeUbuntu96
Juwan WillmsAntarcticaEdgeMac OS11
Filomena KozeyAntarcticaFirefoxAndroid64
Lavina BartellEuropeFirefoxAndroid34
Triston CasperSouth AmericaOperaMac OS45
Cecelia KoelpinAntarcticaChromeUbuntu94
Candace CummingsAfricaSafariAndroid66
Alphonso GreenSouth AmericaSafariUbuntu1
Lina ReichertEuropeFirefoxMac OS80
Queen WestNorth AmericaSafariMac OS11
Skylar GrahamSouth AmericaFirefoxAndroid82
Glen EmmerichAsiaOperaMac OS22
Raina CummingsNorth AmericaOperaAndroid43
Karolann HermannAfricaOperaiOS85
Clarissa GusikowskiAsiaEdgeAndroid65
Trevor FadelAsiaFirefoxiOS49
Ibrahim PowlowskiAfricaOperaWindows64
Clotilde LangworthSouth AmericaOperaWindows84
Durward RaynorNorth AmericaSafariUbuntu100
Nick RoweSouth AmericaEdgeMac OS71
Holden GleichnerNorth AmericaSafariUbuntu99
Loren TremblayAustraliaOperaAndroid92
Deonte SchadenAsiaChromeUbuntu22
Chelsey WardAustraliaSafariiOS40
Dianna GoodwinAsiaEdgeAndroid69
Zola BraunNorth AmericaFirefoxWindows22
Leta RomagueraAfricaFirefoxiOS99
Lavern LarsonAustraliaEdgeiOS90
Armando JastAntarcticaFirefoxAndroid10
Gavin MorissetteEuropeSafariMac OS9
Elroy LubowitzAfricaOperaUbuntu9
Oran GibsonNorth AmericaOperaiOS69
Kristina PfefferAustraliaFirefoxMac OS64
Keenan WeimannAustraliaSafariMac OS61
Kameron ShanahanAsiaSafariWindows60
Hubert MayertAustraliaFirefoxMac OS67
Hyman KonopelskiNorth AmericaSafariMac OS3
Rene HermannAsiaInternet ExplorerWindows64
Adolph HahnAsiaInternet ExplorerAndroid36
Derick HettingerSouth AmericaChromeUbuntu11
Pearl BatzSouth AmericaFirefoxMac OS87
Raymundo MohrSouth AmericaOperaMac OS41
Rodger KerlukeNorth AmericaInternet ExploreriOS90
Harrison SwiftAustraliaFirefoxWindows60
Tressa NicolasAsiaChromeAndroid7
Gino HermanAustraliaOperaiOS36
Ladarius KossAustraliaFirefoxiOS39
Gail CrooksAustraliaFirefoxMac OS9
Sandra DibbertAntarcticaOperaUbuntu97
Loyal ShieldsAfricaChromeAndroid63
Brook HesselAntarcticaFirefoxWindows28
Kristofer WhiteAntarcticaOperaUbuntu50
Lemuel BoyleSouth AmericaChromeUbuntu85
Bennie AbernathyAfricaInternet ExplorerUbuntu31
Isac RoweAfricaFirefoxiOS76
Audreanne MurrayAustraliaOperaUbuntu52
Casper KassulkeSouth AmericaFirefoxMac OS78
Oma GloverNorth AmericaOperaUbuntu66
Pauline MuellerAfricaSafariAndroid87
Stanley DibbertAsiaOperaiOS27
Joyce SchultzAustraliaChromeUbuntu37
Sheldon JacobsonSouth AmericaSafariiOS83
Favian TurnerAsiaOperaMac OS15
Imogene OkunevaSouth AmericaOperaWindows76
Julie StehrNorth AmericaInternet ExplorerMac OS90
Nigel MonahanAsiaOperaUbuntu33
Hunter RoobAfricaSafariMac OS12
Austin MayertAustraliaOperaUbuntu72
German KovacekAntarcticaInternet ExplorerUbuntu78
Fern PowlowskiSouth AmericaSafariMac OS30
Isidro HyattAustraliaSafariiOS6
Cornelius BinsSouth AmericaOperaiOS17
Lafayette RobertsSouth AmericaSafariWindows2
Mikayla AuerSouth AmericaFirefoxMac OS35
Amaya FriesenSouth AmericaSafariUbuntu11
Lukas PourosAsiaFirefoxWindows14
Kieran BrownAustraliaFirefoxWindows52
Ayden FeestAfricaSafariiOS78
Maurice BogisichSouth AmericaSafariiOS51
Duncan LuettgenAntarcticaChromeMac OS24
Omer PurdyAfricaInternet ExplorerMac OS62
Weldon SchmittAntarcticaInternet ExplorerAndroid52
Aglae LeannonAustraliaInternet ExplorerAndroid84
Ressie GoldnerNorth AmericaSafariMac OS7
Harmony StantonNorth AmericaSafariWindows55
Retta MullerSouth AmericaChromeUbuntu48
Bradford WalkerNorth AmericaInternet ExplorerUbuntu81
Josiane AltenwerthAustraliaChromeMac OS22
100 items7 continents6 browsers5 OSes5191
ControllerIndex
<div style="margin-bottom: 10px" ws>
    Group by:
    <LookupField
        records-bind="$page.grouping"
        options-bind="$page.groupableFields"
        multiple={true}
    />
</div>

<Grid
    records-bind='$page.records'
    style={{width: "100%"}}
    groupingParams-bind="$page.grouping"
    onGetGrouping={(groupingParams) => [
        {key: {}, showFooter: true},
        ...(groupingParams || []).map(x => x.id)
    ]}
    columns={[{
        header: 'Name',
        field: 'fullName',
        sortable: true,
        aggregate: 'count',
        footer: {expr: '({$group.$level} > 1 ? {$group.$name:s|TOTAL} + " - " : "") + {$group.fullName} + " " + {$group.fullName:plural;item}'}
    }, {
        header: 'Continent',
        field: 'continent',
        sortable: true,
        aggregate: 'distinct',
        aggregateAlias: 'continents',
        footer: {tpl: '{$group.continents} {$group.continents:plural;continent}'}
    }, {
        header: 'Browser',
        field: 'browser',
        sortable: true,
        aggregate: 'distinct',
        aggregateAlias: 'browsers',
        footer: {tpl: '{$group.browsers} {$group.browsers:plural;browser}'}
    }, {
        header: 'OS',
        field: 'os',
        sortable: true,
        aggregate: 'distinct',
        aggregateAlias: 'oss',
        footer: {tpl: '{$group.oss} {$group.oss:plural;OS}'}
    }, {
        header: 'Visits',
        field: 'visits',
        sortable: true,
        aggregate: "sum",
        align: "right"
    }]}
/>
Copied!Cx Fiddle