virtualization and hooks refactor

KevinVandy · Jan 5, 2024 · 3e205e2 · 3e205e2
1 parent df82da3
commit 3e205e2
Show file tree

Hide file tree

Showing 36 changed files with 2,080 additions and 2,149 deletions.
diff --git a/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts b/apps/mantine-react-table-docs/components/prop-tables/columnOptions.ts
@@ -258,7 +258,7 @@ export const columnOptions: ColumnOption[] = [
     type: 'boolean',
   },
   {
-    columnOption: 'enableColumnPinning',
+    columnOption: 'enablePinning',
     defaultValue: '',
     description: '',
     link: '',

diff --git a/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx
@@ -5,6 +5,7 @@ import {
   MRT_ToolbarAlertBanner,
   type MRT_ColumnDef,
   useMantineReactTable,
+  MRT_TableBodyCellValue,
 } from 'mantine-react-table';
 import { Divider, Flex, Stack, Table, Title } from '@mantine/core';
 import { type Person, data } from './makeData';
@@ -96,10 +97,7 @@ const Example = () => {
             <tr key={row.id}>
               {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
-                  {flexRender(
-                    cell.column.columnDef.Cell ?? cell.column.columnDef.cell,
-                    cell.getContext(),
-                  )}
+                  <MRT_TableBodyCellValue cell={cell} table={table} />
                 </td>
               ))}
             </tr>

diff --git a/apps/mantine-react-table-docs/examples/enable-column-virtualization/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-column-virtualization/sandbox/src/TS.tsx
@@ -2,14 +2,13 @@ import { useRef } from 'react';
 import {
   MantineReactTable,
   useMantineReactTable,
-  type MRT_Virtualizer,
+  type MRT_ColumnVirtualizer,
 } from 'mantine-react-table';
 import { fakeColumns, fakeData } from './makeData';
 
 const Example = () => {
   //optionally access the underlying virtualizer instance
-  const columnVirtualizerInstanceRef =
-    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>>(null);
+  const columnVirtualizerInstanceRef = useRef<MRT_ColumnVirtualizer>(null);
 
   const table = useMantineReactTable({
     columnVirtualizerInstanceRef, //optional

diff --git a/apps/mantine-react-table-docs/examples/enable-row-virtualization/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-row-virtualization/sandbox/src/TS.tsx
@@ -4,7 +4,7 @@ import {
   useMantineReactTable,
   type MRT_ColumnDef,
   type MRT_SortingState,
-  type MRT_Virtualizer,
+  type MRT_RowVirtualizer,
 } from 'mantine-react-table';
 import { makeData, type Person } from './makeData';
 
@@ -56,8 +56,7 @@ const Example = () => {
   );
 
   //optionally access the underlying virtualizer instance
-  const rowVirtualizerInstanceRef =
-    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
 
   const [data, setData] = useState<Person[]>([]);
   const [isLoading, setIsLoading] = useState(true);

diff --git a/apps/mantine-react-table-docs/examples/infinite-scrolling/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/infinite-scrolling/sandbox/src/TS.tsx
@@ -12,7 +12,7 @@ import {
   type MRT_ColumnDef,
   type MRT_ColumnFiltersState,
   type MRT_SortingState,
-  type MRT_Virtualizer,
+  type MRT_RowVirtualizer,
 } from 'mantine-react-table';
 import { Text } from '@mantine/core';
 import {
@@ -63,8 +63,7 @@ const fetchSize = 25;
 
 const Example = () => {
   const tableContainerRef = useRef<HTMLDivElement>(null); //we can get access to the underlying TableContainer element and react to its scroll events
-  const rowVirtualizerInstanceRef =
-    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null); //we can get access to the underlying Virtualizer instance and call its scrollToIndex method
+  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null); //we can get access to the underlying Virtualizer instance and call its scrollToIndex method
 
   const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
     [],

diff --git a/apps/mantine-react-table-docs/examples/virtualized/sandbox/src/Legacy.tsx b/apps/mantine-react-table-docs/examples/virtualized/sandbox/src/Legacy.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   MantineReactTable,
+  type MRT_RowVirtualizer,
   type MRT_ColumnDef,
   type MRT_SortingState,
-  type MRT_Virtualizer,
 } from 'mantine-react-table';
 import { makeData, type Person } from './makeData';
 
@@ -87,8 +87,7 @@ const Example = () => {
   );
 
   //optionally access the underlying virtualizer instance
-  const rowVirtualizerInstanceRef =
-    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
 
   const [data, setData] = useState<Person[]>([]);
   const [isLoading, setIsLoading] = useState(true);

diff --git a/apps/mantine-react-table-docs/examples/virtualized/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/virtualized/sandbox/src/TS.tsx
@@ -4,7 +4,7 @@ import {
   useMantineReactTable,
   type MRT_ColumnDef,
   type MRT_SortingState,
-  type MRT_Virtualizer,
+  type MRT_RowVirtualizer,
 } from 'mantine-react-table';
 import { makeData, type Person } from './makeData';
 
@@ -88,8 +88,7 @@ const Example = () => {
   );
 
   //optionally access the underlying virtualizer instance
-  const rowVirtualizerInstanceRef =
-    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
 
   const [data, setData] = useState<Person[]>([]);
   const [isLoading, setIsLoading] = useState(true);

diff --git a/apps/mantine-react-table-docs/package.json b/apps/mantine-react-table-docs/package.json
@@ -18,20 +18,20 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mantine/code-highlight": "^7.3.1",
-    "@mantine/core": "^7.3.1",
-    "@mantine/dates": "^7.3.1",
-    "@mantine/hooks": "^7.3.1",
-    "@mantine/modals": "^7.3.1",
+    "@mantine/code-highlight": "^7.4.0",
+    "@mantine/core": "^7.4.0",
+    "@mantine/dates": "^7.4.0",
+    "@mantine/hooks": "^7.4.0",
+    "@mantine/modals": "^7.4.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.0.4",
-    "@tabler/icons-react": "2.44.0",
-    "@tanstack/react-query": "^5.13.4",
+    "@tabler/icons-react": "2.45.0",
+    "@tanstack/react-query": "^5.17.1",
     "@types/mdx": "^2.0.10",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
-    "export-to-csv": "^1.2.1",
+    "export-to-csv": "^1.2.2",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.8.1",
     "mantine-react-table": "workspace:*",
@@ -41,16 +41,16 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "eslint": "8.55.0",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "eslint": "8.56.0",
     "eslint-config-next": "14.0.4",
     "next-plausible": "^3.12.0",
-    "postcss": "^8.4.32",
-    "postcss-preset-mantine": "^1.11.1",
+    "postcss": "^8.4.33",
+    "postcss-preset-mantine": "^1.12.3",
     "postcss-simple-vars": "^7.0.1",
     "raw-loader": "^4.0.2",
     "typescript": "5.3.3"