Data

Export

Save rows as CSV, Excel, Word, PDF, JSON, HTML or Markdown, copy them as a table or print them — written by the kit itself, no third-party library. One icon button per format, or one "Export" button with a menu; both take the same fields, data and options.

Features10

API

Theming

Basic

An icon button with a translated tooltip saves data as members.csv. fields picks the columns and their titles; a number field gets the row number.

Formats

Every format from the same setup: Excel keeps numbers, dates and booleans typed; Word and PDF are paged documents with the title, the date and page numbers (the PDF embeds only the glyphs it uses, Cyrillic included); JSON, HTML and Markdown are text files; Copy table puts it on the clipboard so it pastes into a spreadsheet by columns; Print opens the browser print dialog.

37 lines

<div class="row" role="toolbar" aria-label="Export invoices">  <tx-export-excel filename="invoices" title="Invoices" [data]="invoices" [fields]="fields" />  <tx-export-csv filename="invoices" [data]="invoices" [fields]="fields" />  <tx-export-word filename="invoices" title="Invoices" [data]="invoices" [fields]="fields" />  <tx-export-pdf filename="invoices" title="Invoices" [data]="invoices" [fields]="fields" />  <tx-export-button    format="json"    variant="outlined"    filename="invoices"    [data]="invoices"    [fields]="fields"  />  <tx-export-button    format="html"    variant="outlined"    filename="invoices"    title="Invoices"    [data]="invoices"    [fields]="fields"  />  <tx-export-button    format="markdown"    variant="outlined"    filename="invoices"    title="Invoices"    [data]="invoices"    [fields]="fields"  />  <tx-export-button format="copy" variant="outlined" [data]="invoices" [fields]="fields" />  <tx-export-button    format="print"    variant="outlined"    title="Invoices"    [data]="invoices"    [fields]="fields"  /></div>

<div class="row">  <tx-export    filename="orders"    title="Orders"    [data]="orders"    [fields]="fields"    (exported)="onExported($event)"  />  <tx-export    label="Spreadsheets"    variant="outlined"    filename="orders"    [formats]="['excel', 'csv', 'copy']"    [data]="orders"    [fields]="fields"    (exported)="onExported($event)"  /></div>

Columns

Each field can set width (characters, in every format), align, type and an Excel format; field can be a path (author.name), aggregator converts the value, place numbers the rows, and formats keeps a column only in some formats — the internal note is in Excel, CSV and JSON, not in the documents.

Excel

Excel options: sheet name, number and date formats (a field format wins over them), header colour and weight, frozen header, filter buttons and column widths from the content (or from width, between minWidth and maxWidth).

Sheet name

Number format

Date format

Header background

Freeze the header

Filter buttons

Bold header

Fit columns to content

60 lines

<div class="grid">  <tx-field label="Sheet name">    <input txInput [fluid]="true" [ngModel]="sheet()" (ngModelChange)="sheet.set($event)" />  </tx-field>  <tx-field label="Number format">    <tx-select      ariaLabel="Number format"      [options]="numberFormats"      [ngModel]="numberFormat()"      (ngModelChange)="numberFormat.set($event)"    />  </tx-field>  <tx-field label="Date format">    <tx-select      ariaLabel="Date format"      [options]="dateFormats"      [ngModel]="dateFormat()"      (ngModelChange)="dateFormat.set($event)"    />  </tx-field>  <tx-field label="Header background">    <tx-color-picker      [ngModel]="headerBackground()"      (ngModelChange)="headerBackground.set($event)"    />  </tx-field></div><div class="checks">  <tx-checkbox    label="Freeze the header"    [binary]="true"    [ngModel]="freeze()"    (ngModelChange)="freeze.set($event)"  />  <tx-checkbox    label="Filter buttons"    [binary]="true"    [ngModel]="filter()"    (ngModelChange)="filter.set($event)"  />  <tx-checkbox    label="Bold header"    [binary]="true"    [ngModel]="bold()"    (ngModelChange)="bold.set($event)"  />  <tx-checkbox    label="Fit columns to content"    [binary]="true"    [ngModel]="autoWidth()"    (ngModelChange)="autoWidth.set($event)"  /></div><tx-export-excel  label="Download .xlsx"  filename="sales"  [data]="sales"  [fields]="fields"  [options]="options()"/>

Documents

PDF, Word and print share the page setup: size, orientation (auto turns landscape above five columns), font size, title, subtitle and date, page numbers, stripes and lines. The header row repeats on every page.

Title

Page size

Orientation

Font size

Date under the title

Page numbers

Striped rows

Vertical lines

80 lines

<div class="grid">  <tx-field label="Title">    <input txInput [fluid]="true" [ngModel]="title()" (ngModelChange)="title.set($event)" />  </tx-field>  <tx-field label="Page size">    <tx-select      ariaLabel="Page size"      [options]="sizes"      [ngModel]="pageSize()"      (ngModelChange)="pageSize.set($event)"    />  </tx-field>  <tx-field label="Orientation">    <tx-select      ariaLabel="Orientation"      [options]="orientations"      [ngModel]="orientation()"      (ngModelChange)="orientation.set($event)"    />  </tx-field>  <tx-field label="Font size">    <tx-select      ariaLabel="Font size"      [options]="fontSizes"      [ngModel]="fontSize()"      (ngModelChange)="fontSize.set($event)"    />  </tx-field></div><div class="checks">  <tx-checkbox    label="Date under the title"    [binary]="true"    [ngModel]="showDate()"    (ngModelChange)="showDate.set($event)"  />  <tx-checkbox    label="Page numbers"    [binary]="true"    [ngModel]="pageNumbers()"    (ngModelChange)="pageNumbers.set($event)"  />  <tx-checkbox    label="Striped rows"    [binary]="true"    [ngModel]="striped()"    (ngModelChange)="striped.set($event)"  />  <tx-checkbox    label="Vertical lines"    [binary]="true"    [ngModel]="gridlines()"    (ngModelChange)="gridlines.set($event)"  /></div><div class="row">  <tx-export-pdf    label="PDF"    filename="team"    [data]="people"    [fields]="fields"    [options]="options()"  />  <tx-export-word    label="Word"    variant="outlined"    filename="team"    [data]="people"    [fields]="fields"    [options]="options()"  />  <tx-export-button    format="print"    label="Print"    variant="outlined"    [data]="people"    [fields]="fields"    [options]="options()"  /></div>

Server

fetchData loads the rows on click — every page from the server — while the button spins and ignores more clicks. Returning null cancels the export.

Cancel the next export

9 lines

<div class="row">  <tx-export filename="orders" title="All orders" [fields]="fields" [fetchData]="loadAll" />  <tx-checkbox    label="Cancel the next export"    [binary]="true"    [ngModel]="cancel()"    (ngModelChange)="cancel.set($event)"  /></div>

Events

exported tells the format, the file name and how many rows went out; failed fires when fetchData or the writer throws, and the next click starts again.

16 lines

<div class="row">  <tx-export-csv    label="Export stock"    [data]="rows"    [fields]="fields"    (exported)="onExported($event)"  />  <tx-export-csv    label="Export (fails)"    variant="outlined"    severity="danger"    [fields]="fields"    [fetchData]="broken"    (failed)="toast.error('The server did not answer — try again')"  /></div>

Defaults

provideTxExport() sets defaults for the whole app (in app.config.ts) or for one component and its children, as here: semicolon CSV, Excel formats and colours, Letter pages. options on a button still wins.

Pass through

pt.button styles the inner button — here a wider pill.