material-react-table 0.41.0 → 1.0.0-beta.2

package/dist/esm/menus/MRT_FilterOptionMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Header, MRT_InternalFilterOption, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
 export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];

package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;

package/dist/esm/table/MRT_Table.d.ts

@@ -1,7 +1,6 @@
-import { FC, RefObject } from 'react';
+import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    tableContainerRef: RefObject<HTMLDivElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_Table: FC<Props>;

package/dist/esm/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.41.0",
+  "version": "1.0.0-beta.2",
   "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.",
@@ -51,8 +51,8 @@
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@babel/preset-react": "^7.18.6",
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@faker-js/faker": "^7.5.0",
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.3",
@@ -68,7 +68,7 @@
     "@storybook/addon-storysource": "^6.5.10",
     "@storybook/addons": "^6.5.10",
     "@storybook/react": "^6.5.10",
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
     "eslint": "^8.23.0",
@@ -78,7 +78,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^2.78.1",
+    "rollup": "^2.79.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^8.0.1",
@@ -95,7 +95,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.5.11",
+    "@tanstack/react-table": "8.5.13",
     "react-virtual": "^2.10.4"
   }
 }

package/src/body/MRT_TableBody.tsx

@@ -1,4 +1,4 @@
-import React, { FC, RefObject, useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useVirtual } from 'react-virtual'; //stuck on v2 for now
 // import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
@@ -8,10 +8,9 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
-  tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
+export const MRT_TableBody: FC<Props> = ({ table }) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -26,6 +25,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       virtualizerInstanceRef,
       virtualizerProps,
     },
+    refs: { tableContainerRef },
   } = table;
   const { globalFilter, pagination, sorting } = getState();
 

package/src/head/MRT_TableHeadCell.tsx

@@ -67,7 +67,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
 
   const getTotalRight = () => {
     return (
-      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
+      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 180
     );
   };
 

package/src/inputs/MRT_FilterTextField.tsx

@@ -18,8 +18,8 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import type { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
 interface Props {
   header: MRT_Header;
@@ -171,7 +171,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   };
 
   useEffect(() => {
-    setFilterValue('');
+    handleClear();
   }, [columnDef._filterFn]);
 
   if (columnDef.Filter) {
@@ -313,7 +313,12 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         sx={(theme) => ({
           p: 0,
-          minWidth: !filterChipLabel ? '120px' : 'auto',
+          minWidth:
+            columnDef.filterVariant === 'range'
+              ? '90px'
+              : !filterChipLabel
+              ? '120px'
+              : 'auto',
           width: '100%',
           '&	.MuiSelect-icon': {
             mr: '1.5rem',

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -62,7 +62,12 @@ export const MRT_GlobalFilterTextField = <
       : muiSearchTextFieldProps;
 
   return (
-    <Collapse in={showGlobalFilter} orientation="horizontal">
+    <Collapse
+      in={showGlobalFilter}
+      orientation="horizontal"
+      unmountOnExit
+      mountOnEnter
+    >
       <TextField
         placeholder={localization.search}
         onChange={handleChange}

package/src/table/MRT_Table.tsx

@@ -1,4 +1,4 @@
-import React, { FC, RefObject } from 'react';
+import React, { FC } from 'react';
 import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
@@ -6,11 +6,10 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  tableContainerRef: RefObject<HTMLDivElement>;
   table: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
+export const MRT_Table: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
@@ -44,7 +43,7 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
       })}
     >
       {enableTableHead && <MRT_TableHead table={table} />}
-      <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />
+      <MRT_TableBody table={table} />
       {enableTableFooter && <MRT_TableFooter table={table} />}
     </Table>
   );

package/src/table/MRT_TableContainer.tsx

@@ -1,10 +1,4 @@
-import React, {
-  FC,
-  RefObject,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react';
+import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
 import { TableContainer } from '@mui/material';
 import { MRT_Table } from './MRT_Table';
 import type { MRT_TableInstance } from '..';
@@ -77,10 +71,7 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
         ...tableContainerProps?.style,
       }}
     >
-      <MRT_Table
-        tableContainerRef={tableContainerRef as RefObject<HTMLDivElement>}
-        table={table}
-      />
+      <MRT_Table table={table} />
     </TableContainer>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -321,13 +321,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         disablePortal
         fullScreen
         keepMounted={false}
-        onClose={() => setIsFullScreen(false)}
-        open={isFullScreen}
+        onClose={() => table.setIsFullScreen(false)}
+        open={table.getState().isFullScreen}
         transitionDuration={400}
       >
         <MRT_TablePaper table={table as any} />
       </Dialog>
-      {!isFullScreen && <MRT_TablePaper table={table as any} />}
+      {!table.getState().isFullScreen && <MRT_TablePaper table={table as any} />}
       {editingRow && props.editingMode === 'modal' && (
         <MRT_EditRowModal row={editingRow as any} table={table} open />
       )}

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -69,8 +69,11 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
       )}
       <Box
         sx={{
+          alignItems: 'flex-start',
+          boxSizing: 'border-box',
           display: 'flex',
           justifyContent: 'space-between',
+          p: '0.5rem',
           width: '100%',
         }}
       >

package/src/toolbar/MRT_TablePagination.tsx

@@ -53,7 +53,6 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
       sx={(theme) => ({
-        m: '0 0.5rem',
         mt:
           position === 'top' &&
           enableToolbarInternalActions &&

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Box } from '@mui/material';
 import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
-import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
@@ -23,7 +22,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
       enableGlobalFilter,
       enableHiding,
       enablePinning,
-      positionGlobalFilter,
+      initialState,
       renderToolbarInternalActions,
     },
   } = table;
@@ -40,12 +39,11 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
         table,
       }) ?? (
         <>
-          {enableGlobalFilter && positionGlobalFilter === 'right' && (
-            <MRT_GlobalFilterTextField table={table} />
-          )}
-          {enableFilters && enableGlobalFilter && (
-            <MRT_ToggleGlobalFilterButton table={table} />
-          )}
+          {enableFilters &&
+            enableGlobalFilter &&
+            !initialState?.showGlobalFilter && (
+              <MRT_ToggleGlobalFilterButton table={table} />
+            )}
           {enableFilters && enableColumnFilters && (
             <MRT_ToggleFiltersButton table={table} />
           )}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -100,10 +100,14 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
           <MRT_GlobalFilterTextField table={table} />
         )}
-
         {renderTopToolbarCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
-          <MRT_ToolbarInternalButtons table={table} />
+          <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+            {enableGlobalFilter && positionGlobalFilter === 'right' && (
+              <MRT_GlobalFilterTextField table={table} />
+            )}
+            <MRT_ToolbarInternalButtons table={table} />
+          </Box>
         ) : (
           enableGlobalFilter &&
           positionGlobalFilter === 'right' && (