table header is not consistent with other rows.
tehceen opened this issue · 3 comments
when the content inside row cell increases the table header is not more aligned with table data. have tried many tables but same issues .see screen shot
Yeah, I'm having the same pain here! What's bizarre about it is that the widths are all declared via style
property inside the <th>
's; those widths affect all the <td>
's nicely but strangely are completely ignored by the <th>
's themselves!
See above how the code shows style="width:66px" but the element is rendered with only 40px of width...
Facts
The documentation states that the tables are not ready for production.
Observations
In my experience it works when setting table prop "md-fixed-header" to either true or false (cannot remember which of them that produced perfectly aligned columns, but you should try it out.
Workaround
Anyways, if you need fixed headers and want columns to be aligned with their corresponding headers, one may attempt to write a javascript method that readjusts the widths after each "table change" with a watcher. An example method is shown below for anyone interested.
If you need a dirty work around, you can call setWidth
on each of the MdTableHead
components. This can be improved but I have this method in my component that uses the MdTable
.
forceSetWidth () {
// Note: This is very inefficient and is only a workaround
// Recursively get all children
let components = []
getComponents(this)
function getComponents(component) {
components.push(component)
for (let child of component.$children) {
getComponents(child)
}
}
for (let component of components) {
// Condition to filter MdTableHead components
if (component.setWidth) {
// Call setWidth on next tick
this.$nextTick(component.setWidth)
}
}
}
Simply call the method when your table data changes. You can set a watcher for your data that calls this method.