Можно ли установить фиксированную ширину для таблиц в таблице материалов?

Question

Я хотел бы иметь возможность иметь фиксированную ширину в моей таблице реакции. Я использую эту таблицу материалов библиотеки

import React from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <MaterialTable
      columns={[
        { title: "Name", field: "name" },  // 100px
        { title: "Surname", field: "surname" },  // set to 100px
        { title: "Birth Year", field: "birthYear", type: "numeric" }, // fill rest of row space
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34
        }
      ]}
      title="Basic"
      options={{
        toolbar: false,
        paging: false
      }}
    />
  );
}

Answer 1

Похоже, вы можете использовать headerStyle, чтобы установить ширину.

import React from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <MaterialTable
      columns={[
        { title: "Name", field: "name", headerStyle: {width: "100px"} },
        { title: "Surname", field: "surname", headerStyle: {width: "100px"} },
        { 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={{
        toolbar: false,
        paging: false
      }}
    />
  );
}

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