node.js - How to display data in Table format in microsoft bot framework

Question

Can some one please help me out in displaying the data table format in BOT as below

Answer 1

You can leverage the ColumeSet in adaptive card to render a table like card message.

E.G, the following json content will be renderred a table like card message:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "Name"
                        },
                        {
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Apple"
                        },{
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Kiwi"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "Tag"
                        },
                        {
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Fruit"
                        },{
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Fruit"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "Price"
                        },
                        {
                            "type": "TextBlock",
                            "separator":true,
                            "text": "2"
                        },{
                            "type": "TextBlock",
                            "separator":true,
                            "text": "1"
                        }
                    ]
                }
            ]
        }
    ]
}

in WebChat channel, it looks like: