反应 mui datables，不能把图标放在左边

Question

I'm using react mui datables and i want to add buttons to the toolbar.

I want to put an icon to the right.

My full options:

  const options = {
    filter: false,
    filterType: "checkbox",
    download: isAdmin,
    sort: false,
    responsive: "vertical", // standard | vertical | simple
    selectToolbarPlacement: "none", // above | none | ...
    // searchPlaceholder: "Your Custom Search Placeholder",
    selectableRows: "multiple",
    selectableRowsOnClick: true,
    elevation: 0,
    print: false,
    viewColumns: false,
    searchOpen: false,
    search: true,
    page: 0,
    pageSize: 10,
    // rowsPerPage: 10,
    rowsPerPageOptions: [],
    // TODO customize on download
    // onDownload: (buildHead, buildBody, columns, rows) => {
    //   return (
    //     buildHead(columns) +
    //     buildBody(
    //       rows.map((row, index) => ({
    //         index,
    //         data: row.data.map((data) =>
    //           typeof data === "object" ? data.alias : data
    //         ),
    //       }))
    //     )
    //   );
    // },
    textLabels: {
      body: {
        noMatch: "Aucun enregistrement correspondant trouvé",
      },
      pagination: {
        next: "Suivant",
        previous: "Précédent",
        rowsPerPage: "Rows per page:",
        displayRows: "sur",
      },
      toolbar: {
        search: "Recherche",
        downloadCsv: "Télécharger CSV",
        print: "Imprimer",
        viewColumns: "Afficher les colonnes",
        filterTable: "Tableau de filtrage",
      },
      selectedRows: {
        text: "ligne(s) sélectionnée(s)",
        delete: "Supprimer",
        deleteAria: "Supprimer les lignes sélectionnées",
      },
    },
    customToolbarSelect: (selectedRows, displayData, setSelectedRows) => {
      return (
        <Box mr={4}>
          <Fab
            variant="extended"
            size="small"
            color="primary"
            aria-label="add"
            onClick={() => console.log(selectedRows)}
          >
            <FileDownloadRounded />
            Exporter
          </Fab>
        </Box>
      );
    },
    customToolbar: () => {
      return (
        <Link to="/project/add">
          <Tooltip title="Ajouter un nouveau dossier">
            <Button
              variant="contained"
              startIcon={<FontAwesomeIcon icon={faAdd} />}
              className="float-start"
            >
              Ajouter un dossier
            </Button>
          </Tooltip>
        </Link>
      );
    },
  };

How can i correctly put custom buttons inside the toolbar and control position (to the right, to the left..)

Answer 1

try something like this:

 <Tooltip style={{right: 180%}} title="Ajouter un nouveau dossier">

Answer 2

customToolbarSelect: Task after selecting row customToolbar: Normal task over all datatabel

 const options = {
    
    customToolbarSelect: selectedRows => (
         <IconButton
             onClick={() => {
          const indexesToPrint = selectedRows.data.map((row, k) => row.dataIndex);
          let temp = [];
          for (let i = 0; i < fabricList.length; i++) {
            if (indexesToPrint.includes(i)) {
              temp.push(fabricList[i]['id']);
            }
          }
          setSelectedFabrics(temp);
        }}
        style={{
          marginRight: "24px",
          height: "48px",
          top: "50%",
          display: "block",
          position: "relative",
          transform: "translateY(-50%)",
        }}
      >
        {/* <EditIcon /> */}
        <span style={{marginTop: "23px"}}>Print QR Code</span> 
      </IconButton>
    ),
    
    customToolbar: () => {
          return (
            <>
            <Tooltip title={"Download Excel Formate"}>
              <IconButton className={classes.iconButtonColor}
                onClick={() => {
                  // setDownload(true);
                  downloadFabricFormat()
                  
                }}
              >
                <CloudDownloadIcon />
              </IconButton>
            </Tooltip>
            )
        }
    
    }