Feature comparison
Feature | Responsive Table | Grid Table |
---|---|---|
Control name | sap.m.Table | sap.ui.table.Table |
Responsiveness: collapse columns on small screens | ✔ | |
Responsiveness: hide column on small screens | ✔ | via scripting |
Dynamic column width (proportional to contents) | ✔ | |
Resizable columns (dragging column borders) | ✔ | |
Column sorting via click on header | ✔ | |
Column header menu (like in Excel) | ✔ | |
Column header custom click action | ✔ | |
Column grouping (header span, multi-header) | ✔ | |
Column freeze | ✔ | |
Column footers / Total row(s) | ✔ | |
Sticky header | ✔ | |
Sticky rows on top / row freeze | ✔ | ✔ |
Scrolling | entire rows | only data |
Auto-Height (fill entire page) | ✔ | |
Custom widgets in cells | any | limited |
Inputs in cells | ✔ | ✔ |
Multi-row cells | ✔ | |
Row grouping | ✔ | limited |
Custom group header (e.g. subtotal, count) | ✔ | |
Collapsible row groups | ✔ | |
Row details (expandable rows) | via TreeTable | |
Row click actions | ✔ | experimental |
Row doubleclick actions | via browser event | via browser event |
Row rightclick actions (e.g. context menu) | via browser event | ✔ |
Row selection | ✔ | ✔ |
Row multiselect | ✔ | ✔ |
Row multiselect with checkbox | ✔ | ✔ |
Cell merge / row span / merge duplicates | ✔ | |
Pagination via buttons | deprecated | deprecated |
Pagination via infinite scroll | only with oData | only with oData |
Custom scroll actions | ✔ | |
Drag&Drop | ✔ | ✔ |
Header toolbar | ✔ | ✔ |
Footer toolbar | ✔ | |
Structured data / trees | via breadcrumbs | via TreeTable |
Fiori guidelines
SAP itself sais: select the table, that suits your needs. There is an entire chapter on choosing the right control in the Fiori guidelines. I do recommend reading it, as it compares all controls for data representation: lists, tables, trees, etc. There is also a short feature overview here. In a nutshell, the ui-table (sap.ui.table.Table
) is recommended for larger data sets (> 1000 rows), while the responsive m-table (sap.m.Table
) is to be used in all other cases - it is supposed to look nicer, be more flexible, etc.
Under the hood
Technically, the two table controls are extremely different. While the ui-table is a typical data table with rows and columns, the m-table is actually a list (based on sap.m.ListBase) with each list item being split into columns.
The API is totally different too. There is no way to quickly switch from one table to another, so if you find yourself needing a feature of the other table - it's basically writing all the code again.
Look&Feel
The m-table does indeed look nicer to me - just like the Fiori styleguide suggests. It also feels more natural because the whole table scrolls and not only the data. However, it is not really interactive. All you can do is scroll or select items - no sorting, filtering, etc. by default.
All the comfort features, we expect from a data table, like header sorting, column filters, column resizing, etc. are only available in the ui-table. The column header menu is really awesome! On the other hand, there is no column width optimizer, so basically all columns are either too wide or too narrow. This feature, in turn, is only available in the m-table. On the other hand, you can't manually adjust the column width here. In a sense, it's either comfortable handling or a good overview - never both at the same time.
Scrolling is actually a huge difference between the tables. The ui-table uses virutal scrolling: the grid stays put while data hops from row to row. This does not work well with images in cells and also looks very strange if multiple rows have similar data. On the other hand, the ui-table can auto-adjust it's height to fit the container, which the m-table can not.
Grouping and summarizing data
When it comes to more advanced features like column, cell or row grouping, things get complicated. For some reason, row grouping is only supported properly in the m-table and not in the ui-table, which should theoretically be your choice for complex data. The same goes for merging cells. Grouping columns, on the other hand, only works in the ui-table (although quite limited).
Column totals are a problem in any case: while the m-table simply does not support them, the ui-table has at least sticky bottom rows, where you can place your totals with a script. Unfortunately, these fixed rows are affected by all the built-in sorting and filtering features, so using the for totals is really not an easy task. Both tables have footer bars, however, so if you just need one total value, it is fairly easy to place it there.