首先使用物料表库进行反应,它在筛选过滤和分页方面非常有用,现在分页和列不再可单击。 ................................................... ................................................... ................................................... ................................................... ................................................... .................................
<div style={{ width: "100%", padding: "30px" }}>
<Link
to='/croisiere/add-croisiere'
style={{
width: "5rem",
backgroundColor: "#2089DB",
position: "absolute",
top: " 0.5rem",
right: " 2rem",
textAlign: "center",
fontSize: "1.5rem",
textDecoration: "none",
color: "white",
}}
>
{" "}
+
</Link>
<br />
<MaterialTable
localization={{
body: {
editRow: {
deleteText:
"êtes-vous sûr que vous voulez supprimer ce croisiere",
},
},
}}
title='Liste des croisieres'
columns={state.columns}
data={state.data}
options={{
pageSize: 10,
filtering: true,
actionsColumnIndex: -1,
headerStyle: {
backgroundColor: "rgb(32,137,219)",
color: "#FFF",
},
}}
actions={[
{
icon: "visibility",
tooltip: "voir cruise",
onClick: (event, rowData) =>
props.history.push(`/cruise/view-cruise/${rowData._id}`),
},
{
icon: "storage",
tooltip: "voir stock",
onClick: (event, rowData) =>
props.history.push(`/gestion-stock/cabins-stock/${rowData._id}`),
},
{
icon: "photo",
tooltip: "voir gallery",
onClick: (event, rowData) =>
props.history.push(`/cruise/view-cruise/gallery/${rowData._id}`),
},
]}
editable={{
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
console.log(oldData);
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
deleteCruise(oldData._id);
return { ...prevState, data };
});
}, 600);
}),
}}
/>
</div>