LWC Datatable - Add an action button on top left corner

Question

Context : I created my own table that haves a component in the top left corner, that toggles a window with a checkbox group to show or hide some columns.

The problem : I now have to port my table into the <lightning-datatable> component. I successfully implemented the custom datatype feature, but I haven't found a way to add a component as a header label.

What I tried : searched the documentation and found nothing... My guess is just to create an empty column, and add a position: absolute to that component.

Screenshot : What I would like to add into the lightning data-table :

Answer 1

There's no support for this. Further, that specific area is reserved for the "Select All" checkbox. What you're looking for is to add Header Actions. You'll want to see the section on Creating Header Actions in the documentation. Basically, you can add this kind of code:

    actions: [
        { label: 'All', checked: true, name: 'all' },
        { label: 'Published', checked: false, name: 'show_published' },
        { label: 'Unpublished', checked: false, name: 'show_unpublished' },
    ],

---

Which you can handle with onheaderaction:

<lightning-datatable
    columns="{mycolumns}"
    data="{mydata}"
    key-field="id"
    onheaderaction="{handleHeaderAction}"
></lightning-datatable>

---

handleHeaderAction: (event) {
    // Retrieves the name of the selected filter
    const actionName = event.detail.action.name;
    // Retrieves the current column definition
    // based on the selected filter
    const colDef = event.detail.columnDefinition;
    const columns = this.columns;
    const activeFilter = this.activeFilter;

    if (actionName !== activeFilter) {
        var idx = columns.indexOf(colDef);
        // Update the column definition with the updated actions data
        var actions = columns[idx].actions;
        actions.forEach((action) => {
            action.checked = action.name === actionName;
        });
        this.activeFilter = actionName;
        this.updateBooks();
        this.columns = columns;
    }
}

All of this code is drawn from the documentation, so you'll need to make any adjustments you need.

If you decide to use an absolute-positioned element, be aware that it may fail a Security Review if you're publishing a public component/app, it may interfere with screen readers, and it may have other accessibility problems.

You can use an "empty" header cell for this, just specify the actions without specifying a label. You can put this in any position you like. Just remember that the left-most column is reserved for row numbers and selectors, so you shouldn't try to put anything there.