@mini_7/material-react-table-mcp 4.0.0

package/data/guides/customize-components.md

@@ -0,0 +1,395 @@
+## Customize (Style) Components Guide
+
+One of the strengths of Material React Table is that it exposes a majority of all the underlying Material UI component props used to build the table.
+
+Additionally, in one of the sections below, you will learn [how to customize and use a Material UI Theme](#material-ui-theme) to customize colors, typography, or any other default CSS that is used by Material React Table.
+
+### Relevant Table Options
+
+All props labeled `mui...Props` get forwarded to Material UI components. Here is a list of all the props that are exposed in both the root props and column options.
+
+Relevant table options (get_mrt_api has full details):
+
+- `muiBottomToolbarProps` - type `BoxProps | ({ table }) => BoxProps`
+- `muiColumnActionsButtonProps` - type `IconButtonProps | (({table, column}) => IconButtonProps);`
+- `muiColumnDragHandleProps` - type `IconButtonProps | ({table, column}) => IconButtonProps`
+- `muiCopyButtonProps` - type `ButtonProps | ({ cell, column, row, table }) => ButtonProps`
+- `muiDetailPanelProps` - type `TableCellProps | ({ row, table }) => TableCellProps`
+- `muiEditRowDialogProps` - type `IconButtonProps | ({ table }) => IconButtonProps`
+- `muiEditTextFieldProps` - type `TextFieldProps | ({ cell, column, row, table }) => TextFieldProps`
+- `muiExpandAllButtonProps` - type `IconButtonProps | ({ table }) => IconButtonProps`
+- `muiExpandButtonProps` - type `IconButtonProps | ({ row, table }) => IconButtonProps`
+- `muiFilterAutocompleteProps` - type `AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps`
+- `muiFilterCheckboxProps` - type `CheckboxProps | ({ column, table}) => CheckboxProps`
+- `muiFilterDatePickerProps` - type `DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps`
+- `muiFilterSliderProps` - type `SliderProps | ({ column, table}) => SliderProps`
+- `muiFilterTextFieldProps` - type `TextFieldProps | ({ table, column, rangeFilterIndex}) => TextFieldProps`
+- `muiLinearProgressProps` - type `LinearProgressProps | ({ isTopToolbar, table }) => LinearProgressProps`
+- `muiPaginationProps` - type `Partial<PaginationProps> | ({ table }) => Partial<PaginationProps>`
+- `muiRowDragHandleProps` - type `IconButtonProps | ({ row, table }) => IconButtonProps`
+- `muiSearchTextFieldProps` - type `TextFieldProps | ({ table }) => TextFieldProps`
+- `muiSelectAllCheckboxProps` - type `CheckboxProps | ({ table }) => CheckboxProps`
+- `muiSelectCheckboxProps` - type `CheckboxProps | ({ row, table }) => CheckboxProps`
+- `muiSkeletonProps` - type `SkeletonProps | ({ cell, column, row, table }) => SkeletonProps`
+- `muiTableBodyCellProps` - type `TableCellProps | ({ cell, column, row, table }) => TableCellProps`
+- `muiTableBodyProps` - type `TableBodyProps | ({ table }) => TableBodyProps`
+- `muiTableBodyRowProps` - type `TableRowProps | ({ isDetailPanel, row, table }) => TableRowProps` - default `{ hover: true }`
+- `muiTableContainerProps` - type `TableContainerProps | ({ table }) => TableContainerProps`
+- `muiTableFooterCellProps` - type `TableCellProps| ({table, column}) => TableCellProps`
+- `muiTableFooterProps` - type `TableFooterProps | ({ table }) => TableFooterProps);`
+- `muiTableFooterRowProps` - type `TableRowProps | ({table, footerGroup}) => TableRowProps`
+- `muiTableHeadCellProps` - type `TableCellProps | ({ table, column}) => TableCellProps`
+- `muiTableHeadProps` - type `TableHeadProps | ({ table }) => TableHeadProps`
+- `muiTableHeadRowProps` - type `TableRowProps | ({ table, headerGroup}) => TableRowProps`
+- `muiTablePaperProps` - type `PaperProps | ({ table }} => PaperProps`
+- `muiTableProps` - type `TableProps | ({ table }} => TableProps`
+- `muiToolbarAlertBannerChipProps` - type `ChipProps| ({ table }} => ChipProps`
+- `muiToolbarAlertBannerProps` - type `AlertProps | ({ table }) => AlertProps`
+- `muiTopToolbarProps` - type `BoxProps | ({ table }) => BoxProps`
+
+### Relevant Column Options
+
+Some of the column options expose the same props as above, but on a per column basis.
+
+Relevant column options (get_mrt_api has full details):
+
+- `muiColumnActionsButtonProps` - type `IconButtonProps | ({ column, table }) => IconButtonProps`
+- `muiCopyButtonProps` - type `ButtonProps | ({ cell, column, row, table }) => ButtonProps`
+- `muiEditTextFieldProps` - type `TextFieldProps | ({ cell, column, row, table }) => TextFieldProps`
+- `muiFilterAutocompleteProps` - type `AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps`
+- `muiFilterCheckboxProps` - type `CheckboxProps | ({ column, table }) => CheckboxProps`
+- `muiFilterDatePickerProps` - type `DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps`
+- `muiFilterSliderProps` - type `SliderProps | ({ column, table}) => SliderProps`
+- `muiFilterTextFieldProps` - type `TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps`
+- `muiTableBodyCellProps` - type `TableCellProps | ({ cell, table }) => TableCellProps`
+- `muiTableFooterCellProps` - type `TableCellProps | ({ column, table }) => TableCellProps`
+- `muiTableHeadCellProps` - type `TableCellProps | ({ column, table }) => TableCellProps`
+
+### Material UI Props and Types
+
+Each prop can either be passed as an object or as a callback function where you get access to the underlying `table` instance and any other relevant callback parameters, such as `cell`, `row`, `column`, etc. This lets you easily run conditional logic on the props you pass. Let's take a look at a few examples.
+
+> All `mui...Props` props are strongly typed and you should get ts hints as you write them. API docs are available on the [Material UI website](https://mui.com/material-ui/api/table/) for each component.
+
+#### Static Prop Objects
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  //passing the static object variant if no dynamic logic is needed
+  muiSelectCheckboxProps: {
+    color: 'secondary', //makes all checkboxes use the secondary color
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+#### Callback Functions to Dynamically Set Prop Values
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  //passing the callback function variant. (You should get type hints for all the callback parameters available)
+  muiSelectCheckboxProps: ({ row }) => ({
+    color: 'secondary',
+    disabled: row.original.isAccountLocked, //access the row data to determine if the checkbox should be disabled
+  }),
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Styling Material UI Components
+
+Each `mui...Prop` has multiple options for you to add styling to the component. You could simply pass `className` or `style` props to any `mui...Props` prop, but there is also the `sx` table option, which is the recommended way to style Material UI components in Material React Table.
+
+#### The SX Prop
+
+> NOTE: These docs are still written for the Emotion version of the `sx` prop. Pigment CSS docs will be added here later.
+
+The recommended way to style Material UI components in Material React Table will be the [`sx` prop](https://mui.com/system/basics/#the-sx-prop) throughout this docs site, as it is both the most simple and the most powerful way to style Material UI components as of Material UI V6. They can work and be as simple as a `style` prop, but behind the scenes, they work more like emotion styled-components by using `mui/system`.
+
+Don't worry, `className` and `style` props will still work, but let's show off some of the more elegant syntax you can use with the `sx` table option.
+
+1. The `sx` prop can be used just as simply as a `style` prop by default (though it applies CSS classes using Emotion under the hood).
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTableHeadCellProps: {
+    //simple styling with the `sx` prop, works just like a style prop in this example
+    sx: {
+      fontWeight: 'normal',
+      fontSize: '14px',
+    },
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+2. The `sx` prop gets easy access to your _muiTheme_ without you having to call the theme from a `useTheme` hook.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTableHeadCellProps: {
+    //no useTheme hook needed, just use the `sx` prop with the theme callback
+    sx: (theme) => ({
+      color: theme.palette.text.secondary,
+    }),
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+3. The `sx` prop gives you a much more concise way to add media queries to your styling.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTableHeadCellProps: {
+    //easier way to create media queries, no useMediaQuery hook needed.
+    sx: {
+      fontSize: {
+        xs: '10px',
+        sm: '11px',
+        md: '12px',
+        lg: '13px',
+        xl: '14px',
+      },
+    },
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+4. The `sx` prop still let's you use the `&` syntax to target nested elements.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTableHeadCellProps: {
+    sx: {
+      //use the `&` syntax to target nested elements by their class
+      '& .Mui-TableHeadCell-Content': {
+        padding: '0',
+      },
+      //use the `&` syntax to target hover state
+      '&:hover': {
+        fontWeight: 'bold',
+      },
+    },
+  },
+});
+```
+
+There are many more advantages to using the `sx` prop, but that is all we will discuss in these docs. You can learn more about it the official [Material UI Docs](https://mui.com/system/getting-started/the-sx-prop/).
+
+### Conditional Styling
+
+Using the `sx`, `style`, or `className` props and the parameters from the callback functions (cell, column, row, table instance APIs, etc.), you can easily add conditional styling to your Material UI components. Here's a few examples
+
+#### Style Selected Rows
+
+```jsx
+const table = useMaterialReactTable({
+  muiTableBodyRowProps: ({ row }) => ({
+    //conditionally style selected rows
+    sx: {
+      fontWeight: row.getIsSelected() ? 'bold' : 'normal',
+    },
+  }),
+});
+```
+
+#### Style Expanded Rows
+
+```jsx
+const table = useMaterialReactTable({
+  muiTableBodyRowProps: ({ row }) => ({
+    //conditionally style expanded rows
+    sx: {
+      fontWeight: row.getIsExpanded() ? 'bold' : 'normal',
+    },
+  }),
+});
+```
+
+#### Style Pinned Columns
+
+```jsx
+const table = useMaterialReactTable({
+  muiTableHeadCellProps: ({ column }) => ({
+    //conditionally style pinned columns
+    sx: {
+      backgroundColor: column.getIsPinned() ? '#f5f5f5' : 'inherit',
+    },
+  }),
+  muiTableBodyCellProps: ({ column }) => ({
+    //conditionally style pinned columns
+    sx: {
+      fontWeight: column.getIsPinned() ? 'bold' : 'normal',
+    },
+  }),
+});
+```
+
+There are hundreds of table, column, header, row, and cell instance APIs that you can use for conditional styling and other logic. See the [Table Instance APIs](/docs/api/table-instance-apis), [Column Instance APIs](/docs/api/column-instance-apis), [Row Instance APIs](/docs/api/row-instance-apis), and [Cell Instance APIs](/docs/api/cell-instance-apis) docs for more info.
+
+### Material UI Theme
+
+Material React Table respects your Material UI Theme. If you have already set up Material UI and a global Material UI Theme, you should already be set. But if you have not, you should visit the official [Material UI Theming Docs](https://mui.com/material-ui/customization/theming/) to learn how to set that up.
+
+```jsx
+function App() {
+  //Have you setup your Mui Theme globally in your app root?
+  return (
+    <ThemeProvider theme={createTheme({...})}>
+      ...rest of your application
+    </ThemeProvider>
+  );
+}
+```
+
+#### Customize Theme Just for your Table
+
+Thanks to Material UI allowing you to [nest multiple Theme Providers](https://mui.com/material-ui/customization/theming/#nesting-the-theme), you can change your Material UI Theme just for the `<MaterialReactTable />` component by wrapping a `<ThemeProvider theme={createTheme(...)}>` around just your table. The values in this theme will only effect the `<MaterialReactTable />` component, and not the rest of your site. It will also inherit values from your global theme, so you do not have to redefine everything again. You can just tweak the values you want to change.
+
+```jsx
+import { createTheme, ThemeProvider } from '@mui/material';
+//in one of your normal components
+return (
+  <ThemeProvider theme={createTheme({...})}>
+    <MaterialReactTable table={table} />
+  </ThemeProvider>
+);
+```
+
+#### Custom Material UI Theme Example
+
+> Live example: `mui-theme` (call get_mrt_example with that id).
+
+### MRT Theme Values
+
+> New in V3
+
+Material React Table has a new `mrtTheme` table option where you can change a few of the default color values used by Material React Table.
+
+The default background color of the table toolbars and table are controlled by the `mrtTheme.baseBackgroundColor` value. Dragging borders, selected or pinned rows, and filter match highlighting are also configurable in the `mrtTheme` object.
+
+Here is the default `mrtTheme` object used internally if not overridden:
+
+```jsx
+const baseBackgroundColor =
+  themeOverrides?.baseBackgroundColor ??
+  (theme.palette.mode === 'dark'
+    ? lighten(theme.palette.background.default, 0.05)
+    : theme.palette.background.default);
+return {
+  baseBackgroundColor,
+  draggingBorderColor: theme.palette.primary.main,
+  matchHighlightColor:
+    theme.palette.mode === 'dark'
+      ? darken(theme.palette.warning.dark, 0.25)
+      : lighten(theme.palette.warning.light, 0.5),
+  menuBackgroundColor: lighten(baseBackgroundColor, 0.07),
+  pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
+  selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
+};
+```
+
+### Customize Table Paper Styling
+
+You can customize both the props and the styles of the internal `<Paper />` component that wraps the table by passing in a `muiTablePaperProps` table option. This is useful if you want to change the elevation of the paper, or add a border radius, or any other styling you want to do to the paper.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTablePaperProps: {
+    elevation: 0, //change the mui box shadow
+    //customize paper styles
+    sx: {
+      borderRadius: '0',
+      border: '1px dashed #e0e0e0',
+    },
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Customize Table Body, Rows, Columns, and Cells
+
+#### Stripe Rows Example
+
+If you need to style many of the rows or columns in a consistent manner, it usually makes sense to style the `<TableBody />` component itself. For example if you want to stripe the rows, you can do something like this:
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTableBodyProps: {
+    sx: {
+      //stripe the rows, make odd rows a darker color
+      '& tr:nth-of-type(odd) > td': {
+        backgroundColor: '#f5f5f5',
+      },
+    },
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+#### Stripe Columns Example
+
+Similarly, if you want to stripe the columns, you can do something like this:
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTableBodyProps: {
+    sx: {
+      //stripe the rows, make odd rows a darker color
+      '& td:nth-of-type(odd)': {
+        backgroundColor: '#f5f5f5',
+      },
+    },
+  },
+  muiTableBodyCellProps: {
+    sx: {
+      borderRight: '2px solid #e0e0e0', //add a border between columns
+    },
+  },
+});
+```
+
+> Live example: `customize-table-styles` (call get_mrt_example with that id).
+
+### Customize No Rows overlay
+
+As part of the customization options, we allow you to override the No Records overlay.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  renderEmptyRowsFallback: ({ table }) => (
+    <span>Customized No Rows Overlay</span>
+  ),
+});
+```

package/data/guides/customize-icons.md

@@ -0,0 +1,35 @@
+## Custom Icons Feature Guide
+
+Material React Table uses [Material Icons](https://mui.com/material-ui/material-icons) by default for all of its internal icons.
+
+If you need to, you can customize and replace some or all of the icons with your own custom icons. You can either use other Material Icons or icons from a completely different library.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `icons` - type `Partial<MRT_Icons>;`
+
+### Replace with Custom Icons
+
+To replace a default icon, specify the icon in the `icons` table option. You should get TS hints for the name of the icons you can replace, but you can also consult [this source file](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/icons.ts) for a list of all the icons you can replace.
+
+```jsx
+<MaterialReactTable
+  columns={columns}
+  data={data}
+  icons={{
+    //change sort icon, connect internal props so that it gets styled correctly
+    ArrowDownwardIcon: (props) =>  <FontAwesomeIcon icon={faSortDown} {...props} />,
+    SearchIcon: () => <FontAwesomeIcon icon={faSearch} />,
+    SortIcon: (props) => (<FontAwesomeIcon icon={faArrowDownWideShort} {...props} />), //best practice
+  }}
+```
+
+Some icons have `style` props that get applied to them internally. So, in order to preserve the ability of those Icons to be styled with the correct paddings, margins, or rotations, you should pass in `{...props}` to your custom icon component as a best practice.
+
+### Font Awesome Example
+
+Here is an example where we use icons from a completely different library, [Font Awesome](https://fontawesome.com/).
+
+> Live example: `font-awesome-icons` (call get_mrt_example with that id).