## Follow-up Follow-up from !245542 (discussion: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/245542#note_3617651879). ## Why JSON Tables (`app/assets/javascripts/behaviors/components/json_table.vue`) and Markdown Tables (`app/assets/javascripts/behaviors/components/markdown_table.vue`) are currently separate components. This duplication increases code complexity and means features are implemented inconsistently across the two. For example, the print scale-to-fit feature added in !245542 works for Markdown/GLQL tables but not for JSON Tables, simply because the code wasn't added for them. ## Example ```json:table { "fields": [ {"key": "a", "label": "AA"}, {"key": "b", "label": "BB"}, {"key": "c", "label": "CC"}, {"key": "d", "label": "DD"}, {"key": "e", "label": "EE"}, {"key": "f", "label": "FF"}, {"key": "g", "label": "GG"}, {"key": "h", "label": "HH"}, {"key": "i", "label": "II"}, {"key": "j", "label": "JJ"}, {"key": "k", "label": "KK"}, {"key": "l", "label": "LL"}, {"key": "m", "label": "MM"}, {"key": "n", "label": "NN"}, {"key": "o", "label": "OO"}, {"key": "p", "label": "PP"}, {"key": "q", "label": "QQ"}, {"key": "r", "label": "RR"}, {"key": "s", "label": "SS"}, {"key": "t", "label": "TT"}, {"key": "u", "label": "UU"}, {"key": "v", "label": "VV"}, {"key": "w", "label": "WW"}, {"key": "x", "label": "XX"}, {"key": "y", "label": "YY"}, {"key": "z", "label": "ZZ"}, {"key": "aa", "label": "AAAA"}, {"key": "ab", "label": "ABAB"}, {"key": "ac", "label": "ACAC"}, {"key": "ad", "label": "ADAD"}, {"key": "ae", "label": "AEAE"}, {"key": "af", "label": "AFAF"}, {"key": "ag", "label": "AGAG"}, {"key": "ah", "label": "AHAH"}, {"key": "ai", "label": "AIAI"}, {"key": "aj", "label": "AJAJ"}, {"key": "ak", "label": "AKAK"}, {"key": "al", "label": "ALAL"}, {"key": "am", "label": "AMAM"}, {"key": "an", "label": "ANAN"}, {"key": "ao", "label": "AOAO"}, {"key": "ap", "label": "APAP"}, {"key": "aq", "label": "AQAQ"}, {"key": "ar", "label": "ARAR"}, {"key": "as", "label": "ASAS"}, {"key": "at", "label": "ATAT"}, {"key": "au", "label": "AUAU"}, {"key": "av", "label": "AVAV"}, {"key": "aw", "label": "AWAW"}, {"key": "ax", "label": "AXAX"} ], "items": [ {"a": "11", "b": "12", "c": "13", "d": "14", "e": "15", "f": "16", "g": "17", "h": "18", "i": "19", "j": "110", "k": "111", "l": "112", "m": "113", "n": "114", "o": "115", "p": "116", "q": "117", "r": "118", "s": "119", "t": "120", "u": "121", "v": "122", "w": "123", "x": "124", "y": "125", "z": "126", "aa": "127", "ab": "128", "ac": "129", "ad": "130", "ae": "131", "af": "132", "ag": "133", "ah": "134", "ai": "135", "aj": "136", "ak": "137", "al": "138", "am": "139", "an": "140", "ao": "141", "ap": "142", "aq": "143", "ar": "144", "as": "145", "at": "146", "au": "147", "av": "148", "aw": "149", "ax": "150"}, {"a": "21", "b": "22", "c": "23", "d": "24", "e": "25", "f": "26", "g": "27", "h": "28", "i": "29", "j": "210", "k": "211", "l": "212", "m": "213", "n": "214", "o": "215", "p": "216", "q": "217", "r": "218", "s": "219", "t": "220", "u": "221", "v": "222", "w": "223", "x": "224", "y": "225", "z": "226", "aa": "227", "ab": "228", "ac": "229", "ad": "230", "ae": "231", "af": "232", "ag": "233", "ah": "234", "ai": "235", "aj": "236", "ak": "237", "al": "238", "am": "239", "an": "240", "ao": "241", "ap": "242", "aq": "243", "ar": "244", "as": "245", "at": "246", "au": "247", "av": "248", "aw": "249", "ax": "250"} ], "filter": true } ``` ## What Merge `JsonTable` into `MarkdownTable` (or, at minimum, implement `JsonTable` in terms of `MarkdownTable`) so there is a single table component to maintain. The trade-off: this might mean losing JSON Table's filter feature for now. But in exchange, JSON Tables would immediately gain every other feature of the shared component: - Being scaled to fit the page width when printed - Sticky headers - Sortable columns And when filtering is later added generally to Markdown tables, JSON Tables would get that functionality back too, but consistent with the rest of the tables rather than as a bespoke implementation. ## How - Consolidate `json_table.vue` and `markdown_table.vue` into a single component, or refactor `JsonTable` to render via `MarkdownTable`. - Ensure JSON Tables pick up print scale-to-fit, sticky headers, and sortable columns from the shared component. - Accept the temporary loss of the JSON Table filter, to be restored later once filtering is added generically to Markdown tables. ## Notes Per !245542, this consolidation is currently not planned but was flagged as desirable during review by @vanessaotto, and @kivikakk agreed. This also complements the planned removal of the `editor_sticky_table_headers` feature flag (targeted around milestone 19.4), which will further simplify this code.