Skip to content

Allow to create tables with JSON

Enrique Alcántara requested to merge json-tables-in-markdown into master

What does this MR do and why?

Introduce an additional way of creating tables using JSON and code blocks.

    ```json:table
    {}
    ```
  • Add support to render table using JSON
  • Limit configuration of table
  • Add test coverage
  • Add error handling for when JSON parsing fails
  • Add sorting capabilities
  • Add filtering capabilities
  • Add distinguishing element apart from other tables (added caption)

Screenshots or screen recordings

Simplest example with just data points(items)

{
    "items" : [
      {"a": "11", "b": "22", "c": "33"}
    ]
}

image


Explicitly specifying column names(fields)

{
    "fields" : ["a", "b", "c"],
    "items" : [
      {"a": "11", "b": "22", "c": "33"}
    ]
}

image


Not all items need to have all fields.

{
    "fields" : ["a", "b", "c"],
    "items" : [
      {"a": "11", "b": "22", "c": "33"},
      {"a": "211", "c": "233"}
    ]
}

image

When fields is not explicitly specified, the column labels are picked from the first element of items

{
    "items" : [
      {"a": "11", "b": "22", "c": "33"},
      {"a": "211", "c": "233"}
    ]
}

image


Explicitly specifying custom column label

{
    "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"}
    ]
}

image


Sortable columns

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

2022-05-19_12.21.33


Table with filter

{
    "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
}

2022-05-19_12.21.59

Error message

{
    "items" : [
      {"a": "11", "b": "22", "c": "33"}
    ],
}

image


Caption

image image

How to set up and validate locally

  1. Use code snippets mentioned above with json:table

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Vishal Tak

Merge request reports