Skip to main content

reorder

Description​

Optional. Enables row reordering via drag-n-drop

Usage​

reorder?: boolean;

Parameters​

By default, reorder is set to false (rows reordering is disabled). To enable row reordering via drag-n-drop, set the value to true. Reordering cannot be enabled for the tree mode (see the tree property).

Example​

<script>
    import { getData } from "./common/data";
    import { Grid } from "wx-svelte-grid";

    const { data, columns } = getData();

</script>

<Grid {data} {columns} reorder />

You can also add the drag handle to rows by setting the draggable parameter of the columns property to true:

<script>
    import { Grid } from "wx-svelte-grid";  
    import { getData } from "../data";

    const { data } = getData();

    const columns = [
        { id:"id", header: "ID", draggable:true, width: 50 },
        { id:"city", header:"City" }
        // other columns
    ];
</script>

<Grid {data} {columns} reorder />

Related articles: