Inquiry about Card View Capability in Bryntum Grid

[yvelikova]

Hello,

I am currently using the Bryntum Grid in my project and have been very pleased with its capabilities and flexibility. However, I have a specific requirement that I'm struggling to implement and I would appreciate your guidance.

I am interested in presenting the Grid data in a "Card View" format. In other words, I would like each row of the Grid to look like a card where a column's name is repeated in each of its cells. This format resembles how data is presented in tools like Trello or in a Kanban view, where each item (or row in the case of the Grid) has a more visual, self-contained representation.

It would be extremely helpful if you could guide me on how to achieve this card view format. Is this functionality available out-of-the-box with Bryntum Grid? If not, could you suggest a possible customization approach or alternative component that might serve this purpose?

Thank you in advance for your assistance. I look forward to hearing from you soon.

Best regards,
Yordanka Velikova

[mats]

Great to hear you like the Grid so far. Do you have any Figma or concept design images to share with us?

[yvelikova]

Sure, here are some images that can explain my goal. I hope it helps.

Thanks!

[ghulam.ghous]

Hi There,

Yes you can achieve this view with little bit of customizations. You will need to customize the column renderer and header renderer for it.

https://bryntum.com/products/grid/docs/#Grid/column/Column#config-renderer
https://bryntum.com/products/grid/docs/#Grid/column/Column#config-headerRenderer

Here's the minimum tweaks I did to achieve the view shown in Screenshot. I did this for name column in the Grid Basic demo:

columns : [{
        text     : 'Name',
        field    : 'name',
        renderer : (data) => {
            return {
                class : 'myClass',

            children : [
                {
                    tag  : 'strong',
                    html : `${data.column.data.text}:`
                },
                {
                    tag  : 'span',
                    html : data.record.name
                }
            ]
        };
    }
}],

Bit of css:

		.myClass{
			display: flex;
			flex-direction:  column;
		}

Here's the view:

Screenshot 2024-02-12 at 8.49.50 PM.png (570.65 KiB) Viewed 112 times

Regards,
Ghous