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.
You can define a span with data- attribute with category as value and set it the same way you are getting selected rows. Here is Playground link.
<span class="slds-badge slds-badge_inverse" >
SELECTED ITEMS PER TABLE -
<span data-count={table.category}>0</span>
</span>
JS:
getSelections() {
// ---- getting bar -------
console.log('bar', bar);
this.data.map(({ category }) => {
this.template
.querySelector(`[data-count=${category}]`)
.innerText = bar[category].length;
});
}
Output:
On the assumption I've understood your question correctly, we have done this as follows:
import LightningDatatable from 'lightning/datatable';
import matchCell from './exampleMatchCell.html';
/**
* Extends the lightning-datatable component to add a custom matchScore cell type.
* This custom cell uses a lightning-accordion to show a single collapsible section with an icon.
*/
export default class ExampleResultsTable extends LightningDatatable {
static customTypes = {
matchScore: {
template: matchCell
}
}
}
<template>
<lightning-accordion allow-multiple-sections-open>
<lightning-accordion-section name="breakdown" label={value.percentage}>
<lightning-icon slot="actions" icon-name={value.icon} variant={value.iconVariant}></lightning-icon>
<template for:each={value.notes} for:item="note">
<p class="slds-truncate" title={note.value} key={note.key}>{note.value}</p>
</template>
</lightning-accordion-section>
</lightning-accordion>
</template>
...
<c-example-results-table
key-field="Id"
data={_results}
columns={_columns}
onrowaction={handleRowActions}
hide-checkbox-column>
</c-example-results-table>
...
this._columns.push({
fieldName: 'score',
label: this.Label.ColumnMatch,
type: 'matchScore',
initialWidth: 250,
fixedWidth: undefined,
typeAttributes: {}
});
...
For us, our datatable gets rendered like the following example, where the "Match" column is the one containing an accordion:
The row height adjusts depending on whether the accordion is open or closed, as illustrated.
You will find documentation about handling columns with "custom data types" under "Creating Custom Data Types".
Best Answer
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:
This is a very minor work-around compared to building datatable from scratch