Custom Column

The Custom Column allows you to provide your own .templ component to be rendered in a new column.

You can create a custom column as follows:

CustomColumn("my-custom-column")

Creating your component

It's best to freshen up on templ's documentation for how to create a custom component.

Here, for the purposes of illustration, we're using templ component functions to inline our custom components. We recommend for larger component, placing them in their own area in your project with a dedicated .templ file.

Component

The component method allows you to provide a single .templ component to be rendered in each cell of your custom column

// Iridium has it's own `context` package, so please be mindful of collisions.
// You can alias either one to avoid this.
import netCtx "context"

CustomColumn("current-time").
    Component(
        templ.ComponentFunc(
            func(netCtx netCtx.Context, w io.Writer) error {
                _, err := io.WriteString(
                    w, "<span>Hey! This is a custom cell!</span>",
                )
                return err
            },
        ),
    )

Component Callback

The ComponentFn method allows you to customize what templ component gets rendered on an individual cell basis. You'll be provided the current cell's context, and can return the appropriate component based on your callback method

// Iridium has it's own `context` package, so please be mindful of collisions.
// You can alias either one to avoid this.
import netCtx "context"

CustomColumn("Custom").
    ComponentFn(
        func(ctx *context.TableCellContext[models.User]) templ.Component {
            return templ.ComponentFunc(
                func(netContext netContext.Context, w io.Writer) error {
                    _, err := io.WriteString(
                        w, fmt.Sprintf(`
                            <td class="px-4 py-2 text-sm" @click.stop >
                                <button class="btn btn-destructive">%s</button>
                            </td>
                        `, ctx.Model.Name),
                    )
                    return err
                },
            )
        },
    ),

Tips

Handling Click Events

You absolutely can include custom buttons or other click handling into your custom components.

Please be aware though that by default, Iridium makes the entire row clickable to enable redirecting to (say) a view page. To avoid the redirect after clicking a button in a custom cell, please add Apline's @click.stop to your component

import netCtx "context"

CustomColumn("custom").
    Component(
        templ.ComponentFunc(
            func(netCtx netCtx.Context, w io.Writer) error {
                _, err := io.WriteString(
                    w, `
                    <button @click="alert('hello')">
                        I will redirect after the alert!
                    </button>
                    
                    <button @click.stop @click="alert('hello')">
                        I will NOT redirect after the alert!
                    </button>
                `
                )
                return err
            }
        )
    )

Re-using Iridium Components

Iridium allows you to reuse it's prebuilt components anywhere in your custom templ component by calling out to them. This means you could borrow our buttons, inputs, select boxes, etc. for your custom column.

You can learn more about that here.

Re-using Iridium Classes

We recommened using inspect element or taking a look at our core.css file to find the relevant class for your custom component.

Going Futher (Advanced)

If you need even more control over your custom components, the pipeline that renders them, (like other columns) is overridable. See more here