fix(docs): added ts example for infinite pagination

apps/docs/content/components/table/infinite-pagination.ts

@@ -67,10 +67,98 @@ export default function App() {
   );
 }`;
 
+const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react";
+import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
+import { useAsyncList } from "@react-stately/data";
+
+interface SWCharacter {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+}
+
+export default function App() {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [hasMore, setHasMore] = React.useState<boolean>(false);
+
+  let list = useAsyncList<SWCharacter>({
+    async load({ signal, cursor }) {
+      if (cursor) {
+        setIsLoading(false);
+      }
+
+      // If no cursor is available, then we're loading the first page.
+      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
+      const res = await fetch(
+        cursor || "https://swapi.py4e.com/api/people/?search=",
+        { signal }
+      );
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+
+      return {
+        items: json.results,
+        cursor: json.next,
+      };
+    },
+  });
+
+  const [loaderRef, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    onLoadMore: list.loadMore,
+  });
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with infinite pagination"
+      baseRef={scrollerRef}
+      bottomContent={
+        hasMore ? (
+          <div className="flex w-full justify-center">
+            <Spinner ref={loaderRef} color="white" />
+          </div>
+        ) : null
+      }
+      classNames={{
+        base: "max-h-[520px] overflow-scroll",
+        table: "min-h-[400px]",
+      }}
+    >
+      <TableHeader>
+        <TableColumn key="name">Name</TableColumn>
+        <TableColumn key="height">Height</TableColumn>
+        <TableColumn key="mass">Mass</TableColumn>
+        <TableColumn key="birth_year">Birth year</TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={isLoading}
+        items={list.items}
+        loadingContent={<Spinner color="white" />}
+      >
+        {(item: SWCharacter) => (
+          <TableRow key={item.name}>
+            {(columnKey) => (
+              <TableCell>{getKeyValue(item, columnKey)}</TableCell>
+            )}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}`;
+
 const react = {
   "/App.jsx": App,
 };
 
+const reactTs = {
+  "/App.tsx": AppTs,
+};
+
 export default {
   ...react,
+  ...reactTs,
 };

apps/docs/content/docs/components/table.mdx

@@ -274,13 +274,31 @@ It is also possible to use the [Pagination](/components/pagination) component to
 Table also supports infinite pagination. To do so, you can use the `useAsyncList` hook from [@react-stately/data](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) and
 [@nextui-org/use-infinite-scroll](https://www.npmjs.com/package/@nextui-org/use-infinite-scroll) hook.
 
+<PackageManagers
+  commands={{
+    npm: "npm install @react-stately/data @nextui-org/use-infinite-scroll",
+    yarn: "yarn add @react-stately/data @nextui-org/use-infinite-scroll",
+    pnpm: "pnpm add @react-stately/data @nextui-org/use-infinite-scroll",
+  }}
+/>
+
+```jsx
+import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
+
+import { useAsyncList } from "@react-stately/data";
+```
+
+<Spacer y={2} />
+
 <CodeDemo
   asIframe
   title="Infinite Paginated Table"
   resizeEnabled={false}
   files={tableContent.infinitePagination}
   previewHeight="620px"
   displayMode="visible"
+  showPreview={true}
+  showOpenInCodeSandbox={false}
   iframeSrc="/examples/table/infinite-pagination"
 />