material-react-table-narender 1.0.0

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

@@ -0,0 +1,166 @@
+import { useEffect, useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import AR_Table from '../examples/localization-i18n-ar';
+import AZ_Table from '../examples/localization-i18n-az';
+import BG_Table from '../examples/localization-i18n-bg';
+import CS_Table from '../examples/localization-i18n-cs';
+import DA_Table from '../examples/localization-i18n-da';
+import DE_Table from '../examples/localization-i18n-de';
+import EL_Table from '../examples/localization-i18n-el';
+import EN_Table from '../examples/localization-i18n-en';
+import ES_Table from '../examples/localization-i18n-es';
+import ET_Table from '../examples/localization-i18n-et';
+import FA_Table from '../examples/localization-i18n-fa';
+import FI_Table from '../examples/localization-i18n-fi';
+import FR_Table from '../examples/localization-i18n-fr';
+import HE_Table from '../examples/localization-i18n-he';
+import HR_TABLE from '../examples/localization-i18n-hr';
+import HU_Table from '../examples/localization-i18n-hu';
+import HY_Table from '../examples/localization-i18n-hy';
+import ID_Table from '../examples/localization-i18n-id';
+import IT_Table from '../examples/localization-i18n-it';
+import JA_Table from '../examples/localization-i18n-ja';
+import KO_Table from '../examples/localization-i18n-ko';
+import NL_Table from '../examples/localization-i18n-nl';
+import NO_Table from '../examples/localization-i18n-no';
+import NP_Table from '../examples/localization-i18n-np';
+import PL_Table from '../examples/localization-i18n-pl';
+import PT_BR_Table from '../examples/localization-i18n-pt-BR';
+import PT_Table from '../examples/localization-i18n-pt';
+import RO_Table from '../examples/localization-i18n-ro';
+import RU_Table from '../examples/localization-i18n-ru';
+import SK_Table from '../examples/localization-i18n-sk';
+import SR_Cyrl_RS_Table from '../examples/localization-i18n-sr-Cyrl-RS';
+import SR_Latn_RS_Table from '../examples/localization-i18n-sr-Latn-RS';
+import SV_Table from '../examples/localization-i18n-sv';
+import TR_Table from '../examples/localization-i18n-tr';
+import UK_Table from '../examples/localization-i18n-uk';
+import VI_Table from '../examples/localization-i18n-vi';
+import ZH_HANS_Table from '../examples/localization-i18n-zh-hans';
+import ZH_HANT_Table from '../examples/localization-i18n-zh-hant';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/router';
+
+const supportedLocales = [
+  'ar',
+  'az',
+  'bg',
+  'cs',
+  'da',
+  'de',
+  'el',
+  'en',
+  'es',
+  'et',
+  'fa',
+  'fi',
+  'fr',
+  'he',
+  'hr',
+  'hu',
+  'hy',
+  'id',
+  'it',
+  'ja',
+  'ko',
+  'nl',
+  'no',
+  'np',
+  'pl',
+  'pt',
+  'pt-BR',
+  'ro',
+  'ru',
+  'sk',
+  'sr-Cyrl-RS',
+  'sr-Latn-RS',
+  'sv',
+  'tr',
+  'uk',
+  'vi',
+  'zh-Hans',
+  'zh-Hant',
+];
+
+const LocaleExamples = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [currentLocale, _setCurrentLocale] = useState('es');
+
+  useEffect(() => {
+    _setCurrentLocale(searchParams.get('locale') || 'es');
+  }, [searchParams]);
+
+  const setCurrentLocale = (locale: string) => {
+    _setCurrentLocale(locale);
+    window.history.replaceState(
+      null,
+      '',
+      `${router.pathname}?locale=${locale}`,
+    );
+  };
+
+  return (
+    <>
+      <Box sx={{ width: '100%' }}>
+        <Tabs
+          textColor="secondary"
+          indicatorColor="secondary"
+          onChange={(_event, newValue: string) => setCurrentLocale(newValue)}
+          scrollButtons="auto"
+          value={currentLocale}
+          variant="scrollable"
+        >
+          {supportedLocales.map((locale) => (
+            <Tab
+              label={locale}
+              key={locale}
+              value={locale}
+              sx={{ width: '2rem' }}
+            />
+          ))}
+        </Tabs>
+      </Box>
+      {currentLocale === 'ar' && <AR_Table />}
+      {currentLocale === 'az' && <AZ_Table />}
+      {currentLocale === 'bg' && <BG_Table />}
+      {currentLocale === 'cs' && <CS_Table />}
+      {currentLocale === 'da' && <DA_Table />}
+      {currentLocale === 'de' && <DE_Table />}
+      {currentLocale === 'el' && <EL_Table />}
+      {currentLocale === 'en' && <EN_Table />}
+      {currentLocale === 'es' && <ES_Table />}
+      {currentLocale === 'et' && <ET_Table />}
+      {currentLocale === 'fa' && <FA_Table />}
+      {currentLocale === 'fi' && <FI_Table />}
+      {currentLocale === 'fr' && <FR_Table />}
+      {currentLocale === 'he' && <HE_Table />}
+      {currentLocale === 'hr' && <HR_TABLE />}
+      {currentLocale === 'hu' && <HU_Table />}
+      {currentLocale === 'hy' && <HY_Table />}
+      {currentLocale === 'id' && <ID_Table />}
+      {currentLocale === 'it' && <IT_Table />}
+      {currentLocale === 'ja' && <JA_Table />}
+      {currentLocale === 'ko' && <KO_Table />}
+      {currentLocale === 'nl' && <NL_Table />}
+      {currentLocale === 'no' && <NO_Table />}
+      {currentLocale === 'np' && <NP_Table />}
+      {currentLocale === 'pl' && <PL_Table />}
+      {currentLocale === 'pt' && <PT_Table />}
+      {currentLocale === 'pt-BR' && <PT_BR_Table />}
+      {currentLocale === 'ro' && <RO_Table />}
+      {currentLocale === 'ru' && <RU_Table />}
+      {currentLocale === 'sk' && <SK_Table />}
+      {currentLocale === 'sr-Cyrl-RS' && <SR_Cyrl_RS_Table />}
+      {currentLocale === 'sr-Latn-RS' && <SR_Latn_RS_Table />}
+      {currentLocale === 'sv' && <SV_Table />}
+      {currentLocale === 'tr' && <TR_Table />}
+      {currentLocale === 'uk' && <UK_Table />}
+      {currentLocale === 'vi' && <VI_Table />}
+      {currentLocale === 'zh-Hans' && <ZH_HANS_Table />}
+      {currentLocale === 'zh-Hant' && <ZH_HANT_Table />}
+    </>
+  );
+};
+
+export default LocaleExamples;

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

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+
+interface Props {
+  links: {
+    value: string;
+    label: string;
+  }[];
+}
+
+const OptionsSwitcher = ({ links }: Props) => {
+  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)}
+        >
+          {links.map(({ value, label }) => (
+            <Tab key={value} label={<Box>{label}</Box>} value={value} />
+          ))}
+        </Tabs>
+      </Box>
+    </>
+  );
+};
+
+export default OptionsSwitcher;

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

@@ -0,0 +1,82 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+import ReactQueryExample from '../examples/react-query';
+import LazyDetailPanelExample from '../examples/lazy-detail-panel';
+import LazySubRowsExample from '../examples/lazy-sub-rows';
+import DynamicColumns from '../examples/dynamic-columns';
+import RemoteExample from '../examples/remote';
+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() : 'react-query',
+  );
+
+  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="React Query" value="react-query" />
+          <Tab label="useEffect" value="remote" />
+          <Tab label="Dynamic Columns" value="dynamic-columns" />
+          <Tab label="Lazy Detail Panel" value="lazy-detail-panel" />
+          <Tab label="Lazy Sub-Rows" value="lazy-sub-rows" />
+          <Tab
+            label={
+              <Box>
+                Infinite Scrolling
+                <LaunchIcon sx={{ fontSize: '1rem' }} />
+              </Box>
+            }
+            value="infinite-scrolling"
+          />
+          <Link href="/docs/examples/editing-crud" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  CRUD Examples
+                  <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 === 'react-query' && <ReactQueryExample />}
+        {activeTab === 'remote' && <RemoteExample />}
+        {activeTab === 'dynamic-columns' && <DynamicColumns />}
+        {activeTab === 'lazy-detail-panel' && <LazyDetailPanelExample />}
+        {activeTab === 'lazy-sub-rows' && <LazySubRowsExample />}
+      </Box>
+    </>
+  );
+};
+
+export default RemoteFetchingExamples;

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

@@ -0,0 +1,62 @@
+import { useRouter } from 'next/router';
+import { Box, Tab, Tabs } from '@mui/material';
+import StickyHeaderExample from '../examples/enable-sticky-header';
+import ColumnPinningExample from '../examples/enable-column-pinning';
+import RowPinningStickyExample from '../examples/enable-row-pinning-sticky';
+import RowPinningStaticExample from '../examples/enable-row-pinning-static';
+import StickySelectExample from '../examples/enable-row-pinning-select';
+import { useState } from 'react';
+import Link from 'next/link';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const StickyPinningExamples = ({ 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="Sticky Header" value="sticky-header" />
+          <Tab label="Column Pinning" value="column-pinning" />
+          <Tab label="Row Pinning (Sticky)" value="sticky-row-pinning" />
+          <Tab label="Row Pinning (Static)" value="static-row-pinning" />
+          <Tab label="Sticky Row Selection" value="sticky-row-selection" />
+          <Link href="/docs/examples" passHref legacyBehavior>
+            <Tab
+              label={
+                <Box>
+                  More Examples
+                  <LaunchIcon sx={{ fontSize: '1rem' }} />
+                </Box>
+              }
+              value="more"
+            />
+          </Link>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'sticky-header' && <StickyHeaderExample />}
+        {activeTab === 'column-pinning' && <ColumnPinningExample />}
+        {activeTab === 'sticky-row-pinning' && <RowPinningStickyExample />}
+        {activeTab === 'static-row-pinning' && <RowPinningStaticExample />}
+        {activeTab === 'sticky-row-selection' && <StickySelectExample />}
+      </Box>
+    </>
+  );
+};
+
+export default StickyPinningExamples;

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

@@ -0,0 +1,59 @@
+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
+          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="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;

package/apps/material-react-table-docs/examples/SimpleCodeSandbox.tsx

@@ -0,0 +1,16 @@
+const SimpleCodeSandbox = () => {
+  return (
+    <iframe
+      src="https://codesandbox.io/embed/simple-material-react-table-example-t5c3ji?fontsize=14&hidenavigation=1&theme=dark"
+      style={{
+        width: '100%',
+        height: '500px',
+      }}
+      title="simple-material-react-table-example"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    />
+  );
+};
+
+export default SimpleCodeSandbox;

package/apps/material-react-table-docs/examples/advanced/index.tsx

@@ -0,0 +1,16 @@
+import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
+import Example from './sandbox/src/TS';
+const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
+
+const ExampleTable = ({ showTopRow = true }) => {
+  return (
+    <SourceCodeSnippet
+      Component={Example}
+      typeScriptCode={TS}
+      tableId="advanced"
+      showTopRow={showTopRow}
+    />
+  );
+};
+
+export default ExampleTable;

package/apps/material-react-table-docs/examples/advanced/sandbox/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`

package/apps/material-react-table-docs/examples/advanced/sandbox/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Material React Table Example</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>