javascripthtmlcssreactjsmaterial-table

I want to remove placeholder from material table editable fields using react

enter image description here

I want to remove placeholder from material table bulk edit option, as it is now showing the columns heads in the editable fields, I want to keep it blank.

function BulkEdit() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    },
  ]);

  const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
  ]);

  return (
    <MaterialTable
      title="Bulk Edit Preview"
      columns={columns}
      data={data}
      editable={{
        onBulkUpdate: changes =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve();
            }, 1000);
          }),     
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve();
            }, 1000);
          }),     
      }}
    />
  )
}

As you can see in the attachment screenshot, there are some default placeholders, I want to remove those and keep it blank.

Solution

  • Andrew is right, you can override input editable component.
    Here is the example of override input field and blank placeholder.

      const [columns, setColumns] = useState([
    { title: "Name", field: "name" },
    {
      title: "Surname",
      field: "surname",
      initialEditValue: "initial edit value",
      editComponent: (props: any) => (
        <TextField
          id="standard-basic"
          label=""
          variant="standard"
          value={props.value}
          onChange={(e) => props.onChange(e.target.value)}
        />
      ),
    },
    { title: "Birth Year", field: "birthYear" },
    {
      title: "Birth Place",
      field: "birthCity",
      lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
    },
  ]);

    you can disabled surname placeholder

    enter image description here