3

When using the lightning-datatable component, by default each row has a checkbox beside it (unless so explictely specify hideCheckboxColumn to false). So when a row is selected the onrowselection event is fired for that row.

I was wondering if there's a way to detect when the checkbox at the header is selected (the one that selects all rows). I need to detect this since I want to implement a paginator and when the checkbox in the header is checked I want to also check rows in the other pages.

Any viable way to accomplish this?

3 Answers 3

3

Yes, this is possible. The datatable connectCallback function registers handlers for selectAll and deSelectAll

I needed for modify the working of selectAll and Deselectall with respect to disabled rows. So i created a new LWC extending the lighting data table and overrode the connectedCallback function and the handler method too.

This code is from the datatable.js - the js file for the base lighting datable component.

connectedCallback() {
        const {
            handleResizeColumn,
            handleUpdateColumnSort,
            handleCellFocusByClick,
            handleFalseCellBlur
        } = this;
        this.template.addEventListener('selectallrows', handleSelectAllRows.bind(this));
        this.template.addEventListener('deselectallrows', handleDeselectAllRows.bind(this));this.template.addEventListener('selectrow', handleSelectRow.bind(this));
    this.template.addEventListener('deselectrow', handleDeselectRow.bind(this));
    this.addEventListener('rowselection', handleRowSelectionChange.bind(this));
1

If the rowselection event is not being fired on check all - then currently there aren't any (public) custom events that are emitted. Per the docs we only have:

  • cancel
  • resize
  • rowselection
  • save
  • sort

Theoretically - the workaround would be to overlay a div and capture a click event with a delay (every time) and check:

const selected = this.template.querySelector('lightning-datatable').getSelectedRows()

And do some logic based on your known rows.length vs that selected.length;

0

if you implemented a paginator in lightning-datatable use key-field="AnyUniqueId" attribute to avoid the rows checked in other pages.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .