# Table
Component name: <v-table> + <v-row> + <v-cell>
# Examples
# Basic
Preview
Code
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 |
# With sort
Preview
Code
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 |
# Ellipsis vs overflow
Preview
Code
Emne
|
Kategori
|
Dato
|
|---|---|---|
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 |
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 |
# Static HTML table
Preview
Code
| Emne | Kategori | Dato |
|---|---|---|
| Ansøgning om dagpenge | Dagpenge | I dag, 10:48 |
| Ansøgning om dagpenge | Dagpenge | I dag, 10:48 |
| Ansøgning om dagpenge | Dagpenge | I dag, 10:48 |
| Ansøgning om dagpenge | Dagpenge | I dag, 10:48 |
| Ansøgning om dagpenge | Dagpenge | I dag, 10:48 |
# Components
# v-table
# API
| Name | Type | Description | Default |
|---|---|---|---|
| columns | [String] | Columns to show in table | - |
| columns-mobile | [String] | Columns to show on small screens | - |
# v-row
v-row acts as a tr
# v-cell
v-cell acts as a td
# API: v-cell
| Name | Type | Description | Default |
|---|---|---|---|
| overflow | Boolean | Let content overflow - disables ellipsis | false |
| hide-mobile | Boolean | Whether or not to hide cell on small screens | false |
| padding | String | Adjust cell padding to either small, medium or large. | medium |
| cell-width | String | Set a static width to the cell. Best used with Datatables | - |
General 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.