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
08/08/2026Torrance WisozkAfricaInternet ExplorerWindows16
08/17/2026Demarco StrosinNorth AmericaOperaWindows92
06/28/2026Isidro ConroyAustraliaFirefoxMac OS93
09/01/2026Lonzo ReynoldsAustraliaSafariWindows87
08/20/2026Hilbert WildermanAustraliaInternet ExplorerAndroid5
07/21/2026Rylan EffertzEuropeSafariUbuntu73
08/20/2026Gerald GradyAfricaEdgeWindows28
08/15/2026Bria PollichSouth AmericaInternet ExplorerUbuntu19
08/16/2026Rosie MillsSouth AmericaOperaMac OS92
07/12/2026Violet RohanEuropeSafariUbuntu20
08/06/2026Ana KerlukeNorth AmericaFirefoxAndroid15
08/17/2026Torrey MillerAsiaInternet ExplorerUbuntu9
07/27/2026Pete DachNorth AmericaInternet ExplorerMac OS93
07/21/2026Julianne BoyleSouth AmericaOperaMac OS65
08/25/2026Jocelyn GutkowskiAntarcticaFirefoxAndroid64
08/23/2026Arianna RodriguezAsiaSafariUbuntu84
07/20/2026Frankie HermannNorth AmericaOperaAndroid22
08/30/2026Vickie StrosinNorth AmericaInternet ExplorerWindows14
09/17/2026Amos RennerAfricaFirefoxUbuntu89
09/22/2026Troy DonnellyAfricaFirefoxWindows11
09/27/2026Clotilde LindgrenAntarcticaInternet ExplorerWindows90
07/17/2026Paul NikolausAustraliaInternet ExplorerAndroid43
07/20/2026Kay RobelEuropeOperaWindows26
08/28/2026Jamie KozeyAustraliaFirefoxWindows51
09/06/2026Ayla BeierNorth AmericaOperaiOS40
09/07/2026Hillary CrooksAfricaEdgeMac OS74
08/30/2026Arnoldo SchroederNorth AmericaOperaiOS97
07/03/2026Enoch ZboncakAfricaSafariMac OS62
07/30/2026Deangelo MuellerNorth AmericaInternet ExplorerAndroid100
08/07/2026Lula SauerAfricaEdgeAndroid68
07/26/2026Jessy SchmittAfricaChromeMac OS30
09/06/2026Wilburn BinsNorth AmericaFirefoxWindows74
09/02/2026Robbie FraneckiAustraliaFirefoxiOS22
09/26/2026Rubye WalshAsiaEdgeWindows75
06/29/2026Esperanza MorissetteAsiaFirefoxUbuntu27
09/20/2026Albina ReillyAustraliaOperaMac OS89
08/11/2026Breanne EffertzAsiaFirefoxUbuntu77
07/03/2026Kenny BernierAustraliaFirefoxiOS32
08/11/2026Elenor HayesAntarcticaEdgeUbuntu43
07/07/2026Marcelino BoyerAustraliaFirefoxMac OS98
08/25/2026Idella KreigerAsiaInternet ExplorerAndroid54
06/28/2026Gudrun CollinsEuropeSafariUbuntu3
08/17/2026Serenity JacobiAsiaOperaMac OS79
07/26/2026Milford MorissetteAustraliaInternet ExplorerWindows97
07/06/2026Gabriel SchadenNorth AmericaEdgeAndroid73
09/12/2026Bella AufderharAfricaSafariMac OS35
07/09/2026Celia BernhardSouth AmericaSafariMac OS45
07/25/2026Andres HickleAustraliaOperaMac OS13
09/11/2026Cleve ToyAfricaFirefoxUbuntu64
08/27/2026Aileen JacobiNorth AmericaOperaAndroid20
07/14/2026General HirtheNorth AmericaChromeUbuntu21
08/16/2026Keon StokesAustraliaInternet ExplorerMac OS98
09/06/2026Emmy LueilwitzNorth AmericaOperaiOS33
09/24/2026Jayme TurcotteAustraliaSafariUbuntu24
07/07/2026Brad TillmanAustraliaFirefoxUbuntu11
08/14/2026Cassandre LubowitzSouth AmericaEdgeAndroid52
08/08/2026Rodrick CarrollAfricaFirefoxWindows83
09/19/2026Orlo CruickshankAsiaInternet ExploreriOS63
08/07/2026Oscar RauEuropeEdgeAndroid35
09/10/2026Marilie WisokyAustraliaOperaUbuntu99
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