Using Yjs in editable table

1

I am gonna make shared table like google sheet.
for example, if a user edit any cell of table, cell value will be changed in other users’ tables
Maybe it will be array
Data are table name, row, column and cell vallue

const ymap = ydoc.getMap('my-json')
const yarray = new Y.Array()
yarray.insert(0, [1, 2, 'ab'])
yarray.insert(1, [3, 4, 'cd'])
ymap.set('cell', yarray)
ymap.toJSON() // { cell : [1, 3, 4, 'cd', 2, 'ab'] }

I prefer the json object as the following:

{ cell: [ [1, 2, 'ab'], [3, 4, 'cd'] ] }

How can I save the cell value using yjs? And I try offline mode too.

2

I build a similar app, but use yMap as store. Every row has own nanoid as identifier

3

Hi, thomaszdxsn.
Thanks for your reply.

I have more question.
Did you use Y.applyUpdate for merging array in your app?
for example:

{ cell: [ [1, 2, 'ab'], [3, 4, 'cd'] ] } // ydoc1 -  user1 edited two cells (1,2) and (3,4)
{ cell: [ [4, 5, 'cd'], [1, 2, 'ab1'] ] } // ydoc2 - user2 edited two cells (4,5) and (1,2)
=============================
{ cell: [ [4, 5, 'cd'], [1, 2, 'ab1'] ] } // the result after applyupdate

but desired result is 
{ cell: [ [1, 2, 'ab1'], [3, 4, 'cd'], [4, 5, 'cd'] ] }

Is it possible? If you have question, let me know.

4

I don’t know YArray too much.

But look the result is make sense, if you want make desired result, I thing input is something like this:

{ cell: [ [1, 2, 'ab'], [3, 4, 'cd'] ] } // ydoc1 -  user1 edited two cells (1,2) and (3,4)
{ cell: [ [1, 2, 'ab1'], undefined, [4, 5, 'cd'] ] } // ydoc2 - user2 edited two cells (4,5) and (1,2)

CRDT is not Operation Transform, it just compare two object’s diff

5

I tested with the undefined. but it doesn’t work.
Users will edit cells randomly
I am trying to store each cell separately. Do you have any idea for it?