反应物料表不再过滤或分页

时间:2020-09-28 09:26:33

标签: javascript reactjs material-table

首先使用物料表库进行反应,它在筛选过滤和分页方面非常有用,现在分页和列不再可单击。 ................................................... ................................................... ................................................... ................................................... ................................................... .................................

   <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>

0 个答案:

没有答案