[BUG] - Table: minWidth and other column props not recognized

[stx-chris]

NextUI Version

2.1.13

Describe the bug

Some of the column properties, e.g. minWidth, are not applied

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Apply any value for minWidth

Expected behavior

Property should be applied to styles

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[EtherealData]

align doesn't work either. Can you add that detail to this bug? 🙏

[LagoonProject]

TableColumn properties (align, width, maxWidth...) are not working here neither.

Version:

"@nextui-org/react": "^2.2.9",
"next": "14.0.4",

[duchoan6814]

TableColumn properties (align, width, maxWidth...) are not working here neither.

Version:

"@nextui-org/react": "^2.2.9",
"next": "14.0.4",

.

[captainkapnap]

TableColumn properties (align, width, maxWidth...) are not working here neither.

Version:

"@nextui-org/react": "^2.2.9",
"next": "14.0.4",

"next": "^14.1.0", "@nextui-org/react": "^2.2.9",

Same here. Work-arounding it by adding length to the column header name for now.

[kasulk]

Same here, doesn't even work in the examples in the docs:

[happydayxxl]

any news on this?

[THE-SIMPLE-MARK]

I am having the same issue here. Are there any temporary workarounds available? I need to set the width and alignment of my column.

[happydayxxl]

I am having the same issue here. Are there any temporary workarounds available? I need to set the width and alignment of my column.

i have solved it with <TableColumn className='min-w-48'> .... i am using tailwind

[ygd]

I am using tailwind as well and solved the alignment issue with the className "text-right"

[PabloOliveiraSantos]

Any news about this issue?

[matteogilioli]

Any updates?

[LeoLin4258]

You can try adding an element inside <TableColumn> and apply your desired styles to that element. This approach might achieve a similar effect.

<TableColumn ><div className="border border-dashed w-80">Name</div></TableColumn>

[Ribosom]

I am new to next-ui, even an autogenerated project via nextui init does not work properly. maxWidth and justify don't work in the Navbar of the autogenerated project.

Version: NextUI CLI v0.3.4

Edit:

my problem was that I initialized it in a monorepo, which broke everything. I fixed my issue with adding ../../ to node_modules path

module.exports = {
  content: [
    "./layouts/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // IMPORTANT ../../ has to be done for monorepo
    "../../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      maxWidth: {
        "8xl": "96rem",
      },
    },
  },
  darkMode: "class",
  plugins: [nextui()],
};

[rayaqin]

I am using tailwind as well and solved the alignment issue with the className "text-right"

I am having the same issue here. Are there any temporary workarounds available? I need to set the width and alignment of my column.

i have solved it with <TableColumn className='min-w-48'> .... i am using tailwind

Of course you can solve it with tailwind. You can also solve it with css. You could just not use nextui at all and do everything on your own. But the point is that the nextui functionality that should work does not work, and should be fixed. Getting the solution that worked for you out is a good thing regardless, I'm not trying to be toxic here, but this is still an issue with nexui that needs to be dealt with.

[awestm]

Still not fixed as of March 2025, 18 months since first reported...