feature(tables): add columns to table / adjust table width

Author: singerla

__tests__/modify-existing-table.test.ts

@@ -7,16 +7,32 @@ test('create presentation, add and modify an existing table.', async () => {
   });
 
   const data1 = {
+    body: [
+      { label: 'item test r1', values: ['test1', 10, 16, 12, 11] },
+      { label: 'item test r2', values: ['test2', 12, 18, 15, 12] },
+      { label: 'item test r3', values: ['test3', 14, 12, 11, 14] },
+    ],
+  };
+
+  const data2 = {
     body: [
       { label: 'item test r1', values: ['test1', 10, 16, 12] },
       { label: 'item test r2', values: ['test2', 12, 18, 15] },
       { label: 'item test r3', values: ['test3', 14, 12, 11] },
-      // { label: 'item test r4', values: ['test4', 14, 12, 11] },
-      // { label: 'item test r5', values: ['test5', 14, 12, 11] },
-      // { label: 'item test r6', values: ['test6', 999, 12, 11] },
-      // { label: 'item test r6', values: ['test7', 999, 12, 11] },
-      // { label: 'item test r6', values: ['test8', 999, 12, 11] },
-      // { label: 'item test r6', values: ['test9', 999, 12, 11] },
+      { label: 'item test r4', values: ['test4', 14, 12, 18] },
+      { label: 'item test r5', values: ['test5', 14, 13, 15] },
+      { label: 'item test r6', values: ['test6', 999, 14, 14] },
+      { label: 'item test r7', values: ['test7', 998, 15, 13] },
+      { label: 'item test r8', values: ['test8', 997, 16, 19] },
+      { label: 'item test r9', values: ['test9', 996, 17, 18] },
+    ],
+  };
+
+  const data3 = {
+    body: [
+      { label: 'item test r1', values: ['test1', 10, 16] },
+      { label: 'item test r2', values: ['test2', 12, 18] },
+      { label: 'item test r3', values: ['test3', 14, 12] },
     ],
   };
 
@@ -26,7 +42,20 @@ test('create presentation, add and modify an existing table.', async () => {
 
   const result = await pres
     .addSlide('tables', 1, (slide) => {
-      slide.modifyElement('TableWithHeader', [modify.setTableData(data1)]);
+      slide.modifyElement('TableDefault', [
+        modify.setTable(data1),
+      ]);
+
+      slide.modifyElement('TableWithLabels', [
+        modify.setTable(data2),
+        // modify.dump
+      ]);
+
+      slide.modifyElement('TableWithHeader', [
+        modify.setTableData(data3),
+        modify.adjustHeight(data3),
+        modify.adjustWidth(data3),
+      ]);
     })
     .write(`modify-existing-table.test.pptx`);
 

src/helper/modify-table-helper.ts

@@ -3,17 +3,33 @@ import { TableData } from '../types/table-types';
 import { ModifyTable } from '../modify/modify-table';
 
 export default class ModifyTableHelper {
-  /**
-   * @TODO: Set table data of modify table helper
-   */
+  static setTable = (data: TableData) => (
+    element: XMLDocument | Element,
+  ): void => {
+    const modTable = new ModifyTable(element, data);
+    modTable.modify()
+    modTable.adjustWidth()
+    modTable.adjustHeight();
+  };
+
   static setTableData = (data: TableData) => (
     element: XMLDocument | Element,
   ): void => {
     const modTable = new ModifyTable(element, data);
+    modTable.modify();
+  };
 
-    modTable.modify().adjustHeight();
+  static adjustHeight = (data: TableData) => (
+    element: XMLDocument | Element,
+  ): void => {
+    const modTable = new ModifyTable(element, data);
+    modTable.adjustHeight();
+  };
 
-    // console.log(data);
-    // XmlHelper.dump(element);
+  static adjustWidth = (data: TableData) => (
+    element: XMLDocument | Element,
+  ): void => {
+    const modTable = new ModifyTable(element, data);
+    modTable.adjustWidth();
   };
 }

src/index.ts

@@ -13,6 +13,9 @@ const setPosition = ModifyShapeHelper.setPosition;
 
 import ModifyTableHelper from './helper/modify-table-helper';
 const setTableData = ModifyTableHelper.setTableData;
+const adjustHeight = ModifyTableHelper.adjustHeight;
+const adjustWidth = ModifyTableHelper.adjustWidth;
+const setTable = ModifyTableHelper.setTable;
 
 import ModifyChartHelper from './helper/modify-chart-helper';
 const setChartData = ModifyChartHelper.setChartData;
@@ -34,6 +37,9 @@ export const modify = {
   setText,
   setPosition,
   setTableData,
+  adjustHeight,
+  adjustWidth,
+  setTable,
   setChartData,
   setChartVerticalLines,
   setChartBubbles,

src/modify/modify-table.ts

@@ -8,24 +8,47 @@ export class ModifyTable {
   table: ModifyXmlHelper;
   xml: XMLDocument | Element;
 
-  constructor(table: XMLDocument | Element, data: TableData) {
+  constructor(table: XMLDocument | Element, data?: TableData) {
     this.data = data;
 
     this.table = new ModifyXmlHelper(table);
     this.xml = table;
   }
 
   modify(): ModifyTable {
-    this.setContents();
+    this.setRows();
+    this.setGridCols();
+
     this.sliceRows();
+    this.sliceCols();
 
     return this;
   }
 
-  setContents() {
+  setRows() {
     this.data.body.forEach((row: TableRow, r: number) => {
       row.values.forEach((cell: number | string, c: number) => {
         this.table.modify(this.row(r, this.column(c, this.cell(cell))));
+        this.table.modify({
+          'a16:rowId': {
+            index: r,
+            modify: ModifyXmlHelper.attribute('val', r),
+          }
+        })
+      });
+    });
+  }
+
+  setGridCols() {
+    this.data.body[0].values.forEach((cell, c: number) => {
+      this.table.modify({
+        'a:gridCol': {
+          index: c
+        },
+        'a16:colId': {
+          index: c,
+          modify: ModifyXmlHelper.attribute('val', c),
+        }
       });
     });
   }
@@ -36,6 +59,12 @@ export class ModifyTable {
     });
   }
 
+  sliceCols() {
+    this.table.modify({
+      'a:tblGrid': this.slice('a:gridCol', this.data.body[0].values.length),
+    });
+  }
+
   row = (index: number, children: ModificationTags): ModificationTags => {
     return {
       'a:tr': {
@@ -75,13 +104,7 @@ export class ModifyTable {
   }
 
   adjustHeight() {
-    const tableHeight = Number(
-      this.xml
-        .getElementsByTagName('p:xfrm')[0]
-        .getElementsByTagName('a:ext')[0]
-        .getAttribute('cy'),
-    );
-
+    const tableHeight = this.getTableSize('cy')
     const rowHeight = tableHeight / this.data.body.length;
 
     this.data.body.forEach((row: TableRow, r: number) => {
@@ -92,5 +115,32 @@ export class ModifyTable {
         },
       });
     });
+
+    return this
+  }
+
+  adjustWidth() {
+    const tableWidth = this.getTableSize('cx')
+    const rowWidth = tableWidth / this.data.body[0].values.length;
+
+    this.data.body[0].values.forEach((cell, c: number) => {
+      this.table.modify({
+        'a:gridCol': {
+          index: c,
+          modify: ModifyXmlHelper.attribute('w', Math.round(rowWidth)),
+        },
+      });
+    });
+
+    return this
+  }
+
+  getTableSize(orientation: string): number {
+    return Number(
+      this.xml
+        .getElementsByTagName('p:xfrm')[0]
+        .getElementsByTagName('a:ext')[0]
+        .getAttribute(orientation),
+    );
   }
 }