primefaces / primefaces/primereact
DataTable: width is not working for column and event onColumnResizeEnd don't fire on reduce size of column
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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