Datatable column header displayed in each row

UI Components for React
Post Reply
Posts: 1
Joined: 17 Feb 2023, 19:43

17 Feb 2023, 20:15

import './App.css';
import React, { useEffect, useState } from "react";
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import axios from "axios";

function App() {

const [users, setUsers] = useState([])

const fetchData = () => {
return axios.get("/api/user/users")
.then((response) => setUsers(;

useEffect(() => {
}, [])

return (
<div className="card">
<DataTable value={users}>
<Column field="id" header="ID" ></Column>
<Column field="first_name" header="First Name" ></Column>
<Column field="last_name" header="Last Name"></Column>
<Column field="email" header="Email"></Column>

export default App;

And the results in Chrome:

ID1 First NameJoe Last NameSmith
ID2 First NameJohns Hopkins Last NameUniversity
ID3 First NameJohn Last NameDoe
ID4 First NameJane Last NameDoe

Not sure why the column header is being displayed in each row?

Posts: 3539
Joined: 22 Apr 2013, 15:48

20 Feb 2023, 17:28

I do its because you must not be using the latest CSS from PrimeReact it should be hiding those as its for responsiveLayout="stacked" so the UI changes on mobile displays!

If you don't want to update your CSS and get rid of that simple change your datatable to responsiveLayout="scroll".
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile:
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.3
PrimeReact 8.7.3

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest