column filtering is nolonger working in version "@material-table/core": "^6.4.3",

[bloodykheeng]

ive notted column filtering is nolonger working in version "@material-table/core": "^6.4.3", yet in version "@material-table/core": "^6.3.2", it was working fine when i click on a custom filter button to trigger the column filter seach buttons i gat this error

here is my code bellow ive took screen shots of only the necessary parts

the error happens when i click on that checkbox

here bellow is my whole componet code incase needed
`import React, { useEffect, useState, forwardRef, useMemo } from "react"; import MaterialTable from "@material-table/core"; // import MaterialTable from "material-table"; // import { FileEarmarkBarGraphFill, Trash } from "react-bootstrap-icons"; import { useTheme } from "../../context/ThemeContext"; import { createTheme, ThemeProvider } from "@mui/material/styles";

// import { Checkbox, Select, MenuItem } from "@material-ui/core"; import { Checkbox, Select, MenuItem } from "@mui/material"; import AddBox from "@mui/icons-material/AddBox"; import ArrowDownward from "@mui/icons-material/ArrowDownward"; import Check from "@mui/icons-material/Check"; import ChevronLeft from "@mui/icons-material/ChevronLeft"; import ChevronRight from "@mui/icons-material/ChevronRight"; import Clear from "@mui/icons-material/Clear"; import DeleteOutline from "@mui/icons-material/DeleteOutline"; import Edit from "@mui/icons-material/Edit"; import FilterList from "@mui/icons-material/FilterList"; import FirstPage from "@mui/icons-material/FirstPage"; import LastPage from "@mui/icons-material/LastPage"; import Remove from "@mui/icons-material/Remove"; import SaveAlt from "@mui/icons-material/SaveAlt"; import Search from "@mui/icons-material/Search"; import ViewColumn from "@mui/icons-material/ViewColumn"; import FileDownloadIcon from "@mui/icons-material/FileDownload"; import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import ArrowUpward from "@mui/icons-material/ArrowUpward"; import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf"; import VisibilityIcon from "@mui/icons-material/Visibility"; import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; import { ExportCsv, ExportPdf } from "@material-table/exporters"; import ApprovalIcon from "@mui/icons-material/Approval"; import CancelIcon from "@mui/icons-material/Cancel"; import DisabledByDefaultIcon from "@mui/icons-material/DisabledByDefault"; import darkScrollbar from "@mui/material/darkScrollbar";

import AddCircleIcon from "@mui/icons-material/AddCircle"; /* eslint-disable react/display-name */ const tableIcons = { Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), Check: forwardRef((props, ref) => <Check {...props} ref={ref} />), Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />), Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />), DetailPanel: forwardRef((props, ref) => ( <ChevronRight {...props} ref={ref} /> )), Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />), Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />), Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />), FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />), LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />), NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />), PreviousPage: forwardRef((props, ref) => ( <ChevronLeft {...props} ref={ref} /> )), ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />), Search: forwardRef((props, ref) => <Search {...props} ref={ref} />), SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />), ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />), ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />) };

const MuiTable = ({ showTextRowsSelected, showSelectAllCheckbox, exportButton, pdfExportTitle, csvExportTitle, selection, selectionChange, showDataApproval, handleDataApproval, hideDataApprovalRow, showRejectionAction, handleRejectionAction, hideRejectionActionRow, tableData, tableTitle, tableColumns, handleShowEditForm, handleViewPage, handleDelete, showEdit, showViewPage, showDelete, loading = false, excelexporting, downloadExcel, hideRowEdit, hideRowViewPage, hideRowDelete, handleViewPdf, hideViewPdfRow, showViewPdf }) => { const [mTableActions, setMTableActions] = useState([]); const { theme, toggleTheme } = useTheme();

// the code in components helps to customise the scroll bar of mui

const getMuiTheme = createTheme({ palette: { mode: theme, // Inherit theme mode from context background: { default: theme == "dark" ? "#1f2937" : "#fff", // Set background based on theme paper: theme == "dark" ? "#1f2937" : "#fff" } }, components: { MuiCssBaseline: { styleOverrides: { body: theme === "dark" ? darkScrollbar() : null } } } });

useEffect(() => {}, []); console.log("mTableActions : ", mTableActions);

const [filter, setFilter] = useState(false); const handleMaterialTableCheckboxChange = () => { setFilter(!filter); };

// let handleShowRowEdit = (rowData) => { // if (typeof showRowEdit === "function") { // } else { // console.log("The function prop is not a function."); // } // };

//==================== view Page Action ==================== const createConditionalHideViewPageIconAction = (rowData) => { let viewPageAction = showViewPage && { icon: () => <VisibilityIcon style={{ color: "#1976d2" }} />, tooltip: "View Page", onClick: (e, data) => handleViewPage(data), isFreeAction: false, hidden: typeof hideRowViewPage === "function" ? hideRowViewPage(rowData) : false };

if (viewPageAction) {
  return viewPageAction;
}

};

const createConditionalHideViewReportPdfPdfIconAction = (rowData) => { // console.log('edditing action : ', editingAction)

let viewReportPdfAction = showViewPdf && {
  icon: () => <PictureAsPdfIcon style={{ color: "orange" }} />,
  tooltip: "view report",
  onClick: (e, data) => handleViewPdf(e, data),
  isFreeAction: false,
  hidden:
    typeof hideViewPdfRow === "function" ? hideViewPdfRow(rowData) : false
};

if (viewReportPdfAction) {
  return viewReportPdfAction;
}

};

const createConditionalHideEditIconAction = (rowData) => { let editingAction = showEdit && { icon: () => <Edit style={{ color: "green" }} />, tooltip: "edit", onClick: (e, data) => handleShowEditForm(data), isFreeAction: false, hidden: typeof hideRowEdit === "function" ? hideRowEdit(rowData) : false };

if (editingAction) {
  return editingAction;
}

// setMTableActions([
//   editingAction && editingAction,
//   deletingAction && deletingAction
// ]);

};

const createConditionalHideDeleteIconAction = (rowData) => { // console.log('edditing action : ', editingAction)

let deletingAction = showDelete && {
  icon: () => <DeleteOutline style={{ color: "red" }} />,
  tooltip: "delete",
  onClick: (e, data) => handleDelete(e, data.id),
  isFreeAction: false,
  hidden:
    typeof hideRowDelete === "function" ? hideRowDelete(rowData) : false
};

if (deletingAction) {
  return deletingAction;
}

};

//======== Data Approval ================== const createConditionalhideDataApprovalIconAction = (rowData) => { // console.log('edditing action : ', editingAction)

let viewDataApproval = showDataApproval && {
  icon: () => (
    <ApprovalIcon
      style={{ color: "56E39F", fontWeight: "bold", cursor: "pointer" }} // Bolder icon
    />
  ),
  tooltip: "Approve",
  onClick: (e, data) => handleDataApproval(e, data),
  isFreeAction: false,
  hidden:
    typeof hideDataApprovalRow === "function"
      ? hideDataApprovalRow(rowData)
      : false
};

if (viewDataApproval) {
  return viewDataApproval;
}

};

//======== Cancel Data Approval ================== const createConditionalhideRejectionAction = (rowData) => { // console.log('edditing action : ', editingAction)

let viewRejectionAction = showRejectionAction && {
  icon: () => (
    <DisabledByDefaultIcon style={{ color: "red", cursor: "pointer" }} />
  ),
  tooltip: "Reject",
  onClick: (e, data) => handleRejectionAction(e, data),
  isFreeAction: false,
  hidden:
    typeof hideRejectionActionRow === "function"
      ? hideRejectionActionRow(rowData)
      : false
};

if (viewRejectionAction) {
  return viewRejectionAction;
}

};

let tableOptions = { selection: selection, showSelectAllCheckbox: showSelectAllCheckbox, showTextRowsSelected: showTextRowsSelected, cellStyle: { paddingLeft: "1rem", // Adjust the padding value as needed paddingRight: "1rem", paddingBottom: "0.5px", // Adjust the padding value as needed paddingTop: "0.5px" }, doubleHorizontalScroll: true, filtering: filter, sorting: true, search: true, searchFieldAlignment: "right", paging: true, pageSizeOptions: [5, 15, 30, 50, 75, 100], pageSize: 5, paginationPosition: "bottom", exportAllData: true, exportFileNme: "Sub Project Lists", actionsColumnIndex: -1, columnsButton: true, rowStyle: (data, index) => ({ padding: "1rem", background: index % 2 === 0 ? "transparent" : "transparent", // Normal background color "&:hover": { backgroundColor: "#dee2e6" // Change this color to the desired hover background color } }), headerStyle: { // padding: "1rem", paddingBottom: "1rem", whiteSpace: "nowrap", background: theme === "light" ? "#f8f9fa" : "#343a40", borderBottom: "1px solid #dee2e6", fontSize: "1rem",

  "&:hover": {
    background: theme === "light" ? "#efefef" : "#343a40"
  }
}

};

// Conditionally add export options if (exportButton) { tableOptions = { ...tableOptions, exportButton: exportButton, exportMenu: [ { label: "Export PDF", exportFunc: (cols, datas) => ExportPdf(cols, datas, pdfExportTitle ?? "pdfData") }, { label: "Export CSV", exportFunc: (cols, datas) => ExportCsv(cols, datas, csvExportTitle ?? "CsvData") } ] }; }

return ( <ThemeProvider theme={getMuiTheme}> <MaterialTable icons={tableIcons} isLoading={loading} columns={tableColumns} onSelectionChange={(rows) => typeof selectionChange === "function" && selectionChange(rows) } data={tableData} title={tableTitle} options={tableOptions} actions={[ { icon: () => ( <Checkbox color="primary" checked={filter} onChange={handleMaterialTableCheckboxChange} inputProps={{ "aria-label": "primary checkbox" }} /> ), tooltip: "Hide/Show Filter option", isFreeAction: true }, excelexporting && { icon: () => <FileDownloadIcon />, // you can pass icon too tooltip: "Export to Excel", onClick: () => downloadExcel(), isFreeAction: true }, // typeof handleDataApproval === "function" && { // icon: () => ( // <CheckCircleIcon // style={{ color: "56E39F", fontWeight: "bold" }} // Bolder icon // /> // ), // Approval icon // tooltip: "Approve", // onClick: () => { // handleDataApproval(); // }, // }, showRejectionAction && ((rowData) => createConditionalhideRejectionAction(rowData)), showDataApproval && ((rowData) => createConditionalhideDataApprovalIconAction(rowData)), showViewPage && ((rowData) => createConditionalHideViewPageIconAction(rowData)), showViewPdf && ((rowData) => createConditionalHideViewReportPdfPdfIconAction(rowData)), showEdit && ((rowData) => createConditionalHideEditIconAction(rowData)), showDelete && ((rowData) => createConditionalHideDeleteIconAction(rowData)) ]} /> </ThemeProvider> ); };

export default MuiTable;

`

here is how i use the custom component

` <MuiTable tableTitle="Cars" tableData={data?.data ?? []} tableColumns={columns} handleShowEditForm={handleShowEditForm} handleDelete={(e, item_id) => handleDelete(e, item_id)} showEdit={ ["Admin", "Vendor"].includes(loggedInUserData?.role) && activeUser?.permissions.includes("update") } showDelete={ ["Admin", "Vendor"].includes(loggedInUserData?.role) && activeUser?.permissions.includes("delete") } loading={ isLoading || status === "loading" || deleteSelectedItemMutationIsLoading } // handleViewPage={(rowData) => { navigate("car", { state: { carData: rowData } }); }} showViewPage={true} hideRowViewPage={false} />

`

[Domino987]

Hi thanks for the issue. Would you be able to put that in a code sandbox as requested so I can take a look? Thank you.

A minimal reproducible example is best

[atowler84]

@Domino987 Not OP, but here is a code sandbox that recreates the issue as simply as possible. Just enabling filtering will cause the crash: <MaterialTable options={{ filtering: true }} />

Changing the value to false will allow Material Table to load normally.

https://codesandbox.io/p/sandbox/frosty-resonance-nhh5qm

This appears to be a duplicate of #843

[cococov]

Fixed in #849