-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Migrate sorting #233
[docs] Migrate sorting #233
Conversation
@@ -170,22 +164,22 @@ export const useSorting = ( | |||
order.push(row.id); | |||
return order; | |||
}, [] as RowId[]); | |||
}, [originalOrder, apiRef]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Better not include the ref in the list of the dependencies. It's not needed and simpler without.
26a4ad9
to
c9ea4ed
Compare
c9ea4ed
to
cde884d
Compare
|
||
### Key assignment conventions | ||
|
||
The above key assignments are defined in the context of Windows and Linux. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The above key assignments are defined in the context of Windows and Linux. | |
The above key assignments are for Windows and Linux. |
@@ -50,10 +50,22 @@ Finally, you need to handle the `onPageChange` callback to load the rows for the | |||
|
|||
## apiRef | |||
|
|||
We exposed a set of methods that will let you achieve all the above features using the imperative apiRef. | |||
The Grid exposes a set of methods that will let you achieve all the above features using the imperative apiRef. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The Grid exposes a set of methods that will let you achieve all the above features using the imperative apiRef. | |
The Grid exposes a set of methods that enables all of these features using the imperative apiRef. |
|
||
> ⚠️ Only use this API when you have no alternatives. Always start from the declarative APIs the Grid exposes. | ||
> ⚠️ Only use this API when you have no alternatives. Always start from the declarative API the Grid exposes. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> ⚠️ Only use this API when you have no alternatives. Always start from the declarative API the Grid exposes. | |
> ⚠️ Only use this API when you have no alternative. Always start from the declarative API that the Grid exposes. |
- `setPageSize` | ||
- `setPage` | ||
- `onPageChange` | ||
- `onPageSizeChange` | ||
|
||
Below is an example on how you can reset the page using the imperative `setPage` method. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Below is an example on how you can reset the page using the imperative `setPage` method. | |
This example shows how you can reset the page using the imperative `setPage` method. |
|
||
Below is an example on how you can reset the page using the imperative `setPage` method. | ||
|
||
{{"demo": "pages/components/data-grid/pagination/ApiRefPaginationGrid.js"}} | ||
|
||
## Paginate > 100 rows ✨ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## Paginate > 100 rows ✨ | |
## Paginate > 100 rows ✨ |
"✨" = "new feature". If this is meant to indicate a premium feature, it needs a more appropriate icon. (See suggestions elsewhere).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mean to indicate premium, happy to use a different one, for now, the objective is to have at least one.
|
||
### Disable sorting | ||
|
||
By default, columns are all sortable and it can be revoked using the sortable prop of the `ColDef` interface as below. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By default, columns are all sortable and it can be revoked using the sortable prop of the `ColDef` interface as below. | |
By default, all columns are sortable. This can be revoked using the sortable prop of the `ColDef` interface: |
|
||
### Server-side sorting | ||
|
||
By default, sorting works on the client-side. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By default, sorting works on the client-side. | |
By default, sorting works client-side. |
|
||
By default, sorting works on the client-side. | ||
To switch it to server-side, set `sortingMode="server"`. | ||
Then, you need to handle the `onSortModelChange` callback, sort the rows on the server-side and update the `rows` prop with the new sorted rows. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Then, you need to handle the `onSortModelChange` callback, sort the rows on the server-side and update the `rows` prop with the new sorted rows. | |
Then you need to handle the `onSortModelChange` callback, sort the rows on the server-side, and update the `rows` prop with the newly sorted rows. |
|
||
### apiRef | ||
|
||
The Grid exposes a set of methods that will let you achieve all the above features using the imperative apiRef. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The Grid exposes a set of methods that will let you achieve all the above features using the imperative apiRef. | |
The Grid exposes a set of methods that supports all of the above features using the imperative apiRef. |
|
||
The Grid exposes a set of methods that will let you achieve all the above features using the imperative apiRef. | ||
|
||
> ⚠️ Only use this API when you have no alternatives. Always start from the declarative API the Grid exposes. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> ⚠️ Only use this API when you have no alternatives. Always start from the declarative API the Grid exposes. | |
> ⚠️ Only use this API when you have no alternative. Always start from the declarative API that the Grid exposes. |
@mbrookes Great, I will handle the review. |
No description provided.