When a table form has children form elements of type value, it causes that empty cells be rendered, breaking the table layout.
A similar issue was reported (also mentioned in a TODO in code of Table form element) here:
https://www.drupal.org/node/1248940 →
I attach a patch to be reviewed.
Example code, and screenshots of the output generated
Before →
and
After →
of the fix
public function buildForm(array $form, FormStateInterface $form_state) {
$form['items'] = [
'#type' => 'table',
'#header' => [
$this
->t('Phrase'),
$this
->t('Book'),
],
];
foreach ($this->phrasesManager->getAllPhrases() as $tid => $phrase) {
$form['items'][$tid]['text'] = [
'#type' => 'textfield',
'#title' => 'Phrase',
'#title_display' => 'invisible',
'#default_value' => $phrase['name'],
];
$form['items'][$tid]['id'] = [
'#type' => 'value',
'#value' => $tid
];
$form['items'][$tid]['is_phrase'] = [
'#type' => 'value',
'#value' => 1
];
$form['items'][$tid]['some_value'] = [
'#type' => 'value',
'#value' => 200486
];
$form['items'][$tid]['author'] = [
'#type' => 'textfield',
'#title' => 'Author',
'#title_display' => 'invisible',
'#default_value' => $phrase['author'],
];
}
$form['actions']['submit'] = [
'#type' => 'submit',
'#value' => $this->t('Save')
];
return $form;
}