material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.3

package/locales/zh-Hant.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MRT_Localization_ZH_HANT = {
+    actions: '動作',
+    and: '與',
+    cancel: '取消',
+    changeFilterMode: '更改過濾模式',
+    changeSearchMode: '更改搜尋模式',
+    clearFilter: '清除過濾',
+    clearSearch: '清除搜尋',
+    clearSort: '清除排序',
+    clickToCopy: '點擊以複製',
+    collapse: '折疊',
+    collapseAll: '全部折疊',
+    columnActions: '欄位動作',
+    copiedToClipboard: '已複製至剪貼簿',
+    dropToGroupBy: '拖放以按 {column} 分組',
+    edit: '編輯',
+    expand: '展開',
+    expandAll: '全部展開',
+    filterArrIncludes: '包括',
+    filterArrIncludesAll: '包括所有',
+    filterArrIncludesSome: '包括',
+    filterBetween: '介於首尾',
+    filterBetweenInclusive: '介於首尾之間',
+    filterByColumn: '以 {column} 過濾',
+    filterContains: '包含',
+    filterEmpty: '是空字串',
+    filterEndsWith: '結尾為',
+    filterEquals: '等於',
+    filterEqualsString: '等於',
+    filterFuzzy: '模糊搜索',
+    filterGreaterThan: '大於',
+    filterGreaterThanOrEqualTo: '大於等於',
+    filterInNumberRange: '介於',
+    filterIncludesString: '包含',
+    filterIncludesStringSensitive: '包含',
+    filterLessThan: '小於',
+    filterLessThanOrEqualTo: '小於等於',
+    filterMode: '過濾模式：{filterType}',
+    filterNotEmpty: '非空字串',
+    filterNotEquals: '不等於',
+    filterStartsWith: '開首為',
+    filterWeakEquals: '等於',
+    filteringByColumn: '正以 {column} 過濾：{filterType} {filterValue}',
+    goToFirstPage: '到第一頁',
+    goToLastPage: '到最後一頁',
+    goToNextPage: '下一頁',
+    goToPreviousPage: '上一頁',
+    grab: '拖曳',
+    groupByColumn: '按 {column} 分組',
+    groupedBy: '分組依據 ',
+    hideAll: '隱藏全部',
+    hideColumn: '隱藏 {column} 欄位',
+    max: '最大',
+    min: '最小',
+    move: '移動',
+    noRecordsToDisplay: '無紀錄可顯示',
+    noResultsFound: '未找到結果',
+    of: '/',
+    or: '或',
+    pinToLeft: '固定至左邊',
+    pinToRight: '固定至右邊',
+    resetColumnSize: '重置欄位大小',
+    resetOrder: '重置排序',
+    rowActions: '橫列動作',
+    rowNumber: '#',
+    rowNumbers: '橫列編號',
+    rowsPerPage: '每頁數量',
+    save: '儲存',
+    search: '搜尋',
+    selectedCountOfRowCountRowsSelected: '已選擇橫列：{selectedCount}/{rowCount}',
+    select: '選擇',
+    showAll: '顯示全部',
+    showAllColumns: '顯示全部欄位',
+    showHideColumns: '顯示/隱藏 欄位',
+    showHideFilters: '顯示/隱藏 過濾條件',
+    showHideSearch: '顯示/隱藏 搜尋條件',
+    sortByColumnAsc: '按 {column} 順序排序',
+    sortByColumnDesc: '按 {column} 倒序排序',
+    sortedByColumnAsc: '已按 {column} 順序排序',
+    sortedByColumnDesc: '已按 {column} 倒序排序',
+    thenBy: '，然後以',
+    toggleDensity: '切換密度',
+    toggleFullScreen: '切換全螢幕',
+    toggleSelectAll: '切換選擇全部',
+    toggleSelectRow: '切換選擇橫列',
+    toggleVisibility: '切換可見度',
+    ungroupByColumn: '取消按 {column} 分組',
+    unpin: '取消固定',
+    unpinAll: '全部取消固定',
+};
+
+exports.MRT_Localization_ZH_HANT = MRT_Localization_ZH_HANT;
+//# sourceMappingURL=zh-Hant.js.map

package/locales/zh-Hant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zh-Hant.js","sources":["../src/locales/zh-Hant.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "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.",
@@ -65,30 +65,31 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.1.0",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/material": "^5.14.11",
-    "@mui/x-date-pickers": "^6.15.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.4",
+    "@mui/icons-material": "^5.14.12",
+    "@mui/material": "^5.14.12",
+    "@mui/x-date-pickers": "^6.16.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.2",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^9.0.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@types/node": "^20.7.1",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/node": "^20.8.2",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "@vitejs/plugin-react": "^4.1.0",
     "eslint": "^8.50.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
+    "eslint-plugin-perfectionist": "^2.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -98,25 +99,25 @@
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^9.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.4.6",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
     "@emotion/styled": ">=11.11",
     "@mui/icons-material": ">=5.11",
     "@mui/material": ">=5.13",
-    "@mui/x-date-pickers": ">=6.8.0",
+    "@mui/x-date-pickers": ">=6.15.0",
     "react": ">=18.0",
     "react-dom": ">=18.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.3",
-    "@tanstack/react-virtual": "3.0.0-beta.61",
+    "@tanstack/react-table": "8.10.4",
+    "@tanstack/react-virtual": "3.0.0-beta.63",
     "highlight-words": "1.2.2"
   }
 }

package/src/MaterialReactTable.tsx

@@ -1,10 +1,10 @@
-import { useMaterialReactTable } from './useMaterialReactTable';
 import { MRT_TablePaper } from './table/MRT_TablePaper';
 import {
-  type MRT_TableOptions,
   type MRT_TableInstance,
+  type MRT_TableOptions,
   type Xor,
 } from './types';
+import { useMaterialReactTable } from './useMaterialReactTable';
 
 type TableInstanceProp<TData extends Record<string, any> = {}> = {
   table: MRT_TableInstance<TData>;

package/src/body/MRT_TableBody.tsx

@@ -1,15 +1,15 @@
 import { memo, useMemo } from 'react';
 import {
-  useVirtualizer,
   type VirtualItem,
   type Virtualizer,
+  useVirtualizer,
 } from '@tanstack/react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
-import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
+import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { rankGlobalFuzzy } from '../sortingFns';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
@@ -29,18 +29,18 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   const {
     getBottomRows,
     getCenterRows,
+    getIsSomeRowsPinned,
     getPrePaginationRowModel,
     getRowModel,
     getState,
-    getIsSomeRowsPinned,
     getTopRows,
     options: {
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowPinning,
       enableRowVirtualization,
-      enableStickyHeader,
       enableStickyFooter,
+      enableStickyHeader,
       layoutMode,
       localization,
       manualExpanding,
@@ -55,7 +55,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
       rowVirtualizerInstanceRef,
       rowVirtualizerOptions,
     },
-    refs: { tableContainerRef, tablePaperRef, tableFooterRef, tableHeadRef },
+    refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef },
   } = table;
   const {
     columnFilters,
@@ -63,10 +63,10 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     expanded,
     globalFilter,
     globalFilterFn,
+    isFullScreen,
     pagination,
-    sorting,
     rowPinning,
-    isFullScreen,
+    sorting,
   } = getState();
 
   const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
@@ -284,9 +284,9 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
           <TableBody
             {...tableBodyProps}
             sx={(theme) => ({
+              bottom: tableFooterHeight - 1,
               display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
               position: 'sticky',
-              bottom: tableFooterHeight - 1,
               zIndex: 1,
               ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
             })}

package/src/body/MRT_TableBodyCell.tsx

@@ -1,26 +1,26 @@
 import {
-  memo,
   type DragEvent,
   type MouseEvent,
   type RefObject,
+  memo,
   useEffect,
   useMemo,
   useState,
 } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
 import Skeleton from '@mui/material/Skeleton';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
-import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
+import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
+import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import {
   getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
   parseFromValuesOrFunc,
 } from '../column.utils';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -54,8 +54,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
       enableGrouping,
       enableRowNumbers,
       layoutMode,
-      muiTableBodyCellProps,
       muiSkeletonProps,
+      muiTableBodyCellProps,
       rowNumberMode,
     },
     refs: { editInputRefs },
@@ -64,13 +64,13 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   } = table;
   const {
     creatingRow,
+    density,
     draggingColumn,
     draggingRow,
     editingCell,
     editingRow,
     hoveredColumn,
     hoveredRow,
-    density,
     isLoading,
     showSkeletons,
   } = getState();
@@ -129,6 +129,10 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
 
     return borderStyle
       ? {
+          borderBottom:
+            isDraggingRow || isHoveredRow || isLastRow
+              ? borderStyle
+              : undefined,
           borderLeft:
             isDraggingColumn ||
             isHoveredColumn ||
@@ -141,10 +145,6 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             ((isDraggingRow || isHoveredRow) && isLastColumn)
               ? borderStyle
               : undefined,
-          borderBottom:
-            isDraggingRow || isHoveredRow || isLastRow
-              ? borderStyle
-              : undefined,
           borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
         }
       : undefined;
@@ -156,7 +156,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
 
   const isEditing =
     isEditable &&
-    !['modal', 'custom'].includes(editDisplayMode as string) &&
+    !['custom', 'modal'].includes(editDisplayMode as string) &&
     (editDisplayMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id) &&
@@ -200,9 +200,16 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
         }
       }}
       {...tableCellProps}
-      onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
       sx={(theme) => ({
+        '&:hover': {
+          outline: ['cell', 'table'].includes(editDisplayMode ?? '')
+            ? `1px solid ${theme.palette.text.secondary}`
+            : undefined,
+          outlineOffset: '-1px',
+          textOverflow: 'clip',
+        },
         alignItems: layoutMode === 'grid' ? 'center' : undefined,
         cursor:
           isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
@@ -237,18 +244,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
-        '&:hover': {
-          outline: ['table', 'cell'].includes(editDisplayMode ?? '')
-            ? `1px solid ${theme.palette.text.secondary}`
-            : undefined,
-          outlineOffset: '-1px',
-          textOverflow: 'clip',
-        },
         ...getCommonCellStyles({
           column,
           table,
-          theme,
           tableCellProps,
+          theme,
         }),
         ...draggingBorders,
       })}
@@ -275,8 +275,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             !row.getIsGrouped()) ? (
           columnDef.Cell?.({
             cell,
-            renderedCellValue: cell.renderValue() as any,
             column,
+            renderedCellValue: cell.renderValue() as any,
             row,
             table,
           })

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import Box from '@mui/material/Box';
 import { darken, lighten } from '@mui/material/styles';
-import highlightWords from 'highlight-words';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
 
@@ -46,7 +46,7 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
   const isGroupedValue = renderedCellValue !== undefined;
 
   if (!isGroupedValue) {
-    renderedCellValue = cell.renderValue() as number | string | ReactNode;
+    renderedCellValue = cell.renderValue() as ReactNode | number | string;
   }
 
   if (
@@ -62,10 +62,10 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
         column.getCanGlobalFilter()))
   ) {
     const chunks = highlightWords?.({
-      text: renderedCellValue?.toString() as string,
-      query: (filterValue ?? globalFilter ?? '').toString(),
       matchExactly:
         (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+      query: (filterValue ?? globalFilter ?? '').toString(),
+      text: renderedCellValue?.toString() as string,
     });
     if (chunks?.length > 1 || chunks?.[0]?.match) {
       renderedCellValue = (
@@ -101,8 +101,8 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
   if (columnDef.Cell && !isGroupedValue) {
     renderedCellValue = columnDef.Cell({
       cell,
-      renderedCellValue,
       column,
+      renderedCellValue,
       row,
       table,
     });

package/src/body/MRT_TableBodyRow.tsx

@@ -1,4 +1,5 @@
-import { type DragEvent, memo, useRef, useMemo } from 'react';
+import { type DragEvent, memo, useMemo, useRef } from 'react';
+import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import {
   type Theme,
@@ -7,9 +8,8 @@ import {
   lighten,
   useTheme,
 } from '@mui/material/styles';
-import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
+import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
@@ -50,12 +50,12 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
       enableStickyFooter,
       enableStickyHeader,
       layoutMode,
-      rowPinningDisplayMode,
       memoMode,
       muiTableBodyRowProps,
       renderDetailPanel,
+      rowPinningDisplayMode,
     },
-    refs: { tableHeadRef, tableFooterRef },
+    refs: { tableFooterRef, tableHeadRef },
     setHoveredRow,
   } = table;
   const {
@@ -118,27 +118,43 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
       <TableRow
         data-index={virtualRow?.index}
         onDragEnter={handleDragEnter}
-        selected={row.getIsSelected()}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;
             measureElement?.(node);
           }
         }}
+        selected={row.getIsSelected()}
         {...tableRowProps}
+        style={{
+          transform: virtualRow
+            ? `translateY(${virtualRow?.start}px)`
+            : undefined,
+          ...tableRowProps?.style,
+        }}
         sx={(theme: Theme) => ({
+          '&:hover td': {
+            backgroundColor:
+              tableRowProps?.hover !== false
+                ? row.getIsSelected()
+                  ? `${alpha(theme.palette.primary.main, 0.2)}`
+                  : theme.palette.mode === 'dark'
+                  ? `${lighten(theme.palette.background.default, 0.12)}`
+                  : `${darken(theme.palette.background.default, 0.05)}`
+                : undefined,
+          },
           backgroundColor: `${lighten(
             theme.palette.background.default,
             0.06,
           )} !important`,
-          boxSizing: 'border-box',
           bottom:
-            bottomPinnedIndex !== undefined && isPinned
+            !virtualRow && bottomPinnedIndex !== undefined && isPinned
               ? `${
                   bottomPinnedIndex * rowHeight +
                   (enableStickyFooter ? tableFooterHeight - 1 : 0)
                 }px`
               : undefined,
+          boxSizing: 'border-box',
           display: layoutMode === 'grid' ? 'flex' : 'table-row',
           opacity: isPinned
             ? 0.98
@@ -150,7 +166,13 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
             : rowPinningDisplayMode?.includes('sticky') && isPinned
             ? 'sticky'
             : undefined,
-          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
+          td: {
+            backgroundColor: row.getIsSelected()
+              ? alpha(theme.palette.primary.main, 0.2)
+              : isPinned
+              ? alpha(theme.palette.primary.main, 0.1)
+              : undefined,
+          },
           top: virtualRow
             ? 0
             : topPinnedIndex !== undefined && isPinned
@@ -159,36 +181,14 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
                 (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
               }px`
             : undefined,
+          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
             rowPinningDisplayMode?.includes('sticky') && isPinned
               ? 1
               : undefined,
-          td: {
-            backgroundColor: row.getIsSelected()
-              ? alpha(theme.palette.primary.main, 0.2)
-              : isPinned
-              ? alpha(theme.palette.primary.main, 0.1)
-              : undefined,
-          },
-          '&:hover td': {
-            backgroundColor:
-              tableRowProps?.hover !== false
-                ? row.getIsSelected()
-                  ? `${alpha(theme.palette.primary.main, 0.2)}`
-                  : theme.palette.mode === 'dark'
-                  ? `${lighten(theme.palette.background.default, 0.12)}`
-                  : `${darken(theme.palette.background.default, 0.05)}`
-                : undefined,
-          },
           ...(sx as any),
         })}
-        style={{
-          transform: virtualRow
-            ? `translateY(${virtualRow?.start}px)`
-            : undefined,
-          ...tableRowProps?.style,
-        }}
       >
         {virtualPaddingLeft ? (
           <td style={{ display: 'flex', width: virtualPaddingLeft }} />

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,7 +1,7 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;
@@ -38,8 +38,8 @@ export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
   return (
     <MRT_GrabHandleButton
       iconButtonProps={iconButtonProps}
-      onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
       table={table}
     />
   );

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -30,17 +30,17 @@ export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
           flexDirection: density === 'compact' ? 'row' : 'column',
         }}
       >
-        <MRT_RowPinButton row={row} table={table} pinningPosition="top" />
-        <MRT_RowPinButton row={row} table={table} pinningPosition="bottom" />
+        <MRT_RowPinButton pinningPosition="top" row={row} table={table} />
+        <MRT_RowPinButton pinningPosition="bottom" row={row} table={table} />
       </Box>
     );
   }
 
   return (
     <MRT_RowPinButton
+      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
       row={row}
       table={table}
-      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
     />
   );
 };

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,9 +1,9 @@
 import { type RefObject } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
 import Collapse from '@mui/material/Collapse';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
-import { type VirtualItem } from '@tanstack/react-virtual';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
@@ -23,12 +23,12 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
   virtualRow,
 }: Props<TData>) => {
   const {
-    getVisibleLeafColumns,
     getState,
+    getVisibleLeafColumns,
     options: {
       layoutMode,
-      muiTableBodyRowProps,
       muiDetailPanelProps,
+      muiTableBodyRowProps,
       renderDetailPanel,
     },
   } = table;

package/src/buttons/MRT_CopyButton.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent, type ReactNode, useState } from 'react';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;