feat(table): update column/row size by index

Author: singerla

__tests__/modify-nested-table-grid-size.test.ts

@@ -0,0 +1,52 @@
+import Automizer, { CmToDxa, modify, TableData } from '../src/index';
+
+test('update row hight/column width in a nested table', async () => {
+  const automizer = new Automizer({
+    templateDir: `${__dirname}/pptx-templates`,
+    outputDir: `${__dirname}/pptx-output`,
+  });
+
+  const pres = automizer
+    .loadRoot(`RootTemplate.pptx`)
+    .load(`NestedTables.pptx`, 'tables');
+
+  await pres
+    .addSlide('tables', 4, async (slide) => {
+      const tableData: TableData = {
+        body: [
+          { values: ['top left', 123, 345, 'subsub3-1', 'subsub3-2', 'Last'] },
+          { values: [undefined, 't1', 't2', 't3', 't3', ''] },
+          { values: ['label 0', 1, 2, 3, 3, 'l0'] },
+          { values: ['label 1', 123, 345, 4563, 4671, 'l1'] },
+          { values: ['label 2', 123, 345, 4562, 4672] },
+          { values: ['label 3', 123, 345, 4561, 4673, 'l3'] },
+          { values: [undefined, 'Foo', 'ter', 4564, 4674, ''] },
+        ],
+      };
+
+      slide.modifyElement('NestedTable3', [
+        modify.setTable(tableData, {
+          expand: [
+            {
+              mode: 'row',
+              tag: '{{each:row}}',
+              count: 3,
+            },
+            {
+              mode: 'column',
+              tag: '{{each:subSub3}}',
+              count: 1,
+            },
+          ],
+        }),
+        // Update first column width to 8cm
+        modify.updateColumnWidth(0, CmToDxa(8)),
+        // Update last row's height to 3cm
+        modify.updateRowHeight(6, CmToDxa(3)),
+        // Will also work on non-nested tables
+      ]);
+    })
+    .write(`modify-nested-table-grid-size.test.pptx`);
+
+  // expect(data.length).toBe(12);
+});

__tests__/modify-nested-table.test.ts

@@ -1,6 +1,6 @@
 import Automizer, { modify, TableData } from '../src/index';
 
-test('read table data from slide', async () => {
+test('modify a nested table with tags', async () => {
   const automizer = new Automizer({
     templateDir: `${__dirname}/pptx-templates`,
     outputDir: `${__dirname}/pptx-output`,

src/helper/modify-table-helper.ts

@@ -1,4 +1,4 @@
-import { ModifyTableParams, TableData, TableInfo } from '../types/table-types';
+import { ModifyTableParams, TableData } from '../types/table-types';
 import { ModifyTable } from '../modify/modify-table';
 import { XmlDocument, XmlElement } from '../types/xml-types';
 import { XmlSlideHelper } from './xml-slide-helper';
@@ -69,4 +69,17 @@ export default class ModifyTableHelper {
       const modTable = new ModifyTable(element, data);
       modTable.adjustWidth();
     };
+
+  static updateColumnWidth =
+    (index: number, size: number) =>
+    (element: XmlDocument | XmlElement): void => {
+      const modTable = new ModifyTable(element);
+      modTable.updateColumnWidth(index, size);
+    };
+  static updateRowHeight =
+    (index: number, size: number) =>
+    (element: XmlDocument | XmlElement): void => {
+      const modTable = new ModifyTable(element);
+      modTable.updateRowHeight(index, size);
+    };
 }

src/index.ts

@@ -57,6 +57,8 @@ const setTableData = ModifyTableHelper.setTableData;
 const adjustHeight = ModifyTableHelper.adjustHeight;
 const adjustWidth = ModifyTableHelper.adjustWidth;
 const setTable = ModifyTableHelper.setTable;
+const updateColumnWidth = ModifyTableHelper.updateColumnWidth;
+const updateRowHeight = ModifyTableHelper.updateRowHeight;
 
 const setRelationTarget = ModifyImageHelper.setRelationTarget;
 const setDuotoneFill = ModifyImageHelper.setDuotoneFill;
@@ -124,6 +126,8 @@ export const modify = {
   setTableData,
   adjustHeight,
   adjustWidth,
+  updateColumnWidth,
+  updateRowHeight,
   setTable,
   setRelationTarget,
   setDuotoneFill,

src/modify/modify-table.ts

@@ -25,7 +25,7 @@ export class ModifyTable {
     this.table = new ModifyXmlHelper(table);
     this.xml = table;
 
-    this.data.body.forEach((row) => {
+    this.data?.body.forEach((row) => {
       this.maxCols =
         row.values.length > this.maxCols ? row.values.length : this.maxCols;
     });
@@ -241,6 +241,56 @@ export class ModifyTable {
     return this;
   }
 
+  updateColumnWidth(c: number, size: number) {
+    const tableWidth = this.getTableSize('cx');
+    const targetSize = Math.round(size);
+    let currentSize = 0;
+
+    this.table.modify({
+      'a:gridCol': {
+        index: c,
+        modify: [
+          (ele) => {
+            currentSize = Number(ele.getAttribute('w'));
+          },
+          ModifyXmlHelper.attribute('w', targetSize),
+        ],
+      },
+    });
+
+    const diff = currentSize - targetSize;
+    const targetWidth = tableWidth - diff;
+
+    this.setSize('cx', targetWidth);
+
+    return this;
+  }
+
+  updateRowHeight(r: number, size: number) {
+    const tableSize = this.getTableSize('cy');
+    const targetSize = Math.round(size);
+    let currentSize = 0;
+
+    this.table.modify({
+      'a:tr': {
+        index: r,
+        modify: [
+          (ele) => {
+            currentSize = Number(ele.getAttribute('h'));
+          },
+          ModifyXmlHelper.attribute('h', targetSize),
+        ],
+      },
+    });
+
+    const diff = currentSize - targetSize;
+    const targetTableSize = tableSize - diff;
+
+    this.setSize('cy', targetTableSize);
+
+    return this;
+  }
+
   setSize(orientation: 'cx' | 'cy', size: number): void {
     const sizeElement = this.xml
       .getElementsByTagName('p:xfrm')[0]