I'm trying to get all the columns and their headers to align:
But everything seems to have a mind of its own and I get this:
The code I am using is pretty simple:
<DataTable
:value="someValue"
responsiveLayout="scroll"
:scrollable="true"
scrollDirection="both"
class="p-datatable-lg"
scrollHeight="500px"
>
<Column field="field1" header="Service"/>
</DataTable>
I've tried a host of things, namely setting the width of a column like so:
style="min-width:200px"
The current solution is to simple remove scrollDirection="both"
which results in this:
We want to prevent that word wrapping because it is hard to read.
But that also results in misaligned columns. Has anyone faced this issue and how did you resolve it?
Thank you!