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
03/29/2026Quinten GislasonSouth AmericaInternet ExplorerUbuntu61
06/01/2026Loyce SwiftNorth AmericaInternet ExplorerAndroid5
06/13/2026Madie KuhicEuropeInternet ExplorerAndroid68
03/17/2026Danny RobelNorth AmericaFirefoxAndroid64
05/03/2026Maximillia HoppeAustraliaEdgeUbuntu68
06/18/2026Monserrate MohrSouth AmericaOperaiOS79
06/08/2026Philip ThielAntarcticaSafariiOS85
03/24/2026Katarina HeathcoteAustraliaFirefoxMac OS24
05/28/2026Carol RolfsonAfricaChromeUbuntu30
05/09/2026Mozelle LangworthEuropeSafariiOS32
05/05/2026Mavis YostAustraliaOperaiOS29
06/06/2026Alexandria JakubowskiNorth AmericaSafariiOS49
04/12/2026Tressie AdamsEuropeSafariiOS71
05/04/2026Jaquan TerryNorth AmericaSafariAndroid46
04/10/2026Sarina StrosinAntarcticaChromeiOS98
06/16/2026Kirk HansenNorth AmericaOperaMac OS96
05/30/2026Merritt AltenwerthNorth AmericaOperaWindows73
04/16/2026Francis WizaAfricaSafariAndroid86
06/13/2026Garrison GibsonNorth AmericaChromeUbuntu95
05/30/2026Ardella GreenfelderAustraliaOperaWindows8
04/21/2026Zita CristEuropeSafariMac OS32
06/07/2026Lorenza KuvalisNorth AmericaFirefoxUbuntu82
04/01/2026Braeden CartwrightEuropeFirefoxMac OS79
04/13/2026Trevor NolanAsiaFirefoxWindows86
06/20/2026Johan KlockoEuropeSafariMac OS11
05/11/2026Maryse KossSouth AmericaOperaWindows96
06/21/2026Lorenzo HeaneyAsiaOperaAndroid65
06/06/2026Terrill UllrichAntarcticaInternet ExplorerMac OS3
04/28/2026Tom SipesEuropeSafariAndroid33
04/10/2026Jovanny HauckAfricaInternet ExploreriOS16
04/20/2026Karianne RitchieEuropeFirefoxUbuntu44
04/21/2026Kaela BauchAfricaFirefoxAndroid49
04/25/2026Guido CarterAfricaSafariUbuntu69
04/06/2026Trenton HandAsiaOperaAndroid31
05/14/2026Olaf KulasEuropeOperaMac OS2
06/01/2026Arvel GleasonAntarcticaOperaUbuntu14
04/19/2026Zola SchultzNorth AmericaFirefoxWindows65
03/26/2026Vita WilliamsonSouth AmericaInternet ExplorerAndroid4
03/26/2026Gudrun SchillerNorth AmericaInternet ExplorerWindows73
05/30/2026Wilhelmine KlockoSouth AmericaOperaAndroid22
04/22/2026Fletcher DonnellyAsiaFirefoxiOS98
04/30/2026Sim WindlerAsiaSafariiOS1
06/10/2026Melany LednerAntarcticaEdgeUbuntu32
05/20/2026Marty RunolfsdottirEuropeEdgeiOS60
05/31/2026Gladys CroninAntarcticaOperaMac OS95
05/09/2026Kristofer ManteAustraliaOperaAndroid48
06/01/2026Rick SchowalterSouth AmericaFirefoxWindows33
04/16/2026Jamir DoyleAsiaOperaAndroid35
03/19/2026Clair ParkerAntarcticaEdgeAndroid75
04/15/2026Shanna BartellAustraliaSafariAndroid19
04/29/2026Anthony BeckerAfricaEdgeAndroid40
04/05/2026Llewellyn MannAustraliaSafariAndroid7
05/09/2026Edmund SipesEuropeEdgeiOS35
04/24/2026Susana HegmannNorth AmericaChromeAndroid5
06/06/2026Shirley PfannerstillAfricaOperaWindows40
04/08/2026Tommie StiedemannNorth AmericaEdgeUbuntu15
03/24/2026Leonardo VonSouth AmericaEdgeMac OS33
06/10/2026Grace WeberNorth AmericaInternet ExplorerUbuntu100
06/18/2026Laverna MuellerSouth AmericaSafariAndroid33
06/09/2026Margarette StehrNorth AmericaInternet ExplorerMac OS36
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