欧共体 表格构成部分

npm 软件包 : @ecl/table

npm install --save @ecl/table

参数:

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• 编号 (字符串) (默认: 随机): 表独有的 id; 如果空则随机生成
• "简单" (boolean) (默认:虚假)
• "斑马" (boolean) (默认:虚假)
• "杂技" (boolean) (默认:虚假)
• "过滤" (boolean) (默认:虚假)
• "封" (字符串)(默认:""):表格的可选标题
• “ label sort agreement” (标签) (字符串) (默认:"'"):用于排序向上(仅屏幕阅读器)的标签
• “ label sort 递增” (字符串)(默认:"'"):用于排序降级的标签(仅屏幕读取器)
• “ 标签 sort 默认” (字符串)(默认为:""):用于排序默认的标签(仅屏幕阅读器)
• “ 标签 过滤器” (字符串)(默认为:""):用于列过滤字段的标签(仅屏幕读取器)
• "头" (阵列) (默认: [])
  • 标签( 字符串或字符串数组)
  • "colspan" (字符串)(默认为"'"),
  • "rowspan" (字符串)(默认为"'"),
  • “数据-ecl-表-标题-组”(字符串)(默认为:'),
  • "标题"(字符串)(默认为:""):指引用相关表格标题编号(对于多标题表格)的页眉属性
• "数" (阵列) (默认: []) 表格行; 格式 :
  • "extra class"(字符串)(默认为:") 行外课
  • "外部属性"(阵列)(默认: []) 行的额外属性
  • "数据"(阵列)行单元格:
    • “标签”(字符串或阵列) 单元格内容
    • "数据-ecl-表头"(字符串)(默认为:"") 移动头引用
    • "数据-ecl-表-标题-组"(字符串)(默认为:") 移动标题组引用
    • "组" (boolean) (默认: 假) 标记为分组单元格
    • "头" (字符串)(默认:") headers 多标题表格的属性
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% 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' } 
  ] 
} %}