How to Right-Align Cell Content in a UTable?
I want to right-align the content of specific cells in a UTable. When I add
class: "text-right" to a column definition, it only aligns the column header but not the cell content. For example:
const columns = [
{ key: "kostartebene1", label: "Kostart", sortable: true, direction: "asc" },
{ key: "1", label: "Jan", class: "text-right" },
{ key: "2", label: "Feb" },
{ key: "3", label: "Mrz" },
{ key: "4", label: "Apr" },
{ key: "5", label: "Mai" },
{ key: "6", label: "Jun" },
{ key: "7", label: "Jul" },
{ key: "8", label: "Aug" },
{ key: "9", label: "Sep" },
{ key: "10", label: "Okt" },
{ key: "11", label: "Nov" },
{ key: "12", label: "Dez" },
];
Only the header text is right-aligned. How can I also align the cell content to the right?2 Replies
Hi @ninox023. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To right-align the content of specific cells in a UTable, you need to use the
rowClass property instead of class in your column definition. The class property only applies to the header cell, while rowClass applies to the data cells in that column.
Here's how you can modify your column definition to achieve right alignment for both the header and cell content:
By adding rowClass: "text-right" to each column definition, you ensure that both the header and the cell content are right-aligned.
This approach is based on the information provided in the Nuxt UI Table documentation, which states that you can use the rowClass property to apply classes to the data column cells.
Remember that the class property applies to the header, while rowClass applies to the data cells. If you want to align only the cell content and not the header, you can omit the class property and only use rowClass.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@804348529169399859> Kapa.ai is still learning and improving, please let me know how I did by reacting below.