format

Author: KevinVandy

packages/material-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -65,11 +65,15 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
       hoveredColumn &&
       hoveredColumn?.id !== draggingColumn?.id
     ) {
-      const reorderedColumns = reorderColumn(column, hoveredColumn as MRT_Column<TData>, columnOrder);
+      const reorderedColumns = reorderColumn(
+        column,
+        hoveredColumn as MRT_Column<TData>,
+        columnOrder,
+      );
       setColumnOrder(reorderedColumns);
       setColumnPinning(({ left = [], right = [] }) => ({
-        left: reorderedColumns.filter(header => left.includes(header)),
-        right: reorderedColumns.filter(header => right.includes(header)),
+        left: reorderedColumns.filter((header) => left.includes(header)),
+        right: reorderedColumns.filter((header) => right.includes(header)),
       }));
     }
     setDraggingColumn(null);

packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx

@@ -7,7 +7,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import Autocomplete, { AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
+import Autocomplete, {
+  AutocompleteInputChangeReason,
+} from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import Chip from '@mui/material/Chip';
@@ -144,13 +146,17 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         ? (column.getFilterValue() as [string, string])?.[
             rangeFilterIndex as number
           ] || ''
-        : isAutocompleteFilter 
-        ? typeof column.getFilterValue() === 'string' ? column.getFilterValue() as string : ''
-        : ((column.getFilterValue() as string) ?? ''),
+        : isAutocompleteFilter
+          ? typeof column.getFilterValue() === 'string'
+            ? (column.getFilterValue() as string)
+            : ''
+          : ((column.getFilterValue() as string) ?? ''),
   );
   const [autocompleteValue, setAutocompleteValue] =
-    useState<DropdownOption | null>(
-      () => isAutocompleteFilter ? ((column.getFilterValue() || null) as DropdownOption | null) : null,
+    useState<DropdownOption | null>(() =>
+      isAutocompleteFilter
+        ? ((column.getFilterValue() || null) as DropdownOption | null)
+        : null,
     );
 
   const handleChangeDebounced = useCallback(
@@ -187,8 +193,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     textFieldProps?.onChange?.(event);
   };
 
-  const handleAutocompleteInputChange = (_event: SyntheticEvent, newValue: string, _reason: AutocompleteInputChangeReason) => {
-    handleChange(newValue)
+  const handleAutocompleteInputChange = (
+    _event: SyntheticEvent,
+    newValue: string,
+    _reason: AutocompleteInputChangeReason,
+  ) => {
+    handleChange(newValue);
   };
 
   const handleAutocompleteChange = (newValue: DropdownOption | null) => {
@@ -208,8 +218,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         return newFilterValues;
       });
     } else if (isAutocompleteFilter) {
-      setAutocompleteValue(null)
-      setFilterValue('')
+      setAutocompleteValue(null);
+      setFilterValue('');
       // when using 'autocomplete' this function is called only inside effect and only if the filterValue === undefined
       // so the following call is excessive; should be uncommented if the handleClear becomes part of the Autocomplete component callbacks
       // column.setFilterValue(undefined)
@@ -343,8 +353,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         ...textFieldProps.slotProps?.formHelperText,
       },
       input: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
-        ? {endAdornment, startAdornment, ...textFieldProps.slotProps?.input}
-        : {startAdornment, ...textFieldProps.slotProps?.input},
+        ? { endAdornment, startAdornment, ...textFieldProps.slotProps?.input }
+        : { startAdornment, ...textFieldProps.slotProps?.input },
       htmlInput: {
         'aria-label': filterPlaceholder,
         autoComplete: 'off',

packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -86,11 +86,15 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     setIsDragging(false);
     setHoveredColumn(null);
     if (hoveredColumn) {
-      const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
+      const reorderedColumns = reorderColumn(
+        column,
+        hoveredColumn,
+        columnOrder,
+      );
       setColumnOrder(reorderedColumns);
       setColumnPinning(({ left = [], right = [] }) => ({
-        left: reorderedColumns.filter(header => left.includes(header)),
-        right: reorderedColumns.filter(header => right.includes(header)),
+        left: reorderedColumns.filter((header) => left.includes(header)),
+        right: reorderedColumns.filter((header) => right.includes(header)),
       }));
     }
   };

packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -66,8 +66,14 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     selectedRowCount > 0 ? (
       <Stack alignItems="center" direction="row" gap="16px">
         {localization.selectedCountOfRowCountRowsSelected
-          ?.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))
-          ?.replace('{rowCount}', totalRowCount.toLocaleString(localization.language))}
+          ?.replace(
+            '{selectedCount}',
+            selectedRowCount.toLocaleString(localization.language),
+          )
+          ?.replace(
+            '{rowCount}',
+            totalRowCount.toLocaleString(localization.language),
+          )}
         <Button
           onClick={(event) =>
             getMRT_SelectAllHandler({ table })(event, false, true)

packages/material-react-table/stories/features/ColumnOrdering.stories.tsx

@@ -39,10 +39,10 @@ const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
     header: 'State',
   },
   {
-    accessorKey: "phone",
-    header: "Phone",
+    accessorKey: 'phone',
+    header: 'Phone',
     enablePinning: false,
-  }
+  },
 ];
 
 const data = [...Array(100)].map(() => ({