table

// src/components/elements/table/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/table
type: object
required:
  - head
  - body
additionalProperties: false
properties:
  head:
    type: array
    items:
      type: object
      required:
        - label
      additionalProperties: false
      properties:
        label:
          type: string
  body:
    type: array
    items:
      type: array
      items:
        type: object
        required:
          - content
        additionalProperties: false
        properties:
          content:
            type: string
            format: html

// src/components/elements/table/mocks.yaml

head:
  - label: Name
  - label: Email
  - label: Login
  - label: Role within the company
  - label: Contact
  - label: Composer
  - label: Webmonitor
  - label: Active
body:
  - - content: Tiziana Lagomarsino
    - content: tlagomarsino@finstral.com
    - content: tlagomarsino@finstral.com
    - content: Techniker, Composer
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/form-element/option
        $ref: /elements/form-element/option#checkbox-checked
  - - content: Jessica Lo Presti
    - content: jessica@sicurcasa.it
    - content: 2SRA-03@finstral.cloud
    - content: Techniker, Composer
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/form-element/option
        $ref: /elements/form-element/option#checkbox-checked
  - - content: Claudia Ricci
    - content: casarza@sicurcasa.it
    - content: 2SRA-04@finstral.cloud
    - content: Verkauf
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/icon
        name: settings
    - content:
        $tpl: /elements/form-element/option
        $ref: /elements/form-element/option#checkbox

// src/components/elements/table/table.twig

<finstral-table class="Table">
	<table>
		<thead>
			<tr>
				{% for cell in head %}
					<th class="u-typo-TextS" scope="col">
						{{ cell.label }}
					</th>
				{% endfor %}
			</tr>
		</thead>
		<tbody>
			{% for row in body %}
				<tr>
					{% for cell in row %}
						<td>
							{{ cell.content }}
						</td>
					{% endfor %}
				</tr>
			{% endfor %}
		</tbody>
	</table>
</finstral-table>