Alpine

Iridium's table component maintains some client side state via an Alpine data component.

Common Alpine state

Here is a selection of some common alpine variables you can access via attributes throughout many of the components you'll use apart of your table:

selectedRows: [],
rowIds: [],
filters: {},
sorts: {},
bulkActions: [],
search: '',
page: 1,
perPage: 10,

More Table State

Please checkout the javascript for the table component directly to see everything you can tie into! Link

Custom actions + Alpine Example

When working with custom actions, like header actions, you're able to tie into our alpine state client side to take more control of your table.

For example, here we're creating a header action that when clicked will set the search field of your table to a default:

Table(driver).
    HeaderActions(
        // Clicking this header action updates your search to be
        // 'licorice' on the client.
        // Since our table component has a watch set for that variable
        // clicking will automatically perform that search for you!
        // Delicious and useful 🍬
        HeaderAction("my-action").
            Style(config.ButtonStyleGhost).
            Icon(icons.Search).
            Attributes(map[string]any{
                "@click": "search = search == '' ? 'licorice' : ''",
            })
    )