Positionable headers about vue3-table-lite

[linmasahiro]

Hi, @RaskaTheFurry
If you want to change style, you can ref here or #25
You will be not change any code and implement it.

Right position headers of 2nd column:

::v-deep(.vtl-table .vtl-thead .vtl-thead-th:nth-child(2)) {
  text-align: right;
}

[RaskaTheFurry]

Hello,
sorry for late answer

it would be great if we could use something like "Class and Style Bindings" even for headers instead of just using <style>. This would allow us to style even headers using conditions. A thing that is only possible with slots right now and only to data, if I undestand this component correctly.

[linmasahiro]

Hi, @RaskaTheFurry
Yes, I guess you are right. It use hard if have not [v-deep] knowledge.
I added new options to set header/column class or style(in-line), here has example. Hope helpful you.

        {
          label: "ID",
          headerClasses: ["bg-gold", "color-red"],
          columnClasses: ["bg-gray"],
          headerStyles: { background: "gray" },
          columnStyles: { background: "gold" },
          field: "id",
          width: "3%",
          sortable: true,
          isKey: true,
        },

Document
Example

[teguhsatria892]

better you give more props to set the position, like center, left or right, not only for header, but for column too,

[linmasahiro]

better you give more props to set the position, like center, left or right, not only for header, but for column too,

You can use 「columnClasses」or 「columnStyles」 to set the position or other.

[linmasahiro]

Hi, I closed this issue. If any questions, reopen it. thx.