@mini_7/material-react-table-mcp 4.0.0

package/data/guides/editing.md

@@ -0,0 +1,367 @@
+## Editing Feature Guide
+
+If your tables need full CRUD functionality, you can enable editing features in Material React Table.
+
+There are five visually distinct editing modes to choose from, whether you want to let users [edit data in a modal](#modal-edit-display-mode), [inline one row at a time](#row-edit-display-mode), [one cell at a time](#cell-edit-display-mode), or just always have [editing enabled for every cell](#table-edit-display-mode), or a [completely custom editing UI](#custom-edit-display-mode).
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `editDisplayMode` - type `'modal' | 'cell' | 'row' | 'table' | 'custom` - default `'modal'` - You can choose between 5 different built-in editing modes. Edit a row in a modal, or a row inline, just 1 cell at a time, or always have all cells editable.
+- `enableEditing` - type `boolean | (row: MRT_Row) => boolean`
+- `muiEditRowDialogProps` - type `IconButtonProps | ({ table }) => IconButtonProps`
+- `muiEditTextFieldProps` - type `TextFieldProps | ({ cell, column, row, table }) => TextFieldProps`
+- `onCreatingRowCancel` - type `({ row, table }) => void`
+- `onCreatingRowChange` - type `OnChangeFn<MRT_Row<TData> | null>`
+- `onCreatingRowSave` - type `({ exitEditingMode, row, table, values}) => Promise<void> | void`
+- `onEditingCellChange` - type `OnChangeFn<MRT_Cell<TData> | null>`
+- `onEditingRowCancel` - type `({ row, table }) => void`
+- `onEditingRowChange` - type `OnChangeFn<MRT_Row<TData> | null>`
+- `onEditingRowSave` - type `({ exitEditingMode, row, table, values}) => Promise<void> | void`
+- `positionCreatingRow` - type `'top' | 'bottom' | number` - default `'top'` - Where to render the new blank inserted row when in creating mode. Passing in a number will render the row before the row at that index.
+- `renderCreateRowDialogContent` - type `({ internalEditComponents, row, table }) => ReactNode`
+- `renderEditRowDialogContent` - type `({ internalEditComponents, row, table }) => ReactNode`
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `Edit` - type `({ cell, column, row, table }) => ReactNode` - Define a custom edit component for cells in a column.
+- `editSelectOptions` - type `DropdownOption[] | (({ cell, column, row, table, }) => DropdownOption[])`
+- `editVariant` - type `'text' | 'select'` - default `'text'`
+- `enableEditing` - type `boolean | (row) => boolean`
+- `muiEditTextFieldProps` - type `TextFieldProps | ({ cell, column, row, table }) => TextFieldProps`
+
+### Relevant State Options
+
+Relevant state options (get_mrt_api has full details):
+
+- `creatingRow` - type `MRT_Row` - a variable representing the currently creating row
+- `editingCell` - type `MRT_Cell` - a variable representing the currently editing cell
+- `editingRow` - type `MRT_Row` - a variable representing the currently editing row
+
+### Enable Editing
+
+To enable editing, you first need to set the `enableEditing` table option to `true`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+});
+```
+
+However, this is just the first step. You will need to hook up logic and event listeners, but it depends on which `editDisplayMode` you want to use.
+
+### Disable Editing
+
+Editing can be turned off on a per-column basis with the `enableEditing` column option.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'age',
+    header: 'Age',
+    enableEditing: false,
+  },
+];
+```
+
+In the modal editing mode, a disabled text field will still be rendered for columns with editing disabled, but in the row, cell, and table editing modes, normal cell values will be rendered instead of text fields.
+
+If you want to completely remove an editing textfield from the editing modal or render the normal cell value instead, you can use the `Edit` column option to override the editing UI for that column.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'age',
+    header: 'Age',
+    enableEditing: false,
+    Edit: () => null, //don't render anything in the editing modal for this column
+    //or Edit: ({ cell, renderedCellValue }) => <>{renderedCellValue}</>, //render the normal cell value instead of a text field
+  },
+];
+```
+
+### Edit Display Modes
+
+There are five different editDisplayModes to choose from. The default is `"modal"`, but you can also choose `"row"`, `"cell"`, `"table"`, or `"custom"`.
+
+#### Modal Edit Display Mode
+
+When using the default `"modal"` editDisplayMode, the user will be presented with a modal dialog where they can edit the data for one row at a time. No data is saved until the user clicks the save button. Clicking the cancel button clears out any changes that were made on that row.
+
+An `onEditingRowSave` callback function prop must be provided where you will get access to the updated row data so that changes can be processed and saved. It is up to you how you handle the data. This function has a `exitEditingMode` parameter that must be called in order to exit editing mode upon save. The reason for this is so that you can perform validation checks before letting the modal close.
+
+By default, Material React Table will render all of the cells in the row as text fields in a vertical stack. You can customize or override this behavior with the `muiEditRowDialogProps` table option, or the `renderEditRowDialogContent` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  editDisplayMode: 'modal', //default
+  onEditingRowSave: ({ table, values }) => {
+    //validate data
+    //save data to api
+    table.setEditingRow(null); //exit editing mode
+  },
+  onEditingRowCancel: () => {
+    //clear any validation errors
+  },
+  muiEditRowDialogProps: {
+    //optionally customize the dialog
+  },
+  renderEditRowDialogContent: ({ internalEditComponents, row, table }) => {
+    //optionally, completely override the render of the dialog content
+    //use `internalEditComponents` to render the generated text fields, or completely render your own form and inputs
+  },
+});
+```
+
+#### Row Edit Display Mode
+
+The `"row"` editDisplayMode works just like the default `"modal"` editDisplayMode, except that the editing components will render inline in the table instead of in a modal dialog. Only one row is made editable at a time.
+
+By default, you will probably not want to save any data until the user clicks the save button, though you could wire up `onChange` or `onBlur` events to save data as the user inputs data.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  editDisplayMode: 'row',
+  onEditingRowSave: ({ table, values }) => {
+    //validate data
+    //save data to api
+    table.setEditingRow(null); //exit editing mode
+  },
+  onEditingRowCancel: () => {
+    //clear any validation errors
+  },
+});
+```
+
+#### Cell Edit Display Mode
+
+The `"cell"` editDisplayMode is a bit simpler visually. By default, a user can double-click a cell to activate editing mode, but only for that cell.
+
+Then there is a bit of work for you to do to wire up either the `onBlur`, `onChange`, etc., events yourself in order to save the table data. This can be done in the `muiEditTextFieldProps` table option or column definition option.
+
+```jsx
+const columns = [
+  {
+    accessor: 'age',
+    header: 'Age',
+    muiEditTextFieldProps: ({ cell, row, table }) => ({
+      onBlur: (event) => {
+        //validate data
+        //save data to api and/or rerender table
+        // table.setEditingCell(null) is called automatically onBlur internally
+      },
+    }),
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  editDisplayMode: 'cell',
+  //optionally, use single-click to activate editing mode instead of default double-click
+  muiTableBodyCellProps: ({ cell, column, table }) => ({
+    onClick: () => {
+      table.setEditingCell(cell); //set editing cell
+      //optionally, focus the text field
+      queueMicrotask(() => {
+        const textField = table.refs.editInputRefs.current?.[column.id];
+        if (textField) {
+          textField.focus();
+          textField.select?.();
+        }
+      });
+    },
+  }),
+});
+```
+
+#### Table Edit Display Mode
+
+The `"table"` editDisplayMode is similar to the `"cell"` editDisplayMode, but it simply has all of the data cells in the table become editable all at once. You will most likely wire up all of the logic the same way as the `"cell"` editDisplayMode.
+
+#### Custom Edit Display Mode
+
+There is another option if you don't like any of the built-in editDisplayModes UI. If you want to completely handle your own editing UI, you can use the `"custom"` editDisplayMode. This will give you access to the `editingCell`, `editingRow`, and `creatingRow` state options, but MRT will not render any editing UI for you. This is common for rendering a form in a sidebar or similar.
+
+### Enable Creating
+
+> New in V3
+
+Material React Table offers new functionality to make creating news rows of data easier. It works just like the editing features, but with separate state options and callbacks. A Blank row is added to the table or modal for the user to fill out and submit.
+
+#### Create Display Modes
+
+There are just three different createDisplayModes to choose from. The default is `"modal"`, but you can also choose `"row"` or `"custom"`. They work exactly the same as their editDisplayMode counterparts.
+
+#### Position Creating Row
+
+> New in v2.7
+
+By default, the creating row will be added to the top of the table. You can change this behavior with the `positionCreatingRow` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  createDisplayMode: 'modal',
+  positionCreatingRow: 'bottom', //default is 'top'
+});
+```
+
+In advanced use cases, such as editing nested expanding sub-rows, you could even pass in a number to the `positionCreatingRow` table option to specify the index of the row to insert the creating row before.
+
+#### Trigger Create Mode
+
+To trigger a new blank row to be added to the table, we just need to just populate the `creatingRow` state option with a new blank row. This can be done with the `table.setCreatingRow` table instance API. You can either pass in `true` as an argument, or pass in row object with default values.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  editDisplayMode: 'modal',
+  createDisplayMode: 'modal',
+  onCreatingRowSave: ({ table, values }) => {
+    //validate data
+    //save data to api
+    table.setCreatingRow(null); //exit creating mode
+  },
+  onCreatingRowCancel: () => {
+    //clear any validation errors
+  },
+  renderTopToolbarCustomActions: ({ table }) => (
+    <Button
+      onClick={() => {
+        table.setCreatingRow(true); //simplest way to open the create row modal with no default values
+        //or you can pass in a row object to set default values with the `createRow` helper function
+        // table.setCreatingRow(
+        //   createRow(table, {
+        //     //optionally pass in default values for the new row, useful for nested data or other complex scenarios
+        //   }),
+        // );
+      }}
+    >
+      Create New User
+    </Button>
+  ),
+});
+```
+
+### CRUD Examples
+
+> Live examples: `editing-crud-modal`, `editing-crud-row`, `editing-crud-cell`, `editing-crud-table`, `editing-crud-tree` (call get_mrt_example with an id).
+
+### Customizing Editing Components
+
+You can pass any Material UI TextField Props with the `muiEditTextFieldProps` table option.
+
+```jsx
+const columns = [
+  {
+    accessor: 'age',
+    header: 'Age',
+    muiEditTextFieldProps: {
+      required: true,
+      type: 'number',
+      variant: 'outlined',
+    },
+  },
+];
+```
+
+#### Add Validation to Editing Components
+
+You can add validation to the editing components by using the `muiEditTextFieldProps` events. You can write your validation logic and hook it up to the `onBlur`, `onChange`, etc., events, then set the `error` and `helperText` props accordingly.
+
+If you are implementing validation, you may also need to use the `onEditingRowCancel` table option to clear the validation error state.
+
+```jsx
+const [validationErrors, setValidationErrors] = useState({});
+
+const columns = [
+  {
+    accessor: 'age',
+    header: 'Age',
+    muiEditTextFieldProps: {
+      error: !!validationErrors.age, //highlight mui text field red error color
+      helperText: validationErrors.age, //show error message in helper text.
+      required: true,
+      type: 'number',
+      onChange: (event) => {
+        const value = event.target.value;
+        //validation logic
+        if (!value) {
+          setValidationErrors((prev) => ({ ...prev, age: 'Age is required' }));
+        } else if (value < 18) {
+          setValidationErrors({
+            ...validationErrors,
+            age: 'Age must be 18 or older',
+          });
+        } else {
+          delete validationErrors.age;
+          setValidationErrors({ ...validationErrors });
+        }
+      },
+    },
+  },
+];
+```
+
+### Use Custom Editing Components
+
+If you need to use a much more complicated Editing component than the built-in textfield, you can specify a custom editing component with the `Edit` column definition option.
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    Edit: ({ cell, column, row, table }) => {
+      const onBlur = (event) => {
+        row._valuesCache[column.id] = event.target.value;
+        if (isCreating) {
+          setCreatingRow(row);
+        } else if (isEditing) {
+          setEditingRow(row);
+        }
+      };
+
+      return <CustomInput onBlur={onBlur} />;
+    },
+  },
+];
+```
+
+### Customize Actions/Edit Column
+
+You can customize the actions column in a few different ways in the `displayColumnDefOptions` prop's `'mrt-row-actions'` section.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
+    'mrt-row-actions': {
+      header: 'Edit', //change "Actions" to "Edit"
+      size: 120,
+      //use a text button instead of a icon button
+      Cell: ({ row, table }) => (
+        <Button onClick={() => table.setEditingRow(row)}>Edit Customer</Button>
+      ),
+    },
+  },
+});
+```

package/data/guides/expanding-sub-rows.md

@@ -0,0 +1,194 @@
+## Expanding Sub-Rows (Tree Data) Feature Guide
+
+Material React Table has support for expanding sub-rows or tree data. This feature is useful for displaying hierarchical data. The sub-rows can be expanded and collapsed by clicking on the expand/collapse icon.
+
+> NOTE: This feature is for expanding rows of the same data type. If you want to add expansion of more data for the same row, check out the [Detail Panel Feature Guide](/docs/guides/detail-panel).
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `autoResetExpanded` - type `boolean` - Enable this setting to automatically reset the expanded state of the table when grouping state changes.
+- `data` - type `Array<TData>` - The data for the table to display. This can be an array of anything, but you will need to set up your column definitions to "access" the data. When the data option changes reference (compared via Object.is), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.
+- `enableExpandAll` - type `boolean` - default `true`
+- `enableExpanding` - type `boolean`
+- `expandRowsFn` - type `(dataRow: TData) => TData[]`
+- `filterFromLeafRows` - type `boolean` - default `false`
+- `getIsRowExpanded` - type `(row: Row<TData>) => boolean` - If provided, allows you to override the default behavior of determining whether a row is currently expanded.
+- `getRowCanExpand` - type `(row: Row<TData>) => boolean` - If provided, allows you to override the default behavior of determining whether a row can be expanded.
+- `getRowId` - type `(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string` - This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with . using their grandparents' index eg. index.index.index). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
+- `getSubRows` - type `(originalRow: TData, index: number) => undefined | TData[]` - This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.
+- `groupedColumnMode` - type `false | 'reorder' | 'remove'` - default `reorder` - Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
+- `manualExpanding` - type `boolean` - Enables manual row expansion. If this is set to true, getExpandedRowModel will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.
+- `maxLeafRowFilterDepth` - type `number` - default `100` - Set a maximum number leaf row depth that will be filtered. Preserve child rows of filtered rows by setting this to "0"
+- `muiExpandAllButtonProps` - type `IconButtonProps | ({ table }) => IconButtonProps`
+- `muiExpandButtonProps` - type `IconButtonProps | ({ row, table }) => IconButtonProps`
+- `onExpandedChange` - type `OnChangeFn<ExpandedState>` - This function is called when the expanded table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the tableOptions.state.expanded option.
+- `paginateExpandedRows` - type `boolean` - If true expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If false expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
+- `positionExpandColumn` - type `'first' | 'last'` - default `'first'`
+
+### Relevant State Options
+
+Relevant state options (get_mrt_api has full details):
+
+- `expanded` - type `Record<string, boolean> | boolean` - default `{}`
+
+### Enable Expanding Sub-Rows
+
+To enable expanding sub-rows, you must first set the `enableExpanding` table option to `true`.
+
+However, your data must also be formatted in a way to allow for expanding rows that are in some way related to each other. By default, Material React Table will look for a special `subRows` property on each row of your data and treat any array of rows that it finds as the sub-rows for that row. You can customize or override this behavior by passing a custom `getSubRows` table option.
+
+```jsx
+const data = [
+  {
+    id: 1,
+    name: 'John Doe',
+    subRows: [
+      {
+        id: 2,
+        name: 'Jane Doe',
+      },
+      //more sub rows...
+    ],
+  },
+  //more rows...
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  getSubRows: (originalRow) => originalRow.subRows, //default, can customize
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Expand All Rows Button
+
+By default, Material React Table will show the expand all button in the expand column header. You can disable this by setting the `enableExpandAll` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  enableExpandAll: false, //hide expand all button in header
+});
+```
+
+> Live example: `enable-expanding-tree` (call get_mrt_example with that id).
+
+### Generate Sub Rows with getSubRows
+
+If your data is not yet in a tree structure, but the data has relationships that can be parsed into a tree, you can use the `getSubRows` table option to let TanStack Table find the sub rows for each row.
+
+There are a couple key things you have to do to make this work:
+
+1. Only pass in root (top level) rows in your data prop.
+2. Set the `getSubRows` table option to a function that scans all the rest of your data and returns the sub rows for a given row.
+
+This can sometimes be useful in combination with [lazy loading sub rows](#lazy-load-sub-rows).
+
+> NOTE: Be conscious of the performance implications of the `getSubRows` function. It will be called for every row in your table, so it should be performant.
+
+> Live example: `expanding-tree-flat-parse` (call get_mrt_example with that id).
+
+### Expanded Rows Pagination Behavior
+
+By default, Material React Table will treat expanded sub-rows the same as any other row when it comes to pagination. This means that some expanded rows may be on the next page. You can change this behavior by setting the `paginateExpandedRows` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  paginateExpandedRows: false, //expanded rows will be on the same page as their parent row
+});
+```
+
+### Expanded Leaf Row Filtering Behavior
+
+If you are using the [filtering features](/docs/guides/column-filtering) alongside sub-row features, then there are a few behaviors and customizations you should be aware of.
+
+#### Filter From Leaf Rows
+
+By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting the `filterFromLeafRows` table option to `true` will cause filtering to be done from leaf rows up (which means parent rows will be kept so long as one of their child, or grand-child, etc. rows pass the filtering).
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  filterFromLeafRows: true, //search for child rows and preserve parent rows
+});
+```
+
+#### Max Leaf Row Filter Depth
+
+By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting the `maxLeafRowFilterDepth` table option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to 1 will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
+
+This is useful for situations where you want a row's entire child hierarchy to be visible, regardless of the applied filter.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  maxLeafRowFilterDepth: 0, //When filtering root rows, keep all child rows of the passing parent rows
+});
+```
+
+### Expand All Rows By Default
+
+You can manage the initial state of the expanded rows with the `expanded` state option in either the `initialState` or `state` props.
+
+For example, you may want all rows to be expanded by default. To do this, you can simply set the `expanded` state option to `true`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableExpanding: true,
+  initialState: { expanded: true }, //all rows expanded by default
+});
+```
+
+> Live example: `expanding-tree-expanded` (call get_mrt_example with that id).
+
+### Expand Root Rows Only By Default
+
+Here is a slightly more complex initial expanded state example where all the root rows are expanded by default, but none of the sub rows themselves are expanded by default. We just need to find all of the root row ids and set their key in the `expanded` `initialState` option to `true`.
+
+> Live example: `expanding-tree-root-expanded` (call get_mrt_example with that id).
+
+### Customize Expand Column
+
+You can customize the expand column by using the `displayColumnDefOptions` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableGrouping: true,
+  displayColumnDefOptions: {
+    'mrt-row-expand': {
+      enableResizing: true, //allow resizing
+      size: 120, //make the expand column wider
+    },
+  },
+});
+```
+
+### Lazy Load Sub Rows
+
+If you have a ton of nested data that you want to display, but you don't want to fetch it all up front, you can set up Material React Table to only fetch the sub-rows data when the user expands the row.
+
+There are quite a few ways in which you could implement fetching sub-rows lazily. This example is just one way to do it.
+
+The main concept to understand from this example is that you can manage the `expanded` state option in your own scope, and fetch the data for your table based on that state.
+
+How your data is structured from the server is up to you. It is usually easiest to have the server do the hard work and return the data in a nested tree structure, but you can also return the data in a flat structure and use the `getSubRows` table option to parse the data into a tree structure.
+
+> Live example: `lazy-sub-rows` (call get_mrt_example with that id).

package/data/guides/full-screen-toggle.md

@@ -0,0 +1,63 @@
+## Full Screen Toggle Feature Guide
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableFullScreenToggle` - type `boolean` - default `true` - Enable or disable the full screen toggle feature. Disabling will also hide the full screen toggle button.
+- `muiTablePaperProps` - type `PaperProps | ({ table }} => PaperProps`
+- `onIsFullScreenChange` - type `OnChangeFn<boolean>`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `isFullScreen` - type `boolean` - default `false`
+
+### Disable Full Screen Toggle
+
+The full screen toggle button is enabled by default. You can hide it by setting the `enableFullScreenToggle` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableFullScreenToggle: false,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Change Z-Index of Full Screen Table
+
+Under the hood in Material React Table V3, when the table is full screen, these `styles` are applied to the root mui paper component:
+
+```jsx
+{
+  bottom: 0,
+  height: '100vh',
+  left: 0,
+  margin: 0,
+  maxHeight: '100vh',
+  maxWidth: '100vw',
+  padding: 0,
+  position: 'fixed',
+  right: 0,
+  top: 0,
+  width: '100vw',
+  zIndex: 999,
+}
+```
+
+If you need to change the `zIndex` of the full screen table, you can do so by passing in a `muiTablePaperProps` table option with a `style` object that has a `zIndex` property.
+
+```jsx
+muiTablePaperProps: ({ table }) => ({
+  //not sx
+  style: {
+    zIndex: table.getState().isFullScreen ? 1000 : undefined,
+  },
+});
+```
+
+> Note: The `sx` table option will not work here because the `style` table option was used internally instead of the `sx` table option for higher specificity.