Table block

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.

{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "exampleMultiColumns": "false",
  "count": 0,
  "table_headings": [
    {
      "title": "Event"
    },
    {
      "title": "Date",
      "sorted": "top"
    },
    {
      "title": "Type"
    },
    {
      "title": "Location"
    }
  ],
  "table_rows": [
    [
      {
        "selected_row": true
      },
      {
        "text": "dave"
      },
      {
        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores."
      },
      {
        "text": "roger"
      },
      {
        "text": "London, U.K."
      }
    ],
    [
      {
        "text": "dave"
      },
      {
        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet."
      },
      {
        "text": "roger"
      },
      {
        "text": "London, U.K."
      }
    ],
    [
      {
        "text": "dave"
      },
      {
        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      },
      {
        "text": "roger"
      },
      {
        "text": "London, U.K."
      }
    ]
  ]
}
 %}
{% include "../path_to/vf-table/vf-table.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-table', {
  "component-type": "block",
  "exampleMultiColumns": "false",
  "count": 0,
  "table_headings": [
    {
      "title": "Event"
    },
    {
      "title": "Date",
      "sorted": "top"
    },
    {
      "title": "Type"
    },
    {
      "title": "Location"
    }
  ],
  "table_rows": [
    [
      {
        "selected_row": true
      },
      {
        "text": "dave"
      },
      {
        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores."
      },
      {
        "text": "roger"
      },
      {
        "text": "London, U.K."
      }
    ],
    [
      {
        "text": "dave"
      },
      {
        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet."
      },
      {
        "text": "roger"
      },
      {
        "text": "London, U.K."
      }
    ],
    [
      {
        "text": "dave"
      },
      {
        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      },
      {
        "text": "roger"
      },
      {
        "text": "London, U.K."
      }
    ]
  ]
} %}
                

<svg class="vf-icon-sprite vf-icon-sprite--tables" display="none">
  <defs>
    <g id="vf-table-sortable--up">
      <path xmlns="http://www.w3.org/2000/svg" d="M17.485,5.062,12.707.284a1.031,1.031,0,0,0-1.415,0L6.515,5.062a1,1,0,0,0,.707,1.707H10.25a.25.25,0,0,1,.25.25V22.492a1.5,1.5,0,1,0,3,0V7.019a.249.249,0,0,1,.25-.25h3.028a1,1,0,0,0,.707-1.707Z" />
    </g>
    <g id="vf-table-sortable--down">
      <path xmlns="http://www.w3.org/2000/svg" d="M17.7,17.838a1,1,0,0,0-.924-.617H13.75a.249.249,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0V16.971a.25.25,0,0,1-.25.25H7.222a1,1,0,0,0-.707,1.707l4.777,4.778a1,1,0,0,0,1.415,0l4.778-4.778A1,1,0,0,0,17.7,17.838Z" />
    </g>
    <g id="vf-table-sortable">
      <path xmlns="http://www.w3.org/2000/svg" d="M9,19a1,1,0,0,0-.707,1.707l3,3a1,1,0,0,0,1.414,0l3-3A1,1,0,0,0,15,19H13.5a.25.25,0,0,1-.25-.25V5.249A.25.25,0,0,1,13.5,5H15a1,1,0,0,0,.707-1.707l-3-3a1,1,0,0,0-1.414,0l-3,3A1,1,0,0,0,9,5h1.5a.25.25,0,0,1,.25.25v13.5a.25.25,0,0,1-.25.25Z" />
    </g>
  </defs>
</svg>

<table class="vf-table">


  <thead class="vf-table__header">
    <tr class="vf-table__row">
      <th class="vf-table__heading" scope="col"> Event
      </th>
      <th class="vf-table__heading" scope="col"> Date
      </th>
      <th class="vf-table__heading" scope="col"> Type
      </th>
      <th class="vf-table__heading" scope="col"> Location
      </th>
    </tr>
  </thead>

  <tbody class="vf-table__body">
    <tr class="vf-table__row
">
      <td class="vf-table__cell">dave</td>
      <td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
      <td class="vf-table__cell">roger</td>
      <td class="vf-table__cell">London, U.K.</td>
    </tr>
    <tr class="vf-table__row
">
      <td class="vf-table__cell">dave</td>
      <td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
      <td class="vf-table__cell">roger</td>
      <td class="vf-table__cell">London, U.K.</td>
    </tr>
    <tr class="vf-table__row
">
      <td class="vf-table__cell">dave</td>
      <td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
      <td class="vf-table__cell">roger</td>
      <td class="vf-table__cell">London, U.K.</td>
    </tr>
  </tbody>
</table>