| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| \r\n | \r\n |
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| \r\n \r\n | \r\n
\r\n
\r\n```\r\n\r\n**NOTE** There are some factors to take note of when using the fixed header.\r\n\r\n2. If you plan to use a filter on the table you must move the `whs-table` directive above the table element (like in the example above). If you don't plan to use filtering then it can be added to the table element as before.\r\n\r\n3. Your notice you have pass `true/false` into the directive this is so you can disable and enable the fixed header. For example when you open search boxes you should disable to fixed header, then you can re-enable when you hide them again.\r\n\r\n-------------\r\n\r\n## WHS Datepicker\r\n\r\n```js\r\nimport { infrastructure, whsDatepicker } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsDatepicker]);\r\n```\r\n\r\n### Using Datepicker\r\n\r\n```html\r\n\r\n \r\n \r\n
\r\n
\r\n| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
\r\n \r\n
\r\n```\r\n\r\n### Filters\r\n\r\n#### Moment Parse\r\n```html\r\n{{ date | momentParse : 'DD/MM/YYYY' }}\r\n```\r\n\r\n#### Moment UTC\r\n```html\r\n{{ date | momentUtc }}\r\n```\r\n\r\n#### Date Differance\r\n```html\r\n{{ fromDate | dateDifference : toDate : unit : usePrecision }}\r\n```\r\n\r\n#### Date Format\r\n```html\r\n{{ date | dateFormat : 'DD/MM/YYYY' }}\r\n```\r\n\r\n----\r\n\r\n## WHS Print\r\n\r\n### Installing WHS Print\r\n\r\nTo load whs-print you can extend your current loading instance of infrastructure.\r\n\r\n```js\r\nimport { infrastructure, whsPrint } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsPrint]);\r\n```\r\n\r\n### Using WHS Print\r\n\r\n#### printSection\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children visible for printing\r\n\r\n ```html\r\n \r\n \r\n
\r\n\r\n
\r\n ```\r\n\r\n#### printOnly\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children only visible for printing\r\n\r\n ```html\r\n \r\n I'll print\r\n
\r\n Me, too!
\r\nI won't
\r\n \r\n
\r\n ```\r\n#### printHide\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing, but it is replaced by blank space\r\n \r\n ```html\r\n \r\n I'll print, but until then nobody wants me\r\n
\r\n Me, too!
\r\nMe, too! Except that people still want to look at me in the meantime...
\r\n \r\n
\r\n ```\r\n\r\n#### printRemove\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing\r\n\r\n ```html\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, but those bozos upstairs are still taking up space
\r\n \r\n
\r\n ```\r\n\r\n#### printIf\r\n - **Directive type:** Attribute\r\n - **Description**: Toggles print-visibility based on expression\r\n\r\n ```html\r\n \r\n \r\n \r\n \r\n ```\r\n\r\n#### printBtn\r\n - **Directive type:** Attribute\r\n - **Description**: Adds onClick callback to element that will trigger printing\r\n\r\n ```html\r\n \r\n I will make anything cause a print\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, and those bozos upstairs will finally stop making such a ruckus
\r\n to happen if you click me
\r\n ```\r\n \r\n#### printLandscape\r\n - **Directive type:** Attribute\r\n - **Description**: Will cause printing to be landscape instead of portrait\r\n\r\n ```html\r\n \r\n I will cause any print\r\nto be landscape
\r\n ```\r\n\r\n#### printAvoidBreak\r\n - **Directive type:** Attribute\r\n - **Description**: Prevents page breaks on element\r\n\r\n ```html\r\n \r\n ```\r\n\r\n#### printBreakBefore\r\n - **Directive type:** Attribute\r\n - **Description**: Causes a page break before rendering the current element\r\n \r\n ```html\r\nPrint page will break before this element
\r\n ```\r\n\r\n#### pageBreak\r\n - **Directive type:** Element\r\n - **Description**: Element to create a fixed point of a page break, dosn't render anything.\r\n\r\n ```html\r\n Page 1
\r\n Page 2
\r\n ```\r\n\r\n#### printTable\r\n - **Directive type:** Attribute\r\n - **Description**:\r\n - Optimizes table for printing. This includes keeping 'td' cell content from being cut-off by page breaks.\r\n - Must be passed an array scope object representing the data presented by the table.\r\n - Column headers will persist between pages only if the `````` and `````` tags are used correctly.\r\n\r\n This example shows adjustments to an already-visible table in order to tailor it for printing\r\n\r\n ```html\r\n | Unwanted field | \r\nName | \r\nAddress | \r\nPhone | \r\n
| {{person.unwantedInfo}} | \r\n{{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| Name | \r\nAddress | \r\nPhone | \r\n
| {{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| \r\n | \r\n |
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| \r\n \r\n | \r\n
\r\n
\r\n```\r\n\r\n**NOTE** There are some factors to take note of when using the fixed header.\r\n\r\n2. If you plan to use a filter on the table you must move the `whs-table` directive above the table element (like in the example above). If you don't plan to use filtering then it can be added to the table element as before.\r\n\r\n3. Your notice you have pass `true/false` into the directive this is so you can disable and enable the fixed header. For example when you open search boxes you should disable to fixed header, then you can re-enable when you hide them again.\r\n\r\n-------------\r\n\r\n## WHS Datepicker\r\n\r\n```js\r\nimport { infrastructure, whsDatepicker } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsDatepicker]);\r\n```\r\n\r\n### Using Datepicker\r\n\r\n```html\r\n\r\n \r\n \r\n
\r\n
\r\n| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
\r\n \r\n
\r\n```\r\n\r\n### Filters\r\n\r\n#### Moment Parse\r\n```html\r\n{{ date | momentParse : 'DD/MM/YYYY' }}\r\n```\r\n\r\n#### Moment UTC\r\n```html\r\n{{ date | momentUtc }}\r\n```\r\n\r\n#### Date Differance\r\n```html\r\n{{ fromDate | dateDifference : toDate : unit : usePrecision }}\r\n```\r\n\r\n#### Date Format\r\n```html\r\n{{ date | dateFormat : 'DD/MM/YYYY' }}\r\n```\r\n\r\n----\r\n\r\n## WHS Print\r\n\r\n### Installing WHS Print\r\n\r\nTo load whs-print you can extend your current loading instance of infrastructure.\r\n\r\n```js\r\nimport { infrastructure, whsPrint } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsPrint]);\r\n```\r\n\r\n### Using WHS Print\r\n\r\n#### printSection\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children visible for printing\r\n\r\n ```html\r\n \r\n \r\n
\r\n\r\n
\r\n ```\r\n\r\n#### printOnly\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children only visible for printing\r\n\r\n ```html\r\n \r\n I'll print\r\n
\r\n Me, too!
\r\nI won't
\r\n \r\n
\r\n ```\r\n#### printHide\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing, but it is replaced by blank space\r\n \r\n ```html\r\n \r\n I'll print, but until then nobody wants me\r\n
\r\n Me, too!
\r\nMe, too! Except that people still want to look at me in the meantime...
\r\n \r\n
\r\n ```\r\n\r\n#### printRemove\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing\r\n\r\n ```html\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, but those bozos upstairs are still taking up space
\r\n \r\n
\r\n ```\r\n\r\n#### printIf\r\n - **Directive type:** Attribute\r\n - **Description**: Toggles print-visibility based on expression\r\n\r\n ```html\r\n \r\n \r\n \r\n \r\n ```\r\n\r\n#### printBtn\r\n - **Directive type:** Attribute\r\n - **Description**: Adds onClick callback to element that will trigger printing\r\n\r\n ```html\r\n \r\n I will make anything cause a print\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, and those bozos upstairs will finally stop making such a ruckus
\r\n to happen if you click me
\r\n ```\r\n \r\n#### printLandscape\r\n - **Directive type:** Attribute\r\n - **Description**: Will cause printing to be landscape instead of portrait\r\n\r\n ```html\r\n \r\n I will cause any print\r\nto be landscape
\r\n ```\r\n\r\n#### printAvoidBreak\r\n - **Directive type:** Attribute\r\n - **Description**: Prevents page breaks on element\r\n\r\n ```html\r\n \r\n ```\r\n\r\n#### printBreakBefore\r\n - **Directive type:** Attribute\r\n - **Description**: Causes a page break before rendering the current element\r\n \r\n ```html\r\nPrint page will break before this element
\r\n ```\r\n\r\n#### pageBreak\r\n - **Directive type:** Element\r\n - **Description**: Element to create a fixed point of a page break, dosn't render anything.\r\n\r\n ```html\r\n Page 1
\r\n Page 2
\r\n ```\r\n\r\n#### printTable\r\n - **Directive type:** Attribute\r\n - **Description**:\r\n - Optimizes table for printing. This includes keeping 'td' cell content from being cut-off by page breaks.\r\n - Must be passed an array scope object representing the data presented by the table.\r\n - Column headers will persist between pages only if the `````` and `````` tags are used correctly.\r\n\r\n This example shows adjustments to an already-visible table in order to tailor it for printing\r\n\r\n ```html\r\n | Unwanted field | \r\nName | \r\nAddress | \r\nPhone | \r\n
| {{person.unwantedInfo}} | \r\n{{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| Name | \r\nAddress | \r\nPhone | \r\n
| {{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| \r\n | \r\n |
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| \r\n \r\n | \r\n
\r\n
\r\n```\r\n\r\n**NOTE** There are some factors to take note of when using the fixed header.\r\n\r\n2. If you plan to use a filter on the table you must move the `whs-table` directive above the table element (like in the example above). If you don't plan to use filtering then it can be added to the table element as before.\r\n\r\n3. Your notice you have pass `true/false` into the directive this is so you can disable and enable the fixed header. For example when you open search boxes you should disable to fixed header, then you can re-enable when you hide them again.\r\n\r\n-------------\r\n\r\n## WHS Datepicker\r\n\r\n```js\r\nimport { infrastructure, whsDatepicker } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsDatepicker]);\r\n```\r\n\r\n### Using Datepicker\r\n\r\n```html\r\n\r\n \r\n \r\n
\r\n
\r\n| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
\r\n \r\n
\r\n```\r\n\r\n### Filters\r\n\r\n#### Moment Parse\r\n```html\r\n{{ date | momentParse : 'DD/MM/YYYY' }}\r\n```\r\n\r\n#### Moment UTC\r\n```html\r\n{{ date | momentUtc }}\r\n```\r\n\r\n#### Date Differance\r\n```html\r\n{{ fromDate | dateDifference : toDate : unit : usePrecision }}\r\n```\r\n\r\n#### Date Format\r\n```html\r\n{{ date | dateFormat : 'DD/MM/YYYY' }}\r\n```\r\n\r\n----\r\n\r\n## WHS Print\r\n\r\n### Installing WHS Print\r\n\r\nTo load whs-print you can extend your current loading instance of infrastructure.\r\n\r\n```js\r\nimport { infrastructure, whsPrint } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsPrint]);\r\n```\r\n\r\n### Using WHS Print\r\n\r\n#### printSection\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children visible for printing\r\n\r\n ```html\r\n \r\n \r\n
\r\n\r\n
\r\n ```\r\n\r\n#### printOnly\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children only visible for printing\r\n\r\n ```html\r\n \r\n I'll print\r\n
\r\n Me, too!
\r\nI won't
\r\n \r\n
\r\n ```\r\n#### printHide\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing, but it is replaced by blank space\r\n \r\n ```html\r\n \r\n I'll print, but until then nobody wants me\r\n
\r\n Me, too!
\r\nMe, too! Except that people still want to look at me in the meantime...
\r\n \r\n
\r\n ```\r\n\r\n#### printRemove\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing\r\n\r\n ```html\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, but those bozos upstairs are still taking up space
\r\n \r\n
\r\n ```\r\n\r\n#### printIf\r\n - **Directive type:** Attribute\r\n - **Description**: Toggles print-visibility based on expression\r\n\r\n ```html\r\n \r\n \r\n \r\n \r\n ```\r\n\r\n#### printBtn\r\n - **Directive type:** Attribute\r\n - **Description**: Adds onClick callback to element that will trigger printing\r\n\r\n ```html\r\n \r\n I will make anything cause a print\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, and those bozos upstairs will finally stop making such a ruckus
\r\n to happen if you click me
\r\n ```\r\n \r\n#### printLandscape\r\n - **Directive type:** Attribute\r\n - **Description**: Will cause printing to be landscape instead of portrait\r\n\r\n ```html\r\n \r\n I will cause any print\r\nto be landscape
\r\n ```\r\n\r\n#### printAvoidBreak\r\n - **Directive type:** Attribute\r\n - **Description**: Prevents page breaks on element\r\n\r\n ```html\r\n \r\n ```\r\n\r\n#### printBreakBefore\r\n - **Directive type:** Attribute\r\n - **Description**: Causes a page break before rendering the current element\r\n \r\n ```html\r\nPrint page will break before this element
\r\n ```\r\n\r\n#### pageBreak\r\n - **Directive type:** Element\r\n - **Description**: Element to create a fixed point of a page break, dosn't render anything.\r\n\r\n ```html\r\n Page 1
\r\n Page 2
\r\n ```\r\n\r\n#### printTable\r\n - **Directive type:** Attribute\r\n - **Description**:\r\n - Optimizes table for printing. This includes keeping 'td' cell content from being cut-off by page breaks.\r\n - Must be passed an array scope object representing the data presented by the table.\r\n - Column headers will persist between pages only if the `````` and `````` tags are used correctly.\r\n\r\n This example shows adjustments to an already-visible table in order to tailor it for printing\r\n\r\n ```html\r\n | Unwanted field | \r\nName | \r\nAddress | \r\nPhone | \r\n
| {{person.unwantedInfo}} | \r\n{{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| Name | \r\nAddress | \r\nPhone | \r\n
| {{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| \r\n | \r\n |
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| \r\n \r\n | \r\n
\r\n
\r\n```\r\n\r\n**NOTE** There are some factors to take note of when using the fixed header.\r\n\r\n2. If you plan to use a filter on the table you must move the `whs-table` directive above the table element (like in the example above). If you don't plan to use filtering then it can be added to the table element as before.\r\n\r\n3. Your notice you have pass `true/false` into the directive this is so you can disable and enable the fixed header. For example when you open search boxes you should disable to fixed header, then you can re-enable when you hide them again.\r\n\r\n-------------\r\n\r\n## WHS Datepicker\r\n\r\n```js\r\nimport { infrastructure, whsDatepicker } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsDatepicker]);\r\n```\r\n\r\n### Using Datepicker\r\n\r\n```html\r\n\r\n \r\n \r\n
\r\n
\r\n| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
\r\n \r\n
\r\n```\r\n\r\n### Filters\r\n\r\n#### Moment Parse\r\n```html\r\n{{ date | momentParse : 'DD/MM/YYYY' }}\r\n```\r\n\r\n#### Moment UTC\r\n```html\r\n{{ date | momentUtc }}\r\n```\r\n\r\n#### Date Differance\r\n```html\r\n{{ fromDate | dateDifference : toDate : unit : usePrecision }}\r\n```\r\n\r\n#### Date Format\r\n```html\r\n{{ date | dateFormat : 'DD/MM/YYYY' }}\r\n```\r\n\r\n----\r\n\r\n## WHS Print\r\n\r\n### Installing WHS Print\r\n\r\nTo load whs-print you can extend your current loading instance of infrastructure.\r\n\r\n```js\r\nimport { infrastructure, whsPrint } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsPrint]);\r\n```\r\n\r\n### Using WHS Print\r\n\r\n#### printSection\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children visible for printing\r\n\r\n ```html\r\n \r\n \r\n
\r\n\r\n
\r\n ```\r\n\r\n#### printOnly\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children only visible for printing\r\n\r\n ```html\r\n \r\n I'll print\r\n
\r\n Me, too!
\r\nI won't
\r\n \r\n
\r\n ```\r\n#### printHide\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing, but it is replaced by blank space\r\n \r\n ```html\r\n \r\n I'll print, but until then nobody wants me\r\n
\r\n Me, too!
\r\nMe, too! Except that people still want to look at me in the meantime...
\r\n \r\n
\r\n ```\r\n\r\n#### printRemove\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing\r\n\r\n ```html\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, but those bozos upstairs are still taking up space
\r\n \r\n
\r\n ```\r\n\r\n#### printIf\r\n - **Directive type:** Attribute\r\n - **Description**: Toggles print-visibility based on expression\r\n\r\n ```html\r\n \r\n \r\n \r\n \r\n ```\r\n\r\n#### printBtn\r\n - **Directive type:** Attribute\r\n - **Description**: Adds onClick callback to element that will trigger printing\r\n\r\n ```html\r\n \r\n I will make anything cause a print\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, and those bozos upstairs will finally stop making such a ruckus
\r\n to happen if you click me
\r\n ```\r\n \r\n#### printLandscape\r\n - **Directive type:** Attribute\r\n - **Description**: Will cause printing to be landscape instead of portrait\r\n\r\n ```html\r\n \r\n I will cause any print\r\nto be landscape
\r\n ```\r\n\r\n#### printAvoidBreak\r\n - **Directive type:** Attribute\r\n - **Description**: Prevents page breaks on element\r\n\r\n ```html\r\n \r\n ```\r\n\r\n#### printBreakBefore\r\n - **Directive type:** Attribute\r\n - **Description**: Causes a page break before rendering the current element\r\n \r\n ```html\r\nPrint page will break before this element
\r\n ```\r\n\r\n#### pageBreak\r\n - **Directive type:** Element\r\n - **Description**: Element to create a fixed point of a page break, dosn't render anything.\r\n\r\n ```html\r\n Page 1
\r\n Page 2
\r\n ```\r\n\r\n#### printTable\r\n - **Directive type:** Attribute\r\n - **Description**:\r\n - Optimizes table for printing. This includes keeping 'td' cell content from being cut-off by page breaks.\r\n - Must be passed an array scope object representing the data presented by the table.\r\n - Column headers will persist between pages only if the `````` and `````` tags are used correctly.\r\n\r\n This example shows adjustments to an already-visible table in order to tailor it for printing\r\n\r\n ```html\r\n | Unwanted field | \r\nName | \r\nAddress | \r\nPhone | \r\n
| {{person.unwantedInfo}} | \r\n{{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| Name | \r\nAddress | \r\nPhone | \r\n
| {{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| \r\n | \r\n |
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
| \r\n \r\n | \r\n
\r\n
\r\n```\r\n\r\n**NOTE** There are some factors to take note of when using the fixed header.\r\n\r\n2. If you plan to use a filter on the table you must move the `whs-table` directive above the table element (like in the example above). If you don't plan to use filtering then it can be added to the table element as before.\r\n\r\n3. Your notice you have pass `true/false` into the directive this is so you can disable and enable the fixed header. For example when you open search boxes you should disable to fixed header, then you can re-enable when you hide them again.\r\n\r\n\r\n#### xyScroll (Fixed Columns)\r\nUsing the `xy-scroll` directive you can build a fixed column table.\r\n\r\nIt does this by using a total of 4 tables (1 for left headers, 1 for left rows, 1 for right headers and 1 for right rows).\r\n\r\nIt is important to use fixed widths and heights when using fixed columns because without this your rows and headers will not match up correctly.\r\n\r\n## HTML\r\n```html\r\n\r\n \r\n \r\n
\r\n
\r\n| Name | \r\nNumber | \r\n
|---|---|
| {{ row.number }} | \r\n{{ row.name }} | \r\n
\r\n
\r\n```\r\n\r\n## JS\r\n```js\r\n// Variables\r\nvar fields = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'];\r\nvar sampleData = mockData();\r\n\r\nmockData(total) {\r\n total = total || 20;\r\n const data = [];\r\n for (let i = 0; i < total; i++) {\r\n const item = {\r\n name: `Item ${i}`\r\n };\r\n for (let j = 0; j < fields.length; j++) {\r\n item[j] = `column ${fields[j] + i}`;\r\n }\r\n data.push(item);\r\n }\r\n return data;\r\n}\r\n```\r\n\r\n## SCSS\r\n```scss\r\n#fixedSample {\r\n .fixed {\r\n table-layout: fixed;\r\n }\r\n\r\n .fixed .col-sm {\r\n width: 100px;\r\n }\r\n\r\n .fixed td,\r\n .fixed th {\r\n width: 100px;\r\n }\r\n\r\n .fixed td { height: 55px; }\r\n\r\n .fixed th {\r\n border-bottom: 0 none;\r\n }\r\n}\r\n```\r\n\r\n\r\n-------------\r\n\r\n## WHS Datepicker\r\n\r\n```js\r\nimport { infrastructure, whsDatepicker } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsDatepicker]);\r\n```\r\n\r\n### Using Datepicker\r\n\r\n```html\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n | Item Name | \r\n
|---|
\r\n \r\n
\r\n
\r\n \r\n | \r\n |
\r\n \r\n
\r\n
\r\n \r\n | \r\n \r\n | \r\n
|---|
\r\n \r\n
\r\n
\r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n | \r\n |
\r\n \r\n
\r\n```\r\n\r\n### Filters\r\n\r\n#### Moment Parse\r\n```html\r\n{{ date | momentParse : 'DD/MM/YYYY' }}\r\n```\r\n\r\n#### Moment UTC\r\n```html\r\n{{ date | momentUtc }}\r\n```\r\n\r\n#### Date Differance\r\n```html\r\n{{ fromDate | dateDifference : toDate : unit : usePrecision }}\r\n```\r\n\r\n#### Date Format\r\n```html\r\n{{ date | dateFormat : 'DD/MM/YYYY' }}\r\n```\r\n\r\n----\r\n\r\n## WHS Print\r\n\r\n### Installing WHS Print\r\n\r\nTo load whs-print you can extend your current loading instance of infrastructure.\r\n\r\n```js\r\nimport { infrastructure, whsPrint } from '@whsmith/infrastructure';\r\n\r\nangular.module('WHSApp', [infrastructure, whsPrint]);\r\n```\r\n\r\n### Using WHS Print\r\n\r\n#### printSection\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children visible for printing\r\n\r\n ```html\r\n \r\n \r\n
\r\n\r\n
\r\n ```\r\n\r\n#### printOnly\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element and its children only visible for printing\r\n\r\n ```html\r\n \r\n I'll print\r\n
\r\n Me, too!
\r\nI won't
\r\n \r\n
\r\n ```\r\n#### printHide\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing, but it is replaced by blank space\r\n \r\n ```html\r\n \r\n I'll print, but until then nobody wants me\r\n
\r\n Me, too!
\r\nMe, too! Except that people still want to look at me in the meantime...
\r\n \r\n
\r\n ```\r\n\r\n#### printRemove\r\n - **Directive type:** Attribute\r\n - **Description**: Makes element invisible during printing\r\n\r\n ```html\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, but those bozos upstairs are still taking up space
\r\n \r\n
\r\n ```\r\n\r\n#### printIf\r\n - **Directive type:** Attribute\r\n - **Description**: Toggles print-visibility based on expression\r\n\r\n ```html\r\n \r\n \r\n \r\n \r\n ```\r\n\r\n#### printBtn\r\n - **Directive type:** Attribute\r\n - **Description**: Adds onClick callback to element that will trigger printing\r\n\r\n ```html\r\n \r\n I will make anything cause a print\r\n \r\n I won't print\r\n
\r\n Me, either
\r\nI'll print, and those bozos upstairs will finally stop making such a ruckus
\r\n to happen if you click me
\r\n ```\r\n \r\n#### printLandscape\r\n - **Directive type:** Attribute\r\n - **Description**: Will cause printing to be landscape instead of portrait\r\n\r\n ```html\r\n \r\n I will cause any print\r\nto be landscape
\r\n ```\r\n\r\n#### printAvoidBreak\r\n - **Directive type:** Attribute\r\n - **Description**: Prevents page breaks on element\r\n\r\n ```html\r\n \r\n ```\r\n\r\n#### printBreakBefore\r\n - **Directive type:** Attribute\r\n - **Description**: Causes a page break before rendering the current element\r\n \r\n ```html\r\nPrint page will break before this element
\r\n ```\r\n\r\n#### pageBreak\r\n - **Directive type:** Element\r\n - **Description**: Element to create a fixed point of a page break, dosn't render anything.\r\n\r\n ```html\r\n Page 1
\r\n Page 2
\r\n ```\r\n\r\n#### printTable\r\n - **Directive type:** Attribute\r\n - **Description**:\r\n - Optimizes table for printing. This includes keeping 'td' cell content from being cut-off by page breaks.\r\n - Must be passed an array scope object representing the data presented by the table.\r\n - Column headers will persist between pages only if the `````` and `````` tags are used correctly.\r\n\r\n This example shows adjustments to an already-visible table in order to tailor it for printing\r\n\r\n ```html\r\n | Unwanted field | \r\nName | \r\nAddress | \r\nPhone | \r\n
| {{person.unwantedInfo}} | \r\n{{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n
| Name | \r\nAddress | \r\nPhone | \r\n
| {{person.name}} | \r\n{{person.address}} | \r\n{{person.phone}} | \r\n