add filtering example group

KevinVandy · Oct 16, 2023 · 08627a5 · 08627a5
1 parent 01419ea
commit 08627a5
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 21 deletions.
diff --git a/apps/material-react-table-docs/components/navigation/routes.ts b/apps/material-react-table-docs/components/navigation/routes.ts
@@ -136,6 +136,20 @@ export const routes: Array<RouteItem> = [
           },
         ],
       },
+      {
+        href: '/docs/examples/filter-variants',
+        label: 'Filtering Examples',
+        secondaryItems: [
+          {
+            href: '/docs/examples/faceted-values',
+            label: 'Faceted Values',
+          },
+          {
+            href: '/docs/examples/filter-modes',
+            label: 'Filter Modes',
+          },
+        ],
+      },
       {
         href: '/docs/examples/sticky-header',
         label: 'Sticky Pinning Examples',

diff --git a/apps/material-react-table-docs/example-groups/FilteringExamples.tsx b/apps/material-react-table-docs/example-groups/FilteringExamples.tsx
@@ -0,0 +1,61 @@
+import { useRouter } from 'next/router';
+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 { useState } from 'react';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const FilteringExamples = ({ 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="Filter Variants" value="filter-variants" />
+          <Tab label="Faceted Values" value="faceted-values" />
+          <Tab label="Filter Switching" value="filter-switching" />
+          <Tab
+            label={
+              <Box>
+                Server-Side Filtering
+                <LaunchIcon sx={{ fontSize: '1rem' }} />
+              </Box>
+            }
+            value="react-query"
+          />
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'filter-variants' && <FilterVariantsExample />}
+        {activeTab === 'faceted-values' && <FacetedValuesExample />}
+        {activeTab === 'filter-switching' && <FilterModesExample />}
+      </Box>
+    </>
+  );
+};
+
+export default FilteringExamples;
diff --git a/apps/material-react-table-docs/example-groups/StickyPinningExamples.tsx b/apps/material-react-table-docs/example-groups/StickyPinningExamples.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react';
 import Link from 'next/link';
 import LaunchIcon from '@mui/icons-material/Launch';
 
-const RemoteFetchingExamples = ({ isPage = false }) => {
+const StickyPinningExamples = ({ isPage = false }) => {
   const { pathname, push } = useRouter();
   const [activeTab, setActiveTab] = useState(
     isPage ? pathname.split('/').pop() : 'export-csv',
@@ -52,4 +52,4 @@ const RemoteFetchingExamples = ({ isPage = false }) => {
   );
 };
 
-export default RemoteFetchingExamples;
+export default StickyPinningExamples;
diff --git a/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/TS.tsx
@@ -20,20 +20,6 @@ const Example = () => {
         filterVariant: 'text', // default
         size: 200,
       },
-      {
-        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
-        id: 'hireDate',
-        header: 'Hire Date',
-        filterVariant: 'date-range',
-        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
-      },
-      {
-        accessorKey: 'age',
-        header: 'Age',
-        filterVariant: 'range',
-        filterFn: 'between',
-        size: 80,
-      },
       {
         accessorKey: 'salary',
         header: 'Salary',
@@ -56,6 +42,20 @@ const Example = () => {
             }),
         },
       },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
+        id: 'hireDate',
+        header: 'Hire Date',
+        filterVariant: 'date-range',
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+        filterVariant: 'range',
+        filterFn: 'between',
+        size: 80,
+      },
       {
         accessorKey: 'city',
         header: 'City',

diff --git a/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/JS.js
@@ -1,13 +1,14 @@
 import { useMemo } from 'react';
 import { MaterialReactTable } from 'material-react-table';
 import { data } from './makeData';
+import { MenuItem } from '@mui/material';
 
 const Example = () => {
   const columns = useMemo(
     () => [
       {
         accessorKey: 'id',
-        enablePinning: false, //disable column pinning for this column
+        enableColumnPinning: false, //disable column pinning for this column
         header: 'ID',
         size: 50,
       },
@@ -32,11 +33,14 @@ const Example = () => {
         accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
         header: 'City',
       },
-
       {
         accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
         header: 'State',
       },
+      {
+        accessorKey: 'country',
+        header: 'Country',
+      },
     ],
     [],
   );
@@ -46,7 +50,13 @@ const Example = () => {
       columns={columns}
       data={data}
       enableColumnPinning
-      initialState={{ columnPinning: { left: ['state'], right: ['city'] } }}
+      enableRowActions
+      renderRowActionMenuItems={() => [
+        <MenuItem key="action">Action</MenuItem>,
+      ]}
+      initialState={{
+        columnPinning: { left: ['mrt-row-actions', 'state'], right: ['city'] },
+      }}
     />
   );
 };

diff --git a/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/TS.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
 import { data, type Person } from './makeData';
+import { MenuItem } from '@mui/material';
 
 const Example = () => {
   const columns = useMemo<MRT_ColumnDef<Person>[]>(
@@ -32,11 +33,14 @@ const Example = () => {
         accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
         header: 'City',
       },
-
       {
         accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
         header: 'State',
       },
+      {
+        accessorKey: 'country',
+        header: 'Country',
+      },
     ],
     [],
   );
@@ -46,7 +50,13 @@ const Example = () => {
       columns={columns}
       data={data}
       enableColumnPinning
-      initialState={{ columnPinning: { left: ['state'], right: ['city'] } }}
+      enableRowActions
+      renderRowActionMenuItems={() => [
+        <MenuItem key="action">Action</MenuItem>,
+      ]}
+      initialState={{
+        columnPinning: { left: ['mrt-row-actions', 'state'], right: ['city'] },
+      }}
     />
   );
 };

diff --git a/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/makeData.ts b/apps/material-react-table-docs/examples/enable-column-pinning/sandbox/src/makeData.ts
@@ -6,6 +6,7 @@ export type Person = {
   address: string;
   city: string;
   state: string;
+  country: string;
 };
 
 export const data = [
@@ -17,6 +18,7 @@ export const data = [
     address: '261 Erdman Ford',
     city: 'East Daphne',
     state: 'Kentucky',
+    country: 'United States',
   },
   {
     id: '2',
@@ -26,6 +28,7 @@ export const data = [
     address: '769 Dominic Grove',
     city: 'Columbus',
     state: 'Ohio',
+    country: 'United States',
   },
   {
     id: '3',
@@ -35,6 +38,7 @@ export const data = [
     address: '566 Brakus Inlet',
     city: 'South Linda',
     state: 'West Virginia',
+    country: 'United States',
   },
   {
     id: '4',
@@ -44,6 +48,7 @@ export const data = [
     address: '722 Emie Stream',
     city: 'Lincoln',
     state: 'Nebraska',
+    country: 'United States',
   },
   {
     id: '5',
@@ -53,5 +58,17 @@ export const data = [
     address: '32188 Larkin Turnpike',
     city: 'Charleston',
     state: 'South Carolina',
+    country: 'United States',
   },
+  {
+    id: '6',
+    firstName: 'Brandon',
+    middleName: 'Joe',
+    lastName: 'Kutch',
+    address: '5660 Kuhn Village',
+    city: 'Vancouver',
+    state: 'British Columbia',
+    country: 'Canada',
+
+  }
 ];
diff --git a/apps/material-react-table-docs/pages/docs/examples/faceted-values.mdx b/apps/material-react-table-docs/pages/docs/examples/faceted-values.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+<Head>
+  <title>{'Faceted Values Example - Material React Table V2 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows how to use faceted values to automatically populate filter suggestions."
+  />
+  <meta
+    property="og:title"
+    content="Faceted Values Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to use faceted values to automatically populate filter suggestions."
+  />
+</Head>
+
+## Faceted Values Example
+
+Material React Table can scan your data and automatically generate filter autocomplete suggestions, filter select options, or min and max values for your column filters. This is made possible by the faceted values feature from TanStack Table. 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/filter-switching.mdx b/apps/material-react-table-docs/pages/docs/examples/filter-switching.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+<Head>
+  <title>{'Faceted 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"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows how to let the user switch between multiple filtering modes."
+  />
+</Head>
+
+## Faceted Switching Example
+
+Material React Table supports letting users switch between multiple filter modes. 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/filter-variants.mdx b/apps/material-react-table-docs/pages/docs/examples/filter-variants.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/FilteringExamples';
+
+<Head>
+  <title>{'Filter Variants Example - Material React Table V2 Docs'}</title>
+  <meta
+    name="description"
+    content="An example of Material React Table which shows all of the powerful built-in filter variants."
+  />
+  <meta
+    property="og:title"
+    content="Filter Variants Material React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Material React Table which shows all of the powerful built-in filter variants."
+  />
+</Head>
+
+## Filter Variants Example
+
+Material React Table has not only has filtering built-in, but it has a lot of different filter variants that take care of a lot of the heavy lifting for you. Text filters, date filters, range filters, range slider filters, and more are all built-in and ready to use. There is a ton more you can do to customize the behavior of filtering, so be sure to check out the full [Column Filtering Feature Guide](/docs/guides/column-filtering) for more information.
+
+<Examples isPage />
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/prop-playground--default)**