Rest of the examples

Author: petyosi

apps/virtuoso.dev/docs/guides/third-party-integration/react-beautiful-dnd.md

@@ -11,6 +11,8 @@ The following takes the [virtualized rows example of @tanstack/table](https://ta
 
 ```tsx live
 import {TableVirtuoso} from 'react-virtuoso'
+import {useReducer, useState} from 'react'
+import { flexRender, useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table'
 
 function makeData(count) {
   return Array.from({length: count}, (_, index) => {
@@ -71,15 +73,15 @@ export default function App() {
   const [data, setData] = React.useState(() => makeData(500));
   const refreshData = () => setData(() => makeData(500));
 
-  const table = Tanstack.useReactTable({
+  const table = useReactTable({
     data,
     columns,
     state: {
       sorting
     },
     onSortingChange: setSorting,
-    getCoreRowModel: Tanstack.getCoreRowModel(),
-    getSortedRowModel: Tanstack.getSortedRowModel()
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel()
   });
 
   const { rows } = table.getRowModel();
@@ -114,7 +116,7 @@ export default function App() {
               <tr {...props}>
                 {row.getVisibleCells().map((cell) => (
                   <td key={cell.id} style={{ padding: "6px" }}>
-                    {Tanstack.flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
                 ))}
               </tr>
@@ -149,7 +151,7 @@ export default function App() {
                           onClick: header.column.getToggleSortingHandler()
                         }}
                       >
-                        {Tanstack.flexRender(
+                        {flexRender(
                           header.column.columnDef.header,
                           header.getContext()
                         )}

apps/virtuoso.dev/docs/guides/third-party-integration/tanstack-table-integration.md

@@ -25,7 +25,6 @@
     "@docusaurus/types": "^3.2.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@hello-pangea/dnd": "^16.6.0",
     "@mdx-js/react": "^3.0.0",
     "@mui/material": "^5.15.14",
     "@ngneat/falso": "^7.2.0",

apps/virtuoso.dev/package.json

@@ -7,6 +7,7 @@ import * as _V from 'react-virtuoso';
 import * as _ML from '@virtuoso.dev/message-list'
 import * as _Falso from '@ngneat/falso'
 import * as MUIStyles from '@mui/material/styles'
+import * as TanstackReactTable from "@tanstack/react-table";
 import List from "@mui/material/List";
 import ListSubheader from "@mui/material/ListSubheader";
 import ListItem from "@mui/material/ListItem";
@@ -44,9 +45,11 @@ import falsoDtsCode from '!!raw-loader!../../../../../../node_modules/@ngneat/fa
 import { createSandbox } from './createCodesandbox';
 
 import copy from 'copy-text-to-clipboard';
+
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
 import { CacheProvider } from '@emotion/react';
 
 
@@ -69,9 +72,18 @@ const IMPORT_MAP = {
   '@mui/material/TableHead': TableHead,
   '@mui/material/TableRow': TableRow,
   '@mui/material/Paper': Paper,
-  '@mui/material/styles': MUIStyles
+  '@mui/material/styles': MUIStyles,
+  '@tanstack/react-table': TanstackReactTable
 };
 
+
+const tanstackReactTableDtsCode = `
+export declare function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps): any;
+export declare function useReactTable<TData extends RowData>(options: TableOptions<TData>): any;
+export declare function getCoreRowModel(): any;
+export declare function getSortedRowModel(): any;
+`
+
 const genericDefaultIsAnyDtsCode = `declare const _default: any;
 export default _default;`
 
@@ -126,6 +138,10 @@ monaco.languages.typescript.typescriptDefaults.setExtraLibs([
     content: (falsoDtsCode as any) as string,
     filePath: 'file:///node_modules/@types/ngneat__falso/index.d.ts',
   },
+  {
+    content: (tanstackReactTableDtsCode as any) as string,
+    filePath: 'file:///node_modules/@types/tanstack__react-table/index.d.ts',
+  },
   {
     content: (messageListDtsCode as any) as string,
     filePath: 'file:///node_modules/@types/virtuoso.dev__message-list/index.d.ts',