[Rendering] Table type not working with JS sdk v3.0.5

[Shruti-MS]

Target Platforms

NodeJS

SDK Version

3.0.5

Application Name

React App

Problem Description

Javascrpt sdk v3.0.4 was correctly rendering the Table type. But when upgrading to v3.0.5, Table type is not at all rendered.

Screenshots

No response

Card JSON

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "Sample Table",
      "weight": "Bolder",
      "size": "Medium"
    },
    {
      "type": "Table",
      "firstRowAsHeaders": true,
      "gridStyle": "default",
      "columns": [
        { "width": 1 },
        { "width": 2 }
      ],
      "rows": [
        {
          "type": "TableRow",
          "cells": [
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "Name" }]
            },
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "Status" }]
            }
          ]
        },
        {
          "type": "TableRow",
          "cells": [
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "VM-001" }]
            },
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "Healthy" }]
            }
          ]
        },
        {
          "type": "TableRow",
          "cells": [
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "VM-002" }]
            },
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "Warning" }]
            }
          ]
        }
      ]
    }
  ]
}

Sample Code Language

No response

Sample Code

No response

[sayali-MSFT]

@Shruti-MS , Thanks for bringing this issue to our attention. We will check and update you soon.

[sayali-MSFT]

@Shruti-MS, we are currently unable to reproduce the issue on our end. Could you kindly share the relevant code snippets so that we can investigate further from our side?

[Shruti-MS]

@sayali-MSFT I am facing this issue in specifically javascript sdk v3.0.5. The above Adaptive card with Table type was not working. Have you used Javascript SDK for above?

[Shruti-MS]

I have written this simple react app, with adaptivecards version 3.0.5. Table is not shown. As soon I downgrade version to 3.0.4 it is working, Table is shown

App.js

import React from 'react';
import './App.css';
import AdaptiveCardRenderer from './AdaptiveCardRenderer';

function App() {
  // Your specific adaptive card data
  const adaptiveCardData = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
      {
        "type": "TextBlock",
        "text": "Sample Table",
        "weight": "Bolder",
        "size": "Medium"
      },
      {
        "type": "Table",
        "firstRowAsHeaders": true,
        "gridStyle": "default",
        "columns": [
          { "width": 1 },
          { "width": 2 }
        ],
        "rows": [
          {
            "type": "TableRow",
            "cells": [
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Name" }]
              },
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Status" }]
              }
            ]
          },
          {
            "type": "TableRow",
            "cells": [
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "VM-001" }]
              },
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Healthy" }]
              }
            ]
          },
          {
            "type": "TableRow",
            "cells": [
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "VM-002" }]
              },
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Warning" }]
              }
            ]
          }
        ]
      }
    ]
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Adaptive Cards 3.0.5 React Demo</h1>
        <p>Rendering your custom table adaptive card:</p>
      </header>
      <main>
        <AdaptiveCardRenderer cardPayload={adaptiveCardData} />
      </main>
    </div>
  );
}

export default App;

AdaptiveCardRenderer.js

import React from 'react';
import './App.css';
import AdaptiveCardRenderer from './AdaptiveCardRenderer';

function App() {
  // Your specific adaptive card data
  const adaptiveCardData = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
      {
        "type": "TextBlock",
        "text": "Sample Table",
        "weight": "Bolder",
        "size": "Medium"
      },
      {
        "type": "Table",
        "firstRowAsHeaders": true,
        "gridStyle": "default",
        "columns": [
          { "width": 1 },
          { "width": 2 }
        ],
        "rows": [
          {
            "type": "TableRow",
            "cells": [
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Name" }]
              },
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Status" }]
              }
            ]
          },
          {
            "type": "TableRow",
            "cells": [
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "VM-001" }]
              },
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Healthy" }]
              }
            ]
          },
          {
            "type": "TableRow",
            "cells": [
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "VM-002" }]
              },
              {
                "type": "TableCell",
                "items": [{ "type": "TextBlock", "text": "Warning" }]
              }
            ]
          }
        ]
      }
    ]
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Adaptive Cards 3.0.5 React Demo</h1>
        <p>Rendering your custom table adaptive card:</p>
      </header>
      <main>
        <AdaptiveCardRenderer cardPayload={adaptiveCardData} />
      </main>
    </div>
  );
}

export default App;

package.json

{
  "name": "adaptive-cards-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-scripts": "5.0.1",
    "adaptivecards": "3.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[sayali-MSFT]

Thanks for sharing information. We will check this and let you know the update.

[sayali-MSFT]

Thank you for your patience! We were able to reproduce the issue in the [Mobile iOS] Teams version [7.6.77.2025053203/0321]. We have reported this as a bug for further investigation.

We will keep you updated as soon as we receive further information. Thank you for bringing this to our attention!