material-react-table 0.26.1 → 0.26.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.26.1",
+  "version": "0.26.4",
   "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/MaterialReactTable.tsx

@@ -710,7 +710,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onTableInstanceChange?: (table: MRT_TableInstance<TData>) => void;
     positionActionsColumn?: 'first' | 'last';
+    positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top';
@@ -815,6 +817,7 @@ export default <TData extends Record<string, any> = {}>({
   icons,
   localization,
   positionActionsColumn = 'first',
+  positionExpandColumn = 'first',
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
   positionToolbarAlertBanner = 'top',
@@ -857,6 +860,7 @@ export default <TData extends Record<string, any> = {}>({
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}
+    positionExpandColumn={positionExpandColumn}
     positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}
     positionToolbarAlertBanner={positionToolbarAlertBanner}

package/src/column.utils.ts

@@ -87,9 +87,10 @@ export const getLeadingDisplayColumnIds = <
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
       (props.enableEditing && props.editingMode === 'row')) &&
       'mrt-row-actions',
-    (props.enableExpanding ||
-      props.enableGrouping ||
-      props.renderDetailPanel) &&
+    props.positionExpandColumn === 'first' &&
+      (props.enableExpanding ||
+        props.enableGrouping ||
+        props.renderDetailPanel) &&
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
@@ -103,6 +104,11 @@ export const getTrailingDisplayColumnIds = <
   ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
     (props.enableEditing && props.editingMode === 'row')) &&
     'mrt-row-actions',
+  props.positionExpandColumn === 'last' &&
+    (props.enableExpanding ||
+      props.enableGrouping ||
+      props.renderDetailPanel) &&
+    'mrt-row-expand',
 ];
 
 export const getDefaultColumnOrderIds = <

package/src/head/MRT_TableHeadCell.tsx

@@ -177,7 +177,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             alignItems: 'flex-start',
             display: 'flex',
             justifyContent:
-              columnDefType === 'group' ? 'center' : 'space-between',
+              tableCellProps?.align === 'right'
+                ? 'flex-end'
+                : columnDefType === 'group' ||
+                  tableCellProps?.align === 'center'
+                ? 'center'
+                : 'space-between',
             position: 'relative',
             width: '100%',
           }}
@@ -192,6 +197,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
+              m: tableCellProps?.align === 'center' ? 'auto' : undefined,
+              pl:
+                tableCellProps?.align === 'center' && column.getCanSort()
+                  ? '1rem'
+                  : undefined,
               whiteSpace:
                 (columnDef.header?.length ?? 0) < 24 ? 'nowrap' : 'normal',
             }}

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -27,8 +27,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
       // @ts-ignore
       localization[
         `filter${
-          currentFilterOption.charAt(0).toUpperCase() +
-          currentFilterOption.slice(1)
+          currentFilterOption?.charAt(0)?.toUpperCase() +
+          currentFilterOption?.slice(1)
         }`
       ],
     )

package/src/inputs/MRT_FilterTextField.tsx

@@ -134,8 +134,8 @@ export const MRT_FilterTextField: FC<Props> = ({
     ? //@ts-ignore
       localization[
         `filter${
-          currentFilterOption.charAt(0).toUpperCase() +
-          currentFilterOption.slice(1)
+          currentFilterOption?.charAt(0)?.toUpperCase() +
+          currentFilterOption?.slice(1)
         }`
       ]
     : '';
@@ -183,8 +183,8 @@ export const MRT_FilterTextField: FC<Props> = ({
                 // @ts-ignore
                 localization[
                   `filter${
-                    currentFilterOption.charAt(0).toUpperCase() +
-                    currentFilterOption.slice(1)
+                    currentFilterOption?.charAt(0)?.toUpperCase() +
+                    currentFilterOption?.slice(1)
                   }`
                 ],
               )}

package/src/table/MRT_TableRoot.tsx

@@ -252,7 +252,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       columns: columnDefs,
       data,
       getSubRows: (row) => row?.subRows,
-      //@ts-ignore
       globalFilterFn:
         MRT_FilterFns[currentGlobalFilterFn] ?? MRT_FilterFns.fuzzy,
       initialState,
@@ -297,6 +296,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance;
 
+  useEffect(() => props?.onTableInstanceChange?.(table as any), [table]);
+
   return (
     <>
       <Dialog