Enabling row reordering

The widget API allows reordering rows via drag-n-drop. You can either drag all rows or add drag handle for all or specific rows.

To enable reordering for all rows in a table, use the reorder property by setting it to true:

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

    const { data, columns } = getData();

</script>

<Grid {data} {columns} reorder /> // or reorder={true}

To add the drag handle to all rows, set 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 />

To add the drag handle to specific rows, pass the row and column objects to the draggable function. Note that it will make reordering possible only for these selected rows.

<script>
  import { Grid } from "wx-svelte-grid";
  import { getData } from "./common/data";
  
  const { data } = getData();
  
  const columns = [
    { id: "id", header: "ID", draggable: (row) => row.id % 2 === 1, width: 50 },
    { id: "city", header: "City" },
    { id: "name", header: "Name" },
    // other columns 
  ];
</script>

<div style="padding: 20px;">
  <h4>
    Restrictive drag handles (rows without drag handles cannot be moved)
  </h4>
  <div style="width: 800px; height: 400px;">
    <Grid {data} columns={columns} reorder />
  </div>
</div>

---

Related articles:

• move-item
• reorder