material-react-table 0.8.0-alpha.2 → 0.8.2

package/dist/table/MRT_TableContainer.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     tableInstance: MRT_TableInstance;
 }

package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
+    stackAlertBanner?: boolean;
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_ToolbarAlertBanner: FC<Props>;

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -7,6 +7,8 @@ export declare const commonToolbarStyles: ({ theme }: {
     backgroundColor: string;
     backgroundImage: string;
     display: string;
+    minHeight: string;
+    overflow: string;
     p: string;
     transition: string;
     width: string;

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,13 +1,14 @@
 {
-  "version": "0.8.0-alpha.2",
+  "version": "0.8.2",
   "license": "MIT",
   "name": "material-react-table",
-  "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
+  "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.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
     "material-ui",
-    "material-table"
+    "material-table",
+    "tanstack table"
   ],
   "repository": {
     "type": "git",
@@ -47,11 +48,11 @@
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "40 KB"
+      "limit": "50 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "40 KB"
+      "limit": "50 KB"
     }
   ],
   "devDependencies": {
@@ -94,6 +95,8 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-beta.2"
+    "@tanstack/react-table": "^8.0.0-alpha.89",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -80,6 +80,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   >,
   | 'getAllColumns'
   | 'getAllLeafColumns'
+  | 'getColumn'
   | 'getExpandedRowModel'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
@@ -90,6 +91,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
 > & {
   getAllColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
+  getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
@@ -176,6 +178,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
+  enableColumnOrdering?: boolean;
   enableEditing?: boolean;
   enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
   filterFn?: MRT_FilterFn;
@@ -330,6 +333,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnOrdering?: boolean;
     enableDensePaddingToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
@@ -757,15 +761,18 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
+  defaultColumn = { minSize: 50, maxSize: 1000, size: 150 },
   editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
+  enableColumnOrdering = false,
   enableColumnResizing = false,
   enableDensePaddingToggle = true,
   enableExpandAll = true,
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
+  enableGrouping = false,
   enableHiding = true,
   enableMultiRowSelection = true,
   enablePagination = true,
@@ -790,15 +797,18 @@ export default <D extends Record<string, any> = {}>({
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
     columnResizeMode={columnResizeMode}
+    defaultColumn={defaultColumn}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
     enableColumnFilters={enableColumnFilters}
+    enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
+    enableGrouping={enableGrouping}
     enableHiding={enableHiding}
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}

package/src/body/MRT_TableBodyCell.tsx

@@ -132,8 +132,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max${column.getSize()}px, ${column.minSize}px`,
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -150,7 +148,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
-        width: column.getSize(),
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover
@@ -161,6 +158,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
         },
         ...(tableCellProps?.sx as any),
       })}
+      style={{
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        width: column.getSize(),
+      }}
     >
       <>
         {isLoading || showSkeletons ? (
@@ -192,7 +194,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
           </>
         ) : (
           <>
-            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
+            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
+              cell.renderCell()}
             {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}

package/src/buttons/MRT_CopyButton.tsx

@@ -52,6 +52,8 @@ export const MRT_CopyButton: FC<Props> = ({
         aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.getValue())}
         size="small"
+        type="button"
+        variant="text"
         {...buttonProps}
         sx={{
           backgroundColor: 'transparent',
@@ -67,7 +69,6 @@ export const MRT_CopyButton: FC<Props> = ({
           textTransform: 'inherit',
           ...buttonProps?.sx,
         }}
-        variant="text"
       >
         {children}
       </Button>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -10,10 +10,12 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
+    getCanSomeRowsExpand,
     getState,
     options: {
       icons: { DoubleArrowDownIcon },
       localization,
+      renderDetailPanel,
     },
     toggleAllRowsExpanded,
   } = tableInstance;
@@ -29,6 +31,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
     >
       <IconButton
         aria-label={localization.expandAll}
+        disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
         onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
         sx={{
           height: isDensePadding ? '1.75rem' : '2.25rem',

package/src/footer/MRT_TableFooterCell.tsx

@@ -61,6 +61,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
               footer,
               tableInstance,
             }) ??
+            column.columnDef.footer ??
             footer.renderFooter() ??
             null}
       </>

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import type { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_DraggableTableHeadCell: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const {
+    getState,
+    options: {},
+    setColumnOrder,
+  } = tableInstance;
+
+  const { columnOrder } = getState();
+
+  const reorder = (item: MRT_Header, newIndex: number) => {
+    const { index: currentIndex } = item;
+    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+    setColumnOrder([...columnOrder]);
+  };
+
+  const [, drop] = useDrop({
+    accept: 'header',
+    drop: (item: MRT_Header) => reorder(item, header.index),
+  });
+
+  const [{ isDragging }, drag, preview] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    item: () => header,
+    type: 'header',
+  });
+
+  return (
+    <MRT_TableHeadCell
+      dragRef={drag}
+      dropRef={drop}
+      header={header}
+      isDragging={isDragging}
+      previewRef={preview}
+      tableInstance={tableInstance}
+    />
+  );
+};

package/src/head/MRT_TableHeadCell.tsx

@@ -1,42 +1,43 @@
-import React, { FC, MouseEvent, ReactNode } from 'react';
-import {
-  Box,
-  Collapse,
-  Divider,
-  IconButton,
-  TableCell,
-  TableSortLabel,
-  Theme,
-  Tooltip,
-  alpha,
-  lighten,
-} from '@mui/material';
-import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
+import React, { FC, ReactNode, Ref } from 'react';
+import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
+import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
+import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
+import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 import type { MRT_Header, MRT_TableInstance } from '..';
-import MRT_FilterRangeFields from '../inputs/MRT_FilterRangeFields';
-import { MRT_FILTER_OPTION } from '../enums';
 
 interface Props {
+  dragRef?: Ref<HTMLButtonElement>;
+  dropRef?: Ref<HTMLDivElement>;
   header: MRT_Header;
+  isDragging?: boolean;
+  previewRef?: Ref<HTMLTableCellElement>;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
+export const MRT_TableHeadCell: FC<Props> = ({
+  dragRef,
+  dropRef,
+  header,
+  isDragging,
+  previewRef,
+  tableInstance,
+}) => {
   const {
     getState,
     options: {
       enableColumnActions,
       enableColumnFilters,
+      enableColumnOrdering,
       enableColumnResizing,
-      icons: { FilterAltIcon, FilterAltOff },
-      localization,
+      enableGrouping,
       muiTableHeadCellProps,
     },
-    setShowFilters,
   } = tableInstance;
 
-  const { currentFilterFns, isDensePadding, showFilters } = getState();
+  const { isDensePadding } = getState();
 
   const { column } = header;
 
@@ -55,45 +56,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
     ...mcTableHeadCellProps,
   };
 
-  const sortTooltip = !!column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
-      : localization.sortedByColumnAsc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
-    : localization.unsorted;
-
-  const filterFn = getState()?.currentFilterFns?.[header.id];
-
-  const filterTooltip = !!column.getFilterValue()
-    ? localization.filteringByColumn
-        .replace('{column}', String(column.columnDef.header))
-        .replace(
-          '{filterType}',
-          filterFn instanceof Function
-            ? ''
-            : // @ts-ignore
-              localization[
-                `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
-              ],
-        )
-        .replace(
-          '{filterValue}',
-          `"${
-            Array.isArray(column.getFilterValue())
-              ? (column.getFilterValue() as [string, string]).join(
-                  `" ${localization.and} "`,
-                )
-              : (column.getFilterValue() as string)
-          }"`,
-        )
-        .replace('" "', '')
-    : localization.showHideFilters;
-
   const headerElement = (column.columnDef?.Header?.({
     header,
     tableInstance,
@@ -124,6 +86,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       align={column.columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       {...tableCellProps}
+      ref={column.columnDefType === 'data' ? dropRef : undefined}
       sx={(theme: Theme) => ({
         backgroundColor:
           column.getIsPinned() && column.columnDefType !== 'group'
@@ -141,8 +104,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${column.minSize}px)`,
         overflow: 'visible',
         p: isDensePadding
           ? column.columnDefType === 'display'
@@ -166,7 +127,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         verticalAlign: 'text-top',
-        width: header.getSize(),
         zIndex: column.getIsResizing()
           ? 3
           : column.getIsPinned() && column.columnDefType !== 'group'
@@ -174,16 +134,23 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           : 1,
         ...(tableCellProps?.sx as any),
       })}
+      style={{
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        width: header.getSize(),
+      }}
     >
       {header.isPlaceholder ? null : column.columnDefType === 'display' ? (
         headerElement
       ) : (
         <Box
+          ref={previewRef}
           sx={{
             alignItems: 'flex-start',
             display: 'flex',
             justifyContent:
               column.columnDefType === 'group' ? 'center' : 'space-between',
+            opacity: isDragging ? 0.5 : 1,
             width: '100%',
           }}
         >
@@ -205,109 +172,53 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           >
             {headerElement}
             {column.columnDefType === 'data' && column.getCanSort() && (
-              <Tooltip arrow placement="top" title={sortTooltip}>
-                <TableSortLabel
-                  aria-label={sortTooltip}
-                  active={!!column.getIsSorted()}
-                  direction={
-                    column.getIsSorted()
-                      ? (column.getIsSorted() as 'asc' | 'desc')
-                      : undefined
-                  }
-                />
-              </Tooltip>
+              <MRT_TableHeadCellSortLabel
+                header={header}
+                tableInstance={tableInstance}
+              />
             )}
             {column.columnDefType === 'data' &&
               enableColumnFilters &&
-              !!column.getCanFilter() && (
-                <Tooltip arrow placement="top" title={filterTooltip}>
-                  <IconButton
-                    disableRipple
-                    onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                      event.stopPropagation();
-                      setShowFilters(!showFilters);
-                    }}
-                    size="small"
-                    sx={{
-                      m: 0,
-                      opacity: !!column.getFilterValue() ? 0.8 : 0,
-                      p: '2px',
-                      transition: 'all 0.2s ease-in-out',
-                      '&:hover': {
-                        backgroundColor: 'transparent',
-                        opacity: 0.8,
-                      },
-                    }}
-                  >
-                    {showFilters && !column.getFilterValue() ? (
-                      <FilterAltOff />
-                    ) : (
-                      <FilterAltIcon />
-                    )}
-                  </IconButton>
-                </Tooltip>
+              column.getCanFilter() && (
+                <MRT_TableHeadCellFilterLabel
+                  header={header}
+                  tableInstance={tableInstance}
+                />
+              )}
+          </Box>
+          <Box sx={{ whiteSpace: 'nowrap' }}>
+            {column.columnDefType === 'data' &&
+              ((enableColumnOrdering &&
+                column.enableColumnOrdering !== false) ||
+                (enableGrouping && column.enableGrouping !== false)) && (
+                <MRT_TableHeadCellGrabHandle
+                  header={header}
+                  ref={dragRef as Ref<HTMLButtonElement>}
+                  tableInstance={tableInstance}
+                />
+              )}
+            {(enableColumnActions || column.enableColumnActions) &&
+              column.enableColumnActions !== false &&
+              column.columnDefType !== 'group' && (
+                <MRT_ToggleColumnActionMenuButton
+                  header={header}
+                  tableInstance={tableInstance}
+                />
               )}
           </Box>
-          {(enableColumnActions || column.enableColumnActions) &&
-            column.enableColumnActions !== false &&
-            column.columnDefType !== 'group' && (
-              <MRT_ToggleColumnActionMenuButton
-                header={header}
-                tableInstance={tableInstance}
-              />
-            )}
           {column.getCanResize() && (
-            <Divider
-              flexItem
-              orientation="vertical"
-              onDoubleClick={() => column.resetSize()}
-              sx={(theme: Theme) => ({
-                borderRadius: '2px',
-                borderRightWidth: '2px',
-                cursor: 'col-resize',
-                height:
-                  showFilters && column.columnDefType === 'data'
-                    ? '4rem'
-                    : '2rem',
-                opacity: 0.8,
-                position: 'absolute',
-                right: '1px',
-                touchAction: 'none',
-                transition: 'all 0.2s ease-in-out',
-                userSelect: 'none',
-                zIndex: 2000,
-                '&:active': {
-                  backgroundColor: theme.palette.info.main,
-                  opacity: 1,
-                },
-              })}
-              {...{
-                onMouseDown: header.getResizeHandler,
-                onTouchStart: header.getResizeHandler,
-              }}
-              style={{
-                transform: column.getIsResizing()
-                  ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`
-                  : 'none',
-              }}
+            <MRT_TableHeadCellResizeHandle
+              header={header}
+              tableInstance={tableInstance}
             />
           )}
         </Box>
       )}
       {column.columnDefType === 'data' && column.getCanFilter() && (
-        <Collapse in={showFilters} mountOnEnter unmountOnExit>
-          {currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? (
-            <MRT_FilterRangeFields
-              header={header}
-              tableInstance={tableInstance}
-            />
-          ) : (
-            <MRT_FilterTextField
-              header={header}
-              tableInstance={tableInstance}
-            />
-          )}
-        </Collapse>
+        <MRT_TableHeadCellFilterContainer
+          header={header}
+          tableInstance={tableInstance}
+        />
       )}
     </TableCell>
   );

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { Collapse } from '@mui/material';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
+import { MRT_FILTER_OPTION } from '../enums';
+import { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const { getState } = tableInstance;
+
+  const { currentFilterFns, showFilters } = getState();
+
+  const { column } = header;
+
+  return (
+    <Collapse in={showFilters} mountOnEnter unmountOnExit>
+      {currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? (
+        <MRT_FilterRangeFields header={header} tableInstance={tableInstance} />
+      ) : (
+        <MRT_FilterTextField header={header} tableInstance={tableInstance} />
+      )}
+    </Collapse>
+  );
+};