Display builder data in table

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?

You need an additional foreach loop inside the first:

foreach ($table->rows()->toBuilderBlocks() as $row) {
  echo $row->whatever();
}
<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.

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.

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
                )

        )

)

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

Please suggest data structure for table.

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?

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