Nested columns

[leevigraham]

Hi @Kreyu ,

Love the idea of using the Form implementation as a basis for a table library. It makes sense to me that form labels could become table headers, and each td cell is a DataTableType.

If this implementation is based on FormTypes I assume that means you can have nested types (children). Is that possible in this bundle? I'm not sure how it would render? Nested columns under a single th with colspan.

[leevigraham]

Partially answering my own question… DataTableBuilderInterface implements addColumn which accepts a ColumnBuilderInterface.

[Kreyu]

Hey @leevigraham, thanks for the input, and sorry for the late reply!

The DataTableBuilderInterface::addColumn method currently accepts ColumnBuilderInterface as an argument, but nesting columns is not yet supported. Sorry if you tried this approach!

I'll create an issue soon for nesting columns, and I am really eager to implement those, as I am also in need of such feature :). I'm thinking of some simple, yet friendly API, similar to forms. Let's assume, that we have to render a table like that:

|            |          Quarter           |
|  Employee  | ----------- | ------------ |
|            |      I      |      II      |
| ---------- | ----------- | ------------ |
|  John Doe  |     100     |      50      |
|  Jane Doe  |     200     |      75      |

To achieve such hierarchy, I'm thinking on something like this:

namespace App\DataTable\Type;

use Kreyu\Bundle\DataTableBundle\Column\Type\ColumnType;
use Kreyu\Bundle\DataTableBundle\Column\Type\NumberColumnType;
use Kreyu\Bundle\DataTableBundle\Column\Type\TextColumnType;
use Kreyu\Bundle\DataTableBundle\Type\AbstractDataTableType;
use Kreyu\Bundle\DataTableBundle\DataTableBuilderInterface;

class ProductDataTableType extends AbstractDataTableType
{
    public function buildDataTable(DataTableBuilderInterface $builder, array $options): void
    {
        $builder
            ->addColumn('employee', TextColumnType::class)
            ->addColumn(
                $builder->createColumn('quarter', ColumnType::class)
                    ->addColumn('first', NumberColumnType::class)
                    ->addColumn('second', NumberColumnType::class)
            )
        ;

    }
}

This way, we've created a data table that consists of two columns - employee and quarter, but the latter contains two children columns - respectively first and second.

If you create a view of such data table, you should notice two header rows, with appropriate HTML attributes automatically assigned to the first one:

/** @var \Kreyu\Bundle\DataTableBundle\DataTableView $view */

$view->headerRows[0]['employee']->vars['attr']; // ['rowspan' => 2]
$view->headerRows[0]['quarter']->vars['attr'];  // ['colspan' => 2]

This corresponds to the following HTML structure:

<thead>
    <tr>
        <th rowspan="2">Employee</th>
        <th colspan="2">Quarter</th>
    </tr>
    <tr>
        <th>I</th>
        <th>II</th>
    </tr>
</thead>

This would require following changes:

1. Adding createColumn() to DataTableBuilderInterface, that returns ColumnBuilderInterface, similar to FormBuilderInterface::create().
2. Adding column-related methods methods to the ColumnBuilderInterface (addColumn(), removeColumn(), etc.), so API remains consistent. Naming those methods add and remove may seem more intuitive, but I think it would be confusing if used in this case:

$builder
    ->addColumn('employee', TextColumnType::class)
    ->addColumn(
        $builder->createColumn('quarter', ColumnType::class)
            ->add('first', NumberColumnType::class) // "add" what? 
            ->add('second', NumberColumnType::class) // "add" what?
    )
;

3. Adding a mechanism to automatically apply rowspan and colspan HTML attributes - preferably in the ColumnHeaderView->attr array.
4. Changing DataTableView to accept array of HeaderRowView, instead of just one.
5. Some small changes in themes to render multiple headers
6. Something with personalization - the built-in scripts are using sortablejs, and it already supports nesting! Although, we have to prevent moving nested column outside of their parent.

Some breaking changes, but nothing too extreme. Probably needs more changes, but that's how I see it as today.