如何在material-table中集成timepicker

Question

如何访问 material-table 中的一行（在 editable 模式下）并集成来自 materialui 的时间选择器？

<MaterialTable
    title=""
    columns={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...

      //onRowDelete...

    }}
  />

fields to change (yellow):

Answer 1

您必须覆盖列的渲染和编辑组件。

我创建了一个 SandBox 来教你怎么做。

数据应该有一个名为 time 的日期或 timeInMillis 值。这将传递给列的渲染函数，该函数会将其解析为人类可读的：

render: ({ time }) => `${time.getHours()}:${time.getMinutes()}`

要进行编辑，您必须使用 TimePicker 覆盖 editComponent：

 editComponent: ({value, onChange}) => <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardTimePicker
      margin="normal"
      id="time-picker"
      label="Time picker"
      value={value}
      onChange={onChange}
      KeyboardButtonProps={{
        "aria-label": "change time"
      }}
    />
  </MuiPickersUtilsProvider>

这将使您 edit/set 该行的新时间，并在用户单击保存后将其传递回 table 的 editable 回调。

回调将允许您更新数据。

Answer 2

更新：

更新到 1.69.0 以解决此问题。

似乎已接受答案中的 SandBox 代码不再有效。我为正在寻找工作代码的其他人创建了一个新的 codesandbox here。

Note: Warning: Unknown event handler property `onBulkEditRowChanged`. It will be ignored.

is an issue with latest version (1.68.0) of material-table.

添加：要解决上述问题，目前 - 2020/08/16，我们需要使用 1.66.0

在 1.67.1 中仍然出现了一些警告。

如何在material-table中集成timepicker

How to integrate timepicker in material-table

reactjs

material-ui

material-table