Can anyone think of a way to recreate this in a datagrid? Basically a dynamic divider separating each day for which there are records?
I would use a vertical collection that has a div for the date box and pull that up dynamically. Then inside each collection row I would nest another collection that holds the transactions filtered for only that date.
1 Like
Thanks @mark I’ll give it a go.
If your transaction are already sorted in an array you can just use a collection list. in the repeated container put the divider with the day of the current transaction. Conditionally render the divider if item.index is 0 or if sourceArray[item.index+1] has a date different from the date of the current item. The actual comparison of dates depends on what you are using and may require some transformation either from the backend or from weweb.
2 Likes
Thanks @dorilama will give it a try.
@dorilama I’ve tried formulas and co-pilot generated javascript (shown below) and can’t get it to work. I am comparing the submit_date on each item which you can see are the same on multiple items, and yet the flexbox is displayed every time. Any suggestions please?
hint: a string is always different from one of its characters or undefined 
context.item.data is the current data of the container. You need to compare the current date to the date of the next item, and of coirse it’s not inside the current item. To access the next item you need to start from the array bound to your list.
If you bind the collection list to myarray, the nth item will be myarray[n]. In your code you are looking for something like this: myarray[context.item.index+1] to access the next item. Keep in mind that the last item will not have an element to access.
Thanks @dorilama but not sure what you mean by “…from one of its characters…”. Are you saying that two strings that appear to be the same (say “2023-09-01” and “2023-09-01” could be interpreted as being different?
I’m getting closer with this formula. But now transactions are being duplicated and miscateogrized by dates. The second screenshot shows what the actual transaction list should be.
context.item.data → cutternt item data
let’s assume it’s like this: {date:"2023"}
context.item.data.date → "2023"
context.item.data.date[0] → "2"
context.item.data.date[1] → "0"
context.item.data.date[15] → undefined
do you see what’s going on? in your comparison you are accessing the same string, then accessing a caracter of that string.
you want to compare the current cell’s date to the next cell’s date. The next cell data is not in the context.item
you got the right way to access the data, just compare to the previous date instead than the next one
1 Like
Ah ok I see thanks. In the formula screenshot you can see that I changed it to compare to the submit_date key value in the next item in the array. But I’m now seeing strange behavior with transactions being duplicated or miscategorized in the wrong date.
OK thanks will try that.
@dorilama I literally changed the ‘+1’ to ‘-1’ and it works perfectly! Thanks for your help!
1 Like
Nice table. Way to go! 
1 Like
Actually good point I used a Table not a Datagrid. Much more flexible. I guess the only time you’d really need a datagrid is if you want it’s built-in editing capabilities?
the built-in editing, state management and layout are the top advantages of the datagrid.
You can create tables yourself with 100% nocode elements (see this dynamic grid example) but the datagrid is much faster to setup.
1 Like