How to add styling which works in material table in reactjs

Question

• I want to set display to inline-block but cellStyle does not recognises it is there an alternative to this ?
• how do i modify the width of a specific column ,assume name is title here without changing width of all columns ?

note

This works but i want to add other styling props aswell but i cant figure out how

column.push({
   title:key,
   field:key,
   cellStyle: {
     backgroundColor: '#039be5',
     color: '#FFF',
  },
})

App.js

const MyComponent = () => {
    return (
        <div style={{ maxWidth: "100%" }}>
            <MaterialTable
                icons={tableIcons}
                columns={column}
                data={data}
                title="Demo Title"
                options={{
                    rowStyle: {
                       fontSize:10,
                      },
                    }}
            />
        </div>
    )
};

export default MyComponent

Answer 1

1. Custom style with props

Move column outside of component and make it as a function which returns an array of objects. In jsx, call the function passing your props/state.

2. Custom width

Use tableLayout property in options and set it to fixed and provide the width in columns array. Note: There is an open bug, keep an eye on it. Once fixed if your code breaks refer to the issue resolution.

Working demo

Full code snippet

const columns = propValue => [
  {
    title: "Avatar",
    field: "avatar",
    render: rowData => (
      <img
        style={{ height: 36, borderRadius: "50%" }}
        src={rowData.avatar}
        alt=""
      />
    ),
    cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF"
    },
    width: "40%" //<---- here
  },
  { title: "Id", field: "id" },
  { title: "First Name", field: "first_name" },
  {
    title: "Last Name",
    field: "last_name",
    cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF",
      display: propValue ? "inline-block" : "block"
    }
  }
];

class App extends Component {
  tableRef = React.createRef();
  propValue = true;

  render() {
    return (
      <div style={{ maxWidth: "100%" }}>
        <MaterialTable
          tableRef={this.tableRef}
          columns={columns(this.propValue)}
          data={query =>
            new Promise((resolve, reject) => {
              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 => {
                  resolve({
                    data: result.data,
                    page: result.page - 1,
                    totalCount: result.total
                  });
                });
            })
          }
          title="Remote Data Example"
          options={{ tableLayout: "fixed" }} //<------here
        />
        <button
          onClick={() => {
            this.tableRef.current.onQueryChange();
          }}
        >
          ok
        </button>
      </div>
    );
  }
}

NOTE - material-table 1.25 (and below) make sure to provide width inside the cellStyle

cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF",
      width: 10 //<-----like this
    },