Render plain HTML table (no GlTable) Vue component for sortable Markdown tables

What does this MR do and why?

When one of the Feature Flags (editor_sticky_table_headers or markdown_sortable_table_columns) is on, we now render a Vue Component for Tables in Markdown. We chose to not use GlTable - see these comments. We chose to combine the logic to render the Vue component in case one of these FFs is on, although the sticky headers might not actually need a Vue component. The complexity and redundancy in code would grow a lot though if we would try to handle all FF combinations. Both FFs are meant to be short-lived and only for testing internally first. The primary goal is to remove both FFs in one or two milestones.

Here's an issue with follow up ideas to bring the sortable table from Beta to GA: #598975

More information

  • Tables with just one row are sortable for now. We can change it later and make them not sortable, but I'd question wether we'd need to handle it. Nothing bad would happen if users would try to sort it
  • Empty cells will always be sorted to the last row(s)
  • ISO dates and most numbers work quite well, but we use simple alphabetical sorting for now, nothing more fancy
  • Rows with more than 1000 rows cannot be sorted for performance reasons. We plan to add a tooltip with an explanation, but we're waiting for feedback for this after merging this MR
  • Right after this MR we want to add a hover effect on the arrows, to communicate that the colums are sortable. This MR is already big enough though
  • We also have something called "JSONtables". An example is shown in the screen recording below. Ideally, we'd combine JSON Tables and sortable tables after this MR is merged. JSONTables are not sortable for now, but come with a filter row. JSONTables use GLTable.

Screen recording

How to test

  1. Enable the FF markdown_sortable_table_columns.
  2. Create tables in editors, e.g. on a work items page, or in the wiki
  3. Sort the columns
  4. Repeat the testing with HTML tables (add a new line in a cell and the table gets turned into an HTML table) => still works
  5. Repeat with JSON Table: Does not work (that's expected)

HTML table to copy

<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>sdfdsf</td>
<td>sdfsdf</td>
</tr>
<tr>
<td></td>
<td>

b

c

zzz
</td>
</tr>
<tr>
<td>sdf</td>
<td>

Alle meine Entchen

hallo
</td>
</tr>
</table>

JSON table to copy

  {
  "fields" : [
        {"key": "a", "label": "AA"},
        {"key": "b", "label": "BB"},
        {"key": "c", "label": "CC"}
    ],
    "items" : [
      {"a": "11", "b": "22", "c": "33"},
      {"a": "211", "b": "222", "c": "233"}
    ],
    "filter" : true
  }

Related to #585266 (closed)

Edited by Vanessa Otto

Merge request reports

Loading