从库 material-table 添加行时如何自定义字段?
How can you customize a field when adding a row from the library material-table?
使用库 material-table 向 editable table 添加行时,如何自定义字段?我想将该字段设置为只读或用户无法更改该字段的其他设置。我已经尝试过列的只读选项,但这只会使其在更新字段时变为只读。
import React from "react";
import MaterialTable from "material-table";
import Edit from "@material-ui/icons/Edit"
import Add from "@material-ui/icons/Add"
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<MaterialTable
title="Editable Preview"
columns={[
{ title: "Name", field: "name", readonly: true }, // only works on update
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" }
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
title="Basic"
options={{
paging: false
}}
icons={{
Add: () => <Add />,
Edit: () => <Edit />
}}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* const data = this.state.data;
data.push(newData);
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
// const data = this.state.data;
// const index = data.indexOf(oldData);
// data[index] = newData;
// this.setState({ data }, () => resolve());
}
resolve()
}, 1000)
})
}}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
根据 docs,您可以覆盖该组件并仅使用自定义函数来呈现该字段。
...
<MaterialTable
title="Editable Preview"
component={{
// add the custom component here
}}
columns={[
{ title: "Name", field: "name", readonly: true }, // only works on update
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" }
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
title="Basic"
options={{
paging: false
}}
icons={{
Add: () => <Add />,
Edit: () => <Edit />
}}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* const data = this.state.data;
data.push(newData);
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
// const data = this.state.data;
// const index = data.indexOf(oldData);
// data[index] = newData;
// this.setState({ data }, () => resolve());
}
resolve()
}, 1000)
})
}}
/>
);
}
...
使用库 material-table 向 editable table 添加行时,如何自定义字段?我想将该字段设置为只读或用户无法更改该字段的其他设置。我已经尝试过列的只读选项,但这只会使其在更新字段时变为只读。
import React from "react";
import MaterialTable from "material-table";
import Edit from "@material-ui/icons/Edit"
import Add from "@material-ui/icons/Add"
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<MaterialTable
title="Editable Preview"
columns={[
{ title: "Name", field: "name", readonly: true }, // only works on update
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" }
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
title="Basic"
options={{
paging: false
}}
icons={{
Add: () => <Add />,
Edit: () => <Edit />
}}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* const data = this.state.data;
data.push(newData);
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
// const data = this.state.data;
// const index = data.indexOf(oldData);
// data[index] = newData;
// this.setState({ data }, () => resolve());
}
resolve()
}, 1000)
})
}}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
根据 docs,您可以覆盖该组件并仅使用自定义函数来呈现该字段。
...
<MaterialTable
title="Editable Preview"
component={{
// add the custom component here
}}
columns={[
{ title: "Name", field: "name", readonly: true }, // only works on update
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" }
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
title="Basic"
options={{
paging: false
}}
icons={{
Add: () => <Add />,
Edit: () => <Edit />
}}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* const data = this.state.data;
data.push(newData);
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
// const data = this.state.data;
// const index = data.indexOf(oldData);
// data[index] = newData;
// this.setState({ data }, () => resolve());
}
resolve()
}, 1000)
})
}}
/>
);
}
...