ECL Table component

npm package: @ecl/table

npm install --save @ecl/table

Parameters:

• "color_mode" (string) (default: '') Name of the color mode
• "id" (string) (default: random): unique id for the table; randomly generated if empty
• "simple" (boolean) (default: false)
• "zebra" (boolean) (default: false)
• "sortable" (boolean) (default: false)
• "filter" (boolean) (default: false)
• "caption" (string) (default: ''): optional caption for the table
• "label_sort_ascending" (string) (default: ''): label used for sorting ascending (screen reader only)
• "label_sort_descending" (string) (default: ''): label used for sorting descending (screen reader only)
• "label_sort_default" (string) (default: ''): label used for sorting default (screen reader only)
• "label_filter" (string) (default: ''): label used for the column filter fields (screen reader only)
• "headers" (array) (default: [])
  • "label" (string or array of string)
  • "colspan" (string) (default: ''),
  • "rowspan" (string) (default: ''),
  • "data-ecl-table-header-group" (string) (default: ''),
  • "headers" (string) (default: ''): headers attribute to reference the relevant table headers ids (for multi headers table)
• "rows" (array) (default: []) Table rows; format:
  • "extra_classes" (string) (default: '') Extra classes for the row
  • "extra_attributes" (array) (default: []) Extra attributes for the row
  • "data" (array) Row cells:
    • "label" (string or array) Cell content
    • "data-ecl-table-header" (string) (default: '') Mobile header reference
    • "data-ecl-table-header-group" (string) (default: '') Mobile header group reference
    • "group" (boolean) (default: false) Mark as a grouped cell
    • "headers" (string) (default: '') headers attribute for multi-header tables
• "extra_classes" (string) (default: '') Extra classes (space separated)
• "extra_attributes" (array) (default: []) Extra attributes
  • "name" (string) Attribute name, eg. 'data-test'
  • "value" (string) Attribute value, eg: 'data-test-1'

Example:

{% include '@ecl/table/table.html.twig' with { 
  zebra: true, 
  headers: [ 
  [ 
    { label: 'Name' }, 
    { label: 'Registration date' }, 
    { label: 'Languages', colspan: '3' }, 
  ], 
  [ 
    { label: '' }, 
    { label: '' }, 
    { label: 'English' }, 
    { label: 'French' }, 
    { label: 'German' }, 
  ], 
  ], 
  rows: [ 
  [ 
    extra_classes: 'an-extra-class', 
    { 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, 
    }, 
  ], 
  [ 
    extra_classes: 'an-extra-class', 
    extra_attributes: 'an-extra-attribute', 
    { 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' } 
  ] 
} %}