GridList

[_Marco_]

How can I make a panel similar to the one below? Grid list with GUI (receive data from the database and display it as a grid list in the client)

 

https://imgur.com/a/DOwjGwM

 

 

[FlorinSzasz]

You can use GUI gridlist then it will look like this

-> https://wiki.multitheftauto.com/wiki/GuiCreateGridList

If u want it to look like in the picture u showed than u need

dxDrawRectangle
dxDrawText

Here is an example how data is inserted in gridlist from database on a basic skin saving system

->

 

Edited March 10, 2023 by FlorinSzasz

[_SAXI_]

You can try something like this

dxGridList = {
    x = 0,
    y = 0,
    width = 300,
    height = 200,
    columns = {},
    rows = {}
}

addColumn = function(name,size)
    table.insert(dxGridList.columns,{name,size});
end

addRow = function(col,value)
    table.insert(dxGridList.rows,{col,value});
end

local sx,sy = guiGetScreenSize();

addEventHandler("onClientRender",root,function()
    local x,y = sx/2-dxGridList.width/2,sy/2-dxGridList.height/2;
    local w,h = dxGridList.width,dxGridList.height;
    dxDrawRectangle(x,y,w,h,tocolor(70,70,70));
    local colx = x;
    dxDrawRectangle(x,y,w,25,tocolor(10,10,10))
    for i,col in ipairs(dxGridList.columns)do
        local cw = col[2]*w;        
        dxDrawText(col[1],colx,y+4,100,20,tocolor(255,255,255),1,"default");
        local ry = y+20;
        for j,row in ipairs(dxGridList.rows)do
            if(row[1] == i)then
                dxDrawRectangle(colx,ry,cw,20,tocolor(120,120,120))
                dxDrawText(row[2],colx,ry,100,20,tocolor(255,255,255),1,"default");
                ry = ry + 20;
            end
        end
        colx = colx+cw;
    end
end);

addColumn("Col 1",.1);
addColumn("Col 2",.7);
addColumn("Col 3",.2);

for i=1,20 do
    addRow(math.random(1,3)," "..tostring(i));
end