How to Keep Table Sort State with URL Query in Vue.js (Even After Refresh)

In modern Vue.js applications, maintaining the sort state of a table even after refreshing the page—or sharing a URL—is essential for delivering a seamless user experience. This article shows how to use URL query parameters to persist sorting options like column and direction.

📚 Table of Contents

1. Why use URL query for sort state?
2. Updating the sort state in the URL
3. Reading initial sort state on page load
4. Returning a sorted list with computed()
5. Handling sort button clicks
6. Resetting to default sort

---

1. Why use URL query for sort state?

Using the URL query string enables users to:

• Refresh the page without losing sort settings
• Bookmark a specific sort view
• Share the same sorted view with others

All without relying on Vuex, localStorage, or cookies.

2. Updating the sort state in the URL

Example URL: ?sortColumn=price&sortDirection=asc

setSort(columnKey) {
  if (this.sortColumn === columnKey) {
    this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
  } else {
    this.sortColumn = columnKey;
    this.sortDirection = "desc";
  }

  this.$router.replace({
    query: {
      ...this.$route.query,
      sortColumn: this.sortColumn,
      sortDirection: this.sortDirection,
    },
  });
}

3. Reading initial sort state on page load

created() {
  const { sortColumn, sortDirection } = this.$route.query;

  const validColumns = ["name", "price", "rating"];
  const validDirections = ["asc", "desc"];

  if (validColumns.includes(sortColumn)) {
    this.sortColumn = sortColumn;
  }

  if (validDirections.includes(sortDirection)) {
    this.sortDirection = sortDirection;
  }
}

4. Returning a sorted list using computed()

computed: {
  sortedProductList() {
    const rawList = this.productData[this.sortColumn];

    if (!rawList || rawList.length === 0) return [];

    let result = [...rawList];

    if (this.sortDirection === "asc") {
      result.reverse(); // Assuming server sends default in descending order
    }

    return result.slice(0, 5); // Top 5 items as example
  },
}

5. Handling sort button click

<th @click="setSort('price')" style="cursor: pointer">
  Price
  <img
    :src="sortColumn === 'price' && sortDirection === 'desc' ? downArrow : ''"
    style="margin-left: 4px"
  />
</th>

This makes the column clickable and toggles sorting while also updating the icon accordingly.

6. Resetting to default sort

setSort(columnKey) {
  if (this.sortColumn === columnKey) {
    if (this.sortDirection === "desc") {
      // Reset to default sort (e.g., by rating)
      this.sortColumn = "rating";
      this.sortDirection = "desc";
    } else {
      this.sortDirection = "desc";
    }
  } else {
    this.sortColumn = columnKey;
    this.sortDirection = "desc";
  }

  this.$router.replace({
    query: {
      ...this.$route.query,
      sortColumn: this.sortColumn,
      sortDirection: this.sortDirection,
    },
  });
}

---

✅ Final Thoughts

Using URL query parameters in Vue.js to persist sorting options is a clean, user-friendly, and SEO-friendly approach. This technique is especially helpful for:

• Sortable tables
• Search result pages
• Admin dashboards

Whether it’s for sorting by date, price, name, or rating—this method keeps your UI stateful and shareable with minimal effort.

Keywords: vue table sorting, vue.js sort url query, keep sort state after refresh, sortable table with vue router