material-react-table-narender 1.0.0 → 3.0.3

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

@@ -1,215 +0,0 @@
-import { Box, Card, Stack, Typography } from '@mui/material';
-import Image from 'next/image';
-import { AnchorLink } from './AnchorLink';
-
-export const HomeCards = () => {
-  return (
-    <Box
-      sx={{
-        marginTop: '3rem',
-        gap: '1rem',
-        display: 'grid',
-        gridTemplateColumns: '2fr 1fr',
-        h3: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          marginBottom: '1rem',
-          gap: '0.75rem',
-        },
-        '@media (max-width: 1024px)': {
-          gridTemplateColumns: '1fr',
-        },
-      }}
-    >
-      <Stack sx={{ display: 'grid', gap: '1rem' }}>
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr',
-            gap: '1rem',
-            '@media (max-width: 768px)': {
-              gridTemplateColumns: '1fr',
-            },
-          }}
-        >
-          <Card sx={{ p: '1rem' }}>
-            <Typography variant="h3">The Best of Both Worlds</Typography>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                margin: '1rem auto',
-              }}
-            >
-              <Image
-                alt="Mui + React Table"
-                src={`/banner.png`}
-                height={60}
-                width={256}
-              />
-            </Box>
-            <Typography>
-              Combine TanStack Table&apos;s Extensive API With Material
-              UI&apos;s Awesome Pre-Built Components!
-            </Typography>
-          </Card>
-          <Card sx={{ p: '1rem' }}>
-            <Typography variant="h3">
-              <Image
-                alt="Efficiency Icon"
-                height={24}
-                width={24}
-                src={'/efficient.svg'}
-              />{' '}
-              Efficient Bundle Size
-            </Typography>
-            <Typography>37-53 KB depending on components imported.</Typography>
-            <Typography>
-              Import the recommended <code>MaterialReactTable</code> component,
-              or optionally import lighter weight MRT sub-components that only
-              include the UI you need.
-            </Typography>
-          </Card>
-        </Box>
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr',
-            gap: '1rem',
-            '@media (max-width: 768px)': {
-              gridTemplateColumns: '1fr',
-            },
-          }}
-        >
-          <Card sx={{ p: '1rem' }}>
-            <Typography variant="h3">
-              <Image
-                alt="Quality Icon"
-                height={24}
-                width={24}
-                src={'/customizable.svg'}
-              />{' '}
-              Pre-Built or 100% Custom
-            </Typography>
-            <Typography>
-              Use the pre-built single component data grid with the{' '}
-              <code>&lt;MaterialReactTable /&gt;</code> component.
-            </Typography>
-            <Typography>
-              Or build your own markup from scratch using the{' '}
-              <code>useMaterialReactTable</code> hook.
-            </Typography>
-            <Typography>
-              All internal MRT components are exported for you to use as
-              &quot;lego blocks&quot; to build your own custom tables.
-            </Typography>
-          </Card>
-          <Card sx={{ p: '1rem' }}>
-            <Typography variant="h3">
-              <Image
-                alt="Customizable Icon"
-                height={24}
-                width={24}
-                src={`/source-code.svg`}
-              />{' '}
-              Easy Customization
-            </Typography>
-            <Typography>
-              Just about everything is customizable or overridable in Material
-              React Table. Pass in custom props or styles to all internal
-              components. Use simple <code>enable*</code> props to easily enable
-              or disable features.
-            </Typography>
-          </Card>
-        </Box>
-      </Stack>
-      <Stack sx={{ display: 'grid', gap: '1rem' }}>
-        <Card sx={{ p: '1rem' }}>
-          <Typography variant="h3">
-            <Image
-              alt="Quality Icon"
-              height={24}
-              width={24}
-              src={`/quality.svg`}
-            />{' '}
-            Powerful Features
-          </Typography>
-          <Typography>
-            Material React Table has most of the features you would expect from
-            a modern table library including{' '}
-            <AnchorLink href="/docs/guides/pagination">Pagination</AnchorLink>,{' '}
-            <AnchorLink href="/docs/guides/sorting">Sorting</AnchorLink>,{' '}
-            <AnchorLink href="/docs/guides/column-filtering">
-              Filtering
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/row-selection">
-              Row Selection
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/expanding-sub-rows">
-              Row Expansion
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/column-resizing">
-              Column Resizing
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/column-ordering-dnd">
-              Column Reordering
-            </AnchorLink>
-            , etc.
-          </Typography>
-          <Typography>
-            However, Material React Table also has advanced features that you
-            may not find in other table libraries such as{' '}
-            <AnchorLink href="/docs/guides/virtualization">
-              Virtualization
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/aggregation-and-grouping">
-              Aggregation and Grouping
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/examples/advanced">
-              Advanced Filter UIs
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/global-filtering">
-              Fuzzy Search
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/editing">
-              Full Editing (CRUD)
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/column-pinning">
-              Column Pinning
-            </AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/row-pinning">Row Pinning</AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/row-numbers">Row Numbers</AnchorLink>
-            ,{' '}
-            <AnchorLink href="/docs/guides/click-to-copy">
-              Click to Copy
-            </AnchorLink>
-            , and more.
-          </Typography>
-        </Card>
-        <Card sx={{ p: '1rem' }}>
-          <Typography variant="h3">30+ i18n Locales</Typography>
-          <Typography>
-            The MRT Community has contributed{' '}
-            <AnchorLink href="/docs/guides/localization">
-              over&nbsp;30&nbsp;Locales
-            </AnchorLink>{' '}
-            for everyone to import and use.
-          </Typography>
-        </Card>
-      </Stack>
-    </Box>
-  );
-};

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

@@ -1,50 +0,0 @@
-import { useState } from 'react';
-import { Tab, Tabs } from '@mui/material';
-import { SampleCodeSnippet } from './SampleCodeSnippet';
-
-type Tab = 'npm' | 'pnpm' | 'yarn' | 'bun';
-
-const defaultPackagesString =
-  'material-react-table @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled';
-
-export const InstallCommand = ({
-  packagesString = defaultPackagesString,
-  ...rest
-}) => {
-  const [tab, setTab] = useState<Tab>('npm');
-
-  return (
-    <>
-      <Tabs
-        textColor="secondary"
-        indicatorColor="secondary"
-        value={tab}
-        onChange={(_e, newValue) => setTab(newValue)}
-        {...rest}
-      >
-        <Tab label="NPM" value="npm" />
-        <Tab label="PNPM" value="pnpm" />
-        <Tab label="Yarn" value="yarn" sx={{ textTransform: 'none' }} />
-        <Tab label="Bun" value="bun" sx={{ textTransform: 'none' }} />
-      </Tabs>
-      <SampleCodeSnippet
-        className="language-bash"
-        margin="0"
-        style={{ overflowX: 'hidden' }}
-        paperSxProps={{
-          '& .token-line': {
-            overflowX: 'auto',
-          },
-        }}
-      >
-        {tab === 'npm'
-          ? `npm i ${packagesString}`
-          : tab === 'pnpm'
-            ? `pnpm add ${packagesString}`
-            : tab === 'yarn'
-              ? `yarn add ${packagesString}`
-              : `bun add ${packagesString}`}
-      </SampleCodeSnippet>
-    </>
-  );
-};

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

@@ -1,94 +0,0 @@
-import { alpha, Box, Card, Typography, Link } from '@mui/material';
-import Image from 'next/image';
-
-const cardData = [
-  {
-    text: 'NPM',
-    image: '/npm.svg',
-    href: 'https://www.npmjs.com/package/material-react-table',
-  },
-  {
-    text: 'Source Code',
-    image: '/source-code.svg',
-    href: 'https://github.com/kevinvandy/material-react-table',
-  },
-  {
-    text: 'GitHub Issues',
-    image: '/github-issues.svg',
-    href: 'https://github.com/kevinvandy/material-react-table/issues',
-  },
-  {
-    text: 'Discord',
-    image: '/discord.svg',
-    href: 'https://discord.gg/5wqyRx6fnm',
-  },
-  {
-    text: 'Storybook',
-    image: '/storybook.svg',
-    href: 'https://material-react-table.dev',
-  },
-];
-
-export const LinkCards = () => {
-  return (
-    <Box
-      sx={{
-        mt: '2rem',
-        textAlign: 'center',
-      }}
-    >
-      <Typography sx={{ p: '1rem' }} variant="h3">
-        Useful Links
-      </Typography>
-      <Box
-        sx={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          gap: '1.5rem',
-        }}
-      >
-        {cardData.map((cd, index) => (
-          <Link
-            key={index}
-            href={cd.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            sx={{ textDecoration: 'none' }}
-          >
-            <Card
-              elevation={4}
-              sx={(theme) => ({
-                alignItems: 'center',
-                borderRadius: '0.5rem',
-                color: theme.palette.primary.dark,
-                cursor: 'pointer',
-                display: 'flex',
-                flexDirection: 'column',
-                minHeight: '90px',
-                fontWeight: 'bold',
-                gap: '1rem',
-                justifyContent: 'center',
-                p: '1rem',
-                width: '9.5rem',
-                '&:hover': {
-                  boxShadow: `1px 4px 8px ${alpha(
-                    theme.palette.primary.dark,
-                    0.5,
-                  )}`,
-                  '& img': {
-                    transform: 'scale(1.01)',
-                    transition: 'transform 150ms ease-in-out',
-                  },
-                },
-              })}
-            >
-              <Image src={cd.image} alt={cd.text} width={60} height={60} />
-              <Typography>{cd.text}</Typography>
-            </Card>
-          </Link>
-        ))}
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,74 +0,0 @@
-import { type ReactNode, useState } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import LinkIcon from '@mui/icons-material/Link';
-import AddLinkIcon from '@mui/icons-material/AddLink';
-import {
-  IconButton,
-  Tooltip,
-  Typography,
-  type TypographyProps,
-  Link as MuiLink,
-} from '@mui/material';
-
-interface Props extends TypographyProps {
-  children: ReactNode | string;
-  tableId?: string;
-  href?: string;
-}
-
-export const LinkHeading = ({ children, tableId, ...rest }: Props) => {
-  const { pathname } = useRouter();
-
-  const [isCopied, setIsCopied] = useState(false);
-
-  const id = `${tableId ? `${tableId}-` : ''}${children
-    ?.toString()
-    ?.toLowerCase?.()
-    ?.replaceAll?.(' ', '-')}`?.replaceAll?.('/', '-');
-
-  const href = `${pathname}#${id}`;
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(window.location.origin + href);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), 3000);
-  };
-
-  return (
-    <Link href={href} passHref legacyBehavior>
-      <MuiLink
-        sx={{
-          color: 'inherit',
-          textDecoration: 'none',
-          '&:hover': {
-            textDecoration: 'underline',
-          },
-        }}
-      >
-        <Typography
-          className={id.includes('relevant') ? 'relevant' : undefined}
-          id={id}
-          {...rest}
-        >
-          {children}{' '}
-          <IconButton
-            aria-label="Copy link"
-            onClick={handleCopy}
-            sx={{
-              opacity: 0.2,
-              transition: 'all 150ms ease',
-              '&:hover': {
-                opacity: 1,
-              },
-            }}
-          >
-            <Tooltip arrow title={isCopied ? 'Copied!' : 'Copy Link'}>
-              {isCopied ? <AddLinkIcon /> : <LinkIcon />}
-            </Tooltip>
-          </IconButton>
-        </Typography>
-      </MuiLink>
-    </Link>
-  );
-};

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

@@ -1,138 +0,0 @@
-import { type CSSProperties, useState } from 'react';
-import {
-  useTheme,
-  Tooltip,
-  IconButton,
-  alpha,
-  Paper,
-  type SxProps,
-  type Theme,
-} from '@mui/material';
-import { Highlight, themes } from 'prism-react-renderer';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import LibraryAddCheckIcon from '@mui/icons-material/LibraryAddCheck';
-
-interface Props {
-  children: string;
-  className?: string;
-  enableCopyButton?: boolean;
-  style?: CSSProperties;
-  margin?: string;
-  paperSxProps?: SxProps<Theme>;
-}
-
-export const SampleCodeSnippet = ({ paperSxProps, ...props }: Props) => {
-  const theme = useTheme();
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(props.children);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), 3000);
-  };
-
-  if (!props.className) {
-    return (
-      <code
-        style={{
-          backgroundColor: alpha(
-            theme.palette.primary.main,
-            theme.palette.mode === 'dark' ? 0.2 : 0.1,
-          ),
-          padding: '4px',
-          margin: '0 0.5ch',
-          fontSize: '11pt',
-        }}
-        {...props}
-      />
-    );
-  }
-
-  const language = props.className?.replace?.(/language-/, '') as any;
-
-  let code = props.children;
-  if (language === 'bash') {
-    code = `$ ${props.children}`;
-  }
-
-  return (
-    <Paper
-      elevation={3}
-      sx={{
-        boxShadow: props.enableCopyButton === false ? 'none' : undefined,
-        backgroundImage: 'none',
-        backgroundColor: 'transparent',
-        ...paperSxProps,
-      }}
-    >
-      <Highlight
-        code={code}
-        language={language}
-        theme={
-          theme.palette.mode === 'dark'
-            ? themes.oceanicNext
-            : themes.nightOwlLight
-        }
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <div
-            style={{
-              position: 'relative',
-              margin:
-                props.margin ??
-                (props.enableCopyButton !== false ? '2rem auto' : 0),
-              fontSize: '11pt',
-              lineHeight: '1.4rem',
-            }}
-          >
-            {props.enableCopyButton !== false && (
-              <Tooltip arrow title={isCopied ? 'Copied!' : 'Copy Code'}>
-                <IconButton
-                  sx={{
-                    position: 'absolute',
-                    top: '0.25rem',
-                    right: '0.25rem',
-                  }}
-                  onClick={handleCopy}
-                >
-                  {isCopied ? <LibraryAddCheckIcon /> : <ContentCopyIcon />}
-                </IconButton>
-              </Tooltip>
-            )}
-            <pre
-              className={className}
-              style={{
-                ...style,
-                minHeight: '3rem',
-                overflowX: 'auto',
-                padding: '0.75rem 1rem 0 1rem',
-                ...props?.style,
-              }}
-            >
-              {tokens.map((line, i) => (
-                <div
-                  key={i}
-                  {...getLineProps({ line })}
-                  style={{
-                    textDecoration: line[0].content.startsWith('-')
-                      ? 'line-through'
-                      : undefined,
-                    color: line[0].content.startsWith('-')
-                      ? theme.palette.error.main
-                      : line[0].content.startsWith('+')
-                        ? theme.palette.success.main
-                        : undefined,
-                  }}
-                >
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-          </div>
-        )}
-      </Highlight>
-    </Paper>
-  );
-};