Buttons

Buttons in STL make your tables interactive. They are defined using the `[button]` token.

Syntax

STL
[button text="Label" action="action_name" targetId="id_value"]

Attributes

`text`: The label displayed on the button.
`url`(optional): if you pass a url it redirects to that url
`action`(optional): A string identifier for the action (e.g., 'edit', 'delete')
`targetId`(optional): Associated ID for the action (e.g., product ID), this will be added as <button id="your-id" ... />
`variant`(default: 'default'): 'default', 'outline', 'ghost' (depends on theme support).

Example

STL
#table
cols: 3

[header]
Item | Price | Actions

[body]
MacBook Pro | $1999 | [button text="Buy Now" action="cart_add" targetId="mac_pro"]
iPad Air    | $599  | [button text="Buy Now" action="cart_add" targetId="ipad_air"]
...

Handling Clicks

The Structured Table Library handles button interactions in two ways:

URL Navigation: If a `url` attribute is present, the button will open the URL in a new tab.
Custom Actions: If an `action` attribute is present, a custom event named `st-action` is dispatched. You can listen for this event in your application.

Listening for Actions

To handle custom actions like 'edit' or 'delete', add an event listener for `st-action`. The event details will contain the action name, target ID, and button text.

tsx
useEffect(() => {
    const handleTableAction = (e: any) => {
        const { action, targetId, text } = e.detail;
        
        console.log(`Action triggered: ${action} on ID: ${targetId}`);
        
        switch (action) {
            case 'edit':
                // Open edit modal for targetId
                break;
            case 'delete':
                // Confirm deletion for targetId
                break;
        }
    };

    // Add listener to window or specific container
    window.addEventListener('st-action', handleTableAction);
    
    return () => {
        window.removeEventListener('st-action', handleTableAction);
    };
}, []);