CODEWITHSUNDEEP
material-table
Isaac Pak
Isaac Pak

Reputation: 4951

Is it possible to set fixed widths on tables in material-table?

I'd like to be able to have fixed widths in my react table. I'm using this library 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
      }}
    />
  );
}

Upvotes: 1

Views: 4654

Answers (1)

Isaac Pak
Isaac Pak

Reputation: 4951

Looks like you can use the headerStyle prop to set the widths.

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

Upvotes: 1

Related Questions