Create a custom element for tables with on-the-fly filtering and use across devel's functionalities

Currently a lot of functionalities of devel that use tables with on-the-fly filtering have a lot of boilerplate code repeated for handle the table filtering.

  public function parameterList() {
    $headers = [..];

    $rows = [];
    // .... populate rows
    
    $output['#attached']['library'][] = 'system/drupal.system.modules';

    $output['filters'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => ['table-filter', 'js-show'],
      ],
    ];
    $output['filters']['text'] = [
      '#type' => 'search',
      '#title' => $this->t('Search'),
      '#size' => 30,
      '#placeholder' => $this->t('Enter parameter name'),
      '#attributes' => [
        'class' => ['table-filter-text'],
        'data-table' => '.devel-filter-text',
        'autocomplete' => 'off',
        'title' => $this->t('Enter a part of the parameter name to filter by.'),
      ],
    ];
    $output['parameters'] = [
      '#type' => 'table',
      '#header' => $headers,
      '#rows' => $rows,
      '#empty' => $this->t('No parameters found.'),
      '#sticky' => TRUE,
      '#attributes' => [
        'class' => ['devel-parameter-list', 'devel-filter-text'],
      ],
    ];

    return $output;
  }

We can create a custom element that handle this aspect and reduce the boilerplate code, centralize the behavior and reduce errors.

The result could be something like

public function parameterList() {
    $headers = [..];

    $rows = [];
    // .... populate rows

    $output['parameters'] = [
      '#type' => 'devel_table_filter',
      '#filter_label' => $this->t('Search'),
      '#filter_placeholder' => $this->t('Enter parameter name'),
      '#filter_description' => $this->t('Enter a part of the parameter name to filter by.'),
      '#header' => $headers,
      '#rows' => $rows,
      '#empty' => $this->t('No parameters found.'),
      '#sticky' => TRUE,
      '#attributes' => [
        'class' => ['devel-parameter-list'],
      ],
    ];
}