group virtualization examples

KevinVandy · Oct 16, 2023 · 8b13064 · 8b13064
1 parent b5d2cb7
commit 8b13064
Show file tree

Hide file tree

Showing 15 changed files with 207 additions and 18 deletions.
diff --git a/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx b/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx
@@ -81,6 +81,7 @@ export const SampleCodeSnippet = (props: Props) => {
                   ? '2rem auto'
                   : 0,
               fontSize: '11pt',
+              lineHeight: '1.4rem',
             }}
           >
             {props.enableCopyButton !== false && (

diff --git a/apps/material-react-table-docs/components/navigation/routes.ts b/apps/material-react-table-docs/components/navigation/routes.ts
@@ -174,17 +174,27 @@ export const routes: Array<RouteItem> = [
         secondaryItems: [
           {
             href: '/docs/examples/remote',
-            label: 'Remote Data Fetching',
+            label: 'Remote Data Fetching Example',
           },
         ],
       },
       {
         href: '/docs/examples/virtualized',
-        label: 'Virtualized Example',
-      },
-      {
-        href: '/docs/examples/infinite-scrolling',
-        label: 'Infinite Scrolling Example',
+        label: 'Virtualized Examples',
+        secondaryItems: [
+          {
+            href: '/docs/examples/row-virtualization',
+            label: 'Row Virtualization Example',
+          },
+          {
+            href: '/docs/examples/column-virtualization',
+            label: 'Column Virtualization Example',
+          },
+          {
+            href: '/docs/examples/infinite-scrolling',
+            label: 'Infinite Scrolling Example',
+          },
+        ],
       },
       {
         href: 'https://www.material-react-table.dev',

diff --git a/apps/material-react-table-docs/example-groups/FilteringExamples.tsx b/apps/material-react-table-docs/example-groups/FilteringExamples.tsx
@@ -3,6 +3,7 @@ import { Box, Tab, Tabs } from '@mui/material';
 import FilterVariantsExample from '../examples/customize-filter-variants';
 import FacetedValuesExample from '../examples/enable-filter-facet-values';
 import FilterModesExample from '../examples/customize-filter-modes';
+import PopoverFiltersExample from '../examples/alternate-column-filtering'
 import { useState } from 'react';
 import Link from 'next/link';
 import LaunchIcon from '@mui/icons-material/Launch';
@@ -27,6 +28,7 @@ const FilteringExamples = ({ isPage = false }) => {
           <Tab label="Filter Variants" value="filter-variants" />
           <Tab label="Faceted Values" value="faceted-values" />
           <Tab label="Filter Switching" value="filter-switching" />
+          <Tab label="Popover Filters" value="popover-filters" />
           <Tab
             label={
               <Box>
@@ -53,6 +55,7 @@ const FilteringExamples = ({ isPage = false }) => {
         {activeTab === 'filter-variants' && <FilterVariantsExample />}
         {activeTab === 'faceted-values' && <FacetedValuesExample />}
         {activeTab === 'filter-switching' && <FilterModesExample />}
+        {activeTab === 'popover-filters' && <PopoverFiltersExample />}
       </Box>
     </>
   );

diff --git a/apps/material-react-table-docs/example-groups/RemoteFetchingExamples.tsx b/apps/material-react-table-docs/example-groups/RemoteFetchingExamples.tsx
@@ -25,6 +25,15 @@ const RemoteFetchingExamples = ({ isPage = false }) => {
         >
           <Tab label="React Query" value="react-query" />
           <Tab label="useEffect" value="remote" />
+          <Tab
+            label={
+              <Box>
+                Infinite Scrolling
+                <LaunchIcon sx={{ fontSize: '1rem' }} />
+              </Box>
+            }
+            value="infinite-scrolling"
+          />
           <Link href="/docs/examples" passHref legacyBehavior>
             <Tab
               label={

diff --git a/apps/material-react-table-docs/example-groups/VirtualizedExamples.tsx b/apps/material-react-table-docs/example-groups/VirtualizedExamples.tsx
@@ -0,0 +1,55 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+import FullyVirtualizedExample from '../examples/virtualized';
+import RowVirtualization from '../examples/enable-row-virtualization';
+import ColumnVirtualization from '../examples/enable-column-virtualization';
+import InfiniteScrolling from '../examples/infinite-scrolling';
+import { useState } from 'react';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const VirtualizedExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'export-csv',
+  );
+
+  return (
+    <>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(_e, newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+        >
+          <Tab label="Fully Virtualized" value="virtualized" />
+          <Tab label="Row Virtualization" value="row-virtualization" />
+          <Tab label="Column Virtualization" value="column-virtualization" />
+          <Tab label="Infinite Scrolling" value="infinite-scrolling" />
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'virtualized' && <FullyVirtualizedExample />}
+        {activeTab === 'row-virtualization' && <RowVirtualization />}
+        {activeTab === 'column-virtualization' && <ColumnVirtualization />}
+        {activeTab === 'infinite-scrolling' && <InfiniteScrolling />}
+      </Box>
+    </>
+  );
+};
+
+export default VirtualizedExamples;
diff --git a/apps/material-react-table-docs/pages/docs/examples/column-virtualization.mdx b/apps/material-react-table-docs/pages/docs/examples/column-virtualization.mdx
@@ -0,0 +1,32 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/VirtualizedExamples';
+
+<Head>
+  <title>{'Column Virtualization Example - Material React Table V2 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of a Material React Table with column virtualization enabled to achieve higher performance when rendering large data sets"
+  />
+  <meta
+    property="og:title"
+    content="Column Virtualization in Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn how to enable column virtualization features in Material React Table"
+  />
+</Head>
+
+## Column Virtualization Example
+
+Material React Table has a built-in column virtualization feature (via [`@tanstack/react-virual`](https://tanstack.com/virtual/v3)) that lets you to render a large number of columns without major performance issues that you would normally see with a large number of DOM elements.
+
+Try out the performance of the table below with **500 columns**! Filtering, Search, and Sorting also maintain usable performance.
+
+Be sure to also check out the full [virtualization feature guide docs](/docs/guides/virtualization) to learn about both Row and Column Virtualization.
+
+> NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.
+
+<Examples isPage />
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization)**
diff --git a/apps/material-react-table-docs/pages/docs/examples/filter-switching.mdx b/apps/material-react-table-docs/pages/docs/examples/filter-switching.mdx
@@ -2,14 +2,14 @@ import Head from 'next/head';
 import Examples from '../../../example-groups/FilteringExamples';
 
 <Head>
-  <title>{'Faceted Switching Example - Material React Table V2 Docs'}</title>
+  <title>{'Filter Switching Example - Material React Table V2 Docs'}</title>
   <meta
     name="description"
     content="An example of Material React Table which shows how to let the user switch between multiple filtering modes."
   />
   <meta
     property="og:title"
-    content="Faceted Values Material React Table Example"
+    content="Filter Switching Material React Table Example"
   />
   <meta
     property="og:description"

diff --git a/apps/material-react-table-docs/pages/docs/examples/infinite-scrolling.mdx b/apps/material-react-table-docs/pages/docs/examples/infinite-scrolling.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
-import Example from '../../../examples/infinite-scrolling';
+import Examples from '../../../example-groups/VirtualizedExamples';
 
 <Head>
-  <title>Infinite Scrolling Example - Material React Table V2 Docs</title>
+  <title>{'Infinite Scrolling Example - Material React Table V2 Docs'}</title>
   <meta
     name="description"
     content="An example of Material React Table which shows how to implement an infinite scrolling table that fetches data from a remote server as the user scrolls down the table with the useInfiniteQuery hook from react-query"
@@ -25,6 +25,6 @@ Using a library like [`@tanstack/react-query`](https://tanstack.com/query/v4) ma
 
 Enabling the virtualization feature is actually optional here but is encouraged if the table will be expected to render more than 100 rows at a time.
 
-<Example />
+<Examples isPage />
 
 View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/material-react-table-docs/pages/docs/examples/popover-filters.mdx b/apps/material-react-table-docs/pages/docs/examples/popover-filters.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+<Head>
+  <title>{'Popover Filters Example - Material React Table V2 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows an excel-like column filters."
+  />
+  <meta
+    property="og:title"
+    content="Popover Filters Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows an excel-like column filters."
+  />
+</Head>
+
+## Popover Filters Example
+
+Material React Table supports displaying column filters in other ways than in the default sub-header location. This example shows how to only show column filters when the user clicks on the filter icon in the header, and then display the filters in a popover. Learn more in the full [Column Filtering Feature Guide](/docs/guides/column-filtering).
+
+<Examples isPage />
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/material-react-table-docs/pages/docs/examples/row-virtualization.mdx b/apps/material-react-table-docs/pages/docs/examples/row-virtualization.mdx
@@ -0,0 +1,32 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/VirtualizedExamples';
+
+<Head>
+  <title>{'Row Virtualization Example - Material React Table V2 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of a Material React Table with row virtualization enabled to achieve higher performance when rendering large data sets"
+  />
+  <meta
+    property="og:title"
+    content="Row Virtualization in Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="Learn how to enable row virtualization features in Material React Table"
+  />
+</Head>
+
+## Row Virtualization Example
+
+Material React Table has a built-in row virtualization feature (via [`@tanstack/react-virual`](https://tanstack.com/virtual/v3)) that lets you to render a large number of rows without major performance issues that you would normally see with a large number of DOM elements.
+
+Try out the performance of the table below with **10,000 rows**! Filtering, Search, and Sorting also maintain usable performance.
+
+Be sure to also check out the full [virtualization feature guide docs](/docs/guides/virtualization) to learn about both Row and Column Virtualization.
+
+> NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.
+
+<Examples isPage />
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization)**
diff --git a/apps/material-react-table-docs/pages/docs/examples/virtualized.mdx b/apps/material-react-table-docs/pages/docs/examples/virtualized.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
-import Example from '../../../examples/virtualized';
+import Examples from '../../../example-groups/VirtualizedExamples';
 
 <Head>
-  <title>Virtualized Example - Material React Table V2 Docs</title>
+  <title>{'Virtualized Example - Material React Table V2 Docs'}</title>
   <meta
     name="description"
     content="An example of a Material React Table with virtualization enabled to achieve higher performance when rendering large data sets"
@@ -19,14 +19,14 @@ import Example from '../../../examples/virtualized';
 
 ## Virtualized Example
 
-Material React Table has a built-in row virtualization feature (via [`@tanstack/react-virual`](https://tanstack.com/virtual/v3)) that lets you to render a large number of rows without major performance issues.
+Material React Table has a built-in virtualization features (via [`@tanstack/react-virual`](https://tanstack.com/virtual/v3)) that lets you to render a large number of rows or columns without major performance issues that you would normally see with a large number of DOM elements.
 
 Try out the performance of the table below with **10,000 rows** and over a dozen columns! Filtering, Search, and Sorting also maintain usable performance.
 
 Be sure to also check out the full [virtualization feature guide docs](/docs/guides/virtualization) to learn about both Row and Column Virtualization.
 
 > NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.
 
-<Example />
+<Examples isPage />
 
 View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization)**
diff --git a/apps/material-react-table-docs/styles/MuiTheme.ts b/apps/material-react-table-docs/styles/MuiTheme.ts
@@ -17,6 +17,22 @@ export const theme = ({
         main: isLightTheme ? darken(secondaryColor, 0.1) : secondaryColor,
       },
     },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: 'none',
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: 'none',
+          },
+        },
+      },
+    },
     typography: {
       h1: {
         fontSize: '1.8rem',

diff --git a/apps/material-react-table-docs/styles/ThemeContext.tsx b/apps/material-react-table-docs/styles/ThemeContext.tsx
@@ -44,7 +44,12 @@ export const ThemeContextProvider = ({ children }) => {
       }}
     >
       <ThemeProvider
-        theme={theme({ isLightTheme, primaryColor, secondaryColor })}
+        theme={theme({
+          isLightTheme,
+          primaryColor,
+          secondaryColor,
+
+        })}
       >
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           {children}

diff --git a/packages/material-react-table/src/head/MRT_TableHeadCell.tsx b/packages/material-react-table/src/head/MRT_TableHeadCell.tsx
@@ -186,7 +186,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
         ...draggingBorders,
       })}
     >
-      {header.isPlaceholder ? null : (
+      {header.isPlaceholder || column.id === 'mrt-row-spacer' ? null : (
         <Box
           className="Mui-TableHeadCell-Content"
           sx={{

diff --git a/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx b/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx
@@ -139,7 +139,7 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
           ) && {
             columnDefType: 'display',
             header: '',
-            id: 'spacer',
+            id: 'mrt-row-spacer',
             muiTableBodyCellProps: blankColProps,
             muiTableFooterCellProps: blankColProps,
             muiTableHeadCellProps: blankColProps,