Individual Column alignment

[shopno111]

Expected Behavior

Can we use specific alignment ?, if yes, then how we can do that.
Suppose I want to do right align in right with header and data .

[joaocarmo]

Hi @shopno111, you can use CSS to achieve what you want. Just add this snippet somewhere where your table is being rendered:

/* Targets the head `th` and the body `td` */
.rsdt th, .rsdt td {
  /* You you only need the !important rule if you're overriding some other CSS */
  text-align: right !important;
}

You can always use the .rsdt selector to target this library's table.

[shopno111]

as your way it will be all column, I want to do specific column only.

Example :
I have following columns
Name, Phone, Email, Date , Amount

Here Name, Phone, Email, Date will be Left Alignment & Amount will be Right Column

In your Headers, if we can do following way, it will be fetter

amount: {
text: "Amount",
sortable: true,
filterable: true,
headerClass: "rightAlign",
bodyClass: "rightAlign",
transform: (value, idx, row) => (
"$ "+value
)
}

headerClass = to styling table header part (th)
bodyClass = to styling table body cell like (td)

If we can use custom class in there it will be good

[joaocarmo]

If you know the position of the columns, you can also target that using CSS and the nth-of-type selector. For example:

/* Align the 3rd column's content to the right */
.rsdt th:nth-of-type(3), .rsdt td:nth-of-type(3) {
  text-align: right !important;
}

Though I understand the limitation. I'm considering adding a data attribute to the column (header and body rows) which you can then use to easily target using CSS:

/* Align the `amount` column's content to the right */
.rsdt th[data-column-name='amount'], .rsdt td[data-column-name='amount'] {
  text-align: right !important;
}