Our blazing fast Grid component built with pure JavaScript

Post by yvelikova »


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

Post by mats »

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

Post by yvelikova »

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


My goal view
My goal view
bryntum2-example.png (29.75 KiB) Viewed 59 times
Standard Grid view with header.
Standard Grid view with header.
bryntum1-example.png (23.67 KiB) Viewed 59 times

Post by 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.


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:

			display: flex;
			flex-direction:  column;

Here's the view:

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


Post Reply