3F Design v1.23.4

Table

Component name: <v-table> + <v-row> + <v-cell>

Examples

Basic

Emne
Kategori
Dato
Status
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge
Dagpenge
I dag, 10:48
ÅBEN
<div class="app">
  <v-table :columns="['Emne', 'Kategori', 'Dato', 'Status']">
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell>Ansøgning om dagpenge</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
  </v-table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

Ellipsis vs overflow

Emne
Kategori
Dato
Status
Ansøgning om dagpenge Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
Dagpenge
I dag, 10:48
ÅBEN
Ansøgning om dagpenge Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
Dagpenge
I dag, 10:48
ÅBEN
<div class="app">
  <v-table class="my-3" :columns="['Emne', 'Kategori', 'Dato', 'Status']">
    <v-row>
      <v-cell>Ansøgning om dagpenge Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
    <v-row>
      <v-cell overflow>Ansøgning om dagpenge Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.</v-cell>
      <v-cell>Dagpenge</v-cell>
      <v-cell>I dag, 10:48</v-cell>
      <v-cell>ÅBEN</v-cell>
    </v-row>
  </v-table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Components

v-table

API

Name Type Description Default
columns [String] Columns to show in table -

v-row

v-row acts as a tr

v-cell

v-cell acts as a td

API

Name Type Description Default
overflow Boolean Let content overflow - disables ellipsis false

Notice

All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.

← Text →