@mini_7/material-react-table-mcp 4.0.0

package/data/examples/custom-top-toolbar.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  type MRT_ColumnDef,
+  MRT_ToggleDensePaddingButton,
+  MRT_ToggleFullScreenButton,
+  useMaterialReactTable,
+} from 'material-react-table';
+import { Box, Button, IconButton } from '@mui/material';
+import PrintIcon from '@mui/icons-material/Print';
+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: 'age',
+        header: 'Age',
+      },
+      {
+        accessorKey: 'salary',
+        header: 'Salary',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowSelection: true,
+    positionToolbarAlertBanner: 'bottom', //show selected rows count on bottom toolbar
+    //add custom action buttons to top-left of top toolbar
+    renderTopToolbarCustomActions: ({ table }) => (
+      <Box sx={{ display: 'flex', gap: '1rem', p: '4px' }}>
+        <Button
+          color="secondary"
+          onClick={() => {
+            alert('Create New Account');
+          }}
+          variant="contained"
+        >
+          Create Account
+        </Button>
+        <Button
+          color="error"
+          disabled={!table.getIsSomeRowsSelected()}
+          onClick={() => {
+            alert('Delete Selected Accounts');
+          }}
+          variant="contained"
+        >
+          Delete Selected Accounts
+        </Button>
+      </Box>
+    ),
+    //customize built-in buttons in the top-right of top toolbar
+    renderToolbarInternalActions: ({ table }) => (
+      <Box>
+        {/* add custom button to print table  */}
+        <IconButton
+          onClick={() => {
+            window.print();
+          }}
+        >
+          <PrintIcon />
+        </IconButton>
+        {/* along-side built-in buttons in whatever order you want them */}
+        <MRT_ToggleDensePaddingButton table={table} />
+        <MRT_ToggleFullScreenButton table={table} />
+      </Box>
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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.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.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.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.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //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',
+      },
+    ],
+    [],
+    //end
+  );
+
+  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;

package/data/examples/customize-remove-column-grouping.tsx

@@ -0,0 +1,94 @@
+import { useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_Row,
+  MRT_ExpandAllButton,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Box, Stack } from '@mui/material';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        header: 'First Name',
+        accessorKey: 'firstName',
+      },
+      {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+      },
+      {
+        header: 'Age',
+        accessorKey: 'age',
+      },
+      {
+        header: 'Gender',
+        accessorKey: 'gender',
+      },
+      {
+        header: 'State',
+        accessorKey: 'state',
+      },
+      {
+        header: 'Salary',
+        accessorKey: 'salary',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    displayColumnDefOptions: {
+      'mrt-row-expand': {
+        Header: () => (
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+            }}
+          >
+            <MRT_ExpandAllButton table={table} />
+            <Box>Groups</Box>
+          </Stack>
+        ),
+        GroupedCell: ({ row, table }) => {
+          const { grouping } = table.getState();
+          return row.getValue(grouping[grouping.length - 1]);
+        },
+        enableResizing: true,
+        muiTableBodyCellProps: ({ row }) => ({
+          sx: (theme) => ({
+            color:
+              row.depth === 0
+                ? theme.palette.primary.main
+                : row.depth === 1
+                  ? theme.palette.secondary.main
+                  : undefined,
+          }),
+        }),
+        size: 200,
+      },
+    },
+    enableGrouping: true,
+    enableColumnResizing: true,
+    groupedColumnMode: 'remove',
+    initialState: {
+      density: 'compact',
+      expanded: true, //expand all groups by default
+      grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
+      pagination: { pageIndex: 0, pageSize: 20 },
+      sorting: [{ id: 'state', desc: false }],
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/customize-row-selection.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+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: 'age',
+        header: 'Age',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableSelectAll: false,
+    enableRowSelection: (row) => row.original.age >= 21, //enable row selection conditionally per row
+    muiSelectCheckboxProps: { color: 'secondary' },
+    positionToolbarAlertBanner: 'head-overlay',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;