row.styles in tables

[MP70]

When adding new rows to a table using the ModifyTable class, it currently applies the styles of row 0 to the new rows (well actually an empty style object and this seems to be powerpoints default behaviour for that). For instance, if row 0 is a header with larger and bold text, and rows 1-3 have normal smaller text, calling modify with 10 rows results in rows 1-3 keeping their original text style, while rows 4-9 have the header text style.

Although it's possible to override this using the style object for each row, it requires the application to be aware of the table styling, instead of allowing the user to freely style it in the template file and have the styles respected.

It doesn't actually matter in my use of this library whatsoever but I did stumble upon it, and it seemed perhaps suboptimal.

To address this, we could introduce a "has header" toggle or a "repeatLastRowStyles" option that repeats last row style rather than empty row style. This would allow the user to choose how new rows should inherit styles from existing rows, providing a more flexible solution.

Something like this ? What do you think :)

setRows() {
  const lastRowIndex = this.data.body.length - 1;
  const lastRowStyles = this.data.body[lastRowIndex]?.styles || {};

  this.data.body.forEach((row: TableRow, r: number) => {
    row.values.forEach((cell: number | string, c: number) => {
      let rowStyles = {};

      if (row.styles && row.styles[c]) {
        rowStyles = row.styles[c];
      } else if (this.data.repeatLastRowStyles) {
        rowStyles = lastRowStyles[c] ? lastRowStyles[c] : {};
      } else {
        rowStyles = {};
      }

      this.table.modify(
        this.row(r, this.column(c, this.cell(cell, rowStyles))),
      );
      this.table.modify({
        'a16:rowId': {
          index: r,
          modify: ModifyXmlHelper.attribute('val', r),
        },
      });
    });
  });
}

[singerla]

Hi! I was also stumbling upon this in the past. To grub out the roots: I guess it is because of this.templates[tag] below.

src/helper/modify-xml-helper.ts

assertElement(
    collection: HTMLCollectionOf<Element>,
    index: number,
    tag: string,
    parent: XmlDocument | XmlElement,
    modifier: Modification,
  ): XmlDocument | XmlElement | boolean {
    if (!collection[index]) {
      if (collection[collection.length - 1] === undefined) {
        this.createElement(parent, tag);
      } else {
        const previousSibling = collection[collection.length - 1];

        // this.templates[tag] will be taken by default, and this is your first row:
        const newChild =
          this.templates[tag] && !modifier.fromPrevious
            ? this.templates[tag].cloneNode(true)
            : previousSibling.cloneNode(true);

        XmlHelper.insertAfter(newChild, previousSibling);
      }
    }

I'm not sure on this, but using fromPrevious could be your solution.

src/modify/modify-table.ts

  row = (index: number, children: ModificationTags): ModificationTags => {
    return {
      'a:tr': {
        // like this, but it will be best to let the user decide:
        fromPrevious: true,
        index: index,
        children: children,
      },
    };
  };

I did not test this, but it should change the behaviour as expected!

Thanks again for pointing out!

[az-oolloow]

@singerla So I am using a more high-level API in the form of modify.setTableData.

And what I see with that is if I am adding 3 rows and set say background colour on row 2 then it also applies to row 3 (as it seems to clone that node not the vanilla node I have in the actual file). Is it possible to say that there should not be any colour set using modify.setTableData?

[singerla]

I have canged it to forceCreate: true

  row = (index: number, children: ModificationTags): ModificationTags => {
    return {
      'a:tr': {
        forceCreate: true,
        index: index,
        children: children,
      },
    };
  };

as this also has crashed one of my projects.