material-react-table-narender 1.0.0

package/apps/material-react-table-docs/example-groups/BasicExamples.tsx

@@ -0,0 +1,136 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+import BasicExample from '../examples/basic';
+import MinimalExample from '../examples/minimal';
+import AdvancedExample from '../examples/advanced';
+import CustomHeadlessExample from '../examples/custom-headless';
+import { useState } from 'react';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const BasicExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'basic',
+  );
+
+  return (
+    <>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          scrollButtons="auto"
+          variant="scrollable"
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(_e, newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+        >
+          <Tab label="Basic" value="basic" />
+          <Tab label="Minimal" value="minimal" />
+          <Tab label="Advanced" value="advanced" />
+          <Tab label="Custom Headless" value="custom-headless" />
+          <Link href="/docs/examples/export-csv" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Data Export
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples/column-ordering" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  DnD
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples/editing-crud" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Editing
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples/filter-variants" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Filtering
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples/react-query" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Fetching
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples/sticky-header" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Pinning
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples/virtualized" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Virtualization
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'basic' && <BasicExample showTopRow={isPage} />}
+        {activeTab === 'minimal' && <MinimalExample showTopRow={isPage} />}
+        {activeTab === 'advanced' && <AdvancedExample showTopRow={isPage} />}
+        {activeTab === 'custom-headless' && (
+          <CustomHeadlessExample showTopRow={isPage} />
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default BasicExamples;

package/apps/material-react-table-docs/example-groups/DataExportExamples.tsx

@@ -0,0 +1,53 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+import CSVExport from '../examples/export-to-csv';
+import PDFExport from '../examples/export-to-pdf';
+import { useState } from 'react';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const RemoteFetchingExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'export-csv',
+  );
+
+  return (
+    <>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          scrollButtons="auto"
+          variant="scrollable"
+          textColor="secondary"
+          indicatorColor="secondary"
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(_e, newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+        >
+          <Tab label="Export to CSV" value="export-csv" />
+          <Tab label="Export to PDF" value="export-pdf" />
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'export-csv' && <CSVExport />}
+        {activeTab === 'export-pdf' && <PDFExport />}
+      </Box>
+    </>
+  );
+};
+
+export default RemoteFetchingExamples;

package/apps/material-react-table-docs/example-groups/DraggingExamples.tsx

@@ -0,0 +1,56 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+import ColumnOrdering from '../examples/enable-column-ordering';
+import RowOrdering from '../examples/enable-row-ordering';
+import RowDragging from '../examples/enable-row-dragging';
+import { useState } from 'react';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const RemoteFetchingExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'export-csv',
+  );
+
+  return (
+    <>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          scrollButtons="auto"
+          variant="scrollable"
+          textColor="secondary"
+          indicatorColor="secondary"
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(_e, newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+        >
+          <Tab label="Column Ordering" value="column-ordering" />
+          <Tab label="Row Ordering" value="row-ordering" />
+          <Tab label="Row Dragging" value="row-dragging" />
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'column-ordering' && <ColumnOrdering />}
+        {activeTab === 'row-ordering' && <RowOrdering />}
+        {activeTab === 'row-dragging' && <RowDragging />}
+      </Box>
+    </>
+  );
+};
+
+export default RemoteFetchingExamples;

package/apps/material-react-table-docs/example-groups/EditingCRUDExamples.tsx

@@ -0,0 +1,73 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+import ModalExample from '../examples/editing-crud-modal';
+import InlineRowExample from '../examples/editing-crud-row';
+import InlineCellExample from '../examples/editing-crud-cell';
+import InlineTableExample from '../examples/editing-crud-table';
+import TreeEditingExample from '../examples/editing-crud-tree';
+
+const EditingCRUDExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'editing-crud',
+  );
+
+  return (
+    <>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          scrollButtons="auto"
+          variant="scrollable"
+          textColor="secondary"
+          indicatorColor="secondary"
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(_e, newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+        >
+          <Tab label="Modal" value="editing-crud" />
+          <Tab label="Inline Row" value="editing-crud-inline-row" />
+          <Tab label="Inline Cell" value="editing-crud-inline-cell" />
+          <Tab label="Inline Table" value="editing-crud-inline-table" />
+          <Tab label="Tree Editing" value="editing-crud-tree" />
+          <Link href="/docs/examples/remote" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Non TanStack Query Fetching
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'editing-crud' && <ModalExample />}
+        {activeTab === 'editing-crud-inline-row' && <InlineRowExample />}
+        {activeTab === 'editing-crud-inline-cell' && <InlineCellExample />}
+        {activeTab === 'editing-crud-inline-table' && <InlineTableExample />}
+        {activeTab === 'editing-crud-tree' && <TreeEditingExample />}
+      </Box>
+    </>
+  );
+};
+
+export default EditingCRUDExamples;

package/apps/material-react-table-docs/example-groups/ExpandingExamples.tsx

@@ -0,0 +1,107 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+import EnableColumnGroupingExample from '../examples/enable-column-grouping';
+import CustomizeRemoveColumnGroupingExample from '../examples/customize-remove-column-grouping';
+import AggregationAndGroupingExample from '../examples/aggregation-and-grouping';
+import DetailExample from '../examples/enable-detail-panel-conditionally';
+import ChartDetailPanelExample from '../examples/chart-detail-panel';
+import ExpandingTreeExample from '../examples/expanding-tree-expanded';
+import ExpandingParsedTreeExample from '../examples/expanding-tree-flat-parse';
+import { useState } from 'react';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const ExpandingExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'detail-panel',
+  );
+
+  return (
+    <>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          scrollButtons="auto"
+          variant="scrollable"
+          textColor="secondary"
+          indicatorColor="secondary"
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(_e, newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+        >
+          <Tab label="Expanding Tree" value="expanding-tree" />
+          <Tab label="Parsed Tree" value="expanding-tree-flat-parse" />
+          <Link href="/docs/examples/lazy-sub-rows" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Lazy Sub-Rows
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Tab label="Column Grouping" value="column-grouping" />
+          <Tab label="Customized Grouping" value="customized-grouping" />
+          <Tab label="Aggregation" value="aggregation-and-grouping" />
+          <Tab label="Detail Panel" value="detail-panel" />
+          <Tab label="Chart Detail Panel" value="chart-detail-panel" />
+          <Link href="/docs/examples/lazy-detail-panel" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Lazy Detail Panel
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples/editing-crud-tree" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  Editing Sub-Rows
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'expanding-tree' && <ExpandingTreeExample />}
+        {activeTab === 'expanding-tree-flat-parse' && (
+          <ExpandingParsedTreeExample />
+        )}
+        {activeTab === 'detail-panel' && <DetailExample />}
+        {activeTab === 'chart-detail-panel' && <ChartDetailPanelExample />}
+        {activeTab === 'column-grouping' && <EnableColumnGroupingExample />}
+        {activeTab === 'customized-grouping' && (
+          <CustomizeRemoveColumnGroupingExample />
+        )}
+        {activeTab === 'aggregation-and-grouping' && (
+          <AggregationAndGroupingExample />
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default ExpandingExamples;

package/apps/material-react-table-docs/example-groups/FilteringExamples.tsx

@@ -0,0 +1,71 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+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 CustomFilterUIExample from '../examples/custom-column-filtering-ui';
+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
+          scrollButtons="auto"
+          variant="scrollable"
+          textColor="secondary"
+          indicatorColor="secondary"
+          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="Popover Filters" value="popover-filters" />
+          <Tab label="Custom Filter UI" value="custom-filter-ui" />
+          <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 />}
+        {activeTab === 'popover-filters' && <PopoverFiltersExample />}
+        {activeTab === 'custom-filter-ui' && <CustomFilterUIExample />}
+      </Box>
+    </>
+  );
+};
+
+export default FilteringExamples;

package/apps/material-react-table-docs/example-groups/InstanceAPIsSwitcher.tsx

@@ -0,0 +1,37 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+
+const InstanceAPIsSwitcher = () => {
+  const { pathname, push } = useRouter();
+
+  return (
+    <>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          textColor="secondary"
+          indicatorColor="secondary"
+          scrollButtons="auto"
+          variant="scrollable"
+          value={pathname.split('/').pop()}
+          onChange={(_e, newPath) => push(newPath as string)}
+        >
+          <Tab
+            label={<Box>Table Instance APIs</Box>}
+            value="table-instance-apis"
+          />
+          <Tab
+            label={<Box>Column Instance APIs</Box>}
+            value="column-instance-apis"
+          />
+          <Tab label={<Box>Row Instance APIs</Box>} value="row-instance-apis" />
+          <Tab
+            label={<Box>Cell Instance APIs</Box>}
+            value="cell-instance-apis"
+          />
+        </Tabs>
+      </Box>
+    </>
+  );
+};
+
+export default InstanceAPIsSwitcher;