Använd kolumntypen textfält (text) för inmatning och visning av textbaserat innehåll i tabellen.

Det är den mest flexibla kolumntypen och den fungerar både för enkel fritext och de specialiserade textfälten med inbyggd validering, formatering och parsning.

I det enklaste fallet kopplar du kolumnen till en egenskap i raden med key.

import { defineTableColumns } from "@fkui/vue";

interface Row {
    fruit: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "fruit",
    },
]);

Om cellen ska vara redigerbar sätter du editable: true och uppdaterar raden via key eller update().

import { defineTableColumns } from "@fkui/vue";

interface Row {
    fruit: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "fruit",
        editable: true,
    },
]);

Läsa värde med value

Använd value(row) när värdet ska räknas fram från flera fält eller när du inte vill läsa direkt från key.

import { defineTableColumns } from "@fkui/vue";

interface Row {
    firstName: string;
    lastName: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Namn",
        value(row) {
            return `${row.firstName} ${row.lastName}`;
        },
    },
]);

Formatera värde med formatter

Använd formatter(value) när du vill ändra hur värdet visas i tabellen utan att ändra datan i raden.

import { defineTableColumns } from "@fkui/vue";

interface Row {
    fruit: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "fruit",
        formatter(value) {
            return value.toUpperCase();
        },
    },
]);

Bearbeta inmatning med parser

Om kolumnen är redigerbar kan du använda parser(value) för att normalisera användarens inmatning innan den skrivs tillbaka.

import { defineTableColumns } from "@fkui/vue";

interface Row {
    fruit: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "fruit",
        editable: true,
        parser(value) {
            return value.trim();
        },
    },
]);

Styra uppdatering med update

Använd update(row, newValue, oldValue) när du behöver full kontroll över hur raden ska ändras.

import { defineTableColumns } from "@fkui/vue";

interface Row {
    fruit: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "fruit",
        editable: true,
        update(row, newValue) {
            row.fruit = newValue;
        },
    },
]);

Validering

Textfält kan valideras med validation. Det är användbart när cellen är redigerbar och du vill styra vilka värden som är tillåtna.

import { defineTableColumns } from "@fkui/vue";

interface Row {
    fruit: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "fruit",
        editable: true,
        validation: {
            required: {},
            minLength: { length: 2 },
        },
    },
]);

Specialiserade textfält

För vissa vanliga datatyper finns färdiga varianter av text med inbyggd formattering, parsning och validering.

• kontonummer
• bankgiro
• clearingnummer
• datum
• mejladress
• numeriskt
• organisationsnummer
• personnummer
• plusgiro
• postnummer
• procent
• telefonnummer
• valuta

Bra att veta

• key används när kolumnen ska läsa och skriva mot ett specifikt fält i raden.
• label används som skärmläsartext för redigerbara celler.
• align och tnum kan användas för att styra justering och tabular figures.
• text:currency, text:number och text:percent blir högerjusterade som standard.

Flödesdiagram

flowchart TD
 accTitle: Flödesdiagram
 accDescr: Bilden visar hur callbackfunktionerna value, formatter, parser, validation och update förhåller sig till varandra.
 A@{ shape: "circle", label: "row value" }
 B@{ shape: "diam", label: "validation"}
 C@{ shape: "rounded", label: "formatter()"}
 E@{ shape: "rounded", label: "value()"}
 G@{ shape: "circle", label: "view value"}

    A --> E;
    B -- NOK --> G;
    C --> G;
    B -- OK --> C;
    E -- no validation--> C;
    E --> B;

 X@{ shape: "rounded", label: "parser()"}
 Y@{ shape: "diam", label: "validation"}
 Z@{ shape: "rounded", label: "update()"}

    G --> Y;
    Y -- OK --> X;
    Y -- NOK --> Z;
    G -- no validation --> X;
    X --> Z;
    Z --> A;

flowchart TD
 accTitle: Flödesdiagram
 accDescr: Alternativ layout för samma flöde mellan callbackfunktionerna.
 A@{ shape: "circle", label: "row value" }
 B@{ shape: "diam", label: "validation"}
 C@{ shape: "rounded", label: "formatter()"}
 E@{ shape: "rounded", label: "value()"}
 G@{ shape: "circle", label: "view value"}

    A --> E;
    B -- NOK --> G;
    C --> G;
    B -- OK --> C;
    E -- no validation--> C;
    E --> B;

 V@{ shape: "circle", label: "row value" }
 W@{ shape: "circle", label: "view value"}
 X@{ shape: "rounded", label: "parser()"}
 Y@{ shape: "diam", label: "validation"}
 Z@{ shape: "rounded", label: "update()"}

    W --> Y;
    Y -- OK --> X;
    Y -- NOK --> Z;
    W -- no validation --> X;
    X --> Z;
    Z --> V;

Parametrar