material-react-table 1.8.2 → 1.8.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.2",
+  "version": "1.8.4",
   "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.",

package/src/column.utils.ts

@@ -307,10 +307,10 @@ export const getCommonCellStyles = ({
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--col-${parseCSSVarId(
+  minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
   )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-  width: `calc(var(--col-${parseCSSVarId(
+  width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
   )}-size) * 1px)`,
 });

package/src/inputs/MRT_EditCellTextField.tsx

@@ -116,33 +116,34 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
     >
-      {columnDef?.editSelectOptions?.map(
-        (option: string | { text: string; value: string }) => {
-          let value: string;
-          let text: string;
-          if (typeof option !== 'object') {
-            value = option;
-            text = option;
-          } else {
-            value = option.value;
-            text = option.text;
-          }
-          return (
-            <MenuItem
-              key={value}
-              sx={{
-                display: 'flex',
-                m: 0,
-                alignItems: 'center',
-                gap: '0.5rem',
-              }}
-              value={value}
-            >
-              {text}
-            </MenuItem>
-          );
-        },
-      )}
+      {textFieldProps.children ??
+        columnDef?.editSelectOptions?.map(
+          (option: string | { text: string; value: string }) => {
+            let value: string;
+            let text: string;
+            if (typeof option !== 'object') {
+              value = option;
+              text = option;
+            } else {
+              value = option.value;
+              text = option.text;
+            }
+            return (
+              <MenuItem
+                key={value}
+                sx={{
+                  display: 'flex',
+                  m: 0,
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                }}
+                value={value}
+              >
+                {text}
+              </MenuItem>
+            );
+          },
+        )}
     </TextField>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -349,41 +349,42 @@ export const MRT_FilterTextField = ({
             <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
           </MenuItem>
         )}
-        {columnDef?.filterSelectOptions?.map(
-          (option: string | { text: string; value: string }) => {
-            let value: string;
-            let text: string;
-            if (typeof option !== 'object') {
-              value = option;
-              text = option;
-            } else {
-              value = option.value;
-              text = option.text;
-            }
-            return (
-              <MenuItem
-                key={value}
-                sx={{
-                  display: 'flex',
-                  m: 0,
-                  alignItems: 'center',
-                  gap: '0.5rem',
-                }}
-                value={value}
-              >
-                {isMultiSelectFilter && (
-                  <Checkbox
-                    checked={(
-                      (column.getFilterValue() ?? []) as string[]
-                    ).includes(value)}
-                    sx={{ mr: '0.5rem' }}
-                  />
-                )}
-                {text}
-              </MenuItem>
-            );
-          },
-        )}
+        {textFieldProps.children ??
+          columnDef?.filterSelectOptions?.map(
+            (option: string | { text: string; value: string }) => {
+              let value: string;
+              let text: string;
+              if (typeof option !== 'object') {
+                value = option;
+                text = option;
+              } else {
+                value = option.value;
+                text = option.text;
+              }
+              return (
+                <MenuItem
+                  key={value}
+                  sx={{
+                    display: 'flex',
+                    m: 0,
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                  }}
+                  value={value}
+                >
+                  {isMultiSelectFilter && (
+                    <Checkbox
+                      checked={(
+                        (column.getFilterValue() ?? []) as string[]
+                      ).includes(value)}
+                      sx={{ mr: '0.5rem' }}
+                    />
+                  )}
+                  {text}
+                </MenuItem>
+              );
+            },
+          )}
       </TextField>
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/table/MRT_Table.tsx

@@ -59,9 +59,9 @@ export const MRT_Table = ({ table }: Props) => {
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      const colSize = header.getSize();
-      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
-      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = header.getSize();
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] =
+        header.column.getSize();
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo, columnVisibility]);