Vue TableLite 1 column with multiple rows

Table repeats the userid and username so i want to only show the userid and name once and then show the rest of the data like in the link on imgur. Manipulating the data is no concern i just need the layout to display "good looking"

Don't ask me why but i was told to only use TableLite

Check the full code on codepen

https://codepen.io/m0nst3rgr1m/pen/ZEoyKjy

userleavedaysusageTable: {
    isLoading: false,
    isReSearch: false,
    columns: [
        {
            label: "User ID",
            field: "user_id",
            width: "5%",
            isKey: true,
        },
        {
            label: "User Name",
            field: "user_id",
            width: "15%",
            display: function (row) {
                return row.user.name;
            },
        },
        {
            label: "Leave Type",
            field: "lt_cd",
        },
        {
            label: "Avail fin days ",
            field: "uldu_avail_fin_days",
            columnStyles: { "text-align": "right" },
        },
        {
            label: "Avail carryover days ",
            field: "uldu_avail_co_days",
            columnStyles: { "text-align": "right" },
        },
        {
            label: "Avail total days ",
            field: "uldu_avail_total_days",
            columnStyles: { "text-align": "right" },
        },
        {
            label: "Pending days ",
            field: "uldu_pending_days",
            columnStyles: { "text-align": "right" },
        },
        {
            label: "Declined days ",
            field: "uldu_declined_days",
            columnStyles: { "text-align": "right" },
        },
        {
            label: "Cancelled days ",
            field: "uldu_cancelled_days",
            columnStyles: { "text-align": "right" },
        },
...

https://imgur.com/a/o5CT997

Thank you all in advance