Update documentation to use useCollator hook (#2656)

* update documentation to use collator hook

* add collator options and missing import

* remove whitespace and extra import

Co-authored-by: Wilfredo Malazarte <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-spectrum/table/docs/TableView.mdx

@@ -497,7 +497,11 @@ This example performs client side sorting by passing a `sort` function to the [u
 See the docs for more information on how to perform server side sorting.
 
 ```tsx example
+import { useCollator } from '@react-aria/i18n';
+
 function AsyncSortTable() {
+  let collator = useCollator({numeric: true});
+
   let list = useAsyncList({
     async load({signal}) {
       let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
@@ -511,7 +515,7 @@ function AsyncSortTable() {
         items: items.sort((a, b) => {
           let first = a[sortDescriptor.column];
           let second = b[sortDescriptor.column];
-          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+          let cmp = collator.compare(first, second);
           if (sortDescriptor.direction === 'descending') {
             cmp *= -1;
           }

packages/@react-stately/data/docs/useAsyncList.mdx

@@ -129,6 +129,8 @@ This example shows how to implement client side sorting by passing a `sort` func
 items array.
 
 ```tsx
+let collator = useCollator();
+
 let list = useAsyncList({
   async load({signal}) {
     // Same load function as before
@@ -137,7 +139,7 @@ let list = useAsyncList({
     return {
       items: items.sort((a, b) => {
         // Compare the items by the sorted column
-        let cmp = a[sortDescriptor.column] < b[sortDescriptor.column] ? -1 : 1;
+        let cmp = collator.compare(a[sortDescriptor.column], b[sortDescriptor.column]);
 
         // Flip the direction if descending order is specified.
         if (sortDescriptor.direction === 'descending') {