[Table] Body, Header and Footer rendered in separate tables

Problem description

Table header, body and footer rendered in separate tables.

From the source:

<div style={prepareStyles(Object.assign(styles.tableWrapper, wrapperStyle))}>
  {headerTable}
  <div style={prepareStyles(Object.assign(styles.bodyTable, bodyStyle))} ref="tableDiv">
    <table className={className} style={mergedTableStyle} ref="tableBody">
      {inlineHeader}
      {inlineFooter}
      {tBody}
    </table>
  </div>
  {footerTable}
</div>

Versions

• Material-UI: 0.15.0

Description

When setting style for a column of table header and the same exact style is not specified in the corresponding table body column, the appearance breaks.

Rendering the header, body and footer separately loses the ability of letting the browser keep the columns across these sections well aligned.

[fzaninotto]

I also don’t understand why not using the browser table renderer is considered a feature. Auto-expandable cells based on content is a must IMO. The <Table> component is useless with real content otherwise. I secretly hoped that 0.16 would fix this, but it appears that it doesn’t.

For instance, in admin-on-rest, look at how the ‘id’ column takes too much space and the "post’ column is too narrow:

Fixing this requires way too much boilerplate on userland.

Can you explain why this is a feature? If not, can we help fixing the bug?

[danieljuhl]

@fzaninotto I had the same width issue… <Table style={{ tableLayout: 'auto' }} ...> came to the rescue, incase someone else has the same problem. But fixedHeader={false} is required on <Table>, otherwise the columns want be aligned. So <Table style={{ tableLayout: 'auto' }} fixedHeader={false}>