Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

Commit

Permalink
feat(table): implement table accordingly to ECL 2.9.0 - INNO-1660 (#112)
Browse files Browse the repository at this point in the history
* INNO-1660: Init Table feature.

* INNO-1660: Table implementation for default and zebra story..

* INNO-1660: Multi story appended and also colspan attribute.

* INNO-1660: Update and clean up.

* INNO-1660: Add the test.

* INNO-1660: Update twig file.

* INNO-1660: Table documentation.

* INNO-1660: Clean up.

* INNO-1660: Update the zebra variable to allow swapping between default story and Zebra story.

* INNO-1660: Update the snapshots to get the latest from twig file.

* update table

* update yarn.lock
  • Loading branch information
aritomelo authored and degliwe committed Aug 26, 2019
1 parent 853a8c8 commit 15ffcba
Show file tree
Hide file tree
Showing 10 changed files with 1,164 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/ec/packages/ec-component-table/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
__snapshots__
docs
*.story.js
*.test.js
**/*.md
Empty file.
147 changes: 147 additions & 0 deletions src/ec/packages/ec-component-table/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
# ECL Twig - EC Table component

npm package: `@ecl-twig/ec-component-table`

```shell
npm install --save @ecl-twig/ec-component-table
```

## Table

### Parameters:

- **"zebra"** (boolean) (default: false))
- **"headers"** (array) (default: [])
- "label" (string or array of string)
- "colspan" (string) (default: ''),
- **"rows"** (array) (default: [])
- "label" (string or array of string)
- "data-ecl-table-header" (string) (default: ''),
- "data-ecl-table-header-group" (string) (default: '')
- "group" (bool) (default: false),
- **"extra_classes"** (optional) (string) (default: '')
- **"extra_attributes"** (optional) (array) (default: [])
- "name" (string) Attribute name, eg. 'data-test'
- "value" (string) Attribute value, eg: 'data-test-1'

### Example:

<!-- prettier-ignore -->
```twig
{% include 'path/to/table.html.twig' with {
zebra: true/boolean,
headers: [
[
{ label: 'Name' },
{ label: 'Registration date' },
{ label: 'Languages', colspan: '3' },
],
[
{ label: '' },
{ label: '' },
{ label: 'English' },
{ label: 'French' },
{ label: 'German' },
],
],
rows: [
[
{ label: 'John', 'data-ecl-table-header': 'Name' },
{
label: 'September 14, 2013',
'data-ecl-table-header': 'Registration date',
},
{
label: 'Yes',
'data-ecl-table-header': 'English',
'data-ecl-table-header-group': 'Language',
group: true,
},
{
label: 'No',
'data-ecl-table-header': 'French',
group: true,
},
{
label: 'Yes',
'data-ecl-table-header': 'German',
group: true,
},
],
[
{ label: 'Ron', 'data-ecl-table-header': 'Name' },
{
label: 'October 23, 2014',
'data-ecl-table-header': 'Registration date',
},
{
label: 'Yes',
'data-ecl-table-header': 'English',
'data-ecl-table-header-group': 'Language',
group: true,
},
{
label: 'Yes',
'data-ecl-table-header': 'French',
group: true,
},
{
label: 'Yes',
'data-ecl-table-header': 'German',
group: true,
},
],
[
{ label: 'Albert', 'data-ecl-table-header': 'Name' },
{
label: 'December 13, 2014',
'data-ecl-table-header': 'Registration date',
},
{
label: 'No',
'data-ecl-table-header': 'English',
'data-ecl-table-header-group': 'Language',
group: true,
},
{
label: 'No',
'data-ecl-table-header': 'French',
group: true,
},
{
label: 'Yes',
'data-ecl-table-header': 'German',
group: true,
},
],
[
{ label: 'Marcel', 'data-ecl-table-header': 'Name' },
{
label: 'January 12, 1995',
'data-ecl-table-header': 'Registration date',
},
{
label: 'Yes',
'data-ecl-table-header': 'English',
'data-ecl-table-header-group': 'Language',
group: true,
},
{
label: 'Yes',
'data-ecl-table-header': 'French',
group: true,
},
{
label: 'Yes',
'data-ecl-table-header': 'German',
group: true,
},
],
],
extra_classes: 'my-extra-class-1 my-extra-class-2',
extra_attributes: [
{ name: 'data-test-1', value: 'data-test-value-1' },
{ name: 'data-test-2', value: 'data-test-value-2' }
]
} %}
```
Loading

0 comments on commit 15ffcba

Please sign in to comment.