Support for nested tables

[Reinmar]

Add support for nesting one table inside another.

This feature wasn't on our roadmap yet, but let's gather a feedback if this is a common requirement.

NOTE: It is possible to enable support for nested tables. See https://github.com/ckeditor/ckeditor5-table/issues/121#issuecomment-528251188 for how to do that.

---

If you'd like this to be officially supported add 👍 to this ticket.

[Reinmar]

Quote from #1260 (comment)

We do not "need" this feature for editing. But we have to handle incoming mails with our application. I found this nested table in a mail signature.

[AustinMutschler]

@Reinmar I have a specific use case that would require editing nested tables. This would be a must have feature for my team so if there is anyway to put it on the roadmap that would be very much appreciated.

Many of our current users are used to using Microsoft Word, so to properly convert some of these files to a web editing interface they would need to be able to nest tables inside of table like their current documents support.

[AustinMutschler]

@Reinmar is there any update on supporting a table in table feature?

[AustinMutschler]

@Reinmar I hate to keep bugging you about this but is there anyway for me to help implement this. Is there documentation I can read to try to help contribute to this project so I can attempt to add table in table support. This is a very important feature for my team to have for our specific use case.

[Reinmar]

Hi Austin!

The good news is that nested tables are actually supported, but this is disabled for simplicity via the schema. We had to reduce the scope initially, but from what I can see it's working quite fine.

To enable tables inside tables, you need to override the schema check which disables them. This check is a callback to Schema#checkChild event and you can add another callback to override that one:

editor.model.schema.on( 'checkChild', ( evt, args ) => {
	const context = args[ 0 ];
	const childDefinition = args[ 1 ];

	if ( context.endsWith( 'tableCell' ) && childDefinition && childDefinition.name == 'table' ) {
		// Prevent next listeners from being called.
		evt.stop();
		// Set the checkChild()'s return value.
		evt.return = true;
	}
}, { priority: 'highest' } );

You will need to wrap this code with function and pass it to config.extraPlugins because this code needs to be executed before the editor loads data.

The bad news is that there's not much interest in this so far, so if there will be some issues, we're not going to prioritize them at the moment. If you'd like help with resolving them you can always contact us.

[jodator]

@Reinmar, unfortunately, there are some minor issues with selecting the table inside the table with a mouse - it will select the uppermost table.

[AustinMutschler]

@Reinmar This helps a lot. Thank you for spending time to teach me how to enable this feature. I will be testing it extensively in a development and production environment and can hopefully help solve bugs and any issues that arise.

Update 1:
I am using CKEditor 5 with React and it appears that the onInit prop does not execute before the data is passed in because I can create a table within a table but when I refresh the page it converts it back to the weird text format.

Update 2:
I was able to overcome the issue in Update 1 by setting a flag that waited for my function in onInit to run before adding data to the data tag.