\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/CI%20Release/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [Styles to be added](#styles-to-be-added)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n * @angular/cdk\n * @angular/common\n * @angular/core\n * @angular/flex-layout\n * @angular/forms\n * @angular/material\n * @angular/platform-browser\n * @terminus/design-tokens\n * @terminus/ngx-tools\n * @terminus/ui-button\n * @terminus/ui-icon\n * @terminus/ui-icon-button\n * @terminus/ui-spacing\n * @terminus/ui-tooltip\n * @terminus/ui-utilities\n * @terminus/ui-csv-entry\n * date-fns\n\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\n ng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n * TsCSVEntryModule\n\n### Styles to be added\n\n At top level `styles.scss`, add these styles:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [Styles to be added](#styles-to-be-added)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n * @angular/cdk\n * @angular/common\n * @angular/core\n * @angular/flex-layout\n * @angular/forms\n * @angular/material\n * @angular/platform-browser\n * @terminus/design-tokens\n * @terminus/ngx-tools\n * @terminus/ui-button\n * @terminus/ui-icon\n * @terminus/ui-icon-button\n * @terminus/ui-spacing\n * @terminus/ui-tooltip\n * @terminus/ui-utilities\n * @terminus/ui-csv-entry\n * date-fns\n\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\n ng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n * TsCSVEntryModule\n\n### Styles to be added\n\n At top level `styles.scss`, add these styles:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-csv-entry`\n- `date-fns`\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### Modules that need to be in NgModule\n\n- `TsCSVEntryModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Column count](#column-count)\n - [Row count](#row-count)\n - [Max rows](#max-rows)\n - [Column validation](#column-validation)\n - [Static column headers](#static-column-headers)\n - [Full width table](#full-width-table)\n - [Custom footer content](#custom-footer-content)\n - [Footer direction](#footer-direction)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-csv-entry\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\nThe most basic implementation only needs the HTML and a single method. Each time the CSV table is updated, a new File\nBlob is generated and emitted:\n\n```html\n\n```\n\n```typescript\nmyFunc(blob: Blob) { ... }\n```\n\n### Column count\n\nDefine the number of columns (default is 2):\n\n```html\n\n \n\n```\n\n> NOTE: Column count does not restrict how many columns can be pasted into the table.\n\n### Row count\n\nDefine the number of rows (default is 4):\n\n```html\n\n \n\n```\n\n> NOTE: Row count does not restrict how may rows can be pasted into the table.\n\n### Max rows\n\nDefine the maximum number of rows a table will allow (default is 2000):\n\n```html\n\n```\n\nIf the user attempts to paste or manually add more rows than are allowed, a validation message will appear below the table.\n\n### Column validation\n\n> NOTE: Currently, custom validation messaging is only supported for the URL validator. More will be added as needs arise.\n\nPass in an array of validators matching the column count.\n\n```typescript\nmyValidators = [null, this.validatorsService.url(), null, null];\n```\n\n```html\n\n```\n\nThis example would add the URL validation to the second column only.\n\n### Static column headers\n\nIf there are certain headers that must be available, these can be set via an input:\n\n```html\n\n\n```\n\nSetting static column headers will set the header cells to `readonly`. This will still allow keyboard navigation but will not allow the user\nto change the contents of the set header cells.\n\n### Full width table\n\nIf the table should be a single, full-width column, set both `columnCount` and `fullWidth`:\n\n```html\n\n```\n\n> NOTE: full width should only be used with a single column\n\n### Custom footer content\n\nConsumer's can add custom footer content by enclosing it within the CSV entry component:\n\n```html\n\n \n\n```\n\nThis content will be added opposite the default footer buttons set.\n\n### Footer direction\n\nThe footer layout defaults to `ltr` mode which lays out the default buttons on the left and any custom content on the\nright. This can be reversed:\n\n```html\n\n```\n\nAllowed directions are: `ltr`, `rtl`.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-csv-entry.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-csv-entry\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-csv-entry/bundles/terminus-ui-csv-entry.umd.js\n","readmeFilename":"README.md"}