Table Filters

Table filters allow you to define custom filters for your data that are avaliable to your users.

Iridium supports 5 types of filters:

1. Text
2. Select
3. Switch
4. Date
5. Tabs

Getting Started

Filters are defined in your table's Filters method like so:

Table("my-table", driver).
    Columns(
        TextColumn("Name"),
    ).
    Filters(
        TextFilter("Name"),
        SwitchFilter("OlderThan30"),
        // etc...
    )

Filter Names

The name of your filter can be anything. It does not need to match a particular field.

Query

Query is where you can define the callback method to choice how to handle your filter.

Not all Query method signatures are the same. They are directly defined by your driver of choice and inserted through a mix of generics and type generation behind the scenes.

GORM

For resources using the Gorm driver, you're provide a direct reference to a query variable that you can mutate to describe a filter.

TextFilter("name").
    Query(func(query *gorm.DB, ctx context.FilterQueryContext) {
        // Only display models where the name contains the substring `ctx.Value`.
        // `ctx.Value` contains the text the user entered in the box.
        query.Where("name LIKE ?", "%"+ctx.Value+"%")
    }),

Array

For resources using the Array driver, you'll be passed a singular references to your model. You can then write a custom method on whether to include or filter this element.

As an example, below a TextFilter is created for a Job model. When a user types in the TextFilter, we'll compare all elements of the array using a callback that checks if the Name of the model (data.Name) matches the name typed by the user (ctx.Value). If true, those records will be displayed in the table.

TextFilter("name").
    Query(func(data *models.Job, ctx *context.FilterQueryContext) bool {
        return data.Name == ctx.Value
    }),

Advanced - Custom

Please see our custom driver section for an explanation how to satisfy our interfaces and insert your own custom callbacks by tying into our type generation methods.

Position

Filters can be placed in 3 locations on your table. They also can appear in multiple places at the same time.

The supported positions are:

1. Above your Table
2. Pinned in your table's header
3. Inside your filter modal

TextFilter("name").
    AboveTable(). // Place this filter above the table 
    Pinned(). // Place this filter directly in your table header
    InFilterModal() // Place this filter inside your filter modal

Label

The Label method allows you to define a label to be associated with your text input

TextFilter("name").
    Label("Enter a name")

Inline

The Inline method allows you to position your Label inline with the filter itself

TextFilter("name").
    Inline()

Disabled

The Disabled method allows you to disable your filter input.

WARNING

Please note the underlying route is still registered for this filter. This is a css disabled property applied to your filter's <input/> tag

TextFilter("name").
    Disabled()

Attributes

The Attributes method allows you to supply some attributes to be rendered on the <input/> of your filter:

TextFilter("name").
    Attributes(map[string]any{
        "@click": "alert('You clicked the filter!')",
    })

Default Value

The default value is an alias for DefaultArrValue. It allows you to provide a single string as the default filter value:

TextFilter("name").
    DefaultValue("Joe Smith")

Default Arr Value

The default arr value allows you to provide a default value for your input.

SelectFilter("Jobs").
    DefaultArrValue([]string{
        "1","5","8",
    })