Expandable Table

Standard component:

My table description

	Title	Price
	Title value 1	3,50
	Title value 2	4,28

Voorbeeld HTML

<div role="region" class="rvo-table--responsive">
  <table class="rvo-expandable-table">
    <caption class="rvo-caption">My table description</caption>
    <thead class="rvo-table-head">
      <tr class="rvo-table-row">
        <th scope="col" class="rvo-table-header"></th>
        <th scope="col" class="rvo-table-header">
          Title
        </th>
        <th scope="col" class="rvo-table-header">
          Price
        </th>
      </tr>
    </thead>
    <tbody class="rvo-table-body">
      <tr class="rvo-table-row rvo-expandable-table-row" id="foo">
        <td class="rvo-table-cell rvo-table-cell--expandable-button">
          <button
            class="utrecht-button utrecht-button--padding-none utrecht-button--fit-content utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs"
            type="button"
            aria-controls="first-title-descr"
            aria-expanded="false"
          >
            <span
              class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw"
              role="img"
              aria-label="Delta omlaag"
            ></span>
          </button>
        </td>
        <td class="rvo-table-cell">Title value 1</td>
        <td class="rvo-table-cell">3,50</td>
      </tr>
      <tr class="rvo-table-row" id="first-title-descr" hidden="">
        <td class="rvo-table-cell" colSpan="2">
          <h1>Expandable Titel</h1>
          <p>Meer content hier...</p>
        </td>
      </tr>
      <tr class="rvo-table-row">
        <td class="rvo-table-cell"></td>
        <td class="rvo-table-cell">Title value 2</td>
        <td class="rvo-table-cell">4,28</td>
      </tr>
    </tbody>
  </table>
</div>

Open in nieuwe tab

Documentatie

Deze Table biedt de mogelijkheid uitklapbare rijen toe te voegen waar extra informatie die niet in de helper text passen te kunnen tonen. De table kan overigens ook gebruikt worden als een normale tabel zonder rijen met extra informatie.