Search code examples
cssprimereact

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-wrap: break-word;
}

causes the table to scroll horizontally, while the following:

table {
  table-layout: fixed;
  max-width: 100%;
  width: 100%;
}

tr{
  height: auto;
  word-wrap: break-word;
}

td{
  height: auto;
  word-wrap: break-word;
}

causes the text to be cut off if it goes too long. How can I get the text to wrap and grow in height? Barring that, how can I detect if it's too long so I can throw in an ellipsis […] and hover-text with the full text?

Solution

  • It turns out there was css that was applying text-wrap: nowrap for some reason. I applied wrap to that cell and all is now good in the world.