@lminii/material-react-table-mcp 4.0.1

package/data/examples/customize-display-columns.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+import { Box, Button } from '@mui/material';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    defaultDisplayColumn: {
+      enableResizing: true, //turn on some features that are usually off for all display columns
+    },
+    displayColumnDefOptions: {
+      'mrt-row-actions': {
+        size: 350, //set custom width
+        muiTableHeadCellProps: {
+          align: 'center', //change head cell props
+        },
+      },
+      'mrt-row-numbers': {
+        enableColumnDragging: true,
+        enableColumnOrdering: true, //turn on some features that are usually off
+        enableResizing: true,
+        muiTableHeadCellProps: {
+          sx: {
+            fontSize: '1.2rem',
+          },
+        },
+      },
+      'mrt-row-select': {
+        enableColumnActions: true,
+        enableHiding: true,
+        size: 100,
+      },
+    },
+    enableColumnResizing: true,
+    enableColumnOrdering: true,
+    enableRowNumbers: true,
+    enableRowSelection: true,
+    enableRowActions: true,
+    renderRowActions: ({ row }) => (
+      <Box sx={{ display: 'flex', gap: '1rem' }}>
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+      </Box>
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/customize-filter-components.js

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            muiFilterTextFieldProps: { placeholder: 'ID' },
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'gender',
+            header: 'Gender',
+            filterFn: 'equals',
+            filterSelectOptions: [
+                { label: 'Male', value: 'Male' },
+                { label: 'Female', value: 'Female' },
+                { label: 'Other', value: 'Other' },
+            ],
+            filterVariant: 'select',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+            filterVariant: 'range',
+        },
+    ], []);
+    const data = useMemo(
+    //data definitions...
+    () => [
+        {
+            id: 1,
+            firstName: 'Hugh',
+            lastName: 'Mungus',
+            gender: 'Male',
+            age: 42,
+        },
+        {
+            id: 2,
+            firstName: 'Leroy',
+            lastName: 'Jenkins',
+            gender: 'Male',
+            age: 51,
+        },
+        {
+            id: 3,
+            firstName: 'Candice',
+            lastName: 'Nutella',
+            gender: 'Female',
+            age: 27,
+        },
+        {
+            id: 4,
+            firstName: 'Micah',
+            lastName: 'Johnson',
+            gender: 'Other',
+            age: 32,
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        initialState: { showColumnFilters: true },
+        muiFilterTextFieldProps: {
+            sx: { m: '0.5rem 0', width: '100%' },
+            variant: 'outlined',
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-filter-components.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+
+export type Person = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  gender: string;
+  age: number;
+};
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        muiFilterTextFieldProps: { placeholder: 'ID' },
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'gender',
+        header: 'Gender',
+        filterFn: 'equals',
+        filterSelectOptions: [
+          { label: 'Male', value: 'Male' },
+          { label: 'Female', value: 'Female' },
+          { label: 'Other', value: 'Other' },
+        ],
+        filterVariant: 'select',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+        filterVariant: 'range',
+      },
+    ],
+    [],
+  );
+
+  const data = useMemo<Person[]>(
+    //data definitions...
+    () => [
+      {
+        id: 1,
+        firstName: 'Hugh',
+        lastName: 'Mungus',
+        gender: 'Male',
+        age: 42,
+      },
+      {
+        id: 2,
+        firstName: 'Leroy',
+        lastName: 'Jenkins',
+        gender: 'Male',
+        age: 51,
+      },
+      {
+        id: 3,
+        firstName: 'Candice',
+        lastName: 'Nutella',
+        gender: 'Female',
+        age: 27,
+      },
+      {
+        id: 4,
+        firstName: 'Micah',
+        lastName: 'Johnson',
+        gender: 'Other',
+        age: 32,
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    initialState: { showColumnFilters: true },
+    muiFilterTextFieldProps: {
+      sx: { m: '0.5rem 0', width: '100%' },
+      variant: 'outlined',
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/customize-filter-modes.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { MenuItem } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            enableColumnFilterModes: false, //disable changing filter mode for this column
+            filterFn: 'equals', //set filter mode to equals
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName', //normal, all filter modes are enabled
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            enableColumnFilterModes: false, //disable changing filter mode for this column
+            filterFn: 'startsWith', //even though changing the mode is disabled, you can still set the default filter mode
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            //if you do not want to use the default filter modes, you can provide your own and render your own menu
+            renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
+                <MenuItem key="0" onClick={() => onSelectFilterMode('contains')}>
+            <div>Contains</div>
+          </MenuItem>,
+                <MenuItem key="1" onClick={() => onSelectFilterMode('customFilterFn')}>
+            <div>Custom Filter Fn</div>
+          </MenuItem>,
+            ],
+        },
+        {
+            accessorKey: 'age',
+            columnFilterModeOptions: ['between', 'greaterThan', 'lessThan'], //only allow these filter modes
+            filterFn: 'between',
+            header: 'Age',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableColumnFilterModes: true, //enable changing filter mode for all columns unless explicitly disabled in a column def
+        initialState: { showColumnFilters: true }, //show filters by default
+        filterFns: {
+            customFilterFn: (row, id, filterValue) => {
+                return row.getValue(id) === filterValue;
+            },
+        },
+        localization: {
+            filterCustomFilterFn: 'Custom Filter Fn',
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-filter-modes.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { MenuItem } from '@mui/material';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        enableColumnFilterModes: false, //disable changing filter mode for this column
+        filterFn: 'equals', //set filter mode to equals
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName', //normal, all filter modes are enabled
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'middleName',
+        enableColumnFilterModes: false, //disable changing filter mode for this column
+        filterFn: 'startsWith', //even though changing the mode is disabled, you can still set the default filter mode
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        //if you do not want to use the default filter modes, you can provide your own and render your own menu
+        renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
+          <MenuItem key="0" onClick={() => onSelectFilterMode('contains')}>
+            <div>Contains</div>
+          </MenuItem>,
+          <MenuItem
+            key="1"
+            onClick={() => onSelectFilterMode('customFilterFn')}
+          >
+            <div>Custom Filter Fn</div>
+          </MenuItem>,
+        ],
+      },
+      {
+        accessorKey: 'age',
+        columnFilterModeOptions: ['between', 'greaterThan', 'lessThan'], //only allow these filter modes
+        filterFn: 'between',
+        header: 'Age',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnFilterModes: true, //enable changing filter mode for all columns unless explicitly disabled in a column def
+    initialState: { showColumnFilters: true }, //show filters by default
+    filterFns: {
+      customFilterFn: (row, id, filterValue) => {
+        return row.getValue(id) === filterValue;
+      },
+    },
+    localization: {
+      filterCustomFilterFn: 'Custom Filter Fn',
+    } as any,
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/customize-filter-variants.js

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { citiesList, data, usStateList } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            header: 'Status',
+            accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
+            id: 'isActive',
+            filterVariant: 'checkbox',
+            Cell: ({ cell }) => cell.getValue() === 'true' ? 'Active' : 'Inactive',
+            size: 170,
+        },
+        {
+            accessorKey: 'name',
+            header: 'Name',
+            filterVariant: 'text', // default
+            size: 200,
+        },
+        {
+            accessorKey: 'salary',
+            header: 'Salary',
+            Cell: ({ cell }) => cell.getValue().toLocaleString('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }),
+            filterVariant: 'range-slider',
+            filterFn: 'betweenInclusive', // default (or between)
+            muiFilterSliderProps: {
+                marks: true,
+                max: 200000, //custom max (as opposed to faceted max)
+                min: 30000, //custom min (as opposed to faceted min)
+                step: 10000,
+                valueLabelFormat: (value) => value.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                }),
+            },
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+            filterVariant: 'range',
+            filterFn: 'between',
+            size: 80,
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            filterVariant: 'select',
+            filterSelectOptions: citiesList, //custom options list (as opposed to faceted list)
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+            filterVariant: 'multi-select',
+            filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
+        },
+        {
+            accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
+            id: 'hireDate',
+            header: 'Hire Date',
+            filterVariant: 'date-range',
+            Cell: ({ cell }) => cell.getValue().toLocaleDateString(), // convert back to string for display
+        },
+        {
+            accessorFn: (originalRow) => new Date(originalRow.arrivalTime), //convert to date for sorting and filtering
+            id: 'arrivalTime',
+            header: 'Arrival Time',
+            filterVariant: 'datetime-range',
+            Cell: ({ cell }) => `${cell.getValue().toLocaleDateString()} ${cell
+                .getValue()
+                .toLocaleTimeString()}`, // convert back to string for display
+        },
+        {
+            accessorFn: (originalRow) => new Date(originalRow.departureTime), //convert to date for sorting and filtering
+            id: 'departureTime',
+            header: 'Departure Time',
+            filterVariant: 'time-range',
+            Cell: ({ cell }) => cell.getValue().toLocaleTimeString(), // convert back to string for display
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        initialState: { showColumnFilters: true },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+//Date Picker Imports - these should just be in your Context Provider
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+const ExampleWithLocalizationProvider = () => (
+//App.tsx or AppProviders file
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+    <Example />
+  </LocalizationProvider>);
+export default ExampleWithLocalizationProvider;

package/data/examples/customize-filter-variants.tsx

@@ -0,0 +1,116 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { citiesList, data, type Person, usStateList } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        header: 'Status',
+        accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
+        id: 'isActive',
+        filterVariant: 'checkbox',
+        Cell: ({ cell }) =>
+          cell.getValue() === 'true' ? 'Active' : 'Inactive',
+        size: 170,
+      },
+      {
+        accessorKey: 'name',
+        header: 'Name',
+        filterVariant: 'text', // default
+        size: 200,
+      },
+      {
+        accessorKey: 'salary',
+        header: 'Salary',
+        Cell: ({ cell }) =>
+          cell.getValue<number>().toLocaleString('en-US', {
+            style: 'currency',
+            currency: 'USD',
+          }),
+        filterVariant: 'range-slider',
+        filterFn: 'betweenInclusive', // default (or between)
+        muiFilterSliderProps: {
+          marks: true,
+          max: 200_000, //custom max (as opposed to faceted max)
+          min: 30_000, //custom min (as opposed to faceted min)
+          step: 10_000,
+          valueLabelFormat: (value) =>
+            value.toLocaleString('en-US', {
+              style: 'currency',
+              currency: 'USD',
+            }),
+        },
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+        filterVariant: 'range',
+        filterFn: 'between',
+        size: 80,
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        filterVariant: 'select',
+        filterSelectOptions: citiesList, //custom options list (as opposed to faceted list)
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+        filterVariant: 'multi-select',
+        filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
+      },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
+        id: 'hireDate',
+        header: 'Hire Date',
+        filterVariant: 'date-range',
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
+      },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.arrivalTime), //convert to date for sorting and filtering
+        id: 'arrivalTime',
+        header: 'Arrival Time',
+        filterVariant: 'datetime-range',
+        Cell: ({ cell }) =>
+          `${cell.getValue<Date>().toLocaleDateString()} ${cell
+            .getValue<Date>()
+            .toLocaleTimeString()}`, // convert back to string for display
+      },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.departureTime), //convert to date for sorting and filtering
+        id: 'departureTime',
+        header: 'Departure Time',
+        filterVariant: 'time-range',
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleTimeString(), // convert back to string for display
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    initialState: { showColumnFilters: true },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+//Date Picker Imports - these should just be in your Context Provider
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+const ExampleWithLocalizationProvider = () => (
+  //App.tsx or AppProviders file
+  <LocalizationProvider dateAdapter={AdapterDayjs}>
+    <Example />
+  </LocalizationProvider>
+);
+
+export default ExampleWithLocalizationProvider;

package/data/examples/customize-global-filter-component.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+    ], []);
+    return (<MaterialReactTable columns={columns} data={data} enableGlobalFilterModes initialState={{
+            showGlobalFilter: true,
+        }} positionGlobalFilter="left" muiSearchTextFieldProps={{
+            placeholder: `Search ${data.length} rows`,
+            sx: { minWidth: '300px' },
+            variant: 'outlined',
+        }}/>);
+};
+export default Example;