Material-Table with React：如何在单元格中使用星级？

Question

我想通过使用 Material-Table 将我的手机评级设置为星号，就像原来的 Material-UI 提供的那样： https://material-ui.com/components/rating/

是否可以在Material-Table中使用？我找不到与此相关的文档...仅用于背景、颜色等样式，而不是用于以单元格样式编写函数。 https://material-table.com/#/docs/features/styling

非常感谢！

Answer 1

您可以使用 material-table's custom edit component 渲染 mui Rating 组件。

完整的工作演示

columns 数组的示例代码片段

const columns = propValue => [
  { title: "Id", field: "id" },
  { title: "First Name", field: "first_name" },
  {
    title: "Rating",
    field: "rating",
    render: rowData => {
      return <Rating name="hover-feedback" value={rowData.rating} readOnly />;
    },
    editComponent: props => (
      <Rating
        name="hover-feedback"
        value={props.value}
        onChange={(event, newValue) => {
          props.onChange(newValue);
        }}
      />
    ),
    cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF"
    },
    width: "30%"
  }
];

组件

class App extends Component {
  tableRef = React.createRef();
  propValue = true;
  state = { data: [] };

  componentDidMount() {
    const query = 0;

    let url = "https://reqres.in/api/users?";
    url += "per_page=" + query.pageSize;
    url += "&page=" + (query.page + 1);
    fetch(url)
      .then(response => response.json())
      .then(result => {
        console.log("result", result);
        this.setState({
          data: result.data.map(d => ({ ...d }))
        });
      });
  }
  render() {
    return (
      <div style={{ maxWidth: "100%" }}>
        <MaterialTable
        icons={tableIcons}
          tableRef={this.tableRef}
          columns={columns(this.propValue)}
          editable={{
            onRowUpdate: (newData, oldData) =>
              new Promise((resolve, reject) => {
                console.log("newData", newData);
                console.log("oldData", oldData);
                const dataUpdate = [...this.state.data];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                this.setState({ data: dataUpdate }, () => {
                  console.log("xx", this.state.data);
                  resolve(this.state);
                });
              })
          }}
          data={this.state.data}
          title="Remote Data Example"
          options={{ tableLayout: "fixed" }}
        />
        <button
          onClick={() => {
            this.tableRef.current.onQueryChange();
          }}
        >
          ok
        </button>
      </div>
    );
  }
}

Material-Table with React：如何在单元格中使用星级？

Material-Table with React: how to use star rating in the cell?

user-interface

reactjs

material-ui

material-table