primefaces / primefaces/primereact

DataTable: width is not working for column and event onColumnResizeEnd don't fire on reduce size of column

Open
#6,777 19 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Discussion
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

I have created SPFx with React solution. I have used "primereact": "^9.4.0" version.

I need to set the column width dynamically in the Prime React data-table column.

I have added the same code as below to bind dynamic columns in the Prime React data-table.

columnsArray?.map((col) => {
  return (
    <Column
    key={col?.field}
    field={col?.field}
    header={col?.header} 
    style={{ width: col?.width + 'px', whiteSpace: 'nowrap' }}
    // style={{ min-width: col?.width + 'px', max-width: col?.width + 'px', whiteSpace: 'nowrap' }}
    sortable
    filter
    filterClear={filterClearTemplate}
    filterApply={filterApplyTemplate}
    reorderable={true}
    body={getAllFieldData}
   />
  )
 }
})

Everything is working as expected except the width property.

Also, I have tried max-width and min-width properties, and it works as expected.

If I use min-width and max-width and try to reduce the column size onColumnResizeEnd don't fire to reduce size of column due to min-width.

Can anyone help me with the same?

Thanks

Reproducer

https://stackblitz.com/edit/3ccbnb-ltg7xv?file=src%2FApp.jsx

PrimeReact version

9.4.0

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproducer and the DataTable/Column behavior described for PrimeReact 9.4.0. Compare direct width styling with min-width and max-width while resizing columns, then verify that reducing a column fires onColumnResizeEnd. Done means dynamic widths work and the resize callback fires in both directions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.