release v1.9.0

textOverflow ellipsis improvements
row cell hover refactor
new multi-sort badge number
fixes #403 - not empty and empty filters switch not re-rendering
fixes #415 - sort arrow cutoff in non-left alignment
fixes #419 - resize handle padding
fixes #421 - row action menu click propagation issue
new Serbian locales

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

@@ -51,6 +51,18 @@ const RO_Table = dynamic(() => import('../examples/localization-i18n-ro'), {
 const RU_Table = dynamic(() => import('../examples/localization-i18n-ru'), {
   suspense: true,
 });
+const SR_Cyrl_RS_Table = dynamic(
+  () => import('../examples/localization-i18n-sr-Cyrl-RS'),
+  {
+    suspense: true,
+  },
+);
+const SR_Latn_RS_Table = dynamic(
+  () => import('../examples/localization-i18n-sr-Latn-RS'),
+  {
+    suspense: true,
+  },
+);
 const SV_Table = dynamic(() => import('../examples/localization-i18n-sv'), {
   suspense: true,
 });
@@ -92,12 +104,14 @@ const supportedLocales = [
   'pt-BR',
   'ro',
   'ru',
+  'sr-Cyrl-RS',
+  'sr-Latn-RS',
   'sv',
   'tr',
   'uk',
   'vi',
-  'zh-hans',
-  'zh-hant',
+  'zh-Hans',
+  'zh-Hant',
 ];
 
 const LocaleExamples = () => {
@@ -143,12 +157,14 @@ const LocaleExamples = () => {
           {currentLocale === 'pt-BR' && <PT_BR_Table />}
           {currentLocale === 'ro' && <RO_Table />}
           {currentLocale === 'ru' && <RU_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 />}
+          {currentLocale === 'zh-Hans' && <ZH_HANS_Table />}
+          {currentLocale === 'zh-Hant' && <ZH_HANT_Table />}
         </Suspense>
       </div>
     </>

apps/material-react-table-docs/examples/localization-i18n-fa/sandbox/src/JS.js

@@ -7,7 +7,7 @@ import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
 import { MRT_Localization_FA } from 'material-react-table/locales/fa';
 
 //mock data
-import { data, Person } from './makeData';
+import { data } from './makeData';
 
 const columns = [
   //column definitions...
@@ -33,6 +33,7 @@ const Example = () => {
       columns={columns}
       data={data}
       enableColumnFilterModes
+      enableColumnResizing
       enableColumnOrdering
       enableEditing
       enablePinning
@@ -54,7 +55,9 @@ const ExampleWithThemeProvider = () => {
   return (
     //Setting Material UI locale as best practice to result in better accessibility
     <ThemeProvider theme={createTheme({ ...theme, direction: 'rtl' }, faIR)}>
-      <Example />
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
     </ThemeProvider>
   );
 };

apps/material-react-table-docs/examples/localization-i18n-fa/sandbox/src/TS.tsx

@@ -34,6 +34,7 @@ const Example = () => {
       data={data}
       enableColumnFilterModes
       enableColumnOrdering
+      enableColumnResizing
       enableEditing
       enablePinning
       enableRowActions
@@ -55,7 +56,9 @@ const ExampleWithThemeProvider = () => {
   return (
     //Setting Material UI locale as best practice to result in better accessibility
     <ThemeProvider theme={createTheme({ ...theme, direction: 'rtl' }, faIR)}>
-      <Example />
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
     </ThemeProvider>
   );
 };

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+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-sr-Cyrl-RS"
+    />
+  );
+};
+
+export default ExampleTable;

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/README.md

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

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/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>

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "material-react-table-example-localization-i18n-sr-cryl-rs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite --port 3001",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.4",
+    "material-react-table": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.0.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
+  }
+}

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/JS.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+//Import Material React Table and its Types
+import MaterialReactTable from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_SR_CYRL_RS } from 'material-react-table/locales/sr-Cyrl-RS';
+
+//mock data
+import { data } from './makeData';
+
+const columns = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Име',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Презиме',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Старост',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enablePinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_SR_CYRL_RS}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { srRS } from '@mui/material/locale';
+
+const ExampleWithThemeProvider = () => {
+  const theme = useTheme(); //replace with your theme/createTheme
+  return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, srRS)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/TS.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+//Import Material React Table and its Types
+import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_SR_CYRL_RS } from 'material-react-table/locales/sr-Cyrl-RS';
+
+//mock data
+import { data, Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Име',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Презиме',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Старост',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enablePinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_SR_CYRL_RS}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { srRS } from '@mui/material/locale';
+
+const ExampleWithThemeProvider = () => {
+  const theme = useTheme(); //replace with your theme/createTheme
+  return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, srRS)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Example from './TS';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <Example />
+  </React.StrictMode>,
+);

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/makeData.ts

@@ -0,0 +1,23 @@
+export type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+};
+
+export const data: Person[] = [
+  {
+    firstName: 'Kevin',
+    lastName: 'Vandy',
+    age: 26,
+  },
+  {
+    firstName: 'Theodore',
+    lastName: 'Browne',
+    age: 28,
+  },
+  {
+    firstName: 'Tanner',
+    lastName: 'Linsley',
+    age: 33,
+  },
+];

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/src/vite.env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}

apps/material-react-table-docs/examples/localization-i18n-sr-Cyrl-RS/sandbox/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});