# Paging, Sorting and Filtering
The RESTful API created by Remult supports server-side paging, sorting, and filtering. Let's use that to limit, sort and filter the list of tasks.
# Limit Number of Fetched Tasks
Since our database may eventually contain a lot of tasks, it make sense to use a paging strategy to limit the number of tasks retrieved in a single fetch from the back-end database.
Let's limit the number of fetched tasks to 20
.
In the fetchTasks
function, pass an options
argument to the find
method call and set its limit
property to 20.
pages/index.tsx
async function fetchTasks() {
return remult.repo(Task).find({
limit: 20
});
}
There aren't enough tasks in the database for this change to have an immediate effect, but it will have one later on when we'll add more tasks.
TIP
To query subsequent pages, use the Repository.find() method's page
option.
# Show Active Tasks on Top
Uncompleted tasks are important and should appear above completed tasks in the todo app.
In the fetchTasks
function, set the orderBy
property of the find
method call's option
argument to an object that contains the fields you want to sort by.
Use "asc" and "desc" to determine the sort order.
pages/index.tsx
async function fetchTasks() {
return remult.repo(Task).find({
limit: 20,
orderBy: { completed: "asc" }
});
}
Note
By default, false
is a "lower" value than true
, and that's why uncompleted tasks are now showing at the top of the task list.
# Toggle Display of Completed Tasks
Let's allow the user to toggle the display of completed tasks, using server-side filtering.
- Add a
hideCompleted
argument to thefetchTasks
function and Modify thefetchTasks
function, and set thewhere
property of the options argument offind
:
pages/index.tsx
async function fetchTasks(hideCompleted: boolean) {
return remult.repo(Task).find({
limit: 20,
orderBy: { completed: "asc" },
where: { completed: hideCompleted ? false : undefined }
});
}
Note
Because the completed
field is of type boolean
, the argument is compile-time checked to be of the boolean
type. Settings the completed
filter to undefined
causes it to be ignored by Remult.
Learn more
Explore the reference for a comprehensive list of filtering options.
- Add a
hideCompleted
boolean React state to theHome
function component.
pages/index.tsx
const [hideCompleted, setHideCompleted] = useState(false);
- In the
useEffect
hook of theHome
function component, modify the call tofetchTasks
and register thehideCompleted
state in the second argument ofuseEffect
(this will cause the effect to re-run whenhideCompleted
changes).
pages/index.tsx
useEffect(() => {
fetchTasks(hideCompleted).then(setTasks);
}, [hideCompleted]);
- Add a
checkbox
input element immediately before thetasks
map inhome/index.tsx
, bind its check state to thehideCompleted
state, and add anonChange
handler which callssetHideCompleted
when the value of the checkbox is changed.
pages/index.tsx
return (
<div>
<input
type="checkbox"
checked={hideCompleted}
onChange={e => setHideCompleted(e.target.checked)} /> Hide Completed
<main>
{tasks.map(task => (
<div key={task.id}>
<input type="checkbox" checked={task.completed} />
{task.title}
</div>
))}
</main>
</div>
);
After the browser refreshes, a "Hide completed" checkbox appears above the task list. The user can toggle the display of uncompleted tasks using the checkbox.