Add support for custom props for rows in EuiBasicTable and EuiInMemoryTable.

[cjcenizal]

Closes #867

This adds support for a __props__ property on the item which defines a row. Alternatively we could define the row item like this:

{
  cells: { /* define each cell here */ },
  /* Add pass-through props here */
}

Though this would be a breaking change, and I think adding pass-through props will be a rarity, so I decided to just create an additional property with the underscores to avoid colliding with any of the other properties.

While I was in this code I also slightly reorganized and simplified the tests. I can extract this to a separate PR if anyone objects.

[peteharverson]

LGTM

Was wondering if the current table columns property is sufficient for allowing custom props at the cell level? e.g if you needed to know the individual cell a user was clicking on what would be the best way of doing it?

[peteharverson]

nit - did you mean to add this trailing comma here?

[cjcenizal]

Yep this was deliberate. Good spot!

[cjcenizal]

I'm having second thoughts on this approach. The items with which we populate a table could come from anywhere in the codebase, e.g. an external service or even a Redux store. It seems like this solution conflates concerns by requiring consumers to mix UI code with non-UI code. It also seems inefficient to make the user traverse the entire items array to decorate each item, when the table itself will already perform similar traversals.

What if the table accepted a rowProps prop?

const getRowProps = (row, id, index) => {
  const { firstName } = row;
  return {
    onClick: () => console.log(`clicked ${firstName}`),
    'aria-label': `row-${firstName}`,
    className: 'customRowClass',
  };
};

<EuiBasicTable items={items} rowProps={getRowProps} />

This is a similar pattern to what we already have with itemId. We could even duck-type this prop by letting it accept a function or an object (which might be best for ML's use case since they just want to apply a single onClick handler to all rows).

Thoughts?

[cjcenizal]

Was wondering if the current table columns property is sufficient for allowing custom props at the cell level?

Great point! Yes I think this would work well. I'll see if I can add this in this PR.

[chandlerprall]

I like the idea of a rowProps prop quite a bit. It probably makes sense to add a cellProps as well, which would resolve ML's need for correlating the cell with another element's representation of the data.

[peteharverson]

In ML, we currently only have need for the rowProps (detecting onMouseEnter and onMouseLeave for a table row, but adding cellProps too would seem to make this functionality future-proof.

[cjcenizal]

@peteharverson @chandlerprall Ready for another look. I also introduced a breaking change which applies pass-through props to the <td> element (they were originally applied to the <div> child of the <td>).

[cjcenizal]

🏆 I just have to point out that all credit for this idea goes to @chandlerprall who first proposed it in #836!

[peteharverson]

Latest changes LGTM. I like the way this is done with rowProps and cellProps!

[chandlerprall]

I think we should either add rowIndex here, or remove columnIndex from getCellProps (I lean toward removing it from the other function, not sure what value the index provides, and in theory whatever creates getRowProps/getCellProps has context for determining the index).

[cjcenizal]

Good point @chandlerprall! Updated.