How to create a custom MUI-Datatables search box with outlined style

Question

Default UI from MUI-Datatables v4.3.0 like this :

And i'am want to make this style :

For information i am using this package : "@mui/material": "^5.11.4" "mui-datatables": "^4.3.0"

How to make The TextField or Input with outlined style.

Answer 1

Based of example MUI-Databales from this link : https://codesandbox.io/s/github/gregnb/mui-datatables I have a answer and solution from my case.

My Component CustomSearchRender.js :

import React from "react";
import Grow from "@mui/material/Grow";
import TextField from "@mui/material/TextField";
import { withStyles } from "tss-react/mui";
import { SearchOutlined } from "@mui/icons-material";
import InputAdornment from "@mui/material/InputAdornment";

const defaultSearchStyles = (theme) => ({
  searchText: {
    flex: "0.8 0",
    marginTop: 10,
  },
  searchIcon: {
    "&:hover": {
      color: theme.palette.error.main,
    },
  },
});

const CustomSearchRender = (props) => {
  const { classes, onSearch, searchText } = props;
  const handleTextChange = (event) => {
    onSearch(event.target.value);
  };

  return (
    <Grow appear in={true} timeout={300}>
      <TextField
        placeholder="Search"
        size="medium"
        className={classes.searchText}
        value={searchText || ""}
        onChange={handleTextChange}
        fullWidth
        variant="outlined"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchOutlined />
            </InputAdornment>
          ),
        }}
      />
    </Grow>
  );
};

export default withStyles(CustomSearchRender, defaultSearchStyles, {
  name: "CustomSearchRender",
});

And put into options :

const options = {
    selectableRows: "none",
    filterType: "textField",
    responsive: "simple",
    confirmFilters: false,
    jumpToPage: false,
    download: false,
    print: false,
    enableNestedDataAccess: ".",
    textLabels: {
      body: {
        noMatch: loading ? (
          <TableSkeleton variant="h4" length={10} />
        ) : (
          "Maaf, tidak ada data untuk ditampilkan"
        ),
      },
    },
    searchOpen: true,
    searchAlwaysOpen: true,
    searchPlaceholder: "Search keyword",
    customSearchRender: (searchText, handleSearch) => {
      return (
        <CustomSearchRender searchText={searchText} onSearch={handleSearch} />
      );
    },
  };

And finnally the result like this :