I'm using "material-table": "^2.0.3" version. I want to editable all my data and I used onBulkUpdate option in material table document. but after I click the icon next to the search form change to editable but icon doesn't change at all and to give me submit or reject actions to call any function and save my changes.
here is my code:
const [columns, setColumns] = useState([
{ title: 'Name', field: 'name' },
{
title: 'Surname',
field: 'surname',
},
{ title: 'Birth Year', field: 'birthYear' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]);
const [data, setData] = useState([
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]);
return (
<div className={styles.container}>
<MaterialTable
title='Bulk Edit Preview'
columns={columns}
data={data}
editable={{
onBulkUpdate: (changes) =>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000);
}),
}}
/>
</div>
);
I solved my problem by change my package version.
in package.json
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"material-table": "^1.69.3"
Related
According to material-table's docs, multiple rows can be edited in bulk and then saved or cancelled to apply or revert the changes. How to also include add and delete actions during bulk editing as well, so that in one bulk action multiple rows can be edited, created or deleted?
What I've tried so far, I can only add and delete one row at a time:
const initialData = [
{
name: "Alberta",
surname: "Abbott",
birthYear: 1984,
birthCity: 63,
},
{
name: "Laura",
surname: "Reynolds",
birthYear: 1988,
birthCity: 34,
},
{
name: "Susie",
surname: "Hayes",
birthYear: 1993,
birthCity: 34,
},
];
const Table = () => {
const [data, setData] = useState(initialData);
const handleBulkUpdate = async (changes) => {
setData((data) => {
const newData = [...data];
Object.entries(changes).forEach(([pos, change]) =>
newData.splice(parseInt(pos), 1, change.newData)
);
return newData;
});
};
const handleAdd = async (newData) => {
setData((data) => [...data, newData]);
};
const handleDelete = async (deletedData) => {
setData((data) => {
const newData = [...data];
newData.splice(deletedData.tableData.id, 1);
return newData;
});
};
return (
<MaterialTable
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth City",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
},
]}
data={data}
editable={{
onBulkUpdate: handleBulkUpdate,
onRowAdd: handleAdd,
onRowDelete: handleDelete,
}}
/>
);
};
I am trying to do something like auto fill rowData.properties on material table. But props.value always is undefined. Thisis my code
<MaterialTable
title="Simple Action Preview"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric'},
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
{
title: 'Full name',
field: 'fullName',
editComponent: (props)=>{
return <div onClick={()=> handleClick(props) > // props.value at here always null
<TextField
value={`${props.rowData.name} ${props.rowData.surname}` // fullname with edit component auto fill here
onChange={(e)=>props.onChange(e.target.value)}
/>
</div>
},
}
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 , fullName: 'Mehmet Baran'},
{ name: 'Zerya', surname: 'Baran', birthYear: 2017, birthCity: 34 , fullName: 'Zerya Baran'},
]}
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: (event, rowData) => alert("You saved " + rowData.name)
}
]}
/>
How to auto fill rowData.fieldName in material table? With fullName is example.
Please help me resolve it
I am absolutely new to react.
It may trivial but I can't figure how to implement action that will clear all table filters.
In my table, I use date filter, drop-down, text, and global filters looking for one-click clear all filters
https://codesandbox.io/s/eager-thunder-ejlg5?file=/src/index.js
<MaterialTable
title="Free Action Preview"
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
actions={[
{
icon: () => <FilterNoneIcon />,
tooltip: "clear all filters",
isFreeAction: true,
onClick: (event) => alert("clear all filters logic")
}
]}
options={{
filtering: true,
sorting: true
}}
/>
As of this writing, it does not look like they have a clear filter functionality - according to this issue at least: https://github.com/mbrn/material-table/issues/1132 since they tagged it as wontfix - meaning they are not planning to work on it. However, on the same issue, 1 of the users recommended using a ref and manually accessing the table to filter the data (although that user later advised against it) - so you can try that as well.
Another way you could do this is to just remount the component. Since the component is remounted, it will begin at its initial state including unfiltered data
function App() {
const [muiTableKey, setMuiTableKey] = React.useState(0);
return (
<MaterialTable
key={muiTableKey}
actions={[
{
icon: () => <FilterNoneIcon />,
tooltip: "clear all filters",
isFreeAction: true,
onClick: (event) => {
setMuiTableKey(muiTableKey + 1); // set new key causing remount
}
}
]}
I try to edit the value and update the same but its not updating in MaterialTable
Below is the link which am refering
https://material-table.com/#/docs/features/editable
under this am refering Cell Editable Example
what am missing here
any suggestion?
please refer below snippet
import React from "react";
import MaterialTable from "material-table";
export default function CellEditable() {
const { useState } = React;
const [columns, setColumns] = useState([
{ title: "Name", field: "name" },
{
title: "Surname",
field: "surname",
initialEditValue: "initial edit value"
},
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]);
const [data, setData] = useState([
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{ name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34 }
]);
return (
<MaterialTable
title="Cell Editable Preview"
columns={columns}
data={data}
cellEditable={{
onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
return new Promise((resolve, reject) => {
console.log("newValue: " + newValue);
setTimeout(resolve, 1000);
});
}
}}
/>
);
}
The code you are using never sets the state, it just logs to the console.
You need to set the state at some point. I was able to get this working, though I am uncertain if this is the correct approach.
Update
If you wish to disable a specific column you can add editable: 'never' to the specific column. See below where I added this to the birthYear.
function CellEditable() {
const { useState } = React;
const [columns, setColumns] = useState([
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric', editable: 'never' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]);
const [data, setData] = useState([
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]);
return (
<MaterialTable
title="Cell Editable Preview"
columns={columns}
data={data}
cellEditable={{
onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
return new Promise((resolve, reject) => {
const clonedData = [ ...data ]
clonedData[rowData.tableData.id][columnDef.field] = newValue
setData(clonedData)
setTimeout(resolve, 1000);
});
}
}}
/>
)
}
I have a MaterialTable and I want to validate the fields when editing a line.
For example the following code:
https://codesandbox.io/s/broken-snow-i4jbi?fontsize=14&hidenavigation=1&theme=dark
I have the function setNameError
const [nameError, setNameError] = useState({
error: false,
label: '',
helperText: '',
});
Then the onRowUpdate:
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if(newData.name === '') {
setNameError({
error: true,
label: 'required',
helperText: 'Required helper text'
});
reject();
return;
}
resolve();
...
}, 600);
})
I want to validate if the field name is empty, if it is empty I want to have this aspect:
validation in the field after click Save button
I can't show the error label, it looks like the setNameError inside the Promise is not working and I don't understand how can I do this.
Found the problem
I was storing the columns in state
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name',
editComponent: props => (
<TextField
type="text"
required={true}
error = {nameError.error}
label = {nameError.label}
helperText = {nameError.helperText}
value={props.value ? props.value : '' }
onChange={e => props.onChange(e.target.value)}
/>
)
},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
],
data: [
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34,
},
],
});
And then passing the state.columns to the MaterialTable component:
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
...
The solution was to put the columns definition in the MaterialTable component:
return (
<MaterialTable
title="Editable Example"
columns= {[
{ title: 'Name', field: 'name',
editComponent: props => (
<TextField
type="text"
required={true}
error = {nameError.error}
label = {nameError.label}
helperText = {nameError.helperText}
value={props.value ? props.value : '' }
onChange={e => props.onChange(e.target.value)}
/>
)
},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]}
data={state.data}
...