[ 'data']를 포함하는 Drupal 테이블 셀에 클래스 추가

Drupal 8에서 테이블 렌더링은 여전히 ​​Drupal 7과 비슷합니다. Drupal이 각각 a <tr>와 <td>s 로 변환하는 PHP에서 다차원 배열의 행과 열을 작성합니다 . 'data'렌더 배열 요소를 셀 데이터 (데이터 속성과 혼동하지 않아야 함)로 추가 할 수있는 이 혼동되는 Drupalism이 여전히 알려져 있습니다.

개발자가 셀의 내용을 렌더링하기 위해 '데이터'를 사용하기로 선택한 사이트가 있었지만 <td>데이터 주위에 클래스를 추가하는 방법을 알 수는 없습니다 .

Table.php 의 소스 코드와 문서를 읽었 으며 새로운 것을 알고 #wrapper_attributes 있지만 이것을 깨뜨릴 수는 없습니다.

클래스를 추가하기 위해 적어도 네 가지 방법을 시도했지만 아무 효과가 없습니다.

$table['row-' . $row_id] = [

  // Option 1: Class appears on <tr> tag
  '#attributes' => [
    'class' => ['option-1-row-attributes'],
    'id' => 'row-' . $row_id,
    'no_striping' => TRUE,
  ],

  // Option 2: Class appears on <td> tag of first column. 
  'item' => [
    '#markup' => $row['my_item']->label(),
    '#wrapper_attributes' => [   
      'class' => ['option-2-markup-wrapper-attributes'],
    ],
  ],

  // In the following section, the only item that works is
  // the class on the <a> tag.
  'edit_operation' => [
    'data' => [
      '#type' => 'link',
      '#url' => Url::fromRoute('my_module.my_route', ['item' => $row_id]),
      '#title' => $this->t('Edit'),
      '#attributes' => [
        // Option 3: Class appears on the anchor tag
        'class' => ['use-ajax', 'option-3-link-attributes'],
        'data-dialog-type' => 'modal',
        'data-dialog-options' => Json::encode([
          'width' => 700,
        ]),
      ],
      // Option 4: Has no effect.
      '#wrapper_attributes' => [
        'class' => ['option-4-data-wrapper-attributes'],
      ],
    ],
    // Option 5: Update: This appears to be the correct solution! 
    // Class appears on the <td>.
    '#wrapper_attributes' => [
      'class' => ['option-5-wrapper-attributes'],
    ],
    // Option 6: Has no effect.
    '#attributes' => [
      'class' => ['option-6-attributes'],
    ],
    // Option 7: Has no effect.
    'class' => ['option-7-attributes'],
  ],
];

일반적인 용어로 질문을 작성한 후 다시 테스트로 돌아가서 '#wrapper_attributes'동일한 수준의 'data'요소가 있는 OP의 옵션 5가 작동한다고 결정했습니다 . Drupal 8이 적극적으로 테이블을 캐싱했다고 생각합니다 drush cr.

백엔드 PHP를 통해 테이블에 클래스를 추가하는 규칙은 다음과 같습니다.

• 테이블 클래스가 필요합니다 #attributes.
• TBODY 내부의 TR 행 클래스에는가 필요합니다 #attributes.
• TBODY 내부의 TD 셀 클래스는을 요구합니다 #wrapper_attributes.
• THEAD / TFOOT 내부 TR 행 클래스는 요구 'class'와 'data'컨테이너. 여기서도 일
  하지도 #attributes않습니다 #wrapper_attributes.
• TH / TD THEAD 내부 셀 클래스 / TFOOT가 필요 'class'하고 'data'용기. 여기서도 일
  하지도 #attributes않습니다 #wrapper_attributes.
• 나뭇 가지 템플릿을 재정의하지 않고 클래스를 직접 <thead>또는 <tfoot>태그 에 추가 할 수있는 방법이 없습니다 .

다음은 main 태그 자체 뿐만 아니라 main 내부의 <tr>& <td>태그에 클래스를 추가하는 가장 일반적인 예입니다 .<tbody><table>

$table = [
  '#type' => 'table',
  '#attributes' => [
    'class' => ['table-class'],
  ],
  'row1' => [
    '#attributes' => [
      'class' => ['tr-class'],
    ],
    // Table data cell using 'data' for renderable elements.
    'column1' => [
      'data' => [
        '#type' => 'link', // Or any other renderable thing.
        '#attributes' => [
          'class' => ['link-class'],
        ],
        // Other elements required to render the link go here...
      ],
      '#wrapper_attributes' => [ // Watch out!
        'class' => ['td-class'],
      ],
    ],
    // Table data cell using '#markup'.
    'column2' => [
      '#markup' => '<span>' . $this->t('text') . '</span>',
      '#wrapper_attributes' => [   
        'class' => ['td-class'],
      ],
    ],
  ],
];

점을 유의 'class'용기가 문자열이나 배열 중 하나를 허용하지만 난 항상 배열을 사용하는 것이 좋습니다.

여기에서 이야기는 더 복잡해집니다. THEAD / TFOOT 영역 내의 TR 또는 TD / TH 태그에 클래스를 추가해야하는 경우 규칙이 완전히 변경됩니다. 내부 와 섹션을 작업 #attributes하거나 사용 하지 않고 매우 이상한 효과를냅니다.#wrapper_attributes#header#footer

Drupal 8에서 머리글 / 바닥 글 데이터 열이있는 테이블의 최소 구조는 다음과 같습니다.

$table = [
  '#type' => 'table',
  // Produces <thead> <tr> <th>
  '#header' => [
    'Header 1',
    'Header 2',
    'Header 3',
  ],
  // Produces <tbody> <tr> <td>
  'row1' => [
    'Body 1',
    'Body 2',
    'Body 3',
  ],
  // Produces <tfoot> <tr> <td>
  '#footer' => [
    'Footer 1',
    'Footer 2',
    'Footer 3',
  ],
];

'class'어레이 인덱스를 도입 한 다음 어레이 인덱스를 도입해야하는 어레이 인덱스 를 활용하려면 데이터의 실제 구조를 변경하고 2 단계의 추가 다차원 어레이 를 도입해야합니다 'data'. 이것은 다음 예제에서 볼 수 있듯이 행 요소와 데이터 셀 요소 모두에 적용됩니다.

$table = [
  '#type' => 'table',
  // This example works the same way for '#footer'.
  '#header' => [
    // First, introduce an extra level to the array to provide a
    // place to store the class attribute on the <tr> element inside
    // the <thead>.
    [
      'class' => 'thead-tr-class',
      // Next place the columns inside a 'data' container, so that
      // the 'class' can be used.  '#wrapper_attributes' will not
      // work here.
      'data' => [
        // The following line produces data inside a <th>
        // without any class.
        'Header 1',

        // The following lines produce data inside a <th>
        // with a class: th-class.
        [
           'class' => 'th-class',
           'data' => 'Header 2',
           'colspan' => 2
        ],
      ],
    ],
  ],
];

위의 예제 #header는 다음을 생성합니다.

<table>
  <thead>
    <tr class="thead-tr-class">
      <th>Header 1</th>
      <th class="th-class" colspan="2">Header 2</th>
    </tr>
  </thead>
</table>