@lminii/material-react-table-mcp 4.0.1

package/data/examples/localization-i18n-uk.js

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

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

package/data/examples/localization-i18n-vi.js

@@ -0,0 +1,38 @@
+//Import Material React Table and its Types
+import { MaterialReactTable } from 'material-react-table';
+//Import Material React Table Translations
+import { MRT_Localization_VI } from 'material-react-table/locales/vi';
+//mock data
+import { data } from './makeData';
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: 'Họ của người nào',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Tên họ',
+        enableClickToCopy: true,
+    },
+    {
+        accessorKey: 'age',
+        header: 'Tuổi tác',
+    },
+    //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_VI}/>);
+};
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { trTR } 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, trTR)}>
+      <Example />
+    </ThemeProvider>);
+};
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-vi.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_VI } from 'material-react-table/locales/vi';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'Họ của người nào',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Tên họ',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'Tuổi tác',
+  },
+  //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_VI}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { trTR } 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, trTR)}>
+      <Example />
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-zh-hans.js

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

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

package/data/examples/localization-i18n-zh-hant.js

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

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

package/data/examples/manual-selection.js

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+//end
+const data = [
+    //data definitions...
+    {
+        userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
+        firstName: 'Dylan',
+        lastName: 'Murray',
+        age: 22,
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+    },
+    {
+        userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
+        firstName: 'Raquel',
+        lastName: 'Kohler',
+        age: 18,
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+    },
+    //end
+];
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const [rowSelection, setRowSelection] = useState({});
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        getRowId: (row) => row.userId,
+        muiTableBodyRowProps: ({ row }) => ({
+            //implement row selection click events manually
+            onClick: () => setRowSelection((prev) => {
+                //this is a simple toggle implementation
+                const next = { ...prev };
+                if (next[row.id])
+                    delete next[row.id];
+                else
+                    next[row.id] = true;
+                return next;
+            }),
+            selected: rowSelection[row.id],
+            sx: {
+                cursor: 'pointer',
+            },
+        }),
+        onRowSelectionChange: setRowSelection,
+        state: { rowSelection },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/manual-selection.tsx

@@ -0,0 +1,105 @@
+import { useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_RowSelectionState,
+} from 'material-react-table';
+
+//data definitions...
+interface Person {
+  userId: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  address: string;
+  city: string;
+  state: string;
+}
+//end
+
+const data = [
+  //data definitions...
+  {
+    userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
+    firstName: 'Dylan',
+    lastName: 'Murray',
+    age: 22,
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  },
+  {
+    userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
+    firstName: 'Raquel',
+    lastName: 'Kohler',
+    age: 18,
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  //end
+];
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    getRowId: (row) => row.userId,
+    muiTableBodyRowProps: ({ row }) => ({
+      //implement row selection click events manually
+      onClick: () =>
+        setRowSelection((prev) => {
+          //this is a simple toggle implementation
+          const next = { ...prev };
+          if (next[row.id]) delete next[row.id];
+          else next[row.id] = true;
+          return next;
+        }),
+      selected: rowSelection[row.id],
+      sx: {
+        cursor: 'pointer',
+      },
+    }),
+    onRowSelectionChange: setRowSelection,
+    state: { rowSelection },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/minimal.js

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { MRT_Table, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+export const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+        enableKeyboardShortcuts: false,
+        enableColumnActions: false,
+        enableColumnFilters: false,
+        enablePagination: false,
+        enableSorting: false,
+        mrtTheme: (theme) => ({
+            baseBackgroundColor: theme.palette.background.default, //change default background color
+        }),
+        muiTableBodyRowProps: { hover: false },
+        muiTableProps: {
+            sx: {
+                border: '1px solid rgba(81, 81, 81, .5)',
+                caption: {
+                    captionSide: 'top',
+                },
+            },
+        },
+        muiTableHeadCellProps: {
+            sx: {
+                border: '1px solid rgba(81, 81, 81, .5)',
+                fontStyle: 'italic',
+                fontWeight: 'normal',
+            },
+        },
+        muiTableBodyCellProps: {
+            sx: {
+                border: '1px solid rgba(81, 81, 81, .5)',
+            },
+        },
+        renderCaption: ({ table }) => `Here is a table rendered with the lighter weight MRT_Table sub-component, rendering ${table.getRowModel().rows.length} rows.`,
+    });
+    //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
+    return <MRT_Table table={table}/>;
+};
+export default Example;