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
01/06/2026Lloyd GleichnerNorth AmericaSafariMac OS36
03/04/2026Thad DickiAfricaInternet ExplorerUbuntu99
01/20/2026Alanis BreitenbergNorth AmericaSafariiOS43
03/05/2026Ryann GleasonSouth AmericaFirefoxiOS62
12/29/2025Mallory GloverAsiaInternet ExplorerMac OS16
01/11/2026Susanna KutchAustraliaEdgeWindows67
02/20/2026Maddison ZemlakNorth AmericaEdgeAndroid24
01/08/2026Quentin KesslerSouth AmericaOperaWindows8
02/13/2026Kaia WilkinsonEuropeFirefoxiOS42
01/16/2026Rhea LarkinAustraliaInternet ExplorerAndroid6
01/01/2026Kaya BergstromAfricaOperaUbuntu23
03/10/2026Esther FarrellAfricaSafariiOS17
01/02/2026Robbie HomenickEuropeInternet ExplorerMac OS16
01/09/2026Lamont SpinkaAsiaInternet ExplorerAndroid50
12/17/2025Francisca VeumNorth AmericaSafariiOS44
03/23/2026Alexandrine WalterAsiaFirefoxAndroid85
02/07/2026Patricia VeumNorth AmericaEdgeMac OS34
12/25/2025Dandre LindAustraliaSafariUbuntu64
03/25/2026Sarai DachSouth AmericaEdgeMac OS36
02/24/2026Beverly BotsfordAustraliaOperaMac OS25
02/08/2026Destiney RogahnAustraliaOperaAndroid6
01/11/2026Lulu AndersonNorth AmericaInternet ExploreriOS57
01/28/2026Adela JakubowskiSouth AmericaChromeiOS7
02/05/2026Carleton MrazAsiaChromeUbuntu49
01/05/2026Thad SpinkaEuropeOperaAndroid13
01/25/2026Corbin LarsonAustraliaEdgeUbuntu10
03/14/2026Reginald GoodwinNorth AmericaInternet ExplorerAndroid15
01/23/2026Amelie KrajcikAfricaFirefoxAndroid43
12/22/2025Mckenzie HandAustraliaFirefoxiOS99
01/20/2026Jazlyn SporerAsiaSafariMac OS69
03/19/2026Jonathan MooreAustraliaSafariUbuntu71
02/13/2026Michelle JacobsSouth AmericaSafariMac OS70
01/21/2026Onie BradtkeNorth AmericaFirefoxAndroid91
02/28/2026Gardner HellerSouth AmericaSafariMac OS66
01/14/2026Kieran BorerSouth AmericaSafariWindows90
01/04/2026Heath HauckNorth AmericaOperaUbuntu9
02/01/2026Mertie PacochaEuropeFirefoxMac OS46
03/21/2026Verona SporerAsiaOperaUbuntu10
12/24/2025Ada OndrickaAntarcticaInternet ExplorerAndroid26
01/19/2026Ethel GutmannNorth AmericaFirefoxiOS82
02/03/2026Kaitlyn BeckerSouth AmericaFirefoxMac OS15
12/27/2025Michele GreenfelderAsiaFirefoxWindows95
02/01/2026Caitlyn EbertAfricaOperaUbuntu55
12/31/2025Adrian ReichertEuropeOperaAndroid32
01/31/2026Kamron MullerAustraliaSafariAndroid18
12/19/2025Catalina GreenEuropeInternet ExplorerWindows31
03/21/2026Justina GradyAsiaOperaMac OS18
12/18/2025Israel MacejkovicNorth AmericaFirefoxMac OS97
02/04/2026Jeanne HoppeAustraliaInternet ExplorerUbuntu60
03/11/2026Michael GusikowskiEuropeSafariUbuntu73
03/12/2026Malvina DooleySouth AmericaSafariUbuntu1
01/31/2026Alexandrine HuelEuropeSafariiOS51
03/09/2026Lillian ManteAsiaSafariAndroid22
03/11/2026Emanuel KleinNorth AmericaChromeAndroid96
01/14/2026Eliseo LubowitzSouth AmericaChromeAndroid12
02/20/2026Chris BartonSouth AmericaFirefoxiOS87
01/16/2026Andrew FadelSouth AmericaInternet ExplorerMac OS43
03/14/2026Mavis LoweAustraliaEdgeMac OS75
03/04/2026Reba PourosAsiaSafariiOS12
01/16/2026Elisha JacobiAfricaInternet ExplorerMac OS82
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