Data & Query Engine

Dynamic Multi-Type Sorting

Order API responses by any numerical, string, or boolean field using _sort and _order. Values are sorted with type-aware comparison, ensuring proper numeric order instead of alphabetical bugs.

Live Sorting Playground

Customize sort target and direction to test across collections:

Direction:

Target Collection

Sort Field (_sort)

Sorting posts by id in desc order.GET /posts?_sort=id&_order=desc

Live API RunnerMethod: GET

Live Request Console

GET

response.json

{

// Click "Send" above to execute this request against the live server.

}

Type-Aware Sort Evaluation

Many mock servers fail by treating all fields as strings, causing 10 to sort before 2. Playground inspects underlying data types:

Data Type	Sort Strategy	ASC Order Example	DESC Order Example
Numeric (ID, Price, Stock)	Numeric comparison (`a - b`)	1, 2, 9, 10, 100	100, 10, 9, 2, 1
String (Title, Name, Email)	Case-insensitive localeCompare	Alice, Bob, Charlie	Charlie, Bob, Alice
Boolean (Completed, InStock)	Falsy values first in ASC	false, false, true, true	true, true, false, false

Client Integration Recipes

DataGrid and table sorting patterns for React and modern web apps:

components/DataTable.tsx

// components/DataTable.tsx

import { useState } from 'react';

import { useQuery } from '@tanstack/react-query';

interface SortingState {

field: string;

order: 'asc' | 'desc';

}

export function DataTable() {

const [sorting, setSorting] = useState<SortingState>({

field: 'id',

order: 'desc'

});

const { data, isLoading } = useQuery({

queryKey: ['posts', sorting],

queryFn: async () => {

const res = await fetch(

https://playground.nileslabs.com/api/v1/posts?_sort=${sorting.field}&_order=${sorting.order}`,

{ credentials: 'include' }

);

if (!res.ok) throw new Error('Failed to fetch sorted records');

return res.json();

}

});

const toggleSort = (field: string) => {

setSorting((prev) => ({

field,

order: prev.field === field && prev.order === 'asc' ? 'desc' : 'asc'

}));

};

return (

<table>

<thead>

<tr>

<th onClick={() => toggleSort('id')} className="cursor-pointer">

ID {sorting.field === 'id' && (sorting.order === 'asc' ? '▲' : '▼')}

</th>

<th onClick={() => toggleSort('title')} className="cursor-pointer">

Title {sorting.field === 'title' && (sorting.order === 'asc' ? '▲' : '▼')}

</th>

</tr>

</thead>

<tbody>

{data?.data?.map((item: any) => (

<td>{item.title}</td>

</tr>

))}

</tbody>

</table>

);

}

Next Query Feature

Offset-Based Pagination

Related Query Feature

Cursor-Based Pagination

PreviousFull-Text Search

NextOffset Pagination