javascript - React.js：使用 material-ui 在表格中添加操作图标（编辑、删除）

Question

我有一个现有的表，其中我使用了一个名为react-bootstrap-table-next

它的目的是在表中显示数据，其中值来自 JSON 响应

但是，我想添加一个包含编辑和删除的操作列

我想使用material-ui图标来实现这一点

关于我应该如何开始的任何建议？我应该首先将我的表格完全转换material-ui为实现这一目标吗？

或者我可以编辑profiles状态数组并将其映射到包含图标的新数组中？

ProfileMaintenance.js

const [profiles, setProfiles] = useState([]); // populate table with saved profiles

const retrieveProfiles = useCallback(() => {
    ProfileMaintenanceService.retrieveProfiles()
      .then((response) => {
        console.log(
          "ProfileMaintenance - retrieveProfiles response.data >>> ",
          response.data
        );
        setProfiles(response.data);
      })
      .catch((error) => {
        if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers); // send to logger
          if (
            error.response.data.error !== undefined &&
            error.response.data.error != ""
          ) {
            store.addNotification({
              ...notification,
              type: "danger",
              message: error.response.data.error,
              dismiss: {
                duration: 5000,
              },
            });
          } else {
            store.addNotification({
              ...notification,
              type: "danger",
              message:
                "Server responded with a status code that falls out of the range of 2xx",
              dismiss: {
                duration: 5000,
              },
            });
          }
        } else if (error.request) {
          // if API is down
          console.log(error.request); // send to logger
          store.addNotification({
            ...notification,
            type: "danger",
            message: "Request was made but no response was received",
            dismiss: {
              duration: 5000,
            },
          });
        }
      });
  });

const columnsProfile = [
    // {
    //   headerStyle: {
    //     backgroundColor: '#b3b3b3'
    //   },
    //   dataField: 'id', // for dev only
    //   text: 'ID',
    //   sort: true
    //   },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "profileName",
      text: "Name",
      sort: true,
      filter: textFilter(),
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "createdBy",
      text: "Creator",
      sort: true,
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "creationDate",
      text: "Creation Date",
      sort: true,
      // filter: dateFilter()
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "lastModifier",
      text: "Last Modifier",
      sort: true,
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "lastModification",
      text: "Last Modification",
      sort: true,
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "action",
      text: "Action",
    },
  ];

const options = {
    paginationSize: 4,
    pageStartIndex: 1,
    alwaysShowAllBtns: true,
    hideSizePerPage: true,
    firstPageText: "First",
    prePageText: "Back",
    nextPageText: "Next",
    lastPageText: "Last",
    nextPageTitle: "First page",
    prePageTitle: "Pre page",
    firstPageTitle: "Next page",
    lastPageTitle: "Last page",
    showTotal: true,
    paginationTotalRenderer: customTotal,
    sizePerPageList: [
      {
        text: "5",
        value: 5,
      },
      {
        text: "10",
        value: 10,
      },
      {
        text: "All",
        value: profiles.length,
      },
    ],
  };

return (
<BootstrapTable
                keyField="id"
                hover
                data={profiles}
                columns={columnsProfile}
                defaultSorted={defaultSorted}
                filter={filterFactory()}
                selectRow={selectRowClient}
                noDataIndication="No record(s) found."
                pagination={paginationFactory(options)}
              />
)

标签： javascriptreactjsmaterial-ui

Answer 1

如果你想要材质图标，我建议使用材质 ui 表。请在下面的示例中编辑或删除材料 ui 表中的行。

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);
          }),
      }}
    />
  );
}