LWC Datatable any possible way to remove 'select all' checkbox?

Question

So the datatable does ALMOST everything I need for my component, very handy. But I only want one selection of a row at a time. I want users to have to actually click each row if they want to select a row, not be able to do a select all.

If it cannot be hidden at all while keeping the other checkboxes, than I would have no choice but to do a custom table, which is painful to do when the LWC datatable is so close to being just what I need.

Answer 1

This is not possible as a standard. However you can create custom lightning web component with checkbox. You can refer to How to use custom LWC lightning component in lightning-datatable for detailed explanation on how to use custom LWC component in a column. With this solution you will not get select all checkbox.

Custom component HTML:

<template>
    <lightning-input type="checkbox" label="Select" variant="label-hidden" name="input1"></lightning-input>
</template>

This is a very minor work-around compared to building datatable from scratch

Answer 2

Coming in late here OP but this is possible with standard functionality in the platform.

Include the maxRowSelection attribute within your aura lightning datatable definition defaulted to 1, pseudo:

<lightning:datatable
    ...
    maxRowSelection="1"
/>

this will remove the selectAll checkbox and transform the checkboxes to radio buttons as specified here: https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/specification.

Answer 3

If you don't mind radio buttons, for the LWC lightning-datatable, you can use the max-row-selection attribute and set it to 1:

The maximum number of rows that can be selected. Checkboxes are used for selection by default, and radio buttons are used when maxRowSelection is 1.

Sample code:

<lightning-datatable
    key-field="id"
    data={data}
    columns={columns}
    max-row-selection="1">
</lightning-datatable>

Answer 4

This can be done through the CSS.

1. Create HideCheckbox.css file.
2. Add the below CSS selector in it and upload it to static resource.

table tr:first-child th:first-child div{
    display: none;
}

3. Import the loadstyle & static resource file in your js.

import { loadStyle } from 'lightning/platformResourceLoader';

import HideCheckboxCSS from '@salesforce/resourceUrl/RevokeTenancyForm';

4. Load the static resource file in renderedCallback.

    renderedCallback() {        
            Promise.all([
                loadStyle( this, HideCheckboxCSS )
                ]).then((result) => {
                    console.log( 'Files loaded');                         
                })
                .catch(error => {
                    console.log( error.body.message );
            });
    }