0

In the SDLS and Lightning examples provided by Salesforce, the design appears to call for a user interaction for most editing cases (except for checkbox) to follow this pattern:

  1. The cell contains a formatted display of the value in question. (ie: formatted-date-time)
  2. Upon hover, the pencil icon shows on the right side of the cell and is clickable.
  3. Once clicked, a popover opens to show the appropriate input field for the datatype in question. (ie: DateTime Input)

Following that pattern, it remains to be seen or documented how to customize the input field in step 3 above. If I desired to customize the DataTable experience to have a different input type (outside of the currently available types), for example a Combobox - I would expect to be able to specify the the DataTable configuration to provide the following user interaction:

  1. The cell contains a custom rendering of a list of selected values, ie: a comma separated list of selected values from an array of objects, specified using the template of a custom datatype following the guides & answers linked below.
  2. User hovers over the cell, and sees the pencil icon show
  3. Clicking the pencil icon will show the "cell edit" popover, with a Combobox as the input type, working as expected.

My question is not about customizing the cell - that has already been answered as here.

I'm asking now to customize the popover content? Is there another hidden key (alongside template) that we can pass to the column config?

The primary reasons I'm asking is to add functionality that does not exist as of today, and I'd like to do so by sticking with the SLDS pattern as described above. Unfortunately, the previous answers that have been provided / linked will will cause two things:

  1. In the case of a large table, an advanced field (ie: Combobox) that is rendered in one or more columns of the table, can only lead to performance problems. Rendering raw text instead of a form element would avoid those potential performance issues, and only rendering the advanced input field when the cell is being edited means that there's only one instance of that form field rendered into the DataTable at any given time.

  2. The SDLS design specifies a specific height for the DataTable cells - by rendering an input field of any kind (excepting checkbox) directly into a cell - you cause the height of the DataTable row to be stretched vertically - breaking the SDLS design for an editable DataTable. Although minor, rendering raw text will alleviate this break from the established design.

2
  • 1
    Hello, have you tried simple implementations with custom Data Types to see how they behave with Inline Edit?
    – ytiq
    Aug 17, 2020 at 22:28
  • @ytiq yes, of course. the existing behavior leaves much to be desired. best we can tell, there is no way to define a custom data type and retain any of the existing "inline edit" functionality. no mouseover pencil icon on the cell, no way to define what renders in the cell without overriding the whole template. no ability to use the existing "inline edit" popover functionality. from my perspective, the current "simple implementations" do not align with the design or functionality of the DataTable with InlineEdit as Salesforce has implemented. I'm hoping to do add a custom type the right way. Aug 19, 2020 at 0:05

0

You must log in to answer this question.