material-react-table-narender 1.0.0

package/apps/material-react-table-docs/components/mdx/StatBadges.tsx

@@ -0,0 +1,79 @@
+import { Box } from '@mui/material';
+
+export const StatBadges = () => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: '1rem',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        m: {
+          xs: 0,
+          md: '1rem',
+        },
+        '& img': {
+          imageRendering: 'pixelated',
+        },
+      }}
+    >
+      <a
+        aria-label="NPM Version"
+        href="https://npmjs.com/package/material-react-table"
+        target="_blank_"
+      >
+        <img
+          alt="NPM Version"
+          src="https://badgen.net/npm/v/material-react-table?color=blue"
+        />
+      </a>
+      <a
+        aria-label="Number of Downloads"
+        href="https://npmtrends.com/material-react-table"
+        target="_blank_"
+      >
+        <img
+          alt="Downloads"
+          src="https://badgen.net/npm/dt/material-react-table?label=installs&icon=npm&color=blue"
+        />
+      </a>
+      <a
+        aria-label="Bundle Size"
+        href="https://bundlephobia.com/result?p=material-react-table"
+        target="_blank_"
+      >
+        <img
+          alt="Bundle Size"
+          src="https://badgen.net/bundlephobia/minzip/material-react-table@latest?color=blue"
+        />
+      </a>
+      <a
+        aria-label="GitHub Stars"
+        href="https://star-history.com/#kevinvandy/material-react-table&Date"
+        target="_blank_"
+      >
+        <img
+          alt="GitHub Stars"
+          src="https://badgen.net/github/stars/KevinVandy/material-react-table?color=blue"
+        />
+      </a>
+      <a
+        href="https://github.com/KevinVandy/material-react-table/blob/v3/LICENSE"
+        target="_blank"
+        rel="noopener"
+      >
+        <img
+          alt=""
+          src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue"
+        />
+      </a>
+      <a
+        href="https://github.com/sponsors/kevinvandy"
+        target="_blank"
+        rel="noopener"
+      >
+        <img alt="" src="https://img.shields.io/badge/sponsor-violet" />
+      </a>
+    </Box>
+  );
+};

package/apps/material-react-table-docs/components/mdx/mdxComponents.tsx

@@ -0,0 +1,53 @@
+import { Typography, Link as MuiLink, Divider } from '@mui/material';
+import { Blockquote } from './Blockquote';
+import { SampleCodeSnippet } from './SampleCodeSnippet';
+import { LinkHeading } from './LinkHeading';
+import Link from 'next/link';
+
+export const mdxComponents = {
+  a: (props: any) => (
+    <Link href={props.href} passHref legacyBehavior>
+      <MuiLink
+        target={props.href.startsWith('http') ? '_blank' : undefined}
+        rel="noopener"
+      >
+        {props.children}
+      </MuiLink>
+    </Link>
+  ),
+  blockquote: (props: any) => <Blockquote {...props} />,
+  code: (props: any) => <SampleCodeSnippet {...props} />,
+  h1: (props: any) => <Typography variant="h1" {...props} />,
+  h2: (props: any) => <LinkHeading variant="h2" {...props} />,
+  h3: (props: any) => (
+    <LinkHeading variant="h3" sx={{ mt: '3rem' }} {...props} />
+  ),
+  h4: (props: any) => (
+    <LinkHeading variant="h4" sx={{ mt: '2rem' }} {...props} />
+  ),
+  h5: (props: any) => (
+    <LinkHeading variant="h5" sx={{ mt: '2rem' }} {...props} />
+  ),
+  h6: (props: any) => <Typography variant="h6" {...props} />,
+  hr: (props: any) => <Divider sx={{ mb: '1rem' }} {...props} />,
+  li: (props: any) => (
+    <li className="docsearch-content" {...props}>
+      <Typography variant="body1">{props.children}</Typography>
+    </li>
+  ),
+  p: (props: any) => (
+    <Typography
+      className="docsearch-content"
+      sx={{
+        textAlign: {
+          xs: 'left',
+          md: 'justify',
+        },
+        lineHeight: '1.75rem',
+        m: '0.75rem 0',
+      }}
+      variant="body1"
+      {...props}
+    />
+  ),
+};

package/apps/material-react-table-docs/components/navigation/BreadCrumbs.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from 'react';
+import Link from 'next/link';
+import {
+  Box,
+  IconButton,
+  Breadcrumbs as MuiBreadcrumbs,
+  Link as MuiLink,
+  Tooltip,
+} from '@mui/material';
+import { useRouter } from 'next/router';
+import Head from 'next/head';
+import { ArrowBack } from '@mui/icons-material';
+
+export const BreadCrumbs = () => {
+  const { route, back } = useRouter();
+
+  const breadCrumbLinks = useMemo(() => {
+    const routes = route.split('/');
+    routes.shift();
+    const links: string[] = [];
+    for (let i = 0; i < routes.length + 1; i++) {
+      if (routes[i] && routes[i] !== '/')
+        links.push(`/${routes.slice(0, i + 1).join('/')}`);
+    }
+    return links;
+  }, [route]);
+
+  if (breadCrumbLinks.length === 0) {
+    return null;
+  }
+
+  if (breadCrumbLinks.length === 1) {
+    breadCrumbLinks.unshift('/');
+  }
+
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: breadCrumbLinks.map((link, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name:
+        link === '/'
+          ? 'Home'
+          : link.split('/').pop()?.replaceAll('-', ' ') || '',
+      item: `https://www.material-react-table.com${link}`,
+    })),
+  };
+
+  return (
+    <>
+      <Head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+        />
+      </Head>
+      <Box
+        sx={{ display: 'flex', alignItems: 'center', gap: '1rem', pt: '1rem' }}
+      >
+        <Tooltip title="Go Back">
+          <IconButton
+            aria-label="Go Back"
+            color="default"
+            onClick={back}
+            size="small"
+          >
+            <ArrowBack />
+          </IconButton>
+        </Tooltip>
+        <MuiBreadcrumbs aria-label="breadcrumb" sx={{ m: 0 }}>
+          {breadCrumbLinks.map((link, index) => (
+            <Link key={index} href={link} passHref legacyBehavior>
+              <MuiLink
+                color="inherit"
+                sx={{ cursor: 'pointer', textTransform: 'capitalize' }}
+                underline="hover"
+              >
+                {link === '/'
+                  ? 'Home'
+                  : link
+                      .split('/')
+                      .pop()
+                      ?.replaceAll('-', ' ')
+                      ?.replaceAll('mrt', 'MRT')
+                      ?.replaceAll('css', 'CSS')
+                      ?.replaceAll(' ui', ' UI')
+                      ?.replaceAll('api', 'API')}
+              </MuiLink>
+            </Link>
+          ))}
+        </MuiBreadcrumbs>
+      </Box>
+    </>
+  );
+};

package/apps/material-react-table-docs/components/navigation/Footer.tsx

@@ -0,0 +1,260 @@
+import { useRouter } from 'next/router';
+import { usePlausible } from 'next-plausible';
+import {
+  Box,
+  Button,
+  Divider,
+  Link as MuiLink,
+  Paper,
+  Typography,
+} from '@mui/material';
+import { Edit, GitHub } from '@mui/icons-material';
+import TableOfContentsList from './TableOfContentsList';
+import { routes } from './routes';
+import { EthicalAd } from '../mdx/EthicalAd';
+
+export const Footer = () => {
+  const { pathname } = useRouter();
+  const plausible = usePlausible();
+
+  return (
+    <Box
+      component="footer"
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        marginTop: '50px',
+      }}
+    >
+      <Button
+        color="secondary"
+        endIcon={<GitHub />}
+        startIcon={<Edit />}
+        href={`https://github.com/KevinVandy/material-react-table/edit/v3/apps/material-react-table-docs/pages${pathname}${
+          ['/'].includes(pathname)
+            ? 'index.tsx'
+            : ['/docs', '/docs/api', '/docs/examples', '/docs/guides'].includes(
+                  pathname,
+                )
+              ? '/index.mdx'
+              : '.mdx'
+        }`}
+        onClick={() => plausible('edit-on-github')}
+        rel="noopener"
+        target="_blank"
+        sx={{
+          height: '3rem',
+          m: '2rem auto',
+          cursor: 'pointer',
+          textAlign: 'center',
+        }}
+        variant="outlined"
+      >
+        Suggest an Edit for this page on GitHub
+      </Button>
+      <Typography
+        variant="subtitle1"
+        sx={{
+          mt: '2rem',
+          textAlign: 'center',
+        }}
+      >
+        Using{' '}
+        <MuiLink
+          color="secondary"
+          href="https://mantine.dev/"
+          target="_blank"
+          rel="noopener"
+        >
+          Mantine
+        </MuiLink>{' '}
+        instead of Material UI?
+        <br />
+        Check out{' '}
+        <MuiLink
+          href="https://mantine-react-table.com"
+          target="_blank"
+          sx={(theme) => ({
+            background: `-webkit-linear-gradient(left, ${theme.palette.secondary.main}, ${theme.palette.primary.dark})`,
+            display: 'inline',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            textDecoration: 'none',
+            '&:hover': {
+              textDecoration: 'underline',
+              textDecorationColor: theme.palette.secondary.main,
+            },
+          })}
+        >
+          Mantine&nbsp;React&nbsp;Table
+        </MuiLink>
+      </Typography>
+      <EthicalAd id="footer" text />
+      <Typography
+        sx={{
+          mt: '2rem',
+          textAlign: 'center',
+        }}
+        variant="subtitle2"
+      >
+        <MuiLink
+          sx={{ color: '#6366f1' }}
+          target="_blank"
+          href={`https://plausible.io/material-react-table.com?${new URLSearchParams(
+            { page: pathname },
+          ).toString()}`}
+        >
+          Plausible Analytics
+        </MuiLink>{' '}
+        for this page
+      </Typography>
+      <Paper
+        elevation={3}
+        sx={{
+          borderRadius: '8px',
+          borderBottomLeftRadius: '0',
+          borderBottomRightRadius: '0',
+          mt: '50px',
+          p: '1.5rem',
+        }}
+      >
+        <Typography color="text.secondary" textAlign="center">
+          © {new Date().getFullYear()} Kevin&nbsp;Van&nbsp;Cott
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            gap: '1rem',
+            flexWrap: 'wrap',
+          }}
+        >
+          <MuiLink
+            color="text.secondary"
+            href="https://www.npmjs.com/package/material-react-table"
+            target="_blank"
+            rel="noopener"
+          >
+            NPM
+          </MuiLink>
+          <MuiLink
+            color="text.secondary"
+            href="https://github.com/KevinVandy/material-react-table"
+            target="_blank"
+            rel="noopener"
+          >
+            Source Code
+          </MuiLink>
+          <MuiLink
+            color="text.secondary"
+            href="https://github.com/KevinVandy/material-react-table/issues"
+            target="_blank"
+            rel="noopener"
+          >
+            Submit a Bug Report
+          </MuiLink>
+          <MuiLink
+            color="text.secondary"
+            href="https://discord.gg/5wqyRx6fnm"
+            target="_blank"
+            rel="noopener"
+          >
+            Join&nbsp;the&nbsp;Discord!
+          </MuiLink>
+          <MuiLink
+            color="text.secondary"
+            href="https://twitter.com/kevinvancott"
+            target="_blank"
+            rel="noopener"
+          >
+            Twitter
+          </MuiLink>
+        </Box>
+        <Divider sx={{ m: '2rem 0' }} />
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            mt: '1rem',
+            gap: '0.5rem',
+            flexDirection: {
+              xs: 'column',
+              sm: 'row',
+            },
+            justifyContent: {
+              xs: 'flex-start',
+              sm: 'space-around',
+              md: 'space-between',
+            },
+          }}
+        >
+          <Box>
+            <Typography>Site Directory</Typography>
+            <TableOfContentsList items={routes} isFooter />
+          </Box>
+          <Box>
+            <Typography>API Reference</Typography>
+            <TableOfContentsList
+              items={
+                routes.find((item) => item.href === '/docs/getting-started')
+                  ?.items ?? []
+              }
+              isFooter
+            />
+            <TableOfContentsList
+              items={
+                routes
+                  .find((item) => item.href === '/docs/api')
+                  ?.items?.find((item) => item.label === 'Props and Options')
+                  ?.secondaryItems ?? []
+              }
+              isFooter
+            />
+            <TableOfContentsList
+              items={
+                routes
+                  .find((item) => item.href === '/docs/api')
+                  ?.items?.find((item) => item.label === 'Instance APIs')
+                  ?.secondaryItems ?? []
+              }
+              isFooter
+            />
+            <TableOfContentsList
+              items={
+                routes
+                  .find((item) => item.href === '/docs/api')
+                  ?.items?.find((item) => item.label === 'Components and Hooks')
+                  ?.secondaryItems ?? []
+              }
+              isFooter
+            />
+          </Box>
+          <Box>
+            <Typography>Examples</Typography>
+            <TableOfContentsList
+              items={
+                routes.find((item) => item.href === '/docs/examples')?.items ??
+                []
+              }
+              isFooter
+            />
+          </Box>
+          <Box>
+            <Typography>Guides</Typography>
+            {routes
+              .find((item) => item.href === '/docs/guides')
+              ?.items?.map((item) => (
+                <TableOfContentsList
+                  key={item.href}
+                  items={item?.items ?? []}
+                  isFooter
+                />
+              ))}
+          </Box>
+        </Box>
+      </Paper>
+    </Box>
+  );
+};

package/apps/material-react-table-docs/components/navigation/Layout.tsx

@@ -0,0 +1,76 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Box, useMediaQuery } from '@mui/material';
+import { BreadCrumbs } from './BreadCrumbs';
+import { MiniNav } from './MiniNav';
+import { Footer } from './Footer';
+import { TopBar } from './TopBar';
+import { SideBar } from './Sidebar';
+import { useThemeContext } from '../../styles/ThemeContext';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export const Layout = ({ children }: LayoutProps) => {
+  const { pathname } = useRouter();
+
+  const { isSandboxOpen } = useThemeContext();
+
+  const showBreadCrumbs = pathname !== '/';
+  const showMiniNav =
+    pathname.includes('/docs/getting-started') ||
+    pathname.includes('/docs/api/mrt') ||
+    pathname.includes('/docs/guides/') ||
+    pathname.includes('/migrating') ||
+    pathname === '/about' ||
+    pathname === '/changelog' ||
+    pathname === '/roadmap';
+
+  const isMobile = useMediaQuery('(max-width: 900px)');
+  const isDesktop = useMediaQuery('(min-width: 1500px)');
+  const isXLDesktop = useMediaQuery('(min-width: 1800px)');
+
+  const [navOpen, setNavOpen] = useState(false);
+  return (
+    <>
+      <TopBar
+        navOpen={navOpen || (isDesktop && !isSandboxOpen)}
+        setNavOpen={setNavOpen}
+      />
+      <SideBar
+        navOpen={navOpen || (isDesktop && !isSandboxOpen)}
+        setNavOpen={setNavOpen}
+      />
+      <Box
+        component="main"
+        sx={(theme) => ({
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.text.primary,
+          minHeight: '100vh',
+          p: `64px ${showMiniNav && isXLDesktop ? '264px' : '32px'} 0 ${
+            (navOpen || (isDesktop && !isSandboxOpen)) && !isMobile
+              ? '320px'
+              : '32px'
+          }`,
+          transition: 'all 100ms ease-in-out',
+        })}
+      >
+        <Box
+          sx={{
+            maxWidth: isSandboxOpen ? '100%' : '1200px',
+            margin: 'auto',
+            transition: 'all 100ms ease-in-out',
+            width: '100%',
+          }}
+        >
+          {showBreadCrumbs && <BreadCrumbs />}
+          {showMiniNav && !isXLDesktop && <MiniNav />}
+          {pathname === '/' ? children : <article>{children}</article>}
+          <Footer />
+        </Box>
+        {showMiniNav && isXLDesktop && <MiniNav />}
+      </Box>
+    </>
+  );
+};

package/apps/material-react-table-docs/components/navigation/MiniNav.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { Box, Link, Typography, useMediaQuery } from '@mui/material';
+import { useRouter } from 'next/router';
+import { EthicalAd } from '../mdx/EthicalAd';
+
+export const MiniNav = () => {
+  const { pathname } = useRouter();
+  const isXLDesktop = useMediaQuery('(min-width: 1800px)');
+
+  const [headings, setHeadings] = useState<NodeListOf<HTMLElement>>();
+
+  useEffect(() => {
+    setHeadings(
+      document.querySelectorAll(isXLDesktop ? 'h2, h3, h4, h5' : 'h3'),
+    );
+  }, [isXLDesktop, pathname]);
+
+  return (
+    <Box
+      sx={{
+        position: isXLDesktop ? 'fixed' : undefined,
+        top: '60px',
+        right: '2rem',
+        minWidth: '100px',
+        maxWidth: isXLDesktop ? '250px' : '500px',
+      }}
+    >
+      <Typography mt="1rem" component="div" variant="h6">
+        On This Page
+      </Typography>
+      <ul
+        style={{
+          padding: 0,
+          maxHeight: isXLDesktop ? 'calc(100vh - 9rem)' : undefined,
+          overflowY: isXLDesktop ? 'auto' : undefined,
+        }}
+      >
+        {Array.from(headings ?? []).map((heading, index) => {
+          if (
+            !isXLDesktop &&
+            ['demo', 'source code'].includes(
+              heading.innerText.toLowerCase().trim(),
+            )
+          ) {
+            return;
+          }
+          return (
+            <li
+              key={index}
+              style={{
+                listStyle: 'none',
+                paddingLeft:
+                  heading.localName === 'h3'
+                    ? '1rem'
+                    : heading.localName === 'h4'
+                      ? '2rem'
+                      : heading.localName === 'h5'
+                        ? '3rem'
+                        : 0,
+              }}
+            >
+              <Link
+                href={`#${heading.id}`}
+                sx={(theme) => ({
+                  color:
+                    theme.palette.grey[
+                      theme.palette.mode === 'dark' ? 400 : 700
+                    ],
+                })}
+              >
+                <Typography component="span" variant="subtitle2">
+                  {heading.innerText}
+                </Typography>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+      {isXLDesktop && <EthicalAd id="mini-nav" vertical />}
+    </Box>
+  );
+};