@mini_7/material-react-table-mcp 4.0.0

package/data/examples/localization-i18n-et.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_ET } from 'material-react-table/locales/et';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Eesnimi',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Perekonnanimi',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Vanus',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_ET}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { etEE } 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, etEE)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-fa.tsx

@@ -0,0 +1,66 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_FA } from 'material-react-table/locales/fa';
+
+//mock data
+import { data, type 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}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableColumnResizing
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_FA}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { faIR } 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, direction: 'rtl' }, faIR)}>
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-fi.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_FI } from 'material-react-table/locales/fi';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Etunimi',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Sukunimi',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Ikä',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_FI}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { fiFI } 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, fiFI)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-fr.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_FR } from 'material-react-table/locales/fr';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Prénom',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Nom de famille',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Âge',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_FR}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { frFR } 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, frFR)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-he.tsx

@@ -0,0 +1,66 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_HE } from 'material-react-table/locales/he';
+
+//mock data
+import { data, type 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}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableColumnResizing
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_HE}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { heIL } 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, direction: 'rtl' }, heIL)}>
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-hr.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_HR } from 'material-react-table/locales/hr';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Ime',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Prezime',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Godine',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_HR}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { hrHR } 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, hrHR)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-hu.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_HU } from 'material-react-table/locales/hu';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Keresztnév',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Vezetéknév',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Kor',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_HU}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { huHU } 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, huHU)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-hy.tsx

@@ -0,0 +1,65 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_HY } from 'material-react-table/locales/hy';
+
+//mock data
+import { data, type 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}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableColumnResizing
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_HY}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { hyAM } 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, direction: 'rtl' }, hyAM)}>
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-id.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_ID } from 'material-react-table/locales/id';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Nama Depan',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Nama Belakang',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Umur',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_ID}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { idID } 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, idID)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-it.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_IT } from 'material-react-table/locales/it';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Nome di battesimo',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Cognome',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Età',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_IT}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { itIT } 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, itIT)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-ja.tsx

@@ -0,0 +1,60 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_JA } from 'material-react-table/locales/ja';
+
+//mock data
+import { data, type 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
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_JA}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { jaJP } 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, jaJP)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;