Table Print

Table Print extension of Bootstrap Table.

On this page

Adds a button to the toolbar to print the table in a predefined configurable format.

Usage

<script src="extensions/print/bootstrap-table-print.js"></script>

Example

Options

showPrint

attribute: data-show-print
type: Boolean
Detail:

Set true to show the Print button on the toolbar.
Default: false

printAsFilteredAndSortedOnUI

attribute: data-print-as-filtered-and-sorted-on-ui
type: Boolean
Detail:

Set true to print table as sorted and filtered on UI. If true is set, explicit predefined print options for filtering and sorting (printFilter, printSortOrder, printSortColumn). They will be applied to data already filtered and sorted by UI controls. For printing data as filtered and sorted on UI - do not set these three options: printFilter, printSortOrder, printSortColumn.
Default: true

printPageBuilder

attribute: data-print-page-builder
type: Function
Detail:

Receive HTML <table> string and styles string as parameters, returns HTML string for printing. This option is used for styling and adding a header or footer.
Default:

printPageBuilder: function(table, styles) {
  return `
    <html>
    <head>
    ${styles}
    <style type="text/css" media="print">
    @page {
      size: auto;
      margin: 25px 0 25px 0;
    }
    </style>
    <style type="text/css" media="all">
    table {
      border-collapse: collapse;
      font-size: 12px;
    }
    table, th, td {
      border: 1px solid grey;
    }
    th, td {
      text-align: center;
      vertical-align: middle;
    }
    p {
      font-weight: bold;
      margin-left:20px;
    }
    table {
      width: 94%;
      margin-left: 3%;
      margin-right: 3%;
    }
    div.bs-table-print {
      text-align: center;
    }
    table {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    </style>
    </head>
    <title>Print Table</title>
    <body>
    <p>Printed on: ${new Date} </p>
    <div class="bs-table-print">${table}</div>
    </body>
    </html>
  `
}

printSortColumn

attribute: data-print-sort-column
type: String
Detail:

Set column field name to sort by for the printed table.
Default: undefined

printSortOrder

attribute: data-print-sort-order
type: String
Detail:

Valid values: ‘asc’, ‘desc’. Relevant only if printSortColumn is set.
Default: 'asc'

printStyles

attribute: data-print-styles
type: Array
Detail:

Add styles to the printed page, such as custom icons.
Default: []

Icons

print: 'fa-print'

rowStyle and cellStyle Support

The print extension supports rowStyle and cellStyle options to apply styles to rows and cells in the printed table. Both the css property (inline styles) and the classes property are applied to the printed output.

The css property supports multiple formats: plain objects ({ color: 'red' }), strings ('color: red'), and arrays (['color: red', { 'font-weight': 'bold' }]), matching the behavior of the core table renderer.

If you need class-based styling in the print output, use the printStyles option to include the relevant CSS file. Note that if you use a custom printPageBuilder, you must include the styles parameter (the second argument, an HTML string containing <link> tags) in your returned HTML to ensure the CSS links are injected into the print window.

Column options

printFilter

attribute: data-print-filter
type: String
Detail:

Set the value to filter the printed data by this column.
Default: undefined

printFormatter

attribute: data-print-formatter
type: Function
Detail:

A custom function(value, row, index) - returns a string. Formats the cell values for this column in the printed table. Function behavior is similar to the ‘formatter’ column option.
Default: undefined