@mini_7/material-react-table-mcp 4.0.0

package/data/examples/linear-progress.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useState } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Button } from '@mui/material';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const [progress, setProgress] = useState(0);
+
+  //simulate random progress for demo purposes
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((oldProgress) => {
+        const newProgress = Math.random() * 20;
+        return Math.min(oldProgress + newProgress, 100);
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      muiLinearProgressProps={({ isTopToolbar }) => ({
+        color: 'secondary',
+        variant: 'determinate', //if you want to show exact progress value
+        value: progress, //value between 0 and 100
+        sx: {
+          display: isTopToolbar ? 'block' : 'none', //hide bottom progress bar
+        },
+      })}
+      renderTopToolbarCustomActions={() => (
+        <Button onClick={() => setProgress(0)} variant="contained">
+          Reset
+        </Button>
+      )}
+      state={{ showProgressBars: true }}
+    />
+  );
+};
+
+export default Example;

package/data/examples/loading.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { type Person } from './makeData';
+
+const data: Array<Person> = [];
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      state={{ isLoading: true }}
+      muiCircularProgressProps={{
+        color: 'secondary',
+        thickness: 5,
+        size: 55,
+      }}
+      muiSkeletonProps={{
+        animation: 'pulse',
+        height: 28,
+      }}
+    />
+  );
+};
+
+export default Example;

package/data/examples/localization-i18n-ar.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_AR } from 'material-react-table/locales/ar';
+
+//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_AR}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { arSA } 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' }, arSA)}>
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-az.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_AZ } from 'material-react-table/locales/az';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Ad',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Soyad',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Yaş',
+  },
+  //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_AZ}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { azAZ } 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, azAZ)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-bg.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_BG } from 'material-react-table/locales/bg';
+
+//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_BG}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { bgBG } 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, bgBG)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-cs.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_CS } from 'material-react-table/locales/cs';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Jméno',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Příjmení',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Stáří',
+  },
+  //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_CS}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { csCZ } 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, csCZ)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-da.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_DA } from 'material-react-table/locales/da';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Fornavn',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Efternavn',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Alder',
+  },
+  //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_DA}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { daDK } 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, daDK)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-de.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_DE } from 'material-react-table/locales/de';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Vorname',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Nachname',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Das Alter',
+  },
+  //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_DE}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { deDE } 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, deDE)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-el.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_EL } from 'material-react-table/locales/el';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+  },
+  //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_EL}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { elGR } 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, elGR)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-en.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_EN } from 'material-react-table/locales/en';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+  },
+  //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_EN}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { enUS } 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, enUS)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-es.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_ES } from 'material-react-table/locales/es';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Primer nombre',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Apellido',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Años',
+  },
+  //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_ES}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { esES } 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, esES)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;