You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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";
// let handleShowRowEdit = (rowData) => {
// if (typeof showRowEdit === "function") {
// } else {
// console.log("The function prop is not a function.");
// }
// };
@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.
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
};
};
const createConditionalHideViewReportPdfPdfIconAction = (rowData) => {
// console.log('edditing action : ', editingAction)
};
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
};
};
const createConditionalHideDeleteIconAction = (rowData) => {
// console.log('edditing action : ', editingAction)
};
//======== Data Approval ==================
const createConditionalhideDataApprovalIconAction = (rowData) => {
// console.log('edditing action : ', editingAction)
};
//======== Cancel Data Approval ==================
const createConditionalhideRejectionAction = (rowData) => {
// console.log('edditing action : ', editingAction)
};
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",
};
// 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 (
<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: () => , // 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))
]}
/>
);
};
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}
/>
`
The text was updated successfully, but these errors were encountered: