How to handle table component of Office UI Fabric

In fact the source code of the table component of Office UI Fabric looks a bit weird because it is currently built with <div> elements instead of HTML table elements.
The intention behind such div based tables come from the idea to improve the responsive behavior. This idea behind this is almost more than five years old. A time that marked the beginning of responsive web design. Nowadays this pattern is only hardly used because no matter how you build your tables you always face the same problems.
Yesterday i got the confirmation on GitHub that this pattern is subject to be changed.
Time for me to show how this pattern can be transformed to a normal HTML element and to show some advanced techniques to deal with tables in responsive web designs.

See the Pen Office UI Fabric – Table by Stefan Bauer (@StfBauer) on CodePen.14928

Transform component to a real table

One request on the issue list was on how to span across columns or rows. This is not supported by this component for a simple reason. colspan and rowspan needs to be applied directly to the relevant html elements. Currently there is no replacement or equivalent available in CSS for this table feature.
To transform the component into a real table only a couple of replacements needs to be done.

  • <div class=”ms-Table”>
    … needs to be replaced by <table class=”ms-Table”>
  • <div class=”ms-Table-row”>
    … needs to be replaced by <tr class=”ms-Table-row”>
  • <span class=”ms-Table-cell>
    … needs to be replace by <td class=”ms-Table-cell”>

After that column and row span can be applied to the table. The only problem the transformed table shows is that there is a spacing between the columns as well as the rows. Normally this can be covered by applying cellpadding and cellspacing and set the values to zero directly on the table. The good news is that this can be accomplished through css too. To do so the following css code needs to be added.

After applying this in your own custom style sheet the table looks proper.

See the Pen Office UI Fabric – with real Table by Stefan Bauer (@StfBauer) on CodePen.14928

Table with rowspan and colspan

The following example shows how the table looks with colspan and rowspan.

See the Pen Office UI Fabric – Real table with column and row span by Stefan Bauer (@StfBauer) on CodePen.14928

The span across rows and columns works pretty well not. There is only a small issue with the rowspan because it highlights only the cells in the first row but not in the second row.

The responsive behaviour

In theory the table component is responsive. It works well with the presented sample data. Let’s add some more data to the table and especially longer strings.
Actually, I just added three additional columns. To simulate a phone I also added a frame of 320px width and 480px height around the table.

See the Pen Office UI Fabric – Table with long headers in responsive frame by Stefan Bauer (@StfBauer) on CodePen.14928

Sadly the table looks a little bit squished, values have now two lines instead of one and so on.

Make table responsive

One pattern I used in many projects an is easy to apply is to make the table simply scrollable.
The only thing that needs to be done is to surround the table with an extra div element. Let’s assume in Office UI Fabric an additional style for this div element exist and is named ‘ms-Table-overflow’. The CSS for this div need then to look like this.

With this simple statement the table now will become horizontal scrollable. In addition to this we also need to make sure that the content in the tables doesn’t wrap around. To avoid wrapping the class ‘ms-Table-cell’ needs to be slightly adepted.

The effect of this change is that the table will become wider but better readable. The last thing that should be fixed is the first checkbox column because this is still a little bit squished. Another small adoption and that issue is fixed too.

Now the table overlaps the current view port size (simulated by the fixed with class .phone).

See the Pen Office UI Fabric – Table with long headers by Stefan Bauer (@StfBauer) on CodePen.14928

With a further improvement we can notify that the user that the shown table can be scrolled horizontal.

Scroll indicator for responsive table overflow

The easiest way to add the horizontal scrolling indication is by adding an additional element and a special style sheet class before the actual table. When this indication will be combined with a media query this will show up only when the table will be viewed on a mobile device for example.
I added an additional div with the style sheet class named ‘ms-Table-overflowIndicator’.

Again, I keep my surrounding phone class to simulate the view of a mobile phone.

See the Pen Office UI Fabric – Table with long headers with notification to scroll by Stefan Bauer (@StfBauer) on CodePen.14928

Some might not agree, but I think this is one of the best ways to keep the data consistent and readable. One great source of information that shows some advance modifications can be found not CSS Tricks.

Conclusion

I hope I have shown in this blog as well as the latest that tables are not that bad at all. You can always transform them in any way you like and improve the user experience.
The current Office UI Fabric implementation of tables will be changed soon, but there is still a lot to do. Here are some of the implementations that are currently missing to provide a rich and useful table pattern.

  • Missing tbody. tfoot, thead
  • Missing styles for th
    (Currently implemented by first row child of table)
  • Missing styles for col and colgroup

Let hope we will see the missing pieces there soon.

 

 

  • Totally agree again. Use elements for the intended use and then use css for the responsive behavior. Css should not say what it is, it should say how it looks and how the layout flows.

  • Great post! Thank you for sharing this. I will use this in my future projects.