[v4] Broken layout under Kirby 4

[gbdesign2023]

The plug-in is not compatible with Kirby 4, as the table layout is broken. It still works, but the operation suffers from the broken layout.

[gbdesign2023]

I have found a simple solution to fix the problem. Add the following CSS class to "index.css":

plugins/table-field/index.css

/* Fix for Kirby 4 */

.table-field .k-button {
    height: --button-height:var(--height-md);
}

.table-field .table-row :where(input,select) {
    background: #fff;
}
.k-field[data-disabled=true] .table-field .table-row :where(input,select)  {
    background: #F0F0F0;
}

.k-field[data-disabled=true] .table-field .k-button {
    opacity: .2;
}

.table-field .table-ctrl .row-cell .centering {
    margin-top: 2px !important;
}

[bogdancondorachi]

Hello, I've started working on a k4 reworked version of this field. Would anyone be interested in something like this?

I've refactored the code and got it working as it should with a few improvements so far:

• use the k-table component
• first row now acts as columns
• ability to sort rows with drag&drop

[gbdesign2023]

@bogdancondorachi Since I use the plug-in in every one of my projects, I am definitely interested in a working update.

[bogdancondorachi]

Hi @gbdesign2023,

I've released my iteration of this plugin, Kirby 4 only. Feel free to test it and give feedback as I haven't yet used it in my projects. I've planned a blocks integration for a project but I had to fix the plugin first. 😃

https://github.com/bogdancondorachi/kirby-table-field

[gbdesign2023]

Hey @bogdancondorachi

Super! Thank you very much. You have completely rewritten the plugin. Very nice. The code is much more compact and clearer.

It works for my project without any changes. However, I have not yet looked at the functions in detail.

Can the manual arrangement of columns and rows be deactivated? My rows are sorted in the frontend using JavaScript. I also don't want my customers to (accidentally) change the order.

It would also be good to be able to deactivate the header row. I have already defined the first line in the template as "thead", as this feature was not available before. I also have tables whose values are identical in all languages and are only changed in the main language (translate: false). The labels of thead are separate and can be translated in the other languages. Completely independent of the table.

[bogdancondorachi]

@gbdesign2023 nice to hear it works as expected.

Please open an issue on those suggestions and will talk there.