I am using material-table. The TablePagination is not working. It throws an error in console.
I tried installing the package as per the documentation.
https://material-table.com/#/docs/install
npm install material-table --save
npm install #material-ui/core --save
And I get getting this errors:
Material-UI: The key caption provided to the classes prop is not
implemented in ForwardRef(TablePagination). You can only override one
of the following: root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions.
Warning: Failed prop type: The prop onPageChange is marked as
required in ForwardRef(TablePagination), but its value is
undefined.
Warning: Unknown event handler property onChangePage. It will be
ignored.
Warning: Unknown event handler property onChangeRowsPerPage. It will
be ignored.
versions:
"#material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",
If I try to paginate it throws error in console.
Uncaught TypeError: _this.props.onChangePage is not a function
Sample Code:
<MaterialTable
icons={tableIcons}
columns={columns}
data={editable}
title="Orders"
localization={{
toolbar: {
searchPlaceholder: 'Filter',
searchTooltip: 'filters the given text'
},
header: {
actions: 'Actions'
}
}}
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: (event, rowData) =>
alert('You saved ' + rowData.name)
}
]}
options={{
actionsColumnIndex: -1,
selection: true,
exportButton: true,
showFirstLastPageButtons: true,
pageSize: 5,
padding: 'dense',
pageSizeOptions: [5, 20, 50]
}}
/>
I came across the same issue. For me, it is caused due to latest version of #material/core#4.12.1, Due to deprecated methods in TablePagination. As material-table uses this and not upgraded these deprecated methods it is throwing the error.
I was able to solve this by downgrading #material-ui/core version to 4.11.4 and keeping the material-table version to 1.69.3. On the other hand, as #knock-out has mentioned. You can create your own material-table component. Just change the -version
Hope this is helpful!
For me I managed to solve this by removing an old material-ui module and installing a new one
npm remove material-table
npm install #material-table/core
And then in the code
replace
import MaterialTable from 'material-table';
with
import MaterialTable from '#material-table/core';
kudos to #Chris Livdahl answer
I'm finding that the material-table repository is not kept up-to-date with the latest Material UI changes. Instead, take a look at the fork of material-table here: https://github.com/material-table-core/core, support for Material UI v4, with a "next" version in the works for v5.
Changing the code was very easy to adapt to the new repository. Follow the instructions here: https://material-table-core.com/docs
Related
I'm using the following versions:
"gatsby": "^4.21.1",
"gatsby-plugin-mdx": "^4.0.0",
"gatsby-remark-images": "^6.21.0",
"remark-unwrap-images": "^3.0.1",
And I have the following in place as part of my gatsby-config.js:
{
resolve: "gatsby-plugin-mdx",
options: {
gatsbyRemarkPlugins: [
{
resolve: "gatsby-remark-images",
options: {
linkImagesToOriginal: false,
backgroundColor: "transparent",
},
},
],
mdxOptions: {
remarkPlugins: [wrapESMPlugin("remark-unwrap-images")]
}
},
},
Then in my code I make use of the MDXProvider to override the rendering of some components like so:
<MDXProvider components={{ img: SomeComponent }}>
{children}
</MDXProvider>
Before upgrading to use the latest versions of gatsby-plugin-mdx and gatsby-remark-images this used to work nicely and I'd end up with my custom component being rendered correctly.
Since the update I'm finding that an extra div is wrapping the image which appears to be coming from gatsby-remark-images (although looking at the source code I can't see how or where).
As a result, this changes the behaviour of MDXProvider since it now thinks it's a div instead of an img which is a problem.
Has anyone encountered this or have a suggestion on how to resolve it?
Note: This is not the same as the issue with images getting wrapped in p Which can be resolved by using remark-unwrap-images per my gatsby-config.js as shown above. Also, further to this gatsby-remark-figure-caption does not appear to work in gatsby 4+.
Trying to make Full-Calendar component for reactjs, and fill it up with events retrieved from firestore database (Retrieving the events when changing the month).
But no matter what i do, i receive the error about dateProfileGenerator, so the code below is the code that i use just i deleted the part where i retrieve from the db, and still does not work.
import React from 'react';
import FullCalendar from '#fullcalendar/react';
import dayGridPlugin from '#fullcalendar/daygrid';
import interactionPlugin from '#fullcalendar/interaction';
Receiving this error:
TypeError: dateProfileGenerator is undefined
Here is the code i am trying to run.
const DemoCalendar = () => {
return (
<FullCalendar
headerToolbar={{
left: 'prev, next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek, timeGridDay, listMonth'
}}
initialDate={new Date()}
navLinks="true"
businessHours="true"
editable="false"
selectable="true"
events={[
{
title: 'Business',
start: '2021-05-05T10:00:00',
end: '2021-05-06T10:30:00',
constraint: 'businessHours',
color: '#257e4a'
},
{
groupId: 'available',
start: '2021-05-06T10:00:00',
end: '2021-05-06T10:30:00',
display: 'background'
}
]}
plugins={[dayGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
/>
);
};
};
Thanks in advance.
I also encountered this error using React. I still don't know what's wrong, but it works after I moved my main code to the React project example here:
https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/react
I then installed #fullcalendar/list additionally, which is not included in the original example.
My guess is I might have mistyped something or I didn't not install #fullcalendar/list correctly. For your case I think you may have forgotten to enter this line of code
import listPlugin from '#fullcalendar/list'
If not, you can try to modify the React example project. Maybe moving your code to a new project also works. Reinstalling the whole node_modules doesn't help.
Update: Changing the folder name helps when I encountered another error today.
I'm building a complete custom Material UI theme using global overrides as recommended here: https://material-ui.com/customization/components/#global-theme-override
Example:
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
fontSize: '1rem',
},
},
},
});
My question is how do I get a copy of the Material UI documentation with my custom theme applied? https://material-ui.com/getting-started/installation/
Some considerations:
I want the Material UI docs to be updatable (i.e. follow the latest release)
Essentially an exact copy of the Material UI docs wrapped in my custom theme
Any help here would be greatly appreciated!
Came across this mui-theme-creator from MUI's latest documentation https://mui.com/customization/theming/#theme-builder which would help.
However, this is not yet on v5.
I am trying to upgrade react-select version from 1.0.0-rc.10 to 3.1.0. I'm getting following error
jquery.js?eedf:3869 Uncaught TypeError: Object(...) is not a function
My current react version is - 15.6.2
I want to upgrade react-select for the following reason:
When user type in react-select( Component) there is a little delay i see in box(where i've used Component). The text in the box appears in little late (300ms ~ 500ms)
Current code (v1.0.0) for Select:
const props = {
className: 'search-combobox',
placeholder,
onChange: this._onSelectionChange.bind(this),
onSelect: this.props.onSelectedItem,
options: this.state.immSearchOptions.toJS(),
filterOptions: this._filterOptions.bind(this),
onInputChange: this._onInputChange.bind(this),
valueKey: 'id',
};
<Select {...props}
autoFocus={true}
clearable={true}
closeOnSelect={true}
maxMenuHeight={300}
escapeClearsValue={true}
onBlurResetsInput={false} />
I am calling the component FullCalendar in my code. For the Calendar I need two plugins to be loaded. The dayGridPlugin and the interactionPlugin. However when I pass them both in the attribute 'plugins', it only loads the first plugin I pass in. I could not find documentation on this specific problem which is why I'm asking here. I'm guessing I made a error in the way I pass them in.
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
events={[
{ title: 'event 1', date: '2019-10-01' },
{ title: 'event 2', date: '2019-11-01' }
]}
selectable='true'
/>
The interaction plugin was working but I did not realize that I had to use the dateClick attribute and not the selectable attribute. The dateClick allows you to have a event handler for when for when a date is clicked. It is passed in as the parameter event.