material-react-table 0.3.0 → 0.3.4

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import SearchIcon from '@mui/icons-material/Search';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+
+type Props = {};
+
+export const MRT_ToggleSearchButton: FC<Props> = () => {
+  const { localization, setShowSearch, showSearch, muiSearchTextFieldProps } =
+    useMaterialReactTable();
+
+  const handleToggleSearch = () => {
+    setShowSearch(!showSearch);
+    setTimeout(
+      () =>
+        document.getElementById(muiSearchTextFieldProps?.id ?? `global-search-text-field`)?.focus(),
+      200,
+    );
+  };
+
+  return (
+    <Tooltip arrow title={localization?.toggleSearchButtonTitle ?? ''}>
+      <IconButton size="small" onClick={handleToggleSearch}>
+        {showSearch ? <SearchOffIcon /> : <SearchIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/footer/MRT_TableFooter.tsx

@@ -2,35 +2,17 @@ import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_TablePagination } from './MRT_TablePagination';
 
 interface Props {}
 
 export const MRT_TableFooter: FC<Props> = () => {
-  const {
-    overrideTableFooterComponent,
-    enablePagination,
-    positionPagination,
-    tableFooterProps,
-    tableInstance,
-  } = useMaterialReactTable();
-
-  if (overrideTableFooterComponent) {
-    return <>{overrideTableFooterComponent(tableInstance)}</>;
-  }
+  const { muiTableFooterProps, tableInstance } = useMaterialReactTable();
 
   return (
-    <TableFooter {...tableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup, index) => (
-        <MRT_TableFooterRow
-          key={`${index}-${footerGroup.id}`}
-          footerGroup={footerGroup}
-        />
+    <TableFooter {...muiTableFooterProps}>
+      {tableInstance.footerGroups.map((footerGroup) => (
+        <MRT_TableFooterRow key={footerGroup.getFooterGroupProps().key} footerGroup={footerGroup} />
       ))}
-      {enablePagination &&
-        ['bottom', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
     </TableFooter>
   );
 };

package/src/footer/MRT_TableFooterCell.tsx

@@ -3,29 +3,54 @@ import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
-const TableCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-});
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'enableColumnResizing',
+})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
+  ({ densePadding, enableColumnResizing }) => ({
+    fontWeight: 'bold',
+    verticalAlign: 'text-top',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+  }),
+);
 
 interface Props {
   column: HeaderGroup;
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { tableInstance, overrideTableFooterCellComponent } =
-    useMaterialReactTable();
-
-  if (overrideTableFooterCellComponent) {
-    return <>{overrideTableFooterCellComponent(column, tableInstance)}</>;
-  }
+  const { muiTableFooterCellProps, densePadding, enableColumnResizing } = useMaterialReactTable();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
+  const mTableFooterCellProps =
+    muiTableFooterCellProps instanceof Function
+      ? muiTableFooterCellProps(column)
+      : muiTableFooterCellProps;
+
+  const mcTableFooterCellProps =
+    column.muiTableFooterCellProps instanceof Function
+      ? column.muiTableFooterCellProps(column)
+      : column.muiTableFooterCellProps;
+
+  const tableCellProps = {
+    ...mTableFooterCellProps,
+    ...mcTableFooterCellProps,
+    ...column.getFooterProps(),
+    style: {
+      ...column.getFooterProps().style,
+      ...(mTableFooterCellProps?.style ?? {}),
+      ...(mcTableFooterCellProps?.style ?? {}),
+    },
+  };
+
   return (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
       variant="head"
-      {...column.getFooterProps()}
+      {...tableCellProps}
     >
       {column.render('Footer')}
     </TableCell>

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { TableCell, TableRow } from '@mui/material';
+import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
@@ -14,35 +14,43 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
     renderDetailPanel,
     columns,
     anyRowsCanExpand,
-    enableColumnHiding,
     enableSelection,
+    enableRowActions,
+    positionActionsColumn,
     tableInstance,
-    overrideTableFooterRowComponent,
+    muiTableFooterRowProps,
   } = useMaterialReactTable();
 
   //if no content in row, skip row
   if (!columns?.some((c) => c.Footer)) return null;
 
-  if (overrideTableFooterRowComponent) {
-    return <>{overrideTableFooterRowComponent(footerGroup, tableInstance)}</>;
-  }
+  const mTableFooterRowProps =
+    muiTableFooterRowProps instanceof Function
+      ? muiTableFooterRowProps(footerGroup)
+      : muiTableFooterRowProps;
+
+  const tableRowProps = {
+    ...mTableFooterRowProps,
+    ...footerGroup.getFooterGroupProps(),
+    style: {
+      ...footerGroup.getFooterGroupProps().style,
+      ...(mTableFooterRowProps?.style ?? {}),
+    },
+  };
 
   return (
-    <TableRow {...footerGroup.getFooterGroupProps()}>
+    <TableRow {...tableRowProps}>
+      {enableRowActions && positionActionsColumn === 'first' && <MRT_TableSpacerCell />}
       {(anyRowsCanExpand || renderDetailPanel) && (
-        <TableCell
-          style={{
-            width: `${
-              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-            }rem`,
-          }}
+        <MRT_TableSpacerCell
+          width={`${renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5}rem`}
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column, index) => (
-        <MRT_TableFooterCell key={`${index}-${column.id}`} column={column} />
+      {footerGroup.headers.map((column) => (
+        <MRT_TableFooterCell key={column.getFooterProps().key} column={column} />
       ))}
-      {enableColumnHiding && <MRT_TableSpacerCell />}
+      {enableRowActions && positionActionsColumn === 'last' && <MRT_TableSpacerCell />}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -1,37 +1,20 @@
 import React, { FC } from 'react';
-import { LinearProgress, TableHead } from '@mui/material';
+import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_TablePagination } from '../footer/MRT_TablePagination';
 
 interface Props {}
 
 export const MRT_TableHead: FC<Props> = () => {
-  const {
-    overrideTableHeadComponent,
-    tableInstance,
-    tableHeadProps,
-    enablePagination,
-    isFetching,
-    positionPagination,
-  } = useMaterialReactTable();
+  const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
 
-  if (overrideTableHeadComponent) {
-    return <>{overrideTableHeadComponent(tableInstance)}</>;
-  }
+  const tableHeadProps =
+    muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
 
   return (
     <TableHead {...tableHeadProps}>
-      {isFetching && <LinearProgress />}
-      {enablePagination &&
-        ['top', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
-      {tableInstance.headerGroups.map((headerGroup, index) => (
-        <MRT_TableHeadRow
-          key={`${index}-${headerGroup.id}`}
-          headerGroup={headerGroup}
-        />
+      {tableInstance.headerGroups.map((headerGroup) => (
+        <MRT_TableHeadRow key={headerGroup.getHeaderGroupProps().key} headerGroup={headerGroup} />
       ))}
     </TableHead>
   );

package/src/head/MRT_TableHeadCell.tsx

@@ -8,24 +8,36 @@ import {
 } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_FilterTextfield } from '../inputs/MRT_FilterTextField';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 
-const TableCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-});
+export const StyledTableHeadCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'enableColumnResizing',
+})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
+  ({ densePadding, enableColumnResizing }) => ({
+    fontWeight: 'bold',
+    height: '100%',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+    verticalAlign: 'text-top',
+  }),
+);
 
-const TableCellContents = styled('div')({
+const TableCellWrapper = styled('div')({
+  alignContent: 'space-between',
   display: 'grid',
+  height: '100%',
 });
 
-const TableCellText = styled('div')({
+const TableCellTopContents = styled('div')({
   width: '100%',
   display: 'flex',
   justifyContent: 'space-between',
+  alignItems: 'flex-start',
 });
 
 const CellFlexItem = styled('span')({
+  alignItems: 'center',
   display: 'flex',
   flexWrap: 'nowrap',
 });
@@ -42,41 +54,66 @@ interface Props {
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
   const {
-    overrideTableHeadCellComponent,
-    enableColumnActions,
+    densePadding,
+    disableColumnActions,
+    disableFilters,
     enableColumnResizing,
-    enableFiltering,
-    showFiltersInColumnHead,
+    localization,
+    muiTableHeadCellProps,
+    showFilters,
     tableInstance,
   } = useMaterialReactTable();
 
-  if (overrideTableHeadCellComponent) {
-    return <>{overrideTableHeadCellComponent(column, tableInstance)}</>;
-  }
-
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
+  const mTableHeadCellProps =
+    muiTableHeadCellProps instanceof Function
+      ? muiTableHeadCellProps(column)
+      : muiTableHeadCellProps;
+
+  const mcTableHeadCellProps =
+    column.muiTableHeadCellProps instanceof Function
+      ? column.muiTableHeadCellProps(column)
+      : column.muiTableHeadCellProps;
+
+  const tableCellProps = {
+    ...mTableHeadCellProps,
+    ...mcTableHeadCellProps,
+    ...column.getHeaderProps(),
+    style: {
+      ...column.getHeaderProps().style,
+      ...(mTableHeadCellProps?.style ?? {}),
+      ...(mcTableHeadCellProps?.style ?? {}),
+    },
+  };
+
   return (
-    <TableCell
+    <StyledTableHeadCell
       align={isParentHeader ? 'center' : 'left'}
-      {...column.getHeaderProps()}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
+      {...tableCellProps}
     >
-      <TableCellContents>
-        <TableCellText
-          style={{ justifyContent: isParentHeader ? 'center' : undefined }}
-        >
+      <TableCellWrapper>
+        <TableCellTopContents style={{ justifyContent: isParentHeader ? 'center' : undefined }}>
           <CellFlexItem {...column.getSortByToggleProps()}>
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
               <TableSortLabel
+                aria-label={
+                  column.isSorted
+                    ? column.sortDescFirst
+                      ? localization?.columnActionMenuItemClearSort
+                      : localization?.columnActionMenuItemSortDesc
+                    : localization?.columnActionMenuItemSortAsc
+                }
                 active={column.isSorted}
                 direction={column.isSortedDesc ? 'desc' : 'asc'}
-                style={{ margin: 0 }}
               />
             )}
           </CellFlexItem>
           <CellFlexItem>
-            {enableColumnActions && !isParentHeader && (
+            {!disableColumnActions && !isParentHeader && (
               <MRT_ToggleColumnActionMenuButton column={column} />
             )}
             {enableColumnResizing && !isParentHeader && (
@@ -88,13 +125,13 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
               />
             )}
           </CellFlexItem>
-        </TableCellText>
-        {enableFiltering && column.canFilter && (
-          <Collapse in={showFiltersInColumnHead}>
-            <MRT_FilterTextfield column={column} />
+        </TableCellTopContents>
+        {!disableFilters && column.canFilter && (
+          <Collapse in={showFilters}>
+            <MRT_FilterTextField column={column} />
           </Collapse>
         )}
-      </TableCellContents>
-    </TableCell>
+      </TableCellWrapper>
+    </StyledTableHeadCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,11 +1,10 @@
 import React, { FC, useMemo } from 'react';
 import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import { MRT_TableHeadCell, StyledTableHeadCell } from './MRT_TableHeadCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_SelectAllCheckbox } from '../inputs/MRT_SelectAllCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
-import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 
 interface Props {
@@ -14,34 +13,54 @@ interface Props {
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
-    overrideTableHeadRowComponent,
     anyRowsCanExpand,
-    enableColumnHiding,
-    enableExpandAll,
+    densePadding,
+    disableExpandAll,
+    enableRowActions,
     enableSelection,
+    localization,
+    muiTableHeadRowProps,
+    positionActionsColumn,
     renderDetailPanel,
     tableInstance,
   } = useMaterialReactTable();
 
-  if (overrideTableHeadRowComponent) {
-    return <>{overrideTableHeadRowComponent(headerGroup, tableInstance)}</>;
-  }
-
   const isParentHeader = useMemo(
     () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
     [headerGroup.headers],
   );
 
+  const mTableHeadRowProps =
+    muiTableHeadRowProps instanceof Function
+      ? muiTableHeadRowProps(headerGroup)
+      : muiTableHeadRowProps;
+
+  const tableRowProps = {
+    ...mTableHeadRowProps,
+    ...headerGroup.getHeaderGroupProps(),
+    style: {
+      ...headerGroup.getHeaderGroupProps().style,
+      ...(mTableHeadRowProps?.style ?? {}),
+    },
+  };
+
   return (
-    <TableRow {...headerGroup.getHeaderGroupProps()}>
+    <TableRow {...tableRowProps}>
+      {enableRowActions &&
+        positionActionsColumn === 'first' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell style={{ textAlign: 'center' }}>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
       {anyRowsCanExpand || renderDetailPanel ? (
-        enableExpandAll && !isParentHeader ? (
+        !disableExpandAll && !isParentHeader ? (
           <MRT_ExpandAllButton />
         ) : (
           <MRT_TableSpacerCell
-            width={`${
-              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-            }rem`}
+            width={`${renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5}rem`}
           />
         )
       ) : null}
@@ -52,10 +71,18 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
-      {headerGroup.headers.map((column, index) => (
-        <MRT_TableHeadCell key={`${index}-${column.id}`} column={column} />
+      {headerGroup.headers.map((column: HeaderGroup) => (
+        <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
-      {enableColumnHiding && !isParentHeader && <MRT_ShowHideColumnsButton />}
+      {enableRowActions &&
+        positionActionsColumn === 'last' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell densePadding={densePadding}>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
     </TableRow>
   );
 };

package/src/index.tsx

@@ -1,6 +1,3 @@
-import {
-  MaterialReactTable,
-  MaterialReactTableProps,
-} from './MaterialReactTable';
+import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
-export type { MaterialReactTableProps };
+export * from './MaterialReactTable';

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { Switch, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_DensePaddingSwitch: FC<Props> = () => {
+  const { densePadding, setDensePadding, localization } = useMaterialReactTable();
+
+  return (
+    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+      <Switch
+        inputProps={{
+          'aria-label': localization?.toggleDensePaddingSwitchTitle ?? '',
+        }}
+        color="default"
+        checked={densePadding}
+        size="small"
+        onChange={() => setDensePadding(!densePadding)}
+      />
+    </Tooltip>
+  );
+};

package/src/inputs/MRT_EditCellTextField.tsx

@@ -0,0 +1,64 @@
+import React, { ChangeEvent, FC } from 'react';
+import { TextField } from '@mui/material';
+import { Cell } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  cell: Cell;
+}
+
+export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
+  const {
+    currentEditingRow,
+    localization,
+    muiTableBodyCellEditTextFieldProps,
+    setCurrentEditingRow,
+  } = useMaterialReactTable();
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (currentEditingRow) {
+      cell.row.values[cell.column.id] = event.target.value;
+      setCurrentEditingRow({
+        ...currentEditingRow,
+      });
+    }
+    cell.column.onCellEditChange?.(event, cell);
+  };
+
+  const mTableBodyCellEditTextFieldProps =
+    muiTableBodyCellEditTextFieldProps instanceof Function
+      ? muiTableBodyCellEditTextFieldProps(cell)
+      : muiTableBodyCellEditTextFieldProps;
+
+  const mcTableBodyCellEditTextFieldProps =
+    cell.column.muiTableBodyCellEditTextFieldProps instanceof Function
+      ? cell.column.muiTableBodyCellEditTextFieldProps(cell)
+      : cell.column.muiTableBodyCellEditTextFieldProps;
+
+  const textFieldProps = {
+    ...mTableBodyCellEditTextFieldProps,
+    ...mcTableBodyCellEditTextFieldProps,
+    style: {
+      //@ts-ignore
+      ...muiTableBodyCellEditTextFieldProps?.style,
+      //@ts-ignore
+      ...cell.column.muiTableBodyCellEditTextFieldProps?.style,
+    },
+  };
+
+  if (cell.column.editable && cell.column.Edit) {
+    return <>{cell.column.Edit({ ...textFieldProps, cell })}</>;
+  }
+
+  return (
+    <TextField
+      margin="dense"
+      onChange={handleChange}
+      onClick={(e) => e.stopPropagation()}
+      placeholder={localization?.filterTextFieldPlaceholder}
+      value={cell.value}
+      variant="standard"
+      {...textFieldProps}
+    />
+  );
+};

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, FC, useState } from 'react';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import FilterIcon from '@mui/icons-material/FilterList';
 import { HeaderGroup, useAsyncDebounce } from 'react-table';
@@ -9,7 +9,7 @@ interface Props {
   column: HeaderGroup;
 }
 
-export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
+export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   const { localization } = useMaterialReactTable();
 
   const [filterValue, setFilterValue] = useState('');
@@ -23,10 +23,24 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
     column.setFilter(undefined);
   };
 
+  if (column.Filter) {
+    return <>{column.Filter?.({ column })}</>;
+  }
+
   return (
     <TextField
+      fullWidth
+      id={`filter-${column.id}-column`}
+      inputProps={{
+        style: {
+          textOverflow: 'ellipsis',
+        },
+      }}
       margin="dense"
-      placeholder={localization?.filterTextFieldPlaceholder}
+      placeholder={localization?.filterTextFieldPlaceholder?.replace(
+        '{column}',
+        String(column.Header),
+      )}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
         setFilterValue(e.target.value);
         handleChange(e.target.value);
@@ -36,21 +50,34 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
       variant="standard"
       InputProps={{
         startAdornment: (
-          <InputAdornment position="start">
-            <FilterIcon />
-          </InputAdornment>
+          <Tooltip
+            arrow
+            title={
+              localization?.filterTextFieldPlaceholder?.replace(
+                '{column}',
+                String(column.Header),
+              ) ?? ''
+            }
+          >
+            <InputAdornment position="start">
+              <FilterIcon />
+            </InputAdornment>
+          </Tooltip>
         ),
         endAdornment: (
           <InputAdornment position="end">
-            <IconButton
-              aria-label={localization?.filterTextFieldClearButtonTitle}
-              disabled={filterValue?.length === 0}
-              onClick={handleClear}
-              size="small"
-              title={localization?.filterTextFieldClearButtonTitle}
-            >
-              <CloseIcon fontSize="small" />
-            </IconButton>
+            <Tooltip arrow title={localization?.filterTextFieldClearButtonTitle ?? ''}>
+              <span>
+                <IconButton
+                  aria-label={localization?.filterTextFieldClearButtonTitle}
+                  disabled={filterValue?.length === 0}
+                  onClick={handleClear}
+                  size="small"
+                >
+                  <CloseIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
           </InputAdornment>
         ),
       }}