StandardTableView: editable cells

[renlite]

Will StandardTableView get editable cells (input field, combobox, ...) in the future? (like QtQuick2 TableView)

[ogoffart]

This is somehow planed, yes (somehow related tracking issue #2042 )

But this is, as of now, not on our short term roadmap.
(We are adjusting the roadmap based on the need of our customers.)

[renlite]

I strarted playing with an editable TableView from the StandardTableView as base. This is the result at the moment:

This is the main coding I think I changed:

        StandardTableView { 
            columns: [
                { title: @tr("Firstname"), widget: "Input" },
                { title: @tr("Lastname"),  widget: "Button" },
                { title: @tr("Job"), widget: "ComboBox" },
                { title: @tr("Age"), widget: "Text" },
            ];

            rows: TableViewData.row_data;
        }


export struct TableColumnWidget  {
    title: string,
    min-width: length,
    horizontal-stretch: float,
    sort-order: SortOrder,
    width: length,
    widget: string,
}

component TableViewRow inherits Rectangle {
    in property <string> title;
    in property <bool> selected;
    //in property <bool> even;

    callback clicked <=> i-touch-area.clicked;
    callback pointer-event(/* event */ PointerEvent, /* absolute mouse position */ Point);

    min-width: i-layout.min-width;
    min-height: max(34px, i-layout.min-height);
    //border-width: 1px;
    //Sborder-radius: 4px;
    //background: root.even ? FluentPalette.control-background : transparent;

    /*
    states [
        pressed when i-touch-area.pressed : {
            root.background: selected ? FluentPalette.subtle-secondary : FluentPalette.subtle-tertiary;
        }
        hover when i-touch-area.has-hover : {
            root.background: selected ? FluentPalette.subtle-tertiary : FluentPalette.subtle-secondary;
            i-selector.height: root.selected ? 16px : 0;
        }
        selected when root.selected : {
            root.background: FluentPalette.subtle-secondary;
            i-selector.height: 16px;
        }
    ]
    */

    i-touch-area := TouchArea {
        pointer-event(pe) => {
            root.pointer-event(pe, {
                x: self.absolute-position.x + self.mouse-x,
                y: self.absolute-position.y + self.mouse-y,
            });
        }
    }

    i-layout := HorizontalLayout {
       @children
    }

    /*
    i-selector := Rectangle {
        x: 0px;
        y: (parent.height - self.height) / 2;
        width: 3px;
        height: 0px;
        background: FluentPalette.accent-background;
        border-radius: 2px;

        animate height { duration: 150ms; easing: ease-out; }
    }
    */

    i-boder-line := Rectangle{
        height: 1px;
        background: #565656;  //    // * border-color: FluentPalette.border;
        //background: FluentPalette.background;
        y: i-layout.y + i-layout.height;
    }
}

export component StandardTableView {
(...)

    VerticalLayout {
        Rectangle {
(...)
        }

        i-scroll-view := ListView {
            for row[idx] in root.rows : TableViewRow {
                selected: idx == root.current-row;
                //even: mod(idx, 2) == 0;

                pointer-event(pe, pos) => {
                    root.row-pointer-event(idx, pe, {
                        x: pos.x - root.absolute-position.x,
                        y: pos.y - root.absolute-position.y,
                    });
                }

                for cell[index] in row : TableViewCell {
                    property <string> inner-widget;
                
                    inner_widget: root.columns[index].widget;

                    horizontal-stretch: root.columns[index].horizontal-stretch;
                    min-width: max(columns[index].min-width, columns[index].width);
                    preferred-width: self.min-width;
                    max-width: (index < columns.length && columns[index].width >= 1px) ? max(columns[index].min-width, columns[index].width) : 100000px;
 
                    if inner-widget == "Button" :
                        i-cell-button := Button {
                            height: self.min-height;
                            width: 98%;
                            text: cell.text;
                            clicked => {
                                debug("Button clicked ...")
                            }
                        }

                    if inner-widget == "Input":
                        i-cell-inp := TextInput {
                            vertical-alignment: center;
                            visible: true;
                            text: cell.text;
                            width: self.preferred-width;
                            enabled: true;
                            read-only: false;
                            font-size: FluentFontSettings.body.font-size;

                        }
                    
                    if inner-widget == "ComboBox":
                        HorizontalLayout{
                            i-cell-combo := ComboBox {
                                width: 98%;
                                height: self.min-height;
                                model: ["first", "second", "third"];
                                current-value: "first";
                            }
                        }


                    if inner-widget == "Text":
                        i-cell-txt := TextInput {
                            vertical-alignment: center;
                            visible: true;
                            text: cell.text;
                            width: self.preferred-width;
                            enabled: true;
                            read-only: true;
                            font-size: FluentFontSettings.body.font-size;
                        }




                }
            }
        }
    }

[bjorn]

This is really neat, but it's also unacceptable due to needing to modify the StandardTableView at that level and pass around strings. It would be nice if it could be done more like:

StandardTableView { 
    columns: [
        { title: @tr("Firstname"), widget: TextInput { ... } },
        { title: @tr("Lastname"),  widget: Button { ... } },
        { title: @tr("Job"), widget: ComboBox { model: ["first", "second", "third"]; current-value: "first"; } },
        { title: @tr("Age"), widget: TextInput { read-only: true; ... } },
    ];

    rows: TableViewData.row_data;
}

Of course, that opens up two main issues:

• Is needs some kind of "component" type for the widget in the column definition.
• It needs some way for those widgets to refer to data from the rows, like text: cell.text. Probably through some input variable.

[renlite]

Yes, that's right. This is only a POC to see if and how it could work.
I will try a new version but as you wrote there is not a general component-type I can define for the field widget in the TableColumnWidget struct to use components like ComboBox, TextInput ... . Will this feature be implemented in the future?

export struct TableColumnWidget  {
   title: string,
   min-width: length,
   horizontal-stretch: float,
   sort-order: SortOrder,
   width: length,
   widget: ??? Component/Window/Rectangle
}

In the meantime I will define a custom struct with an enum field of possible widgets for the table to solve the issue.