Why I am getting that error?

[the-man-with-a-golden-mind]

So, this is my simple code which I am running with test_data. I am running it and I am getting: TypeError: can't access property "push", items[bindingsSym] is undefined.

I thought that I should use the list just like that.
I can not make 2 reactive variables for column and rows because the size of the row is strictly connected to size of the column and change of such size should be reflected on each of the columns rows.

import * as vanX from "vanjs-ext"
const { div } = van.tags;


export const test_data = {
    columns: [
        { name: "Kolumna 1", column_type: "string", custom_styles: "", width: 200 },
        { name: "Kolumna 2", column_type: "string", custom_styles: "", width: 200 },
        { name: "Kolumna 3", column_type: "string", custom_styles: "", width: 200 },
        { name: "Kolumna 4", column_type: "string", custom_styles: "", width: 200 },
        { name: "Kolumna 5", column_type: "string", custom_styles: "", width: 200 }],
    rows: [
        [
            1, 2, 3, 4, 5
        ],
        [
            6, 7, 8, 9, 10
        ],
        [
            11, 12, 13, 14, 15
        ],
        [
            16, 17, 18.19, 20
        ],
    ]
}

export const Table = (data, config) => {
    const r_data = vanX.reactive(data)

    const handleResize = (colIndex, e) => {
        const startX = e.clientX;
        const col = r_data.columns[colIndex];
        const startWidth = col.width.val;

        const onMouseMove = (e) => {
            const dx = e.clientX - startX;
            const newWidth = Math.max(80, startWidth + dx);
            col.width.val = newWidth;
        };

        const onMouseUp = () => {
            document.removeEventListener("mousemove", onMouseMove);
            document.removeEventListener("mouseup", onMouseUp);
            document.body.style.cursor = "";
        };

        document.body.style.cursor = "col-resize";
        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", onMouseUp);
    };



    return div({ class: "min-w-max" },
        vanX.list(() => div({ class: "flex border-b bg-gray-100 text-sm font-semibold" }), r_data.columns, (column, _, colIndex) =>
            div({ class: "relative col-0 p-2 border-r", style: "width: 200px;" },
                column.name,
                div({
                    class: "resizer absolute right-0 top-0 h-full w-1 bg-gray-300 cursor-col-resize",
                    onmousedown: (e) => handleResize(colIndex, e)
                }),
            )
        ),
        // vanX.list(() => div({ id: "table-body" }), r_data.rows, (row, row_deleter, row_index) =>
        //     vanX.list(() => div({ class: "flex border-b text-sm" }), row, (elem, elem_deleter, elem_index) =>
        //         div({
        //             class: `col-${elem_index} p-2 border-r focus:outline-none`,
        //             style: () => `width: ${r_data.columns[row_index].width.val}px`,
        //             contentEditable: true,
        //             textContent: `${row_index}-${elem_index}`,
        //             onblur: (e) => {
        //                 r_rows[row_index][elem_index].val = e.target.textContent;
        //             }
        //         })
        //     )
        // ))

};

[Tao-VanJS]

Could you fix the format of your code?

[the-man-with-a-golden-mind]

sorry for that. I've already had` in my code.

[Tao-VanJS]

Your code has a few bugs.

Specifically, for this part:

vanX.list(() => div({ id: "table-body" }), r_data.rows, (row, row_deleter, row_index) =>
    vanX.list(() => div({ class: "flex border-b text-sm" }), row, (elem, elem_deleter, elem_index) =>
        div({
            class: `col-${elem_index} p-2 border-r focus:outline-none`,
            style: () => `width: ${r_data.columns[row_index].width.val}px`,
            contentEditable: true,
            textContent: `${row_index}-${elem_index}`,
            onblur: (e) => {
                r_rows[row_index][elem_index].val = e.target.textContent;
            }
        })
    )
))

1. vanX.list(() => div({ class: "flex border-b text-sm" }), row, (elem, elem_deleter, elem_index) =>, row should be row.val (to get the reactive object, not the state object).
2. r_rows[row_index][elem_index].val = e.target.textContent; should be data.r_rows[row_index][elem_index].val = e.target.textContent;

Not sure if that fixes all the bugs. But at least the page can load without error.

[the-man-with-a-golden-mind]

Thx, I have fixed that. The issue here is row_index is not propagating to the nexted vanx.list :(