Funkwhale UI

Appearance

ts
import Table from '@ui/Table.vue'

Table ​

Arrange cells in a grid.

For every row, add exactly one element per column.

Design [Penpot]

Prop grid-template-columns: An array of the column widths. You can make a column either fixed-width or use part of the available space:

  • 100px: Exactly this width
  • auto: The the widest cell in the column
  • 1fr: A certain fraction of the remaining space

The whole table always has a width of 100% (or stretch, if inside a flex or grid context). If the minimum sizes don't fit, all cells will shrink proportionally.

template
<Table :grid-template-columns="['100px', 'auto', '2fr', '1fr']">
    <b>100px</b>
    <b>auto</b>
    <b>2fr</b>
    <b>1fr</b>
</Table>
100pxauto2fr1fr

Add a table header ​

Use the #header slot to add items to the header. Make sure to add one item per column.

template
<Table :grid-template-columns="['3fr', '1fr']">
    <template #header>
        <label >Column 1</label>
        <label >Column 2</label>
    </template>
    <label>A</label>
    <label>B</label>
</Table>

Let cells span multiple rows or columns ​

  • Cells automatically expand into the next column if the following item is empty. Make sure the first element in each row is not empty!
  • You can let elements span multiple rows by adding style=grid-row: span 3. In this case, you have to remove the corresponding cells directly below.
template
<Table :grid-template-columns="['48px', '48px', 'auto', 'auto', 'auto', '48px', '64px', '48px']">
  <template #header>
    <label></label>
    <label></label>
    <label>Title</label>
    <label>Album</label>
    <label>Artist</label>
    <label></label>
    <label>⏱</label>
    <label></label>
  </template>

  <!-- Row 1 -->
  <div> </div>
  <div>C1</div>
  <div>Title 1</div>
  <div></div>
  <div>Artist 1</div>
  <div></div>
  <div>D1</div>
  <div>⌄</div>

  <!-- Row 2 -->
  <div>B2</div>
  <div>C2</div>
  <div>Title 2</div>
  <div style="grid-row: span 2; height: auto; background: blue;">Album 2</div>
  <div>Artist 2</div>
  <div>F2</div>
  <div>D2</div>
  <div>⌄</div>

  <!-- Row 3 -->
  <div>B3</div>
  <div>C3</div>
  <div>Title 3</div>
  <div>Artist 3</div>
  <div>F3</div>
  <div>D3</div>
  <div>⌄</div>

  <!-- Row 4 -->
  <div>B4</div>
  <div>C4</div>
  <div>Title 4</div>
  <div></div>
  <div></div>
  <div>F4</div>
  <div>D4</div>
  <div>⌄</div>
</Table>
 
C1
Title 1
Artist 1
D1
⌄
B2
C2
Title 2
Album 2
Artist 2
F2
D2
⌄
B3
C3
Title 3
Artist 3
F3
D3
⌄
B4
C4
Title 4
F4
D4
⌄

Add props to the table header ​

To add class names and other properties to the table header, set the header-props prop. In the following example, the whole header section is made inert.

Note that style properties may not have an effect because the header section is display: contents. Instead, add a custom attribute and add scoped style rule targeting your attribute.

template
<Table
    :grid-template-columns="['1fr', '1fr']"
    :header-props="{ inert: '' }"
>
  <template #header>
    <label>
        <Button low-height primary @click="console.log('clicked 1')">1</Button>
    </label>
    <label>
        <Button low-height primary @click="console.log('clicked 2')">2</Button>
    </label>
  </template>
</Table>

Using this component

A11y Checklist ​

Note that the current implementation does not use the semantic HTML5 element <table> by default. You may want to use semantic elements for the table slots to ensure screen readers and other assistive technology recognizes it as a table.

Accessible table ​

200px1frcell 2cell 3
template
<Table
  is-table
  :grid-template-columns="['200px', '1fr', 'auto']"
>
  <th>200px</th>
  <th>1fr</th>
  <th><Button>th</Button></th>
  <td><Button>cell 1</Button></td>
  <td>cell 2</td>
  <td>cell 3</td>
  <td><Button>cell 4</Button></td>
  <td><Button>cell 5</Button></td>
  <td><Button>cell 6</Button></td>
</Table>

Test this component in isolation against WCAG2 criteria