material-table - 是否可以在材料表中的表格上设置固定宽度？

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