DetailsList: column width as a percentage

[Rafaelki]

Describe the feature that you would like added
For the DetailsList component, be able to specify column width as a percentage, so it resizes nicely.

Have you discussed this feature with our team, and if so, who
No

[kenotron]

Here's how you can accomplish this with mergeStyles with DetailsList without Fabric changes:
https://codepen.io/anon/pen/YRXPBN?editors=0011

[kenotron]

Re-open and adding a label for author feedback - making sure author has a chance to respond.

[kenotron]

Feel free to close @Rafaelki if this solves your issue.

[kenotron]

Ah, going back to this bug, I realized that this is requesting Column Width. Not the whole list. This is not supported because we have column resize feature, etc. So this is a "by design" for now. We'll be working on a data table feature in the future that would probably support what you want (but it'd be less featureful probably). Hopefully that could address your needs in the future.

[Rafaelki]

Haha, that explains why the codepen was not working for me.
Thank you very much @kenotron !! That new component less featureful is exactly what I am looking for!! Hopefully markup with the table element.

In the meantime I did my own one - less less less featureful, hehe:

export default class FluidTable extends React.Component<IFluidTableProps, {}> {
  public render(): React.ReactElement<IFluidTableProps> {
    return (
      <div className={styles.fluidTable}>
        <table className={this.props.className}>
          <tr>
            {this.props.columns.map(c =>
              <th scope="col">{c.name}</th>
            )}
          </tr>
          {this.props.items.map((p, i) =>
            <tr>
              {this.props.columns.map(c =>
                <td>
                  {c.onRender ? c.onRender(p, i) : p[c.fieldName]}
                </td>
              )}
            </tr>
          )}
        </table>
      </div>
    );
  }
}