index.md

title	datasrc	layout
Product table	productdata	templates/component.njk

Product tables provide a complete list of our product inventory, availability, and identifying information for each product. In this section include information that relates to your content to underscore why it's used and needed, and which tasks require it.

<style> /* Component styles -- in a real project these would be grouped with your project code (they're in the page here for simplicity) */ .product-data { border-spacing: 0; border-collapse: collapse; } .product-data td, .product-data th { text-align: left; vertical-align: top; padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #f0f0f0; } .product-data .num { text-align: right; } .product-data .highlightrows tr:nth-child(odd) td { background-color: #dbf5fc; } .product-data tfoot td { font-size: .8125em; color: #888; } /* global spacing classes for our example site */ .spacing-compact th, .spacing-compact td { padding-top: 6px; padding-bottom: 6px; } .spacing-spacious th, .spacing-spacious td { padding-top: 12px; padding-bottom: 12px; } /* end component styles*/ </style>

Code

Last updated:
ID	Name	Description	Location	Quantity	Unit price

Configuration options

Highlight rows - alternate row background colors to increase legibility Vertical spacing Compact - less row padding to show more data on the screen
Spacious - more row padding for added legibility Last updated date

Classes

CSS classes with form controls for configuring the code example and demo on this page.

Name	Description	Use	Shown in demo
.	Required - Base class that scopes product-specific styles to the data table	Assigned to <table> element	Always shown
.	Alternates row colors to increase legibility	Assigned to <tbody> element	YesNo

API data

All are scoped to the global appdata Object.

Data values with form controls for configuring the code example and demo on this page.

Name	Description	Type	Use	Shown in demo
spacing	Controls vertical row padding	string	Accepts the following values: compact - less row padding to show more data on the screen spacious - more row padding for added legibility
{{datasrc}}.lastupdated	Date and time of the last inventory update	Date string	Accepts the format: DD Month YYYY HH:MM:SS

Other things to include on a component page:{.rules}

• any exceptions to general installation or set up instructions
• usage information
• contribution guidelines, including a11y and performance acceptance criteria
• link to JSbin or sandbox for prototyping
• status and version history (links to repositories are nice, too)
• related components