can not create a table with a headers row and add dynamic data to the headers and the data cells

[rezaimn]

Hi. I want to create a table in Ckeditor 5 that must contain a header row and a data row. I have tried editor.execute to create a table with a header row and it was ok, but I don't know how to fill the header and data cells with my data programmatically.

      editor.execute('insertTable', {rows: 2, columns: 4});
      editor.execute('setTableRowHeader');

I also tried TableUtils plugin, I could create a table and fill it with my data, but I don't know how to make my first row as the header with this method.

     const tableUtils = this.editor.plugins.get('TableUtils');
     this.editor.model.change(writer => {
      const table = tableUtils.createTable(writer, 2, result.length);
      result.forEach((column, index) => {
            writer.insertText(`${column.Name}`, {bold: true}, 
            table.getChild(0).getChild(index).getChild(0), 0);
            writer.insertText(`{Tag.Embed.${column.Name}}`, 
            table.getChild(1).getChild(index).getChild(0), 0);
      });
      this.editor.model.insertContent(table);
    });

Is there any solution to fix each of the above ways I have tried?
thank you.

[Mgsy]

@jodator, can you take a look at it?

[rezaimn]

@jodator, can you take a look at it?

Sorry, Can I take a look at what?

[jodator]

Sorry, Can I take a look at what?

I will look at this - @Mgsy was pinging me here :)

[rezaimn]

Sorry, Can I take a look at what?

I will look at this - @Mgsy was pinging me here :)

Great, Thanks

[jodator]

@rezaimn You can do it like this:

const model = editor.model;

model.change( writer => {
	// Create a table.
	const table = tableUtils.createTable( writer, 2, 2 );
	// Set it's "headingRows" attribute to 1.
	writer.setAttribute( 'headingRows', 1, table );

	// To simplify we'll take the first (only) data row.
	const dataRow = table.getChild( 1 );

	for ( const tableCell of dataRow.getChildren() ) {
		// Each created table cell have an empty paragraph as a child.
		const paragraph = tableCell.getChild( 0 );

		// Crete a content to insert - here just "foo" text.
		const text = writer.createText( 'foo' );

		// Insert text to a paragraph.
		const insertPosition = writer.createPositionAt( paragraph, 0 );
		writer.insert( text, insertPosition );
	}

	// Use model.insertContent() to insert a created content.
	// It will insert table at a current document selection position.
	model.insertContent( table );
} );

[rezaimn]

@rezaimn You can do it like this:

const model = editor.model;

model.change( writer => {
	// Create a table.
	const table = tableUtils.createTable( writer, 2, 2 );
	// Set it's "headingRows" attribute to 1.
	writer.setAttribute( 'headingRows', 1, table );

	// To simplify we'll take the first (only) data row.
	const dataRow = table.getChild( 1 );

	for ( const tableCell of dataRow.getChildren() ) {
		// Each created table cell have an empty paragraph as a child.
		const paragraph = tableCell.getChild( 0 );

		// Crete a content to insert - here just "foo" text.
		const text = writer.createText( 'foo' );

		// Insert text to a paragraph.
		const insertPosition = writer.createPositionAt( paragraph, 0 );
		writer.insert( text, insertPosition );
	}

	// Use model.insertContent() to insert a created content.
	// It will insert table at a current document selection position.
	model.insertContent( table );
} );

Thank you so much.