Как вы можете настроить поле при добавлении строки из таблицы материалов библиотеки? - PullRequest
Новая
       19

Как вы можете настроить поле при добавлении строки из таблицы материалов библиотеки?

0 голосов
/ 22 апреля 2019

При добавлении строки в редактируемую таблицу с использованием библиотеки material-table , как вы можете настроить поле?Я хотел бы сделать поле доступным только для чтения или что-то еще, где пользователь не может изменить поле.Я пробовал параметр «только для чтения» для столбцов, но это делает его доступным только для чтения для обновления полей.

import React from "react";
import MaterialTable from "material-table";
import Edit from "@material-ui/icons/Edit"
import Add from "@material-ui/icons/Add"
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <MaterialTable
      title="Editable Preview"
      columns={[
        { title: "Name", field: "name", readonly: true  }, // only works on update
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" }
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34
        }
      ]}
      title="Basic"
      options={{
        paging: false
      }}
      icons={{
        Add: () => <Add />,
        Edit: () => <Edit />
      }}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              {
                /* const data = this.state.data;
                        data.push(newData);
                        this.setState({ data }, () => resolve()); */
              }
              resolve();
            }, 1000);
          }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  // const data = this.state.data;
                  // const index = data.indexOf(oldData);
                  // data[index] = newData;
                  // this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            })
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1 Ответ

0 голосов
/ 23 апреля 2019

Согласно документам вы можете переопределить компонент и просто использовать пользовательскую функцию для визуализации поля. 

...

    <MaterialTable
      title="Editable Preview"
      component={{
        // add the custom component here
      }}
      columns={[
        { title: "Name", field: "name", readonly: true  }, // only works on update
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" }
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34
        }
      ]}
      title="Basic"
      options={{
        paging: false
      }}
      icons={{
        Add: () => <Add />,
        Edit: () => <Edit />
      }}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              {
                /* const data = this.state.data;
                        data.push(newData);
                        this.setState({ data }, () => resolve()); */
              }
              resolve();
            }, 1000);
          }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  // const data = this.state.data;
                  // const index = data.indexOf(oldData);
                  // data[index] = newData;
                  // this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            })
      }}
    />
  );
}

...
...