0

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?

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

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));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.