Creating Tables with Horizontal Headers using drawHeaderRow in Typescript

Question

Creating Tables with Horizontal Headers using drawHeaderRow in Typescript

Utilizing jsPDF, I was able to generate a table from JSON data and store it in a PDF document. To showcase this functionality, I developed an Angular2/Typescript application. This application creates a table based on my JSON data. My goal now is to use jsPDF to create a table with horizontal headers as demonstrated in the example here. The code snippet for achieving this task is provided below.

// Horizontal - shows how tables can be drawn with horizontal headers
examples.horizontal = function () {
  var doc = new jsPDF('p', 'pt');
  doc.autoTable(getColumns().splice(1,4), getData(), {
    drawHeaderRow: function() {
        // Don't draw header row
        return false;
    },
    columnStyles: {
        first_name: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'}
    }
  });
  return doc;
};

The full code can be accessed here. It should be noted that this code is in JavaScript, and I am currently seeking guidance on converting it into Typescript. Any helpful insights would be greatly appreciated!

json typescript angular jspdf jspdf-autotable

Answer 1

Answer №1

Here is a possible representation of your component:

@Component({
  selector: 'my-app',
  template: 
    `<h1>JSON to PDF Converter</h1>
    <div class="container" id="div1">
        <button id="create" (click)="convert('base')">Generate PDF</button> 
        <button id="create" (click)="convert('horizontal')">
           Generate PDF with horizontal table
        </button> 
    </div>
    `
})
export class AppComponent {
  cols: Array<any> = [{
      title: "Details",
      dataKey: 'details'
    }, {
      title: "Values",
      dataKey: 'values'
   }];

  optionsContainer = {
    base: {},
    horizontal: {
      drawHeaderRow: () => false,
      columnStyles: {
          details: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'}
      }
    }
  };

  rows: Array<any> = [];

  constructor() {
    const item = {
      "Name" : "John Doe",
      "Age" : "30",
      "Gender" : "Male"
    }; 

    this.rows = Object.keys(item).map((key) => {  
      return { 'details': key, 'values': item[key] };
    });
  }

  convert(action){
    const doc = new jsPDF()
       .autoTable(this.cols, this.rows, this.optionsContainer[action]);
    doc.save('GeneratedPDF.pdf');
  }
}

Check out the Demo on Plunker

Answer 2

Here is a possible representation of your component:

@Component({
  selector: 'my-app',
  template: 
    `<h1>JSON to PDF Converter</h1>
    <div class="container" id="div1">
        <button id="create" (click)="convert('base')">Generate PDF</button> 
        <button id="create" (click)="convert('horizontal')">
           Generate PDF with horizontal table
        </button> 
    </div>
    `
})
export class AppComponent {
  cols: Array<any> = [{
      title: "Details",
      dataKey: 'details'
    }, {
      title: "Values",
      dataKey: 'values'
   }];

  optionsContainer = {
    base: {},
    horizontal: {
      drawHeaderRow: () => false,
      columnStyles: {
          details: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'}
      }
    }
  };

  rows: Array<any> = [];

  constructor() {
    const item = {
      "Name" : "John Doe",
      "Age" : "30",
      "Gender" : "Male"
    }; 

    this.rows = Object.keys(item).map((key) => {  
      return { 'details': key, 'values': item[key] };
    });
  }

  convert(action){
    const doc = new jsPDF()
       .autoTable(this.cols, this.rows, this.optionsContainer[action]);
    doc.save('GeneratedPDF.pdf');
  }
}

Check out the Demo on Plunker

Creating Tables with Horizontal Headers using drawHeaderRow in Typescript

Answer №1

Similar questions

tying [inactive] to a specific attribute

Working with JSON data in Angular 2 constructor

What could be causing a blank page to appear after being redirected? (Using NextJS 13 API Route)

Populate a map<object, string> with values from an Angular 6 form

Issue encountered while trying to utilize the reset function of the FormGroup with the angular2-tinymce plugin

Unable to simulate a returned value from an import in Jest

Is it the practice of the Signalr server to dispatch a consolidated response for all pending requests when polled using longpolling?

Upgrading the import package alias from 'angular2' to '@angular'

Tips for personalizing the JSON output with active-model-serializers

Converting an array of objects to an array based on an interface

When attempting to edit a JSON file line by line, an error is thrown: UnsupportedOperation - the file

Is there a way to merge two typed Joi schemas together?

Failure of regex expression when applied to a string

Does MySQL JSON_OBJECT maintain the value order?

A step-by-step guide on accessing a JSON configuration file and configuring the parameter for AJAX requests

Tips for creating ternary operator logic that account for numerous conditions and optional parameters:

Is there a way to adjust the dimensions of my Angular npm slider?

What is the process for consolidating a TypeScript web application with node modules into a single JavaScript file using the command line

Angular2 Routing error. Index 1 in the requested path is undefined

Using the React UseEffect Hook allows for value updates to occur within the hook itself, but not within the main