material-react-table 0.14.1 → 0.14.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.1",
+  "version": "0.14.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/head/MRT_TableHeadCell.tsx

@@ -5,7 +5,7 @@ import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
-import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
+import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -162,6 +162,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             justifyContent:
               columnDefType === 'group' ? 'center' : 'space-between',
             opacity: isDragging ? 0.5 : 1,
+            position: 'relative',
             width: '100%',
           }}
         >
@@ -205,7 +206,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             {(enableColumnActions || columnDef.enableColumnActions) &&
               columnDef.enableColumnActions !== false &&
               columnDefType !== 'group' && (
-                <MRT_ToggleColumnActionMenuButton
+                <MRT_TableHeadCellColumnActionsButton
                   header={header}
                   instance={instance}
                 />

package/src/{buttons/MRT_ToggleColumnActionMenuButton.tsx → head/MRT_TableHeadCellColumnActionsButton.tsx}

@@ -8,7 +8,7 @@ interface Props {
   instance: MRT_TableInstance;
 }
 
-export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
+export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
   header,
   instance,
 }) => {
@@ -66,7 +66,6 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
           {...iconButtonProps}
           sx={{
             height: '2rem',
-            mr: '2px',
             mt: '-0.2rem',
             opacity: 0.5,
             transition: 'opacity 0.2s',

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -72,6 +72,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
             backgroundColor: 'transparent',
             opacity: 0.8,
           },
+          width: '1.5ch',
         }}
       >
         {showFilters && !column.getFilterValue() ? (

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -31,6 +31,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
+        mr: '-1rem',
         right: '1px',
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -32,6 +32,10 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, instance }) => {
             ? (column.getIsSorted() as 'asc' | 'desc')
             : undefined
         }
+        sx={{
+          width: '2ch',
+          transform: 'translateX(-0.5ch)',
+        }}
       />
     </Tooltip>
   );