How can I render an HTML table in a block?

Question

i have created a module for showing third party API data

here is some data returned from that API

{"ObjectId":43,"ObjectName":"MEGA MELA","ObjectTitle":"Event Created by API","ObjectDescription":"NEW EVENT BY API","ObjectLabel":"","ObjectTypeId":33,"MaxFieldsExpected":5,"ObjectValueType":null,"ObjectControlType":"","IsDeleted":true,"CreatedDate":"2019-05-22T07:56:03.767","CreatedBy":null,"EditedDate":null,"EditedBy":null,"DeletedDate":null},{"ObjectId":44,"ObjectName":"Event x11","ObjectTitle":"Event Created by API","ObjectDescription":"NEW EVENT BY API","ObjectLabel":"","ObjectTypeId":33,"MaxFieldsExpected":5,"ObjectValueType":null,"ObjectControlType":"","IsDeleted":true,"CreatedDate":"2019-05-23T00:33:50.7","CreatedBy":null,"EditedDate":null,"EditedBy":null,"DeletedDate":null}]} 

i have created a custom module to show some of this data in a block

this is my module directory hierarchy , module directory name is apihtml

 -apihtml 
    -src
      -Plugin
        -Block
          -rest.php   

    -apihtml.info.yml

as you can see there are just two files apihtml.info.yml and rest.php

here is apihtml.info.yml content

 name: Third Party Api Data with html
    type: module
    description: 'This is for showing rest data in ui with html'
    package: Custom
    version: 8.x
    core: 8.x
    dependencies:
      - node
      - block

and here is rest.php content

   <?php

/**
 * @file
 */
namespace Drupal\apihtml\Plugin\Block;
use Drupal\Core\Access\AccessResult;

use Drupal\Core\Block\BlockBase;
use Drupal\Component\Serialization\Json;

/**
 * Creates a 'Foobar' Block
 * @Block(
 * id = "AntShow with html formatting",
 * admin_label = @Translation("Ant Show & HTML"),
 * )
 */
class rest extends BlockBase {
 public function build() {
    /** @var \GuzzleHttp\Client $client */
    $client = \Drupal::service('http_client_factory')->fromOptions([
      'base_uri' => 'http://myApiPath',
    ]);



       $response = $client->get('objects/events');


    $dec = Json::decode($response->getBody());



    $items = [];


foreach ($dec as $d) {
    foreach ($d as $ins) {  
  $items[] = $ins['ObjectName'] ;

    }
}


         return [
      '#theme' => 'item_list',
      '#items' => $items,

    ];

  }
}

here by using array Key ObjecName i am able to show object name in block

here is the block OutPut

MEGA MELA
Event x11

but i want something more
i want to show this API returned data in the tabular form means the array key should be the header of the data value data will be in rows

like this

   ObjectId  | ObjectName | ObjectTitle           | ObjectDescription | ObjectLabel | ObjectTypeId | MaxFieldsExpected | ObjectValueType | ObjectControlType | IsDeleted | CreatedDate | CreatedBy | EditedDate |  EditedBy
    43        |  MEGA MELA |  Event Created by API | NEW EVENT BY API | ..............................................................................

in this Drupal block all the data displayed has to be returned in build function in rest.php file

this is the code which shows data returned by api in tabular format

     foreach ($dec as $d) {
  ?>
    <table>
<?php foreach ($d as $ins) { ?>
<tr>
<?php
 foreach ($ins as $key=>$value) {  
   echo "<td><h3>".$key."</h3></td>";
 } ?>
</tr>
<tr>
<?php
 foreach ($ins as $key=>$value) {  
   echo "<td><h3>".$value."</h3></td>";
 } ?>
</tr><?php
} ?>
</table> <?php
}

But i am not getting how can i put this code in build function of rest.php to show tabular data in the block

Answer 1

You can use the table theme type to do this. In your build section, return a render array that includes this:

return [
  '#type' => 'table',
  '#header' => $header,
  '#rows' => $rows,
];

Where header is an array of strings and rows is an array of row value arrays.

Some reference items I found:

New render element #type 'table'

Render arrays