haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.77k stars 644 forks source link

how to fetch data from api and display in grid kanban design #497

Open pratikraman-dev opened 2 years ago

pratikraman-dev commented 2 years ago

my backend is in symfony i want to create api and display data in front end using muuri

image

ibrychgo commented 2 years ago

Muuri isn't going to handle loading or manipulating your data. You'll need to create your own logic for loading and updating your data.

Once you've loaded your data, you'll want to generate your grids, subgrids, and items using the Muuri API as documented in this repository.

I'd recommend becoming very familiar with the Grid Constructor API (for creating your main grid and each subgrid/list) as well as the grid Methods (for manipulating grids and adding/removing items to grids.)

The basic steps that we used for this was: 1) Our HTML contains the main grid element. 2) We use Muuri's API to initialize that element as our main grid. 3) We loop through our subgrid/list data and use the API to add each to the main grid. 4) Within the logic for adding each subgrid/list, we also loop through the item data for each subgrid and use the Muuri API to add each item to the subgrid we just added.

Muuri provides everything you'd need to handle the intricacies of a kanban board, but wrapping your brain around it, especially when it comes to syncing with your data as it updates, can be a challenge. I did a write-up of the strategies we used to create our kanban boards here: https://github.com/haltu/muuri/issues/489