Vue3-datatables
  • Dependencies & Compatability
  • Getting Started
  • Client Table
    • Asynchronous Loading
    • Grouping
    • Filtering Algorithm
    • Editable Cells
  • Server Table
    • Implementations
    • Custom Request Function
    • Setting Multiple Request Parameters
    • Error Message
    • Draw Counter
  • Dependencies & Compatability
  • Getting Started
  • Virtual Pagination
  • Column Templates
  • Nested Data Structures
  • Selectable Rows
  • List Filters
  • Custom Template
  • Custom Filters
  • Multiple Sorting
  • Date Columns
  • Custom Sorting
  • Conditional Cell Styling
  • Columns Visibility
  • Child Rows
  • Properties
  • Slots
  • Methods
  • Events
Powered by GitBook
On this page

Multiple Sorting

Multiple sorting allows you to sort recursively by multiple columns. Simply put, when the primary column (i.e the column the user is currently sorting) has two or more identical items, their order will be determined by a secondary column, and so on, until the list of columns is exhausted.

The above code means that when the user is sorting by name and identical names are compared, their order will be determined by the age column. If the ages are also identical the birth_date column will determine the order. The matchDir property tells the plugin whether the secondary sorting should match the direction of the primary column (i.e ascending/descending), or not.

In addition to programmatically setting the sorting in advance, by default the user can also use Shift+Click to build his own sorting logic in real time. To disable this option set clientMultiSorting to false.

On the server component this behaviour is disabled by default, because it requires addtional server logic to handle the request. To enable it set serverMultiSorting to true. The request will then contain a multiSort array, if applicable.

PreviousCustom FiltersNextDate Columns