I have a requirement to do the following in a Lightning data table:
- When edit panel opens, the text inside should be selected. Today the default behavior is that pointer is at the end of the text (likely when component is focused in edit panel in primitiveDatatableIeditTypeFactory.js) and users have to select it manually.
Manually selected text in Lightning datatable input
primitiveDatatableIeditTypeFactory.js :
@api
focus() {
if (this.concreteComponent) {
this.concreteComponent.focus();
}
}
When user navigates from cell to cell using TAB, skip the non editable column and jump directly to editable column opening the editable panel with selected text.
There are bunch of data tables in accordion, when the tab is pressed in the last editable cell of first lightning Datatable, it should jump to first editable cell in second data table.
All above is a default behavior if I use an HTML table with lightning inputs but I need this in LWC datatable.
There are not many events exposed by data table to do this. There are cellchange and click events but that does not give me the option to achieve above.
Can this be done by exposing primitive elements of LWC? One link I could find where some one tried this is below but there are no answers:
how-to-expose-lightning-primitive-elements-for-embedding-into-lwc-html-files-of
Is there a way this can be done?
I tried text selection using custom type columns and with type attributes but did not work.
customNumberEdit.html:
<template>
<lightning-input
type="number"
value={editedValue}
required={required}
label={columnLabel}
selection-start={typeAttributes.selStart}
selection-end={typeAttributes.selEnd}
min={typeAttributes.min}
data-inputable="true"
class="slds-float_right"
data-action-triggers="enter,space">
</lightning-input>
</template>
customTypeDatatable.js:
import customNumberEditTemplate from "./customNumberEdit.html";
export default class CustomTypeDatatable extends LightningDatatable {
static customTypes = {
customNumberType : {
template : customNumberTemplate,
editTemplate: customNumberEditTemplate,
standardCellLayout : true,
typeAttributes: ["status", "min", "selStart", "selEnd"],
}
}
}
LWC imprting custom data table:
const COLS = [
{ label: 'Employees', type: 'customNumberType', fieldName: 'NumberOfEmployees', editable: true,
typeAttributes: {
status: {fieldName: 'status'},
min: 0,
selStart : 0,
selEnd : 10
},
cellAttributes: {
class: 'slds-theme_alert-texture'
}
}];
LWC HTML:
<template>
<c-custom-type-datatable key-field="Id" data={accounts} columns={columns} show-row-number-column>
</c-custom-type-datatable>
</template>