有没有一种方法可以在 material-table 中创建一个带有自动编号的自定义列?
Is there a way that I can create a custom column with auto numbering in material-table?
我想生成一个基于 api 数据的自定义列,即使行被删除也能保持排序。就像下图一样,但不是硬编码数字。我引用的库不是 angular-material-table 而是这个:react-table
这是我正在使用的代码:
import React from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
import Check from "@material-ui/icons/Check";
import Clear from "@material-ui/icons/Clear";
import Delete from "@material-ui/icons/Delete";
import Add from "@material-ui/icons/Add";
import Edit from "@material-ui/icons/Edit";
import Search from '@material-ui/icons/Search'
import "./styles.css";
function App() {
return (
<div className="App">
<MaterialTable
icons={{
Add: () => <Add />,
Check: () => <Check />,
Clear: () => <Clear />,
ResetSearch: () => <Clear />,
Delete: () => <Delete />,
Search: () => <Search />,
Edit: () => <Edit />
}}
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Custom", field: "number", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]}
data={[
{ name: "Mehmet", surname: "Baran", number: 1, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
number: 2,
birthCity: 34
}
]}
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) => {
onClick = () => console.log("hi");
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* const data = this.state.data;
const index = data.indexOf(oldData);
data[index] = newData;
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
});
},
onRowDelete: oldData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* let data = this.state.data;
const index = data.indexOf(oldData);
data.splice(index, 1);
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
})
}}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
你能试试这个吗:
如果您想使用由 material-table 生成的 ID,请查看 id
字段。但是如果你需要它从 1 而不是 0 开始,你可以使用 id+1
field
<MaterialTable
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Id", field: "tableData.id" },
{ title: "Id+1", render: rowData => rowData.tableData.id + 1 },
]}
/>
我想生成一个基于 api 数据的自定义列,即使行被删除也能保持排序。就像下图一样,但不是硬编码数字。我引用的库不是 angular-material-table 而是这个:react-table
这是我正在使用的代码:
import React from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
import Check from "@material-ui/icons/Check";
import Clear from "@material-ui/icons/Clear";
import Delete from "@material-ui/icons/Delete";
import Add from "@material-ui/icons/Add";
import Edit from "@material-ui/icons/Edit";
import Search from '@material-ui/icons/Search'
import "./styles.css";
function App() {
return (
<div className="App">
<MaterialTable
icons={{
Add: () => <Add />,
Check: () => <Check />,
Clear: () => <Clear />,
ResetSearch: () => <Clear />,
Delete: () => <Delete />,
Search: () => <Search />,
Edit: () => <Edit />
}}
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Custom", field: "number", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]}
data={[
{ name: "Mehmet", surname: "Baran", number: 1, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
number: 2,
birthCity: 34
}
]}
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) => {
onClick = () => console.log("hi");
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* const data = this.state.data;
const index = data.indexOf(oldData);
data[index] = newData;
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
});
},
onRowDelete: oldData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
/* let data = this.state.data;
const index = data.indexOf(oldData);
data.splice(index, 1);
this.setState({ data }, () => resolve()); */
}
resolve();
}, 1000);
})
}}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
你能试试这个吗:
如果您想使用由 material-table 生成的 ID,请查看 id
字段。但是如果你需要它从 1 而不是 0 开始,你可以使用 id+1
field
<MaterialTable
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Id", field: "tableData.id" },
{ title: "Id+1", render: rowData => rowData.tableData.id + 1 },
]}
/>