Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

173
Views
Material-Table columns not resizable with more than 5 columns

I am displaying data using material-table. I have 19 columns to display and I want to set a fixed size for each column. Using width: 45% is not making any visual changes. I can't use whiteSpace: "nowrap" because that will only make the table longer and more difficult to use when some cells have large sentences. I have tried using width, cellStyle and headerStyle in all 19 of my columns but it made no difference.

Here are some of my columns and my table:

const columns = [
        { title: "Sizing ID", field: "SizingId" },
        { title: "Intake ID", field: "IntakeID" },
        { title: "FCRID", field: "FCRID" },
        { title: "Taxonomy ID", field: "TaxonomyId" },
        { title: "Domain", field: "Domain" },
        { title: "Experience", field: "Experience" },
        { title: "Product Line", field: "ProductLine" },
        { title: "Sizing Contact", field: "SizingContact" },
        { title: "Q1Cost", field: "Q1Cost" },
        { title: "Sizing Comments", field: "SizingComments" },
];
...

<MaterialTable
    title="Sizing"
    data={sizing.sizing}
    columns={columns}
    options={{
        pageSize: 15,
        pageSizeOptions: [15, 25, 50],
        padding: "dense",
        headerStyle: {
            backgroundColor: "#0076CE",
            color: "#e5e6e7",
            fontFamily: "sans-serif",
            fontSize: 12,
            fontWeight: 600,
            maxWidth: 200,
        },
        rowStyle: (data, index) => {
            if (index % 2) {
                return {
                    backgroundColor: "#EEEEEE",
                    fontSize: 12,
                };
            } else {
                return { fontSize: 12 };
            }
        },
    }}
/>

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Just try to use Fixed columns with a large number of columns in the docs https://material-table.com/#/docs/features/fixed-columns

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!