I have a project and in this project I have several interfaces and among these interfaces there is an interface to create a table and this table contains a set of data, but I got this error:
Material-UI: The key `wrapper` provided to the classes prop is not implemented in undefined.
How can i solve the problem?
This file contains the content of the table
jobsTable.js:
import { forwardRef, useRef, useEffect } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import Table from "@material-ui/core/Table";
import PropTypes from "prop-types";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import TableSortLabel from "@material-ui/core/TableSortLabel";
import {
useGlobalFilter,
usePagination,
useRowSelect,
useSortBy,
useTable,
} from "react-table";
import clsx from "clsx";
import JobsTablePaginationActions from "./JobsTablePaginationActions";
const IndeterminateCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => {
const defaultRef = useRef();
const resolvedRef = ref || defaultRef;
useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<Checkbox ref={resolvedRef} {...rest} />
</>
);
});
const EnhancedTable = ({ columns, data, onRowClick }) => {
const {
getTableProps,
headerGroups,
prepareRow,
page,
gotoPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
autoResetPage: true,
},
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.allColumns.push((_columns) => [
// Let's make a column for selection
{
id: "selection",
sortable: false,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox. Pagination is a problem since this will select all
// rows even though not all rows are on the current page. The solution should
// be server side pagination. For one, the clients should not download all
// rows in most cases. The client should only download data for the current page.
// In that case, getToggleAllRowsSelectedProps works fine.
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox
{...row.getToggleRowSelectedProps()}
onClick={(ev) => ev.stopPropagation()}
/>
</div>
),
},
..._columns,
]);
}
);
const handleChangePage = (event, newPage) => {
gotoPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setPageSize(Number(event.target.value));
};
// Render the UI for your table
return (
<div
style={{
// padding: "2rem",
border: "solid 1px #e8e4e4",
}}
className="flex flex-col min-h-full sm:rounded-16 overflow-hidden"
>
<TableContainer className="flex flex-1">
<Table {...getTableProps()}>
<TableHead>
{headerGroups.map((headerGroup) => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<TableCell
className="whitespace-nowrap p-4 md:p-12"
{...(!column.sortable
? column.getHeaderProps()
: column.getHeaderProps(column.getSortByToggleProps()))}
>
{column.render("Header")}
{column.sortable ? (
<TableSortLabel
active={column.isSorted}
// react-table has a unsorted state which is not treated here
direction={column.isSortedDesc ? "desc" : "asc"}
/>
) : null}
</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody>
{page.map((row, i) => {
prepareRow(row);
return (
<TableRow
{...row.getRowProps()}
onClick={(ev) => onRowClick(ev, row)}
className="truncate cursor-pointer"
>
{row.cells.map((cell) => {
return (
<TableCell
{...cell.getCellProps()}
className={clsx("p-4 md:p-12", cell.column.className)}
>
{cell.render("Cell")}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
classes={{
root: "flex-shrink-0 border-t-1",
}}
rowsPerPageOptions={[
5,
10,
25,
{ label: "All", value: data.length + 1 },
]}
colSpan={5}
count={data.length}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: false,
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={JobsTablePaginationActions}
/>
</div>
);
};
EnhancedTable.propTypes = {
columns: PropTypes.array.isRequired,
data: PropTypes.array.isRequired,
onRowClick: PropTypes.func,
};
export default EnhancedTable;
This file contains the header of the table
jobLists.js:
import { motion } from "framer-motion";
import FuseUtils from "@fuse/utils";
import Avatar from "@material-ui/core/Avatar";
import Icon from "@material-ui/core/Icon";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import { useMemo, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { deleteJob } from "./store/jobsSlice";
import JobsMultiSelectMenu from "./JobsMultiSelectMenu";
import JobsTable from "./JobsTable";
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import {
openEditJobDialog,
removeContact,
toggleStarredContact,
selectJobs,
} from "./store/jobsSlice";
import { useSnackbar } from "notistack";
const useStyles = makeStyles({
button1: {
backgroundColor: "none",
"&:hover": {
backgroundColor: "#43a047",
color: "#e8e4e4",
transition: "0.3s",
borderColor: "#43a047",
},
},
button2: {
backgroundColor: "none",
"&:hover": {
backgroundColor: "#e53935",
color: "#e8e4e4",
transition: "0.3s",
borderColor: "#e53935",
},
},
});
// const onRejectUser = useCallback((id) => {
// dispatch(rejectUser(id));
// }, []);
function JobsList(props) {
const dispatch = useDispatch();
const classes = useStyles();
const contacts = useSelector(selectJobs);
const searchText = useSelector(({ jobsApp }) => jobsApp.jobs.searchText);
const user = useSelector(({ jobsApp }) => jobsApp.user);
const { selectedJobsIds } = props;
const [filteredData, setFilteredData] = useState(null);
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar(
"User accepted",
{ variant: "success" },
{
anchorOrigin: {
vertical: "top",
horizontal: "right",
},
},
{ TransitionComponent: Slide }
);
};
const deleteJobHandleClick = () => {
enqueueSnackbar(
"Job Deleted successfully",
{ variant: "error" },
{
anchorOrigin: {
vertical: "top",
horizontal: "right",
},
},
{ TransitionComponent: Slide }
);
};
const columns = useMemo(
() => [
{
Header: "ID",
accessor: "id",
className: "font-medium",
sortable: true,
align: "left",
},
{
Header: "Job Title",
accessor: "name",
className: "font-medium",
sortable: true,
align: "center",
},
{
Header: "Description",
accessor: "description",
sortable: true,
align: "center",
},
{
id: "action",
// width: 128,
align: "right",
sortable: false,
Cell: ({ row }) => (
<div className="flex items-center">
{/* <IconButton
onClick={(ev) => {
ev.stopPropagation();
dispatch(approveUser(row.original.id));
dispatch(toggleStarredContact(row.original.id));
handleClick(ev);
dispatch(toggleStarredContact(row.original.id));
}}
style={{ color: "green", border: "none" }}
>
<Icon>edit</Icon>
</IconButton> */}
<IconButton
onClick={(ev) => {
ev.stopPropagation();
dispatch(deleteJob(row.original.id));
deleteJobHandleClick(ev);
}}
// className={classes.button2}
style={{ color: "red", border: "none" }}
>
<Icon>delete</Icon>
</IconButton>
</div>
),
},
],
[dispatch, user.starred]
);
useEffect(() => {
function getFilteredArray(entities, _searchText) {
if (_searchText.length === 0) {
return contacts;
}
return FuseUtils.filterArrayByString(contacts, _searchText);
}
if (contacts) {
setFilteredData(getFilteredArray(contacts, searchText));
}
}, [contacts, searchText]);
if (!filteredData) {
return null;
}
if (filteredData.length === 0) {
return (
<div className="flex flex-1 items-center justify-center h-full">
<Typography color="textSecondary" variant="h5">
There are no Jobs!
</Typography>
</div>
);
}
return (
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { delay: 0.2 } }}
>
<JobsTable
columns={columns}
data={filteredData}
onRowClick={(ev, row) => {
if (row) {
dispatch(openEditJobDialog(row.original));
}
}}
/>
</motion.div>
);
}
export default JobsList;