Specify widths on table columns to support long field names

[jen-huang]

Fixes #17199

Manually specify table column widths to avoid long field names overlapping other columns.

[chrisronline]

@elastic/kibana-design Is it possible to solve this through CSS on the EUI side? It feels clunky to have to specify this manually, but if there is no better way, it's probably fine

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cjcenizal]

This solution is a little brittle because we'll still get overlapping column content if the field name is long enough or if the screen is narrow enough.

I think @jen-huang's suggestion of adding word-break: break-word is a great solution. Here's the layout I was able to achieve with some tweaks:

Here's how I edited the styles:

Here's the change I made to the code:

  renderFieldName(name, isTimeField) {
    return (
      <Fragment>
        {name}
        {true ? (
          <Fragment>
            &nbsp;
            <EuiToolTip content="This field represents the time that events occurred.">
              <EuiIcon type="clock" color="primary" />
            </EuiToolTip>
          </Fragment>
        ) : ''}
      </Fragment>
    );
  }

/* ... */

    const columns = [
      {
        field: 'displayName',
        name: 'Name',
        dataType: 'string',
        sortable: true,
        'data-test-subj': 'indexedFieldName',
        render: (value) => {
          return this.renderFieldName(value, indexPattern.timeFieldName === value);
        },
        width: '38%',
      },

[cjcenizal]

I adjusted the code a bit to get a better flow, and also fixed a mistake I made with data-test-subj in my original snippet:

  renderFieldName(name, isTimeField) {
    return (
      <span data-test-subj="indexedFieldName">
        {name}
        {true ? (
          <span>
            &nbsp;
            <EuiToolTip content="This field represents the time that events occurred.">
              <EuiIcon type="clock" color="primary" />
            </EuiToolTip>
          </span>
        ) : ''}
      </span>
    );
  }

[jen-huang]

@chrisronline @cjcenizal

PR updated to use EUI 0.0.34 which includes word-break: break-word; on the tables, so if the field name is longer than the column width, it will just wrap. I'm keeping the 38% width declaration since by default, the column renders narrowly (will wrap too soon).

Also simplified the rendering functions as suggested and now passing data-test-subj into the column configuration instead of manual attributes.

[cjcenizal]

Looks great!

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[chrisronline]

LGTM!