You're viewing the legacy site. Visit cxjs.io/docs for the latest documentation. Legacy site. Visit cxjs.io/docs for new docs.
Home Docs Gallery Fiddle
versionCodeSandbox

Documentation

IntroConceptsWidgetsChartsExamples
Form
Validation OptionsCustom Lookup BindingsInfinite Lookup ListLookup Options FilterLookup Options GroupingMulti File Upload
Form
List
Grouping
List
Grid
Searching and FilteringPaginationMultiple SelectionGroupingDynamic GroupingColumn ResizingColumn ReorderingFixed ColumnsComplex HeadersHeader MenuForm EditingInline EditingCell EditingRow EditingRow ExpandingRow Drag & DropBufferingInfinite ScrollingTree GridStateful Tree GridDynamic Columns
Grid
Charts
Complex LabelsCalculated HeightStacked Line ChartBullet ChartMulti-level Pie ChartBars + Grid SelectionStacked BarsTimelineColumn + Grid SelectionNormalized ColumnsStacked ColumnsAuto-sized ColumnsScrollable Bars
Charts
Report Edit

Column Reordering

Grid columns can be dragged & dropped.

Drag & drop column here to remove it from the grid
Date
Name
Continent
Browser
OS
Visits
05/13/2026Cassidy KreigerAfricaFirefoxMac OS14
07/23/2026Julianne JohnsonAfricaInternet ExplorerUbuntu65
05/23/2026Edmund KuhlmanAfricaEdgeMac OS56
05/21/2026Junior WeissnatAsiaSafariUbuntu12
06/27/2026Declan BeckerAustraliaChromeUbuntu9
06/20/2026Ines SkilesSouth AmericaOperaUbuntu69
05/22/2026Maryjane AufderharAustraliaInternet ExploreriOS52
06/26/2026Adolfo TremblayAfricaInternet ExploreriOS64
07/26/2026Emelie BogisichAfricaFirefoxMac OS69
05/25/2026Sandrine WisokySouth AmericaSafariUbuntu94
08/10/2026Wyman DavisAfricaOperaMac OS73
08/09/2026Pansy StammSouth AmericaSafariiOS80
06/27/2026Carmela MannAsiaChromeWindows47
06/15/2026Amely LubowitzAustraliaOperaUbuntu74
06/11/2026Wilma SchmidtAfricaOperaiOS23
08/06/2026Jerod FayAntarcticaFirefoxMac OS70
08/06/2026Prudence HegmannAsiaInternet ExplorerUbuntu55
06/05/2026Maynard BaumbachAfricaOperaUbuntu53
07/19/2026Carolyn GloverAustraliaFirefoxMac OS80
05/11/2026Adella DaughertyAfricaEdgeiOS85
06/27/2026Reymundo LindgrenAfricaSafariWindows21
07/06/2026Mikel CorkeryEuropeOperaAndroid16
08/07/2026Raphael KubAsiaInternet ExplorerAndroid60
06/23/2026Rylee ParkerAustraliaInternet ExplorerUbuntu97
07/01/2026Queenie ReichertAustraliaEdgeMac OS22
06/14/2026Rico RunolfsdottirAustraliaSafariMac OS33
08/15/2026Theron CorkeryNorth AmericaInternet ExplorerMac OS10
05/12/2026Tre BergeAustraliaChromeMac OS43
07/15/2026Deshaun BoyerSouth AmericaInternet ExplorerUbuntu91
07/28/2026Odell StromanAsiaEdgeMac OS39
07/18/2026Roselyn AufderharAfricaEdgeWindows89
06/30/2026Mara SchmelerAsiaOperaUbuntu10
07/13/2026Cassidy KuhicAustraliaFirefoxUbuntu56
07/09/2026Ezra BeierAsiaInternet ExplorerAndroid55
07/10/2026Wilfredo RippinNorth AmericaChromeAndroid43
07/30/2026Garett SchowalterAustraliaFirefoxUbuntu36
07/15/2026Emily KeeblerNorth AmericaChromeMac OS5
07/20/2026Bud KingEuropeEdgeiOS30
05/15/2026Lempi TreutelSouth AmericaSafariWindows45
08/13/2026Newell StammSouth AmericaEdgeMac OS35
06/30/2026Daron HermanNorth AmericaSafariMac OS74
06/04/2026Krystina RutherfordSouth AmericaInternet ExplorerMac OS45
06/12/2026Dane GislasonSouth AmericaChromeUbuntu56
06/25/2026Morton HomenickAfricaOperaiOS40
05/12/2026Hermann RolfsonNorth AmericaSafariMac OS8
05/23/2026Armand DenesikEuropeChromeWindows29
07/25/2026Rusty BergeAntarcticaChromeMac OS4
08/10/2026Lila ReillyAfricaFirefoxAndroid26
06/04/2026Braulio WelchAustraliaFirefoxAndroid15
05/24/2026Theron HuelsAsiaSafariMac OS7
05/14/2026Arthur ReichelAntarcticaEdgeWindows54
05/29/2026Blaise WindlerSouth AmericaFirefoxWindows21
05/28/2026Eloisa BreitenbergAustraliaFirefoxWindows70
07/07/2026Rubye SchinnerSouth AmericaEdgeUbuntu13
08/08/2026Gwendolyn BoyerAsiaSafariiOS6
07/27/2026Melyna SchillerAntarcticaInternet ExplorerUbuntu8
06/19/2026Michele HarveySouth AmericaInternet ExplorerUbuntu11
06/18/2026Lois WolfAustraliaInternet ExplorerAndroid73
05/13/2026Enos ZemlakAfricaInternet ExplorerMac OS28
08/02/2026Winona UllrichAfricaEdgeiOS79
Date
Name
Continent
Browser
OS
Visits

To allow dragging grid column around, set draggable to true on each column.

There are two parts required to implement column reordering. The first part is dynamic column generation. The onGetColumns callback method is invoked whenever columnParams change (in this example it's bound to $page.columnOrder) and it should return the list of columns to be displayed. The list should be in the same format as when assigned to the columns property. It's important to set a unique key for each column so that grid can correctly associate column meta data (such as column width) and restore it on each configuration change.

The other part is implementing column drag & drop using onColumnDropTest and onColumnDrop callbacks. The onColumnDropTest checks if the dragged object contains information required to make a successful column drop. The logic for changing columns is implemented in onColumnDrop. In this example, columnOrder and unusedColumns are modified and after that the grid automatically reflects the updated configuration.

<Grid
    records-bind="$page.records"
    mod="fixed-layout"
    scrollable
    buffered
    style="height: 500px;"
    lockColumnWidths
    columnParams-bind="$page.columnOrder"
    onGetColumns={(columnOrder) => columnOrder.map((key) => allColumns.find((c) => c.key == key))}
    onColumnDropTest={(e, instance) =>
        (e.source.type == "grid-column" && e.source.gridInstance == instance) ||
        e.source?.data.type == "unused-column"
    }
    onColumnDrop={(e, { store }) => {
        let key = e.source.type == "grid-column" ? e.source.column.key : e.source.data.key;
        let { index } = e.target;
        let columnOrder = store.get("$page.columnOrder");
        let at = columnOrder.indexOf(key);
        let result = columnOrder.filter((c) => c != key);
        if (at >= 0 && at < index) index--;
        result = insertElement(result, index, key);
        store.set("$page.columnOrder", result);
        store.update("$page.unusedColumns", (unused) => unused.filter((c) => c != key));
    }}
/>
Copied!Cx Fiddle