Tapestry: custom component and title in Grid header

I need to change the title of a grid header, and add a custom component to it. I use a .properties file to set the title, and this template code to add the custom component:

<table class="table table-striped" t:type="grid" t:source="data" t:rowsPerPage="50" t:pagerPosition="bottom">

    <p:specialHeader>
        <t:tooltip tip="tipData"></t:tooltip>
    </p:specialHeader>

</table>

When viewing the grid in a browser, the component appears but there is no title.

If I set a title in the template, like so, then it loses the sort functionality:

    <p:specialHeader>Title
        <t:tooltip tip="tipData"></t:tooltip>
    </p:specialHeader>

How can I get the title, sort and custom component to appear?

Solution

As I said here you can't combine the default header block and your own custom header block, it's either one or the other.

I think you're best bet is a mixin. Take a look at Taha's blog post here where he creates a HelpText mixin which applies to a Label component. His mixin looks at the message catalog for a "propertyName-help" entry and adds a "title" attribute to the DOM. The blog post takes it one step further and uses a ComponentClassTransformWorker2 to atach the HelpText mixin to every label (even the ones inside the BeanEditor component).

You could do the same thing but you would create a mixin for either Grid or GridColumns (Grid delegates to GridColumns to draw the headers). If you'd like some examples of Grid mixins, take a look at my tapestry-stitch demo's here and here.

So, you won't be reusing the tooltip component, you will be copying the behaviour. This will most likely involve adding a "data-tooltip" attribute to the th DOM elements serverside. You can then fire some javascript on the client to find all elements with a "data-tooltip" attribute and do some UI magic.