release v2.1.0 - better rtl column resizing

KevinVandy · Dec 22, 2023 · 5ad6803 · 5ad6803 · vercel · Dec 22, 2023
1 parent da52088
commit 5ad6803
Show file tree

Hide file tree

Showing 40 changed files with 3,906 additions and 1,368 deletions.
diff --git a/apps/material-react-table-docs/components/prop-tables/tableOptions.ts b/apps/material-react-table-docs/components/prop-tables/tableOptions.ts
@@ -66,6 +66,17 @@ export const tableOptions: TableOption[] = [
     source: 'MRT',
     type: 'Array<MRT_FilterOption | string> | null',
   },
+  {
+    tableOption: 'columnResizeDirection',
+    defaultValue: "muiTheme.direction || 'ltr'",
+    description:
+      'Determines the direction of column resizing. ltr = left to right, rtl = right to left.',
+    link: 'https://tanstack.com/table/v8/docs/api/features/column-sizing#columnresizedirection',
+    linkText: 'MRT Column Resizing Docs',
+    required: false,
+    source: 'TanStack Table',
+    type: "'ltr' | 'rtl'",
+  },
   {
     tableOption: 'columnResizeMode',
     defaultValue: "'onChange'",
@@ -1038,7 +1049,7 @@ export const tableOptions: TableOption[] = [
     linkText: 'TanStack Table Core Docs',
     required: false,
     source: 'TanStack Table',
-    type: ' <T>(defaultOptions: T, options: Partial<T>) => T',
+    type: '<T>(defaultOptions: T, options: Partial<T>) => T',
   },
   {
     tableOption: 'meta',
@@ -1463,7 +1474,7 @@ export const tableOptions: TableOption[] = [
     linkText: 'TanStack Table Column Sizing Docs',
     required: false,
     source: 'TanStack Table',
-    type: ' OnChangeFn<ColumnSizingState>',
+    type: 'OnChangeFn<ColumnSizingState>',
   },
   {
     tableOption: 'onColumnSizingInfoChange',

diff --git a/apps/material-react-table-docs/example-groups/LocaleExamples.tsx b/apps/material-react-table-docs/example-groups/LocaleExamples.tsx
@@ -13,6 +13,7 @@ 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 HU_Table from '../examples/localization-i18n-hu';
 import HY_Table from '../examples/localization-i18n-hy';
 import ID_Table from '../examples/localization-i18n-id';
@@ -51,6 +52,7 @@ const supportedLocales = [
   'fa',
   'fi',
   'fr',
+  'he',
   'hu',
   'hy',
   'id',
@@ -113,6 +115,7 @@ const LocaleExamples = () => {
       {currentLocale === 'fa' && <FA_Table />}
       {currentLocale === 'fi' && <FI_Table />}
       {currentLocale === 'fr' && <FR_Table />}
+      {currentLocale === 'he' && <HE_Table />}
       {currentLocale === 'hu' && <HU_Table />}
       {currentLocale === 'hy' && <HY_Table />}
       {currentLocale === 'id' && <ID_Table />}

diff --git a/apps/material-react-table-docs/examples/localization-i18n-ar/sandbox/src/JS.js b/apps/material-react-table-docs/examples/localization-i18n-ar/sandbox/src/JS.js
@@ -30,6 +30,8 @@ const Example = () => {
     <MaterialReactTable
       columns={columns}
       data={data}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
       enableColumnFilterModes
       enableColumnResizing
       enableColumnOrdering

diff --git a/apps/material-react-table-docs/examples/localization-i18n-ar/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/localization-i18n-ar/sandbox/src/TS.tsx
@@ -30,6 +30,8 @@ const Example = () => {
     <MaterialReactTable
       columns={columns}
       data={data}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
       enableColumnFilterModes
       enableColumnOrdering
       enableColumnResizing

diff --git a/apps/material-react-table-docs/examples/localization-i18n-fa/sandbox/src/JS.js b/apps/material-react-table-docs/examples/localization-i18n-fa/sandbox/src/JS.js
@@ -30,6 +30,8 @@ const Example = () => {
     <MaterialReactTable
       columns={columns}
       data={data}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
       enableColumnFilterModes
       enableColumnResizing
       enableColumnOrdering

diff --git a/apps/material-react-table-docs/examples/localization-i18n-fa/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/localization-i18n-fa/sandbox/src/TS.tsx
@@ -30,6 +30,8 @@ const Example = () => {
     <MaterialReactTable
       columns={columns}
       data={data}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
       enableColumnFilterModes
       enableColumnOrdering
       enableColumnResizing

diff --git a/apps/material-react-table-docs/examples/localization-i18n-he/index.tsx b/apps/material-react-table-docs/examples/localization-i18n-he/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-he"
+    />
+  );
+};
+
+export default ExampleTable;
diff --git a/apps/material-react-table-docs/examples/localization-i18n-he/sandbox/.gitignore b/apps/material-react-table-docs/examples/localization-i18n-he/sandbox/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/apps/material-react-table-docs/examples/localization-i18n-he/sandbox/README.md b/apps/material-react-table-docs/examples/localization-i18n-he/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/material-react-table-docs/examples/localization-i18n-he/sandbox/index.html b/apps/material-react-table-docs/examples/localization-i18n-he/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>