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/04/2026Caleb DietrichSouth AmericaSafariiOS86
06/11/2026Darwin JerdeAustraliaFirefoxMac OS93
06/24/2026Bell KeelingAntarcticaOperaAndroid86
05/15/2026Bennie KiehnAustraliaOperaWindows50
06/14/2026Mariane MarksAntarcticaOperaAndroid88
04/25/2026Ivah HowellAfricaEdgeMac OS29
04/13/2026Aletha HammesSouth AmericaOperaWindows60
06/23/2026Therese JacobsSouth AmericaInternet ExplorerAndroid100
04/23/2026Imogene GibsonNorth AmericaFirefoxUbuntu39
03/26/2026Maria OsinskiSouth AmericaFirefoxUbuntu96
06/13/2026Jadyn WillmsAustraliaOperaAndroid5
05/20/2026Loyce KohlerNorth AmericaFirefoxAndroid63
04/30/2026Thora PagacAntarcticaFirefoxUbuntu93
06/30/2026Ryann McCulloughSouth AmericaChromeAndroid79
04/10/2026Buck MarvinAustraliaEdgeWindows37
04/11/2026Domenic KleinAfricaSafariAndroid94
04/09/2026Ally VonRuedenAfricaOperaMac OS31
06/28/2026Lowell LangoshAsiaSafariMac OS34
04/27/2026Romaine GusikowskiNorth AmericaSafariAndroid69
06/30/2026Stephan SchinnerSouth AmericaOperaWindows88
04/01/2026Lenore AltenwerthAustraliaChromeMac OS13
07/03/2026Connor RiceAfricaEdgeAndroid94
03/31/2026Helmer KovacekSouth AmericaChromeiOS59
03/27/2026Chelsey BeckerSouth AmericaFirefoxWindows74
04/26/2026Earlene DachAsiaOperaAndroid26
06/22/2026Freddy BauchAfricaInternet ExploreriOS90
04/09/2026Jacey KleinSouth AmericaInternet ExplorerMac OS85
05/05/2026Margret RodriguezNorth AmericaInternet ExplorerUbuntu21
07/02/2026Sabina LefflerSouth AmericaFirefoxAndroid38
05/07/2026Hobart HaneNorth AmericaSafariWindows94
06/29/2026Arely EmardAustraliaInternet ExplorerAndroid90
05/31/2026Kristin ErdmanSouth AmericaInternet ExplorerAndroid38
05/09/2026Vallie ChamplinAfricaSafariUbuntu2
06/18/2026Wallace BartonNorth AmericaFirefoxAndroid87
06/16/2026Keira BoyleAntarcticaInternet ExplorerMac OS81
04/27/2026Amaya ReillySouth AmericaChromeAndroid8
06/29/2026Elmira JacobsSouth AmericaSafariAndroid45
04/13/2026Aditya McCulloughEuropeSafariMac OS92
06/25/2026Cloyd PurdyNorth AmericaEdgeAndroid47
05/24/2026Destini TurcotteNorth AmericaOperaAndroid77
04/06/2026Joey MooreAsiaSafariUbuntu6
05/27/2026Allene BraunAfricaFirefoxWindows11
04/28/2026Julio MuellerSouth AmericaSafariAndroid43
04/26/2026Adolphus DenesikAustraliaFirefoxWindows16
05/08/2026Clarabelle HermistonAfricaEdgeAndroid72
04/30/2026Greg RoweAntarcticaOperaUbuntu99
06/20/2026Roberto EmmerichNorth AmericaOperaAndroid61
04/10/2026Lonie CummerataAsiaFirefoxMac OS56
06/02/2026Citlalli FeestNorth AmericaFirefoxMac OS27
04/20/2026Isaac VonRuedenSouth AmericaSafariMac OS71
04/10/2026Lane HeathcoteNorth AmericaSafariUbuntu41
04/29/2026Kitty ShieldsAntarcticaFirefoxUbuntu28
03/31/2026Adrien DonnellyAfricaSafariUbuntu5
05/21/2026Horacio BauchSouth AmericaEdgeMac OS21
06/26/2026Kurtis GerlachAustraliaFirefoxWindows44
04/01/2026Kelly TorpSouth AmericaChromeAndroid23
05/31/2026Heath RoobNorth AmericaFirefoxAndroid46
04/29/2026Americo BashirianAsiaInternet ExplorerMac OS82
06/10/2026Noah SchadenAntarcticaInternet ExplorerMac OS26
03/28/2026Jabari FraneckiNorth AmericaSafariAndroid94
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