Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-csv-entryIn your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">The most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File Blob is generated and emitted:
<ts-csv-entry (blobGenerated)="myFunc($event)"></ts-csv-entry>myFunc(blob: Blob) { ... }Define the number of columns (default is 2):
<ts-csv-entry [columnCount]="7">
<!-- Will generate a csv entry with 7 columns -->
</ts-csv-entry>NOTE: Column count does not restrict how many columns can be pasted into the table.
Define the number of rows (default is 4):
<ts-csv-entry [rowCount]="5">
<!-- Will generate a csv entry with 5 rows -->
</ts-csv-entry>NOTE: Row count does not restrict how may rows can be pasted into the table.
Define the maximum number of rows a table will allow (default is 2000):
<ts-csv-entry [maxRows]="100"></ts-csv-entry>If the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.
NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.
Pass in an array of validators matching the column count.
myValidators = [null, this.validatorsService.url(), null, null];<ts-csv-entry [columnCount]="4" [columnValidators]="myValidators"></ts-csv-entry>This example would add the URL validation to the second column only.
If there are certain headers that must be available, these can be set via an input:
<ts-csv-entry [columnHeaders]="['Header One', 'Header Two']">
</ts-csv-entry>Setting static column headers will set the header cells to readonly. This will still allow keyboard navigation but will not allow the user
to change the contents of the set header cells.
If the table should be a single, full-width column, set both columnCount and fullWidth:
<ts-csv-entry [columnCount]="1" [fullWidth]="true"></ts-csv-entry>NOTE: full width should only be used with a single column
Consumer's can add custom footer content by enclosing it within the CSV entry component:
<ts-csv-entry>
<button>My custom footer button!</button>
</ts-csv-entry>This content will be added opposite the default footer buttons set.
The footer layout defaults to ltr mode which lays out the default buttons on the left and any custom content on the
right. This can be reversed:
<ts-csv-entry footerDirection="rtl"></ts-csv-entry>Allowed directions are: ltr, rtl.