Questions tagged [primereact]
Use this tag for questions about PrimeReact, a collection of UI Components for React.js. Questions tagged [primereact] should also be tagged [reactjs], but NOT [primefaces].
primereact
362
questions
0
votes
0
answers
3
views
Is there a way to create vertical header for table in PrimeReact library?
I want the headers in my table to be displayed vertically along the left side of the table instead of the top.
I’ve looked through the PrimeReact documentation and haven’t found a clear solution for ...
0
votes
0
answers
19
views
Next.js Typescript PrimeReact FileUpload preparation
right now I'm working with Next.js and Typescript in a little project of mine.
For doing a FileUpload I'm using PrimeReact and the module FileUpload.
To make it work, I searched for a tutorial and ...
- 93
0
votes
2
answers
42
views
Date Sorting with Prime React
I'm having issues sorting a datatable with prime react on the Date column.
Here is my code
<Column
field="Date"
header="Date"
sortable={true}
body={(rowData: any)...
- 407
0
votes
0
answers
18
views
How can I increase the width of the Password PrimeReact component
I'm using PrimeReact to do my front-end components and i can't change the width in the password component, but in the TextInput component is working.
Code:
'use client'
import CPFInput from "@/...
2
votes
1
answer
18
views
PrimeReact AccordionTab Not Rendering When Wrapped in Custom Component
I'm facing an issue where my custom FilterAccordionTab component, which extends PrimeReact's (V8) AccordionTab, is not rendering its content. However, when I directly use PrimeReact's AccordionTab ...
- 227
1
vote
1
answer
38
views
radiobutton appears twice primereact datatable reactjs
Working on primereact datatable checkboxes and radiobuttons, in few environments we deployed the applciation, we can see the radio button or checkboxes appears twice just like below:
I can see some ...
- 478
1
vote
2
answers
29
views
How to reference .this from within an instance of react interface?
I'm using a primereact component, whose props include a function, and I want to use one of the other props in this function. The overall scheme of things looks like this:
interface Props {
label?: ...
- 1,107
0
votes
0
answers
18
views
Does PrimeReact's Editor support highlight.js?
I'm using PrimeReact's Editor component and trying to add syntax highlighting to it. It is based on the Quill library so I tried to use highlight.js lib as the Quill's documentation says:
import hljs ...
1
vote
0
answers
38
views
Unable to set column width dynamatically in PrimeReact data-table
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 ...
0
votes
1
answer
29
views
Objects are not valid as a React child (PrimeReact)
I am having a array of data which is having multiple objects. I want to print the values inside the table using PrimeReact Table.
But when I am passing the data inside value field of DataTable I am ...
1
vote
1
answer
54
views
prime react - How can I make newly added rows instantly editable?
I'm using prime react table to render dynamic data in react. I built my component with the help of the datatable docs.
When I click the add row button, I would like that the new added row to be ...
- 73
0
votes
0
answers
20
views
Using Material Design 3 (You) theme with PrimeReact?
now I use PrimeReact in my Next.js project and use theme of stylish of this PrimeReact components, as Lara, MD, MD-compat. But only it themes is preseted in PrimeReact. PrimeReact don`t have theme for ...
1
vote
0
answers
33
views
How can I mark a checkbox option from TreeSelect component with the selection of another option from the same dropdown?
everyone!
I'm using the TreeSelect component with checkboxes from PrimeReact 7.2.1. I want to implement the following behaviour: When I click on option Cost of Goods Sold to External Customer (see ...
0
votes
1
answer
44
views
Change styling navbar from PrimeReact
I want to change the background color of the navbar that was created using PrimeReact. But I do not know where do I put the CSS styling. I try many time but none of them work. I only want to change ...
- 1
0
votes
0
answers
45
views
Primereact version 10.6.6 checkbox duplication problem
I have prime-react version 9.6.4, when I update the version to 10.6.6 then checkboxes are like this. Anyone have any idea how to solve it ?
It wasn't supposed to happen. I have gone through the ...
0
votes
1
answer
99
views
Primereact password component width doesn't fit container
I am new to React and I started working on a Sign up page, I am trying to make the password fit the container but it doesn't seem to make a difference no matter which method I try, Is there even a way ...
- 11
0
votes
0
answers
16
views
Cascade select options is stripped on small screens
The cascade select options is stripped/not visible on mobile devices. Is there a way we can change position of those on smaller screens ?
The options should be visible on smaller screens as well ...
- 29
0
votes
1
answer
32
views
Getting error when selecting autofill value in prime react input number component
I am getting an error when i try to select a autofill value
I am using prime react inputnumber component
enter image description here
when i debug ,there is no value in event.Even if to turn off ...
- 21
1
vote
1
answer
147
views
I'm not able to render data in the prime react editor
b static data also isn't rendering in the PrimeReact Editor.There is data in the the backend the data is coming in fine but it doesn't show up on the editor
I was trying to render the data to get to ...
0
votes
0
answers
12
views
Dragable list with expandable input items
I am creating a web app that needs the following feature:
Creating an ordered list of items.
Each item has several inputs:
Geolocation or list of geolocations
Several dropbox items
Several free text ...
- 1,552
0
votes
0
answers
35
views
how to filter data with comma separated string in prime react multiselect
How to show filter result as a comma separated string like if i search "rome, new york" then that both item will be display in the dropdown option list.
import { MultiSelect } from '...
- 1
0
votes
0
answers
55
views
Prime React Menubar not behaving correctly on small screen
Im trying to use MenuBar component from Prime React library, but for some reason, the menubar button that triggers menu bar on small screen does not show, and menubar is showing automatically. this ...
0
votes
0
answers
25
views
Primereact Datatable Language
I have a project that I developed using primereact and I use primereact/datatable in this project. Things like filtering operations and buttons in this table are in English, which is fine for me, but ...
0
votes
0
answers
42
views
primereact multiselect custom filter not working
I have multiselect prime react component like this
<>
<MultiSelect value={''} onChange={(e: MultiSelectChangeEvent) => {}} options={[{ name: 'New York', code: 'NY' },
{...
- 1
0
votes
2
answers
39
views
ReactJS Returning props.value.map is not a function when parsing a json file
I am trying to teach myself ReactJS using PrimeReact. i am making a simple application to track crypto holdings in a wallet i own. i have this code to create a table with base data from a json file:
...
0
votes
0
answers
49
views
Testing PrimeReact SplitButton with RTL and Jest: Displaying Items on Click
I’m working with the PrimeReact SplitButton component, and I want to write tests to ensure that it displays the additional options correctly when clicked. Specifically, I’d like to verify that the ...
0
votes
1
answer
39
views
Cannot pass template component as a property in NextJS
Here is the code:
// page.tsx
function buttonsTemplate(book: Book) {
return (
<div>
<Button>Remove</Button>
<Button>Modify</Button>
</div>
)...
- 41
0
votes
0
answers
17
views
What is the value in Column Primereact
I need to create a function that deletes the product I selected in an expanding line in Primereact.
const actionProdutoBodyTemplate = (rowData: Sistema.DetalhePedidos) => {
return (
<...
1
vote
1
answer
177
views
Cannot use 'changeTheme' from PrimeReact Context
I am trying to use the changeTheme functionality as documented here on prime reacts website here
I have setup a very basic online sandbox here
//CSS
import "./App.css";
import { ...
- 13
0
votes
0
answers
170
views
Prime React calendar : range and multiple mode support for Month and year Picker
I am using Prime react calendar date range in one of my project, but when i enable multiple mode with range selection monthpicker and yearpicker not working.
import React, { useState } from 'react';
...
- 129
0
votes
0
answers
53
views
infinite scroll of primereact multiselect
On dropdown click call API with first 10 item and display in the dropdown list. after then if user scroll down of the dropdown list then again call api with other 10 item. also same thing filter if ...
- 1
-1
votes
1
answer
343
views
Primereact styles not applying to components
I've discovered that preflight from tailwind is causing the problem. I've read the docs and found this:
CSS Layer
Tailwind CSS can be used with styled or unstyled modes of PrimeReact. In both cases, ...
0
votes
0
answers
36
views
PrimeReact Dropdown doesn't close after change
I am new to react and am completely lost as to why my primereact dropdown will not close. It sets the new value and the current datagrid reacts and repopulates to the new value...... but the dropdown ...
- 491
1
vote
1
answer
468
views
Prime React & Next.js hydration warning issue
My Simple Set Up
I am in the process of practicing with nextjs and just made a brand-new app with the latest next.js (v14) which is working nicely. The UI library that I've enjoyed using is Prime ...
0
votes
1
answer
98
views
Transpose table data in js
I'm working with the datatable component from prime react. This component takes an array of objects and creates a column for each key of the object and a row for each object in the array. This means ...
- 485
0
votes
0
answers
11
views
How to open dropdown options of the top potion instead of bottom
import React, { useState } from "react";
import { MultiSelect } from 'primereact/multiselect';
export default function BasicDemo() {
const [selectedCities, setSelectedCities] = useState(...
- 1
1
vote
1
answer
218
views
PrimeReact carousel using function when using onPageChange?
I'm newer to react and I'm stumped by this issue. I'm using a primereact carousel and trying to do 2 things.
In the item template I want to show 'Showing X of X orders'.... essentially showing where ...
- 491
0
votes
0
answers
87
views
PrimeReact custom paginator template rendering for LastPageLink
I am trying to Customly render paginator that will be a kind of like this 1 2 3 ... 10/ 1...8 9 10 / 1 ..3 4 5..10 depends on the current page. how I can render this for my primereact datatable ...
-1
votes
2
answers
172
views
How to wrap text in a cell in a datatable?
I've got variable length text being displayed in a column within a PrimeReact DataTable. In my experimentation, the following:
table {
max-width: 100%;
width: 100%;
}
td{
height: auto;
word-...
1
vote
1
answer
393
views
Tailwind and Primereact in React app, how to setup App.css
App.js:
import React from "react";
import "primereact/resources/themes/saga-blue/theme.css";
import { PrimeReactProvider } from "primereact/api";
import "./App.css&...
1
vote
0
answers
95
views
Next js(14) is requesting for assets on each request
I have started with Next.js 14(App Router). I am using a component library PrimeReact, using this library i have to switch themes. Now in primeReact if I have to switch themes for that it have ...
- 13
0
votes
0
answers
189
views
How to configure material-icons, primereact and tailwind in my NextJs project?
I am trying to configure material-icons, primereact and tailwind in my NextJs project. But styling icons are proving to be an issue. The material-icons css has higher priority than tailwind and is ...
0
votes
1
answer
139
views
PrimeReact Calendar mask bug with timeOnly
I am trying to create calendar component. I need to use PrimeReact with mask and timeOnly.
The problem is that it has bug: when I enter for example 1212 (it should display 12:12), it displays 12:01. ...
- 522
1
vote
1
answer
359
views
Primereact DataTable filtering based on column body template
Is there a way to configure a primereact datatable global filter such that it will filter based on what is displayed in the cell body (templated) instead of the raw value?
For example, I have these ...
- 43
0
votes
1
answer
61
views
How to add autocomplete in antd editable Cell table
When a user click edit, the edittable cell becomes active, now when I start typing I want autosuggest to appear.
I have a set of options, while the user type I want that to be suggested. My current ...
- 73
0
votes
0
answers
38
views
Next.js + Typescript + primereact autocomplete
I'm trying to fill in an object (json) when I click on an option in my autocomplete. However, the json is always empty in the first select. When I redo the query and select again, the json is filled ...
- 1
1
vote
1
answer
186
views
Register Calendar Component with React Form Hook
Hello I trying to register "Calendar" component from "Prime React" library with "React Form Hook". The problem is that I can't set default value to the input.
This is ...
- 13
0
votes
1
answer
31
views
How to render icon at right end of cell?
I have a Primereact v9 ReactJS code
<Column
field="status"
header="Status"
style={{
maxWidth: ...
- 51
1
vote
0
answers
89
views
How can I render icon if my column, if I have condition?
I have a Primereact v9 ReactJS code
<DataTable
<Column field="status" header="Status"
style={{
...
- 51
1
vote
1
answer
329
views
Making React context available without top level wrapping
I would like to use latest version of prime-react, but I see a trouble, that I will have.
Here is a snippet from their docs (https://primereact.org/installation/)
import { PrimeReactProvider } from '...
- 1,604