7

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.

4 Answers 4

3

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

1
  • Oh nice, extending the datatable with custom component should be just what I need. Thank you Oct 1, 2019 at 19:07
5

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.

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>
2

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;
}
  1. Import the loadstyle & static resource file in your js.
import { loadStyle } from 'lightning/platformResourceLoader';

import HideCheckboxCSS from '@salesforce/resourceUrl/RevokeTenancyForm';
  1. 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 );
            });
    }
2
  • Hi Sam, welcome to SFSE and thanks for your answer, I look forward for more contributions. This solution of hacking via CSS is not optimal and should not be used as it relies on CSS class names by salesforce. Other answers have better solutions.
    – Raul
    Oct 14, 2022 at 13:26
  • 1
    Hi Rahul, Thanks for the feedback. It can also be done without the class name by selecting HTML tags only. However, in other answers, it will restrict us to select only one row in a table or we need to create a custom lighting web component.
    – Sam
    Oct 14, 2022 at 15:21

You must log in to answer this question.

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