Datatable column header displayed in each row

[pittsox64]

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(response.data));
}

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

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>
</DataTable>
</div>
);
}


export default App;

And the results in Chrome:

ID1 First NameJoe Last NameSmith Emailjsmith@example.com
ID2 First NameJohns Hopkins Last NameUniversity Emailjhopkins@example.com
ID3 First NameJohn Last NameDoe Emailjdoe@example.com
ID4 First NameJane Last NameDoe Emailjadoe@example.com

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

[Melloware]

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".