Tambahkan kelas ke sel tabel Drupal yang berisi ['data']

Dalam Drupal 8, rendering Tabel masih banyak seperti Drupal 7. Anda membangun array multi-dimensi dari baris dan kolom dalam PHP yang Drupal mentransformasikannya menjadi a <tr>dan <td>s masing-masing. Masih ada Drupalisme membingungkan yang dikenal sebagai 'data'yang memungkinkan Anda menambahkan elemen array render sebagai data sel (jangan bingung dengan atribut data).

Saya telah diberikan situs di mana pengembang memilih untuk menggunakan 'data' untuk membuat konten sel, tetapi saya tidak tahu bagaimana cara menambahkan kelas ke <td>sekitar data.

Saya telah membaca kode sumber dan dokumentasi untuk Table.php dan saya menyadari yang baru #wrapper_attributes tetapi saya tidak dapat memecahkan ini.

Saya sudah mencoba setidaknya empat cara untuk menambahkan kelas, dan tidak ada yang berhasil.

$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'],
  ],
];

Setelah menuliskan pertanyaan secara umum, saya kembali untuk menguji lagi, dan telah menentukan bahwa Opsi 5 di OP dengan '#wrapper_attributes'level 'data'elemen yang sama berfungsi. Saya percaya Drupal 8 secara agresif melakukan caching tabel, karena perubahan saya tidak muncul bahkan setelah a drush cr.

Aturan untuk menambahkan kelas ke tabel melalui PHP backend adalah:

• Kelas meja membutuhkan #attributes.
• Kelas baris TR dalam TBODY membutuhkan #attributes.
• Kelas sel TD di dalam TBODY membutuhkan #wrapper_attributes.
• Kelas baris TR di dalam THEAD / TFOOT membutuhkan 'class'dan 'data'wadah.
  Baik #attributesatau #wrapper_attributesbekerja di sini.
• Kelas sel TH / TD di dalam THEAD / TFOOT membutuhkan 'class'dan 'data'wadah.
  Baik #attributesatau #wrapper_attributesbekerja di sini.
• Tidak ada cara untuk menambahkan kelas langsung ke tag <thead>atau <tfoot>tanpa mengganti templat ranting.

Berikut ini adalah contoh paling umum untuk menambahkan kelas ke tag <tr>& <td>di dalam main <tbody>, serta ke <table>tag utama itu sendiri:

$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'],
      ],
    ],
  ],
];

Perhatikan bahwa 'class'wadah akan menerima string atau array, tetapi saya sarankan selalu menggunakan array.

Dari sini, ceritanya menjadi lebih rumit. Jika Anda perlu menambahkan kelas ke tag TR atau TD / TH di dalam area THEAD / TFOOT, aturannya akan berubah sepenuhnya. Baik #attributesatau #wrapper_attributesbekerja di dalam #headerdan #footerbagian dan mencoba untuk menggunakannya menghasilkan efek yang sangat aneh.

Struktur minimum telanjang untuk tabel dengan kolom data header / footer di Drupal 8 adalah ini:

$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',
  ],
];

Anda harus mengubah struktur data yang sebenarnya dan memperkenalkan dua level array multi-dimensi tambahan, untuk meningkatkan 'class'indeks array yang memerlukan kemudian juga memperkenalkan 'data'indeks array. Ini berlaku untuk elemen baris dan elemen sel data, seperti terlihat pada contoh berikut:

$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
        ],
      ],
    ],
  ],
];

Contoh di atas #headermenghasilkan:

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