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

Question

I would like to style my cell's rating into star by using Material-Table, like the original Material-UI provided: https://material-ui.com/components/rating/

Is it possible to use in Material-Table? I cannot find document related to this...just for the style for background, color, etc., not for writing functions in cell style. https://material-table.com/#/docs/features/styling

thanks a lot!

Answer 1

You can use material-table's custom edit component to render the mui Rating component.

Full Working demo

Sample code snippet of columns array

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%"
  }
];

Component

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>
    );
  }
}