release v2.11.0

KevinVandy · KevinVandy · commit 805227d65fae · 2024-02-05T00:27:55.000-06:00
diff --git a/README.md b/README.md
@@ -68,9 +68,10 @@ _All features can easily be enabled/disabled_
 
 _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
 
-- [x] 43-53kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] 30-54kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
+- [x] Cell Actions (Right-click Context Menu)
 - [x] Click To Copy Cell Values
 - [x] Column Action Dropdown Menu
 - [x] Column Hiding
@@ -79,7 +80,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 - [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
-- [x] Data Editing (4 different editing modes)
+- [x] Data Editing and Creating (5 different editing modes)
 - [x] Density Toggle
 - [x] Detail Panels (Expansion)
 - [x] Faceted Value Generation for Filter Options
diff --git a/apps/material-react-table-docs/components/navigation/TopBar.tsx b/apps/material-react-table-docs/components/navigation/TopBar.tsx
@@ -194,7 +194,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
                 target="_blank"
               >
                 <IconButton aria-label="Github" size="small">
-                  <GitHubIcon fontSize={isMobile ? 'medium' : 'large'} />
+                  <GitHubIcon />
                 </IconButton>
               </a>
             </Tooltip>
@@ -207,7 +207,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
                 <IconButton aria-label="Discord" size="small">
                   <img
                     alt="Discord"
-                    height={isMobile ? 20 : 25}
+                    height={20}
                     style={{
                       padding: '-3px',
                       borderRadius: '50%',
@@ -228,11 +228,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
                 }}
                 size="small"
               >
-                {isLightTheme ? (
-                  <LightModeIcon fontSize={isMobile ? 'medium' : 'large'} />
-                ) : (
-                  <DarkModeIcon fontSize={isMobile ? 'medium' : 'large'} />
-                )}
+                {isLightTheme ? <LightModeIcon /> : <DarkModeIcon />}
               </IconButton>
             </Tooltip>
           </Box>
diff --git a/apps/material-react-table-docs/examples/custom-headless/sandbox/src/JS.js b/apps/material-react-table-docs/examples/custom-headless/sandbox/src/JS.js
@@ -99,12 +99,16 @@ const Example = () => {
             ))}
           </TableHead>
           <TableBody>
-            {table.getRowModel().rows.map((row) => (
+            {table.getRowModel().rows.map((row, rowIndex) => (
               <TableRow key={row.id} selected={row.getIsSelected()}>
-                {row.getVisibleCells().map((cell) => (
+                {row.getVisibleCells().map((cell, _columnIndex) => (
                   <TableCell align="center" variant="body" key={cell.id}>
                     {/* Use MRT's cell renderer that provides better logic than flexRender */}
-                    <MRT_TableBodyCellValue cell={cell} table={table} />
+                    <MRT_TableBodyCellValue
+                      cell={cell}
+                      table={table}
+                      staticRowIndex={rowIndex} //just for batch row selection to work
+                    />
                   </TableCell>
                 ))}
               </TableRow>
diff --git a/apps/material-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx
@@ -100,12 +100,16 @@ const Example = () => {
             ))}
           </TableHead>
           <TableBody>
-            {table.getRowModel().rows.map((row) => (
+            {table.getRowModel().rows.map((row, rowIndex) => (
               <TableRow key={row.id} selected={row.getIsSelected()}>
-                {row.getVisibleCells().map((cell) => (
+                {row.getVisibleCells().map((cell, _columnIndex) => (
                   <TableCell align="center" variant="body" key={cell.id}>
                     {/* Use MRT's cell renderer that provides better logic than flexRender */}
-                    <MRT_TableBodyCellValue cell={cell} table={table} />
+                    <MRT_TableBodyCellValue
+                      cell={cell}
+                      table={table}
+                      staticRowIndex={rowIndex} //just for batch row selection to work
+                    />
                   </TableCell>
                 ))}
               </TableRow>
diff --git a/apps/material-react-table-docs/examples/manual-selection/sandbox/src/JS.js b/apps/material-react-table-docs/examples/manual-selection/sandbox/src/JS.js
@@ -71,7 +71,7 @@ const Example = () => {
       onClick: () =>
         setRowSelection((prev) => ({
           ...prev,
-          [row.id]: !prev[row.id],
+          [row.id]: !prev[row.id], //this is a simple toggle implementation
         })),
       selected: rowSelection[row.id],
       sx: {
diff --git a/apps/material-react-table-docs/examples/manual-selection/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/manual-selection/sandbox/src/TS.tsx
@@ -85,7 +85,7 @@ const Example = () => {
       onClick: () =>
         setRowSelection((prev) => ({
           ...prev,
-          [row.id]: !prev[row.id],
+          [row.id]: !prev[row.id], //this is a simple toggle implementation
         })),
       selected: rowSelection[row.id],
       sx: {
diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,15 @@ import Head from 'next/head';
 
 ### Version 2
 
+#### Version 2.11.0 - 2024-02-05
+
+- Added new `enableBatchRowSelection` table option that is enabled by default that allows users to select multiple rows at once by holding down the shift key and clicking on a row
+- Added small "Clear selection" button to the toolbar alert banner selected message by default when rows are selected
+- Now exporting all `MRT_*Props` component prop types
+- Added new override option for passing in custom spinner while loading data with the `muiCircularProgressProps.Component` prop
+- Fixed Autocomplete filter showing filter values instead of display labels once value is selected
+- Removed default Header html title attribute on all header cells
+
 #### Version 2.10.0 - 2024-01-31
 
 - Added automatic column order state recalculation for dynamic columns and dynamic MRT display columns being enabled/disabled
@@ -20,7 +29,7 @@ import Head from 'next/head';
 - Added new Cell Actions features which will show a MUI context menu when a cell is right-clicked
   - New `enableCellActions` table option
   - New `renderCellActionMenuItems` table and column options
-  - New `MRT_ActionMenuItem` component to make styling all MRT menu items consistently (icons, text, spacing) easier to be consistent.
+  - New `MRT_ActionMenuItem` component to make styling all MRT menu items consistently (icons, text, spacing) easier to be consistent
 - Fixed bug where the show all columns action menu item ignored the `enableHiding` column option
 
 #### Version 2.9.2 - 2024-01-25
diff --git a/apps/material-react-table-docs/pages/docs/guides/async-loading.mdx b/apps/material-react-table-docs/pages/docs/guides/async-loading.mdx
@@ -114,7 +114,25 @@ return <MaterialReactTable table={table} />;
 
 <LoadingExample />
 
-#### Only Show Progress Bars or Skeletons
+#### Custom Loading Spinner component
+
+> New in v2.11.0
+
+If you need to use a custom loading spinner component other than the built-in MUI one, you can now pass in custom component in the `muiCircularProgressProps` `Component` prop.
+
+```jsx
+import { MyCustomSpinner } from './MyCustomSpinner';
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiCircularProgressProps: {
+    Component: <MyCustomSpinner />,
+  },
+});
+```
+
+### Only Show Progress Bars or Skeletons
 
 If you do not want both progress bars and cell skeletons to show, you can use the `showProgressBars` and `showSkeletons` states, instead.
 
diff --git a/apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx b/apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx
@@ -8,7 +8,6 @@ import CustomizeFilterVariantsExample from '../../../examples/customize-filter-v
 import CustomizeFilterModesExample from '../../../examples/customize-filter-modes';
 import CustomizeFilterComponentsExample from '../../../examples/customize-filter-components';
 import EnableColumnFacetValuesExample from '../../../examples/enable-filter-facet-values';
-import RemoteExample from '../../../examples/remote';
 
 <Head>
   <title>{'Column Filtering Guide - Material React Table V2 Docs'}</title>
@@ -353,9 +352,7 @@ return <MaterialReactTable table={table} />;
 
 > Specifying `manualFiltering` turns off all client-side filtering and assumes that the `data` you pass to `<MaterialReactTable />` is already filtered.
 
-Here is the full Remote Data example featuring server-side **filtering**, pagination, and sorting.
-
-<RemoteExample />
+See either the [React Query](/docs/examples/react-query) or [useEffect fetching](/docs/examples/remote) examples to see fully server-side **filtering**, pagination, and sorting in action.
 
 ### Customize Material UI Filter components
 
diff --git a/apps/material-react-table-docs/pages/docs/guides/row-selection.mdx b/apps/material-react-table-docs/pages/docs/guides/row-selection.mdx
@@ -58,30 +58,30 @@ const table = useMaterialReactTable({
 return <MaterialReactTable table={table} />;
 ```
 
-### Batch Row Selection
-
-> New in v2.11.0
+#### Enable Row Selection Conditionally Per Row
 
-By default, when the user holds down the <kbd>Shift</kbd> key and clicks a row, all rows between the last selected row and the clicked row will be selected. This can be disabled with the `enableBatchRowSelection` table option.
+You can also enable row selection conditionally per row with the same `enableRowSelection` table option, but with a callback function instead of a boolean.
 
 ```jsx
-const table = useMantineReactTable({
+const table = useMaterialReactTable({
   columns,
   data,
-  enableRowSelection: true,
-  enableBatchRowSelection: false, //disable batch row selection with shift key
+  enableRowSelection: (row) => row.original.age > 18, //disable row selection for rows with age <= 18
 });
 ```
 
-#### Enable Row Selection Conditionally Per Row
+### Batch Row Selection
 
-You can also enable row selection conditionally per row with the same `enableRowSelection` table option, but with a callback function instead of a boolean.
+> New in v2.11.0
+
+By default, when the user holds down the <kbd>Shift</kbd> key and clicks a row, all rows between the last selected row and the clicked row will be selected. This can be disabled with the `enableBatchRowSelection` table option.
 
 ```jsx
-const table = useMaterialReactTable({
+const table = useMantineReactTable({
   columns,
   data,
-  enableRowSelection: (row) => row.original.age > 18, //disable row selection for rows with age <= 18
+  enableRowSelection: true,
+  enableBatchRowSelection: false, //disable batch row selection with shift key
 });
 ```
 
@@ -174,8 +174,9 @@ const table = useMaterialReactTable({
   data,
   enableRowSelection: true,
   //clicking anywhere on the row will select it
-  muiTableBodyRowProps: ({ row }) => ({
-    onClick: row.getToggleSelectedHandler(),
+  muiTableBodyRowProps: ({ row, staticRowIndex, table }) => ({
+    onClick: (event) =>
+      getMRT_RowSelectionHandler()({ event, row, staticRowIndex, table }), //import this helper function from material-react-table
     sx: { cursor: 'pointer' },
   }),
 });
diff --git a/packages/material-react-table/README.md b/packages/material-react-table/README.md
@@ -68,9 +68,10 @@ _All features can easily be enabled/disabled_
 
 _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
 
-- [x] 43-53kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] 30-54kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
+- [x] Cell Actions (Right-click Context Menu)
 - [x] Click To Copy Cell Values
 - [x] Column Action Dropdown Menu
 - [x] Column Hiding
@@ -79,7 +80,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 - [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
-- [x] Data Editing (4 different editing modes)
+- [x] Data Editing and Creating (5 different editing modes)
 - [x] Density Toggle
 - [x] Detail Panels (Expansion)
 - [x] Faceted Value Generation for Filter Options
diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.10.0",
+  "version": "2.11.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -299,6 +299,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               renderedCellValue: cell.renderValue() as any,
               row,
               rowRef,
+              staticColumnIndex,
               staticRowIndex,
               table,
             })
diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx
@@ -13,13 +13,15 @@ const allowedTypes = ['string', 'number'];
 export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   rowRef?: RefObject<HTMLTableRowElement>;
+  staticColumnIndex?: number;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   cell,
   rowRef,
+  staticColumnIndex,
   staticRowIndex,
   table,
 }: MRT_TableBodyCellValueProps<TData>) => {
@@ -113,6 +115,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
       renderedCellValue,
       row,
       rowRef,
+      staticColumnIndex,
       staticRowIndex,
       table,
     });
diff --git a/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx b/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx
@@ -161,6 +161,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           ] || ''
         : (column.getFilterValue() as string) ?? '',
   );
+  const [autocompleteValue, setAutocompleteValue] =
+    useState<DropdownOption | null>(
+      isAutocompleteFilter ? (filterValue as DropdownOption | null) : null,
+    );
 
   const handleChangeDebounced = useCallback(
     debounce(
@@ -196,6 +200,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     textFieldProps?.onChange?.(event);
   };
 
+  const handleAutocompleteChange = (newValue: DropdownOption) => {
+    setAutocompleteValue(newValue);
+    handleChange(getValueAndLabel(newValue).value);
+  };
+
   const handleClear = () => {
     if (isMultiSelectFilter) {
       setFilterValue([]);
@@ -435,41 +444,35 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             },
           }}
         />
-      ) : isAutocompleteFilter ? (() => {
-          const [autocompleteValue, setAutocompleteValue] = useState<DropdownOption | null>(null);
-          const handleAutocompleteChange = (newValue: DropdownOption) => {
-            setAutocompleteValue(newValue);
-            handleChange(getValueAndLabel(newValue).value);
-          };
-          return <Autocomplete
-            freeSolo
-            getOptionLabel={(option) => getValueAndLabel(option).label}
-            onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
-            options={
-              dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
-            }
-            {...autocompleteProps}
-            renderInput={(builtinTextFieldProps) => (
-              <TextField
-                {...builtinTextFieldProps}
-                {...commonTextFieldProps}
-                InputProps={{
-                  ...builtinTextFieldProps.InputProps,
-                  startAdornment:
+      ) : isAutocompleteFilter ? (
+        <Autocomplete
+          freeSolo
+          getOptionLabel={(option) => getValueAndLabel(option).label}
+          onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
+          options={
+            dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
+          }
+          {...autocompleteProps}
+          renderInput={(builtinTextFieldProps) => (
+            <TextField
+              {...builtinTextFieldProps}
+              {...commonTextFieldProps}
+              InputProps={{
+                ...builtinTextFieldProps.InputProps,
+                startAdornment:
                   commonTextFieldProps?.InputProps?.startAdornment,
-                }}
-                inputProps={{
-                  ...builtinTextFieldProps.inputProps,
-                  ...commonTextFieldProps?.inputProps,
-                }}
-                onChange={handleTextFieldChange}
-                onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-              />
-            )}
-            value={autocompleteValue}
-          />;
-        }
-      )() : (
+              }}
+              inputProps={{
+                ...builtinTextFieldProps.inputProps,
+                ...commonTextFieldProps?.inputProps,
+              }}
+              onChange={handleTextFieldChange}
+              onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
+            />
+          )}
+          value={autocompleteValue}
+        />
+      ) : (
         <TextField
           select={isSelectFilter || isMultiSelectFilter}
           {...commonTextFieldProps}
diff --git a/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx b/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx
diff --git a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
diff --git a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
diff --git a/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx b/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx
diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
diff --git a/packages/material-react-table/stories/features/Filtering.stories.tsx b/packages/material-react-table/stories/features/Filtering.stories.tsx
diff --git a/packages/material-react-table/stories/features/Selection.stories.tsx b/packages/material-react-table/stories/features/Selection.stories.tsx
