How can one put things that are not text as the header caption

[Amndeep7]

I want to put some stylized components in the header, but using the slot directly seems to convert everything into text.

Example:

    <template slot="layout-header">
      <c-grid-layout-row>
        <c-grid-header v-for="col of columns" :key="col.value" :width="col.width" :header-field="col.value">
          <span>
            <home-icon />
            {{col.text}}
          </span>
        </c-grid-header>
      </c-grid-layout-row>

Makes several headers that consist of Home icon [whitespace markdown removes] {the text}.

Looking at the code, it seems like this is intentional.

https://github.com/future-architect/cheetah-grid/blob/941a6f2583362534926256c666c46dd86a0fa35a/packages/vue-cheetah-grid/lib/c-grid/ColumnMixin.vue#L57

Could you please provide an example of how to put non-text components in the header?

[ota-meshi]

Thank you for posting this.

Since this grid works on <canvas>, you can draw only text and check box.

If you want to draw a check box, write as follows.

<c-grid-header 
  ...
  header-type="check"
  header-action="check"
  header-field="myFiled"
  @changed-header-value="myOnChange" />

[Amndeep7]

It seems kinda hacky, but if someone provided raw html in an svg format, could you make a new header type that would render the svg?

Example of hack

[ota-meshi]

Thank you for information!

I'll check out this SVG hack if I have time.

[Romiros82]

Hi. Add filter row to header column?