Please, please provide samples of:

  1. Tabledrag only
  2. Tableselect only
  3. Both together

Including submit handlers.

Comments

NancyDru created an issue. See original summary.

NancyDru’s picture

Issue summary: View changes
jweowu’s picture

Title: Example(s) » Add example(s) for using tabledrag and tableselect with the table element

Note that the header comments for elements_pre_render_table() provide an example of using tabledrag and tableselect (although not including a submit handler). I've reproduced that below.

I found that (for my admin theme at least) combining tabledrag and tableselect caused the checkbox element to overlap the drag handle element, such that you could see the drag handle, but you couldn't interact with it.

I used the following CSS to fix that:

/*
 * elements.module provides the #table element, but when using its
 * #tableselect and #tabledrag properties together, there are styling issues
 * with the checkbox overlapping the drag handle, making rows un-draggable.
 */
table.tabledrag-processed.table-select-processed .tabledrag-handle + .form-type-checkbox {
  display: inline-block;
}

The current example code is:

$form['table'] = array(
  '#type' => 'table',
  '#header' => array(t('Title'), array('data' => t('Operations'), 'colspan' => '1')),
  // Optionally, to add tableDrag support:
  '#tabledrag' => array(
    array('order', 'sibling', 'thing-weight'),
  ),
);
foreach ($things as $row => $thing) {
  $form['table'][$row]['#weight'] = $thing['weight'];

  $form['table'][$row]['title'] = array(
    '#type' => 'textfield',
    '#default_value' => $thing['title'],
  );

  // Optionally, to add tableDrag support:
  $form['table'][$row]['#attributes']['class'][] = 'draggable';
  $form['table'][$row]['weight'] = array(
    '#type' => 'textfield',
    '#title' => t('Weight for @title', array('@title' => $thing['title'])),
    '#title_display' => 'invisible',
    '#size' => 4,
    '#default_value' => $thing['weight'],
    '#attributes' => array('class' => array('thing-weight')),
  );

  // The amount of link columns should be identical to the 'colspan'
  // attribute in #header above.
  $form['table'][$row]['edit'] = array(
    '#type' => 'link',
    '#title' => t('Edit'),
    '#href' => 'thing/' . $row . '/edit',
  );
}