Render a table in drupal 8

in this article, I'll show you how to create a custom controller and render a table that resembles the core backend tables.

Define the route path

mymodule.content.terms:
  path: '/mymodule-table'
  defaults:
    _controller: '\Drupal\mymodule\Controller\MyModuleController::index'
    _title: 'MyModule Controller'
  requirements:
    _permission: 'access content'

Create custom controller

<?php

namespace Drupal\mymodule\Controller;

use Drupal\Core\Controller\ControllerBase;


/**
 * Class MyModuleController
 * @package Drupal\mymodule\Controller
 */
class MyModuleController extends ControllerBase
{

  /**
   * @return array
   */
  public function index()
  {

    $header = [
      'col1' => t('COL1'),
      'col2' => t('COL2'),
    ];
    $rows = [
      ['test col 1', 'test'],
      ['test col 1', 'test'],
      ['test col 1', 'test'],
    ];
    return [
      '#type' => 'table',
      '#header' => $header,
      '#rows' => $rows,
    ];
  }

}

The result looks like this:

Add html to cells:

use Drupal\Core\Render\Markup;

$rows = [
  [Markup::create('<strong>test col 1</strong>'),'test'],
  [Markup::create('<s>test col 1</s>'), 'test'],
  [Markup::create('<div>test col 1</div>'), 'test'],
];

Add Class to cells:

$rows = [
  [['data' => 'test col 1', 'class' => 'test-col-1'],'test'],
  [['data' => 'test col 2', 'class' => 'test-col-2'],'test'],
  [['data' => 'test col 3', 'class' => 'test-col-3'],'test'],
];

Add link to a table field:

use Drupal\Component\Render\FormattableMarkup;

$value = new FormattableMarkup('<a href=":link">More</a>', [':link' => "/mymodule-table"]);

Add rowspan and colspan

$header = [
  'col1' => t('COL1'),
  'col2' => t('COL2'),
  ['class' => t('COL3'), 'data' => 'Header 2', 'colspan' => 2],
];
$value = new FormattableMarkup('<a href=":link">More</a>', [':link' => "/mymodule-table"]);
$rows = [
  [['data' => 'test col 1', 'class' => 'test-col-1'],'test',['data'=>$value,'colspan' => 2]],
  [['data' => 'test col 2', 'class' => 'test-col-2'],'test',['data'=>$value,'colspan' => 2]],
  [['data' => 'test col 3', 'class' => 'test-col-3'],'test',['data'=>$value,'colspan' => 2]],
  [[ 'data' => 'test col 4','class' => 'test-col-4', 'rowspan' => 2], '1', ['data'=>1, 'colspan' => 2]],
  [['data' => '2'], ['data' => '2'],['data' => '2']],
  [[ 'data' => 'test col 4','class' => 'test-col-4', 'rowspan' => 2], ['data'=>1, 'rowspan' => 2], 1,1],
  [['data' => '2'],['data' => '2']],

];

The result looks like this:

Add Class to row:

$row = array('data' => 'some data');
$rows[] = array('data' => $row, 'class' => array('my-class','my-class2'));