Sätta kolumnbredd i tabell

Innehåll

Användning
Användning av procent på kolumnerna

Kolumnernas bredd i tabellen kan justeras med olika parametrar.

Användning

<script setup lang="ts">
import { ref } from "vue";
import { FTable, defineTableColumns, useDatasetRef } from "@fkui/vue";

interface Row {
    namn: string;
    land: string;
    pris: string;
}

const data: Row[] = [
    {
        namn: "Apelsin",
        land: "Spanien",
        pris: "30",
    },
    {
        namn: "Banan",
        land: "Ecuador",
        pris: "15",
    },
    {
        namn: "Äpple",
        land: "Sverige",
        pris: "22",
    },
];

const selectedRows = ref<Row[]>([]);

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "namn",
    },
    {
        type: "text",
        header: "Land",
        key: "land",
        width: "13rem",
    },
    {
        type: "text:currency",
        header: "Pris per kilo",
        key: "pris",
        size: "shrink",
    },
]);

const rows = useDatasetRef(data);
</script>
<template>
    <f-table v-model:selected-rows="selectedRows" :rows :columns selectable="multi"> </f-table>
</template>

Frukt kolumnen har "grow".
Land kolumnen har width "13rem" satt.
Pris per kilo kolumnen har "shrink".

`size`

Är det föredragna sättet att justera kolumnbredder på eftersom det är mest responsivt.

"grow" kolumnen tar upp så mycket utrymme den kan.
"shrink" kolumnen tar upp så lite den kan utan att kapa innehållet.

`width`

Används för att sätta en mer specifik bredd än vad size kan ge. Skrivs som "50%".

Enhet:

"%"

Kolumnen tar upp den precentuella angivna delen. Den kan både växa och krympa.

Enheter:

"px"
"rem"
"ch"

Sätter en bredd som inte kan bli mindre eller större än det som är satt. Bör användas med försiktighet eftersom det gör tabellen mindre responsiv.

Kräver att en kolumn i tabellen får växa med "grow" för att inte själv växa. Om tabellen bara har kolumner med "shrink" och tabellen får växa kommer kolumnen med width satt att växa.

Användning av procent på kolumnerna

<script setup lang="ts">
import { FTable, defineTableColumns, useDatasetRef } from "@fkui/vue";

interface Row {
    namn: string;
    land: string;
    pris: string;
}

const data: Row[] = [
    {
        namn: "Apelsin",
        land: "Spanien",
        pris: "30",
    },
    {
        namn: "Banan",
        land: "Ecuador",
        pris: "15",
    },
    {
        namn: "Äpple",
        land: "Sverige",
        pris: "22",
    },
];

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "namn",
        width: "30%",
    },
    {
        type: "text",
        header: "Land",
        key: "land",
        width: "50%",
    },
    {
        type: "text:currency",
        header: "Pris per kilo",
        key: "pris",
        width: "20%",
    },
]);

const rows = useDatasetRef(data);
</script>
<template>
    <f-table :rows :columns></f-table>
</template>

Frukt kolumnen har "30%".
Land kolumnen har "50%".
Pris per kilo kolumnen har "20%".

Kakor på webbplatsen

Sätta kolumnbredd i tabell

Användning

size

width

Användning av procent på kolumnerna

`size`

`width`