Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions documentation/docs/pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -403,3 +403,37 @@ const {
"personal_information.personal_information_id, personal_information.created_at"
);
```

#### Using the `formatParams` Hook

Another way of managing pagination on the frontend, you can utilize the `formatParams` hook, which facilitates various pagination functionalities and data retrieval. This method returns a string that can be passed directly to your URL.

```javascript
import { DIRECTION, Filter, formatParams } from '@xest-ui/data-table';

const filters: Filter[] = [];

let search = "john"; // Users name to be searched
let pageSize = 50;

// How to use single column to sort (- prefix desc / no prefix asc)
let sortBy = "-myTable.id";

// How to use multiple columns to sort (using comma to separate)
let sortBy = "-myTable.id,-myTable.created_at";

filters.push({
column: "myTable.firstName",
operation: "contains",
values: [search]
});

const reqParams = formatParams({
page_size: pageSize,
filters: filters,
sort_by: sortBy
});

const res = await getUsers(organizationId, reqParams);

```