是否可以在 material-table 中的 table 上设置固定宽度?
Is it possible to set fixed widths on tables in material-table?
我希望能够在我的反应中使用固定宽度 table。我正在使用这个库 material-table
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
}}
/>
);
}
看来您可以使用 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);
我希望能够在我的反应中使用固定宽度 table。我正在使用这个库 material-table
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
}}
/>
);
}
看来您可以使用 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);