Skip to content
Snippets Groups Projects
Commit c01ab798 authored by Michael Fanini's avatar Michael Fanini
Browse files

Issue #3503123 by g4mbini, pdureau: [2.0.x] Add table component

parent eb53712d
No related branches found
No related tags found
1 merge request!4Issue #3503123 by g4mbini, pdureau: [2.0.x] Add table component
name: Table
description: "Clean and minimal styles for <table>, providing consistent spacings and a minimal unbordered look."
group: Content
links:
- "https://picocss.com/docs/table"
slots:
header:
title: Header
description: "A sequence of row components."
body:
title: Header
description: "A sequence of row components."
footer:
title: Footer
description: "A sequence of row components."
props:
type: object
properties:
striped:
title: Striped
description: ".striped enable striped rows (not available in the class‑less version)."
type: boolean
table_theme:
title: Theme
type: string
enum:
- light
- dark
"meta:enum":
light: Light
dark: Dark
header_theme:
title: Header theme
type: string
enum:
- light
- dark
"meta:enum":
light: Light
dark: Dark
body_theme:
title: Body theme
type: string
enum:
- light
- dark
"meta:enum":
light: Light
dark: Dark
footer_theme:
title: Footer theme
type: string
enum:
- light
- dark
"meta:enum":
light: Light
dark: Dark
\ No newline at end of file
name: Default
slots:
header:
- type: component
component: "pico:table_row"
slots:
content:
- type: component
component: "pico:table_cell"
slots:
content: ""
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Name
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Job
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Company
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Location
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: ""
props:
tag: th
body:
- type: component
component: "pico:table_row"
slots:
content:
- type: component
component: "pico:table_cell"
slots:
content: "1"
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: "Cy Ganderton"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "Quality Control Specialist"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "Littel, Schaden and Vandervort"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: Canada
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "1"
props:
tag: th
- type: component
component: "pico:table_row"
slots:
content:
- type: component
component: "pico:table_cell"
slots:
content: "2"
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: "Hart Hagerty"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "Desktop Support Technician"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "Zemlak, Daniel and Leannon"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "United States"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "2"
props:
tag: th
footer:
- type: component
component: "pico:table_row"
slots:
content:
- type: component
component: "pico:table_cell"
slots:
content: ""
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Name
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Job
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Company
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: Location
props:
tag: th
- type: component
component: "pico:table_cell"
slots:
content: ""
props:
tag: th
{% set attributes = attributes.addClass(striped ? 'striped') %}
{% if table_theme %}
{% set attributes = attributes.setAttribute('data-theme', table_theme) %}
{% endif %}
{% if header_theme %}
{% set header_theme_attributes = create_attribute() %}
{% set header_theme_attributes = header_theme_attributes.setAttribute('data-theme', header_theme) %}
{% endif %}
{% if body_theme %}
{% set body_theme_attributes = create_attribute() %}
{% set body_theme_attributes = body_theme_attributes.setAttribute('data-theme', body_theme) %}
{% endif %}
{% if footer_theme %}
{% set footer_theme_attributes = create_attribute() %}
{% set footer_theme_attributes = footer_theme_attributes.setAttribute('data-theme', footer_theme) %}
{% endif %}
<table {{ attributes }}>
{% if header %}
<thead {{ header_theme_attributes }}>
{{ header }}
</thead>
{% endif %}
{% if body %}
<tbody {{ body_theme_attributes }}>
{% for row in body %}
{{ row }}
{% endfor %}
</tbody>
{% endif %}
{% if footer %}
<tfoot {{ footer_theme_attributes }}>
{{ footer }}
</tfoot>
{% endif %}
</table>
components/table/thumbnail.png

17.9 KiB

name: "(Table Cell)"
description: "Internal: to be used in the 'Table Row' components."
group: Content
links:
- "https://picocss.com/docs/table"
slots:
content:
title: "Cell content"
description: "The cell content."
props:
type: object
properties:
tag:
title: "HTML tag"
type: string
enum:
- th
- td
"meta:enum":
th: "Head"
td: "Data (default)"
scope:
title: Scope
type: string
enum:
- col
- row
"meta:enum":
col: Col
row: Row
theme:
title: Thene
type: string
enum:
- light
- dark
"meta:enum":
light: Light
dark: Dark
name: Default
slots:
content: "Cell content"
props:
tag: td
theme: dark
scope: col
library_wrapper: >
<table>
<tbody>
<tr>
{{ _story }}
</tr>
</tbody>
</table>
{% set tag = tag|default('td') %}
{% if scope %}
{% set attributes = attributes.setAttribute('scope', scope) %}
{% endif %}
{% if theme %}
{% set attributes = attributes.setAttribute('data-theme', theme) %}
{% endif %}
<{{ tag }}{{ attributes }}>
{{- content -}}
</{{ tag }}>
name: "(Table Row)"
description: "Internal: to be used in the 'Table' components."
group: Content
links:
- "https://picocss.com/docs/table"
slots:
content:
title: "Row content"
description: "The row content."
props:
type: object
properties:
theme:
title: Thene
type: string
enum:
- light
- dark
"meta:enum":
light: Light
dark: Dark
name: Default
slots:
content:
- type: component
component: "pico:table_cell"
slots:
content: "Mercury"
props:
tag: th
scope: row
- type: component
component: "pico:table_cell"
slots:
content: "4,880"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "0.39"
props:
tag: td
- type: component
component: "pico:table_cell"
slots:
content: "88"
props:
tag: td
props:
theme: dark
library_wrapper: >
<table>
<tbody>
{{ _story }}
</tbody>
</table>
{% if theme %}
{% set attributes = attributes.setAttribute('data-theme', theme) %}
{% endif %}
<tr {{ attributes }}>
{{- content -}}
</tr>
components/table_row/thumbnail.png

17.9 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment