Display builder data in table

#1

I have below YML code and want to display data in html table in frontend.

   table_data: 
                    type: builder
                    label: Static Table
                    columns: 2
                    fieldsets:
                      main_menu:
                        label: Column - {{column_name}}
                        fields:
                          column_name:
                            label: Column Name
                            type: text

                          rows:
                            type: builder
                            label: Rows
                            fieldsets:
                              row:
                                label: Data - {{row_data}}
                                fields:
                                  row_data:
                                    label: Data
                                    type: textarea

for column name (th) it is easy like below:

                        <tr>

                            <?php foreach ($data->table_data()->toBuilderBlocks() as $j => $table) : ?>

                                <th><?= $table->column_name(); ?></th>

                            <?php endforeach; ?>

                        </tr>

                    </thead>

How can i display tr->td in template?

#2

You need an additional foreach loop inside the first:

foreach ($table->rows()->toBuilderBlocks() as $row) {
  echo $row->whatever();
}
#3 
<tr class="clickable-row">

                            <?php foreach ($data->table_data()->toBuilderBlocks() as $j => $table) :?>

                                <?php foreach ($table->rows()->toBuilderBlocks() as $rowData) :?>

                                    <td><?= $rowData->row_data()->kt(); ?></td>

                                <?php endforeach; ?>

                            <?php endforeach; ?>

                        </tr>

i tried with above but all data is printed in single row.

#4

Because you are opening the row outside both loops. whereas the row must be created inside the second foreach loop, if these are supposed to be the table rows.

#5

i have tried below also now data printed in single column

<tbody>

                            <?php foreach ($data->table_data()->toBuilderBlocks() as $j => $table) : ?>

                                <?php foreach ($table->rows()->toBuilderBlocks() as $rowData) :?>

                                    <tr class="clickable-row">

                                                <td><?= $rowData->row_data()->kt(); ?></td>

                                    </tr>

                                <?php endforeach; ?>

                            <?php endforeach; ?>

                    </tbody>

and data is in below format:

 Kirby\Cms\Field Object
(
    [table_data] => Array
        (
            [0] => Array
                (
                    [column_name] => Name
                    [rows] => Array
                        (
                            [0] => Array
                                (
                                    [row_data] => Sunny
                                    [_key] => row
                                    [_uid] => row_1615486678901_4119
                                )

                            [1] => Array
                                (
                                    [row_data] => ROhit
                                    [_key] => row
                                    [_uid] => row_1615486684935_4119
                                )

                        )

                    [_key] => main_menu
                    [_uid] => main_menu_1615486675536_647
                )

            [1] => Array
                (
                    [column_name] => URL
                    [rows] => Array
                        (
                            [0] => Array
                                (
                                    [row_data] => (link: www.google.com text: sunny)
                                    [_key] => row
                                    [_uid] => row_1615486840084_4304
                                )

                            [1] => Array
                                (
                                    [row_data] => Open FD
                                    [_key] => row
                                    [_uid] => row_1615486873450_4304
                                )

                        )

                    [_key] => main_menu
                    [_uid] => main_menu_1615486830601_654
                )

            [2] => Array
                (
                    [column_name] => Icon
                    [rows] => Array
                        (
                            [0] => Array
                                (
                                    [row_data] => 
                                    [_key] => row
                                    [_uid] => row_1615486953471_4597
                                )

                            [1] => Array
                                (
                                    [row_data] => # test
                                    [_key] => row
                                    [_uid] => row_1615486970093_4597
                                )

                        )

                    [_key] => main_menu
                    [_uid] => main_menu_1615486946157_654
                )

        )

)
#6

The data structure seems to be wrong for a table layout.

#7

Please suggest data structure for table.

#8

I guess you are doing it like this to have a flexible number of columns. But to create a table from such a structure, you would have to transform the data array, so that you can create a header row from the columns first, and then a row for each rows[0], rows[1] etc. So that needs a bit of array transformation.

Why don’t use the table field?

#9

I am not using table fields because i want html elements (button, anchor) in td.