你好,你可以查看这个例子:
import React from 'react';
import MaterialTable from 'material-table';
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
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,
},
],
});
return (
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: (newData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.push(newData);
return {...prevState, data};
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
if (oldData) {
setState((prevState) => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return {...prevState, data};
});
}
}, 600);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return {...prevState, data};
});
}, 600);
}),
}}
/>
);
}
更新的代码
import React, {forwardRef} from 'react';
import MaterialTable from 'material-table';
import {AddBox, ArrowUpward, Check, ChevronLeft, ChevronRight, Clear, DeleteOutline, Edit, FilterList, FirstPage, LastPage, Remove, Save, SaveAlt, Search, ViewColumn} from '@material-ui/icons';
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
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,
},
],
});
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref}/>),
Save: forwardRef((props, ref) => <Save {...props} ref={ref}/>),
Check: forwardRef((props, ref) => <Check {...props} ref={ref}/>),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref}/>),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref}/>),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref}/>),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref}/>),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref}/>),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref}/>),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref}/>),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),
Search: forwardRef((props, ref) => <Search {...props} ref={ref}/>),
SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref}/>),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref}/>),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref}/>)
};
function clickHandler(event) {
alert('worked');
}
return (
<MaterialTable
icons={tableIcons}
title="Editable Example"
columns={state.columns}
data={state.data}
actions={[
{
icon: tableIcons.Save,
tooltip: 'Save User',
onClick: (event, rowData) => alert("You saved " + rowData.name)
}
]}
/>
);
}
actions
属性中创建自己的操作。例如,取消预订操作。点击此操作按钮后,该行将更改为上述状态并等待接受。确认后,它会执行某些操作(例如发布到API)。 - sqtr