release v1.1.0

KevinVandy · Aug 12, 2023 · ee05ed0 · ee05ed0
1 parent b6b6eda
commit ee05ed0
Show file tree

Hide file tree

Showing 76 changed files with 5,457 additions and 3,698 deletions.
diff --git a/apps/mantine-react-table-docs/example-groups/BasicExamples.tsx b/apps/mantine-react-table-docs/example-groups/BasicExamples.tsx
@@ -6,6 +6,8 @@ import MinimalExample from '../examples/minimal';
 import AdvancedExample from '../examples/advanced';
 import AggregationAndGroupingExample from '../examples/aggregation-and-grouping';
 import CustomHeadlessExample from '../examples/custom-headless';
+import Link from 'next/link';
+import { IconExternalLink } from '@tabler/icons-react';
 
 const BasicExamples = ({ isPage = false }) => {
   const { pathname, push } = useRouter();
@@ -17,7 +19,9 @@ const BasicExamples = ({ isPage = false }) => {
         <Tabs
           value={isPage ? pathname.split('/').pop() : activeTab}
           onTabChange={(newPath) =>
-            isPage ? push(newPath as string) : setActiveTab(newPath as string)
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
           }
           keepMounted={false}
         >
@@ -29,6 +33,11 @@ const BasicExamples = ({ isPage = false }) => {
               Aggregation and Grouping
             </Tabs.Tab>
             <Tabs.Tab value="custom-headless">Custom Headless</Tabs.Tab>
+            <Link href="/docs/examples">
+              <Tabs.Tab value="more">
+                More Examples <IconExternalLink size="1.1rem" />
+              </Tabs.Tab>
+            </Link>
           </Tabs.List>
           <Tabs.Panel value="basic">
             <BasicExample showTopRow={isPage} />

diff --git a/apps/mantine-react-table-docs/example-groups/EditingCRUD.tsx b/apps/mantine-react-table-docs/example-groups/EditingCRUD.tsx
@@ -1,19 +1,27 @@
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { Box, Tabs } from '@mantine/core';
 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 Link from 'next/link';
+import { IconExternalLink } from '@tabler/icons-react';
 
-const EditingCRUD = () => {
+const EditingCRUD = ({ isPage = false }) => {
   const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState('editing-crud');
 
   return (
     <>
       <Box sx={{ width: '100%', marginTop: '1rem' }}>
         <Tabs
-          value={pathname.split('/').pop()}
-          onTabChange={(newPath) => push(newPath as string)}
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onTabChange={(newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
           keepMounted={false}
         >
           <Tabs.List>
@@ -25,6 +33,11 @@ const EditingCRUD = () => {
             <Tabs.Tab value="editing-crud-inline-table">
               Inline Table (All Rows Editable)
             </Tabs.Tab>
+            <Link href="/docs/examples">
+              <Tabs.Tab value="more">
+                More Examples <IconExternalLink size="1.1rem" />
+              </Tabs.Tab>
+            </Link>
           </Tabs.List>
           <Tabs.Panel value="editing-crud">
             <ModalExample />

diff --git a/apps/mantine-react-table-docs/example-groups/LocaleExamples.tsx b/apps/mantine-react-table-docs/example-groups/LocaleExamples.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Tabs, Box } from '@mantine/core';
+import AR_Table from '../examples/localization-i18n-ar';
 import BG_Table from '../examples/localization-i18n-bg';
 import CS_Table from '../examples/localization-i18n-cs';
 import DA_Table from '../examples/localization-i18n-da';
@@ -32,6 +33,7 @@ import ZH_HANS_Table from '../examples/localization-i18n-zh-hans';
 import ZH_HANT_Table from '../examples/localization-i18n-zh-hant';
 
 const supportedLocales = [
+  'ar',
   'bg',
   'cs',
   'da',
@@ -80,7 +82,8 @@ const LocaleExamples = () => {
           </Tabs.List>
         </Tabs>
       </Box>
-      <div style={{ minHeight: '1500px' }} lang={currentLocale ?? 'en'}>
+      <Box sx={{ minHeight: '1500px' }} lang={currentLocale ?? 'en'}>
+        {currentLocale === 'ar' && <AR_Table />}
         {currentLocale === 'bg' && <BG_Table />}
         {currentLocale === 'cs' && <CS_Table />}
         {currentLocale === 'da' && <DA_Table />}
@@ -111,7 +114,7 @@ const LocaleExamples = () => {
         {currentLocale === 'zh-Hans' && <ZH_HANS_Table />}
         {currentLocale === 'zh-Hant' && <ZH_HANT_Table />}
         {currentLocale === 'no' && <NO_TABLE />}
-      </div>
+      </Box>
     </>
   );
 };

diff --git a/apps/mantine-react-table-docs/example-groups/RemoteFetching.tsx b/apps/mantine-react-table-docs/example-groups/RemoteFetching.tsx
@@ -2,21 +2,34 @@ import { useRouter } from 'next/router';
 import { Box, Tabs } from '@mantine/core';
 import ReactQueryExample from '../examples/react-query';
 import RemoteExample from '../examples/remote';
+import { useState } from 'react';
+import Link from 'next/link';
+import { IconExternalLink } from '@tabler/icons-react';
 
-const RemoteFetching = () => {
+const RemoteFetching = ({ isPage = false }) => {
   const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState('react-query');
 
   return (
     <>
       <Box sx={{ width: '100%', marginTop: '1rem' }}>
         <Tabs
-          value={pathname.split('/').pop()}
-          onTabChange={(newPath) => push(newPath as string)}
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onTabChange={(newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
           keepMounted={false}
         >
           <Tabs.List>
             <Tabs.Tab value="react-query">React Query</Tabs.Tab>
             <Tabs.Tab value="remote">useEffect</Tabs.Tab>
+            <Link href="/docs/examples">
+              <Tabs.Tab value="more">
+                More Examples <IconExternalLink size="1.1rem" />
+              </Tabs.Tab>
+            </Link>
           </Tabs.List>
           <Tabs.Panel value="react-query">
             <ReactQueryExample />

diff --git a/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/JS.js
@@ -125,15 +125,15 @@ const Example = () => {
   };
 
   //UPDATE action
-  const handleSaveUser = async ({ values, exitEditingMode }) => {
+  const handleSaveUser = async ({ values, table }) => {
     const newValidationErrors = validateUser(values);
     if (Object.values(newValidationErrors).some((error) => error)) {
       setValidationErrors(newValidationErrors);
       return;
     }
     setValidationErrors({});
     await updateUser(values);
-    exitEditingMode();
+    table.setEditingRow(null); //exit editing mode
   };
 
   //DELETE action

diff --git a/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/TS.tsx
@@ -135,7 +135,7 @@ const Example = () => {
   //UPDATE action
   const handleSaveUser: MRT_TableOptions<User>['onEditingRowSave'] = async ({
     values,
-    exitEditingMode,
+    table,
   }) => {
     const newValidationErrors = validateUser(values);
     if (Object.values(newValidationErrors).some((error) => error)) {
@@ -144,7 +144,7 @@ const Example = () => {
     }
     setValidationErrors({});
     await updateUser(values);
-    exitEditingMode();
+    table.setEditingRow(null); //exit editing mode
   };
 
   //DELETE action

diff --git a/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/JS.js
@@ -116,15 +116,15 @@ const Example = () => {
   };
 
   //UPDATE action
-  const handleSaveUser = async ({ values, exitEditingMode }) => {
+  const handleSaveUser = async ({ values, table }) => {
     const newValidationErrors = validateUser(values);
     if (Object.values(newValidationErrors).some((error) => error)) {
       setValidationErrors(newValidationErrors);
       return;
     }
     setValidationErrors({});
     await updateUser(values);
-    exitEditingMode();
+    table.setEditingRow(null); //exit editing mode
   };
 
   //DELETE action

diff --git a/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/TS.tsx
@@ -126,7 +126,7 @@ const Example = () => {
   //UPDATE action
   const handleSaveUser: MRT_TableOptions<User>['onEditingRowSave'] = async ({
     values,
-    exitEditingMode,
+    table,
   }) => {
     const newValidationErrors = validateUser(values);
     if (Object.values(newValidationErrors).some((error) => error)) {
@@ -135,7 +135,7 @@ const Example = () => {
     }
     setValidationErrors({});
     await updateUser(values);
-    exitEditingMode();
+    table.setEditingRow(null); //exit editing mode
   };
 
   //DELETE action

diff --git a/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/JS.js
@@ -33,12 +33,12 @@ const Example = () => {
 
   const [tableData, setTableData] = useState(() => data);
 
-  const handleSaveRow = async ({ exitEditingMode, row, values }) => {
+  const handleSaveRow = async ({ table, row, values }) => {
     //if using flat data and simple accessorKeys/ids, you can just do a simple assignment here.
     tableData[row.index] = values;
     //send/receive api updates here
     setTableData([...tableData]);
-    exitEditingMode(); //required to exit editing mode
+    table.setEditingRow(null); //exit editing mode
   };
 
   return (

diff --git a/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/TS.tsx
@@ -38,15 +38,15 @@ const Example = () => {
   const [tableData, setTableData] = useState<Person[]>(() => data);
 
   const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = async ({
-    exitEditingMode,
+    table,
     row,
     values,
   }) => {
     //if using flat data and simple accessorKeys/ids, you can just do a simple assignment here.
     tableData[row.index] = values;
     //send/receive api updates here
     setTableData([...tableData]);
-    exitEditingMode(); //required to exit editing mode
+    table.setEditingRow(null); //exit editing mode
   };
 
   return (

diff --git a/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/JS.js
@@ -33,12 +33,12 @@ const Example = () => {
 
   const [tableData, setTableData] = useState(() => data);
 
-  const handleSaveRow = async ({ exitEditingMode, row, values }) => {
+  const handleSaveRow = async ({ table, row, values }) => {
     //if using flat data and simple accessorKeys/ids, you can just do a simple assignment here.
     tableData[row.index] = values;
     //send/receive api updates here
     setTableData([...tableData]);
-    exitEditingMode(); //required to exit editing mode
+    table.setEditingRow(null); //exit editing mode
   };
 
   return (

diff --git a/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/TS.tsx
@@ -38,15 +38,15 @@ const Example = () => {
   const [tableData, setTableData] = useState<Person[]>(() => data);
 
   const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = async ({
-    exitEditingMode,
+    table,
     row,
     values,
   }) => {
     //if using flat data and simple accessorKeys/ids, you can just do a simple assignment here.
     tableData[row.index] = values;
     //send/receive api updates here
     setTableData([...tableData]);
-    exitEditingMode(); //required to exit editing mode
+    table.setEditingRow(null); //exit editing mode
   };
 
   return (

diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-ar/index.tsx b/apps/mantine-react-table-docs/examples/localization-i18n-ar/index.tsx
@@ -0,0 +1,17 @@
+import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
+import Example from './sandbox/src/TS';
+const JS = require('!!raw-loader!./sandbox/src/JS.js').default;
+const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
+
+const ExampleTable = () => {
+  return (
+    <SourceCodeSnippet
+      Component={Example}
+      javaScriptCode={JS}
+      typeScriptCode={TS}
+      tableId="localization-i18n-ar"
+    />
+  );
+};
+
+export default ExampleTable;
diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-ar/sandbox/.gitignore b/apps/mantine-react-table-docs/examples/localization-i18n-ar/sandbox/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-ar/sandbox/README.md b/apps/mantine-react-table-docs/examples/localization-i18n-ar/sandbox/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/apps/mantine-react-table-docs/examples/localization-i18n-ar/sandbox/index.html b/apps/mantine-react-table-docs/examples/localization-i18n-ar/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>Mantine React Table Example</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>