Table Component Reference

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Template Markup Language (TML) Reference

Table of Contents

• Introduction
  • Table array
  • Header layout
• Attributes
• Children
• DOM element properties

Introduction

Syntax

tml`<Table table=${myArray} />`
tml`<Table table=${myArray} header=headerString/>`

The Table component builds an HTML <table> from a JavaScript Array. The array is passed in the table attribute. The Table component is not intended to completely eliminate the need for using <table> components. It is intended to simplify often-used table layouts.

Table array

The table array contains row elements. Each row element contains an array of column elements. A column entry can be text, a plain object, or a template. If a plain object, it contains a value property and an optional props property. The props property contains the attributes for a <td> or <th> HTML element, including colspan and rowspan, which behave similarly.

Header layout

The header attribute specifies how headers are handled. It can take the following values:

• none: no header. Thi is the default
• top: There is a single header row on the top.
• left: There is a single header column on the left.
• both: There is a header row on the top and a header column on the left.

Attributes

• Standard properties
  The Table component accepts the standard attributes.
• Standard <table> properties
  The Table component accepts the standard <table> attributes.
• table
  An array representing the table. See Table array
• header (optional)
  A string that specifies the header layout. See See Header layout

Children

The Table component ignores any children

DOM element properties

• The Table Component will render a <table>.
• The <table> will contain any passed <table> attributes.
• The elements will use either <td> or <th> elements according to the header layout containing the equivalent array element content. If the equivalent array element is an object, the DOM will have the properties specified by the props property.