Datamängdredigerare

Komponent: FCrudDataset
Status: Produktionsklar

Innehåll

Tabell med redigering
Förpopulera objekt
Knappordning
Knapposition
Egna lägg till knappar
Tabell med lägg till-knapp
Tabell med knapp
Lista med redigering
Sorterbar lista
Anpassade texter
Modalstorlek
Textnycklar
API

Datamändgredigeraren används för att erbjuda användare funktionerna "lägg till", "ändra" och "ta bort" i en datamängd. Komponenten ansvarar inte för hur datamängden och åtgärderna "lägg till", "ändra" och "ta bort" presenteras. Vanligtvis används lista eller tabell för presentation men kan även vara egenutvecklad.

Om knappens visuella text för "ändra" och "ta bort" inte tydligt identifierar raden från andra rader, behöver knappen kompletteras med en text för skärmläsare. Beroende på sammanhang kan även knappen för "lägg till ny" behöva kompletteras med en skärmläsartext, som tydligör vad som läggs till.

Tabell med redigering

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { type FruitData, fruits } from "./fruit-data";
import {
    FCrudDataset,
    FTable,
    FTextField,
    FTextareaField,
    defineTableColumns,
    useDatasetRef,
} from "@fkui/vue";

const rows = useDatasetRef(fruits, "variant");
const crud = useTemplateRef("crud");
const columns = defineTableColumns([
    { type: "text", header: "Namn", key: "name", size: "shrink" },
    { type: "text", header: "Land", key: "origin", size: "shrink" },
    { type: "text", header: "Beskrivning", key: "description" },
    {
        type: "menu",
        header: "Åtgärd",
        text: (row: FruitData) => `Visa åtgärder för ${row.name}`,
        actions: [
            {
                label: "Ändra",
                icon: "pen",
                onClick: (row: FruitData) => {
                    crud.value?.updateItem(row);
                },
            },
            {
                label: "Ta bort",
                icon: "trashcan",
                onClick: (row: FruitData) => {
                    crud.value?.deleteItem(row);
                },
            },
        ],
    },
]);

function saveModel(row: FruitData): void {
    console.log("Post model to backend", row);
}
</script>

<template>
    <f-crud-dataset
        ref="crud"
        v-model="rows"
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default>
            <f-table :rows :columns striped>
                <template #caption> <b>Frukter</b> </template>
            </f-table>
        </template>
        <template #modify="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
            ID {{ item.id }}
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.id"
                v-validation.required.maxLength="{ maxLength: { length: 4 } }"
                type="text"
            >
                ID
            </f-text-field>
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen radera frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Förpopulera objekt

Använd propen beforeCreate med en callback som returnerar ett objekt för att förpopulera data som ska läggas till. Callback anropas innan modalen visas.

<f-crud-dataset :before-create="onBeforeCreate">
    <template #default> ... </template>
</f-crud-dataset>

function onBeforeCreate(): MyInterface {
    return {/* ... */};
}

Knappordning

Standardinställningen för knappordningen i modalerna för "Lägg till" och "Ändra" är att primärknappen ligger först följt av sekundärknappen. Standardinställningen för modalen "Ta bort" är att sekundärknappen ligger först följt av primärknappen. Du kan ändra knappordningen för bekräftelsemodalen och därmed ändra knappordningen för modalen "Ta bort" genom inställning av buttonOrder i konfigurationen.

Knapposition

I standardutförande är knapparna positionerade under huvudinnehållet. Med propen buttonPosition kan knapparna istället positioneras ovanför huvudinnehållet.

Egna lägg till knappar

Använd slotten #buttons för att lägga till egna anpassade lägg-till knappar. Du behöver själv hantera vad klick på knappen ska utföra för åtgärd.

 <f-crud-dataset>
     <template #default> ... </template>
+    <template #buttons="{ buttonClasses }">
+        <button type="button" :class="buttonClasses" @click="onClick">
+            My button
+        </button>
+    </template>
 </f-crud-dataset>

Tabell med lägg till-knapp

<script setup lang="ts">
import { type FruitData, fruits } from "./fruit-data";
import {
    FCrudDataset,
    FTable,
    FTextField,
    FTextareaField,
    defineTableColumns,
    useDatasetRef,
} from "@fkui/vue";

const rows = useDatasetRef(fruits);
const columns = defineTableColumns<FruitData>([
    { type: "text", header: "Namn", key: "name", size: "shrink" },
    { type: "text", header: "Land", key: "origin", size: "shrink" },
    { type: "text", header: "Beskrivning", key: "description" },
]);

function saveModel(row: FruitData): void {
    console.log("Post model to backend", row);
}
</script>

<template>
    <f-crud-dataset v-model="rows" @created="saveModel" @updated="saveModel" @deleted="saveModel">
        <template #default>
            <f-table :rows :columns>
                <template #caption> <b>Rättigheter</b> </template>
            </f-table>
        </template>
        <template #add="{ item }">
            <f-text-field
                v-model="item.id"
                v-validation.required.maxLength="{ maxLength: { length: 4 } }"
                type="text"
            >
                ID
            </f-text-field>
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>
    </f-crud-dataset>
</template>

Tabell med knapp

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { type FruitData, fruits } from "./fruit-data";
import { FCrudDataset, FTable, FTextField, defineTableColumns, useDatasetRef } from "@fkui/vue";

const rows = useDatasetRef(fruits);
const crud = useTemplateRef("crud");
const columns = defineTableColumns([
    { type: "text", header: "Namn", key: "name", size: "shrink" },
    { type: "text", header: "Land", key: "origin", size: "shrink" },
    { type: "text", header: "Beskrivning", key: "description" },
    {
        type: "button",
        header: "Åtgärd",
        text: (row: FruitData) => `Ändra ${row.name}`,
        icon: "pen",
        onClick: (row: FruitData) => {
            crud.value?.updateItem(row);
        },
    },
]);

function saveModel(row: FruitData): void {
    console.log("Post model to backend", row);
}
</script>

<template>
    <f-crud-dataset
        ref="crud"
        v-model="rows"
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default>
            <f-table :rows :columns>
                <template #caption> <b>Frukter</b> </template>
            </f-table>
        </template>
        <template #modify="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
        </template>
    </f-crud-dataset>
</template>

Lista med redigering

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<script lang="ts">
import { defineComponent } from "vue";
import { type FruitData, fruits } from "./fruit-data";
import { FButton, FCrudDataset, FList, FStaticField, FTextField, FTextareaField } from "@fkui/vue";

export default defineComponent({
    components: {
        FButton,
        FCrudDataset,
        FList,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, Math.trunc(Number(item.id)));
            }, 0);
        },
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

<template>
    <f-crud-dataset
        v-model="fruits"
        data-test="f-crud-dataset-list-example"
        :before-create
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default="{ updateItem, deleteItem }">
            <f-list :items="fruits" element-id="example" key-attribute="id" selectable>
                <template #default="{ item }">
                    <h3>{{ item.name }}</h3>
                    <div class="row">
                        <div class="col col--md-7">
                            <p>
                                Land:
                                <em> {{ item.origin }} </em>
                                <br />
                                Beskrivning:
                                <em> {{ item.description }} </em>
                                <br />
                            </p>
                        </div>
                        <div class="col col--md-5">
                            <ul class="button-list">
                                <li>
                                    <f-button
                                        icon-left="pen"
                                        size="small"
                                        type="button"
                                        variant="tertiary"
                                        @click="updateItem(item)"
                                    >
                                        Ändra <span class="sr-only">{{ item.name }}</span>
                                    </f-button>
                                </li>
                                <li>
                                    <f-button
                                        icon-left="trashcan"
                                        size="small"
                                        type="button"
                                        variant="tertiary"
                                        @click="deleteItem(item)"
                                    >
                                        Ta bort <span class="sr-only">{{ item.name }}</span>
                                    </f-button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </template>
                <template #screenreader="{ item }"> Frukt ID {{ item.id }} </template>
            </f-list>
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen radera frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Sorterbar lista

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<script lang="ts">
import { defineComponent } from "vue";
import { type FruitData, fruits } from "./fruit-data";
import {
    FButton,
    FCrudDataset,
    FList,
    FSortFilterDataset,
    FStaticField,
    FTextField,
    FTextareaField,
} from "@fkui/vue";

export default defineComponent({
    components: {
        FButton,
        FCrudDataset,
        FList,
        FSortFilterDataset,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, Math.trunc(Number(item.id)));
            }, 0);
        },
    },
});
</script>

<template>
    <f-crud-dataset v-model="fruits" :before-create>
        <template #default="{ updateItem, deleteItem }">
            <f-sort-filter-dataset
                :data="fruits"
                :sortable-attributes="{
                    name: 'Namn',
                    origin: 'Land',
                }"
            >
                <template #default="{ sortFilterResult }">
                    <f-list :items="sortFilterResult" key-attribute="id">
                        <template #default="{ item }">
                            <h3>{{ item.name }}</h3>
                            <div class="row">
                                <div class="col col--lg-10">
                                    Land:
                                    <em> {{ item.origin }} </em>
                                    <br />
                                    Beskrivning:
                                    <em> {{ item.description }} </em>
                                    <br />
                                </div>
                                <div class="col col--sm-1">
                                    <f-button
                                        icon-left="pen"
                                        size="small"
                                        variant="tertiary"
                                        @click="updateItem(item)"
                                    >
                                        Ändra <span class="sr-only">{{ item.name }}</span>
                                    </f-button>
                                </div>
                                <div class="col col--sm-1">
                                    <f-button
                                        icon-left="trashcan"
                                        size="small"
                                        variant="tertiary"
                                        @click="deleteItem(item)"
                                    >
                                        Ta bort <span class="sr-only">{{ item.name }}</span>
                                    </f-button>
                                </div>
                            </div>
                        </template>
                    </f-list>
                </template>
            </f-sort-filter-dataset>
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen ta bort frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Anpassade texter

Rubriker i modaler kan anpassas antingen med textnycklar (standardtexter för alla datamängdredigerare) eller med propar (för en specifik datamängdredigerare):

Lägg till: textnyckel fkui.crud-dataset.modal.header.add eller prop addNewModalHeader.
Ändra: textnyckel fkui.crud-dataset.modal.header.modify eller prop modifyModalHeader.
Ta bort: textnyckel fkui.crud-dataset.modal.header.delete eller prop deleteModalHeader.

Knapptexter i modaler kan anpassas med textnycklar.

Lägg till: textnycklar fkui.crud-dataset.modal.confirm.add och fkui.crud-dataset.modal.cancel.add.
Ändra: textnycklar fkui.crud-dataset.modal.confirm.modify och fkui.crud-dataset.modal.cancel.modify.
Ta bort: textnycklar fkui.crud-dataset.modal.confirm.delete och fkui.crud-dataset.modal.cancel.delete.

Knappentexten för "Lägg till" kan anpassas med textnyckel fkui.crud-dataset.button.add eller slotten add-button.

Knapptexter för åtgärdsknappar kan anpassas med textnycklar eller med knappens default slot.

Ändra: textnyckel fkui.crud-button.modify eller default slot.
Ta bort: textnyckel fkui.crud-button.delete eller default slot.

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<script lang="ts">
import { defineComponent } from "vue";
import { type FruitData, fruits } from "./fruit-data";
import { FButton, FCrudDataset, FList, FStaticField, FTextField, FTextareaField } from "@fkui/vue";

export default defineComponent({
    name: "ExampleApp",
    components: {
        FButton,
        FCrudDataset,
        FList,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, Math.trunc(Number(item.id)));
            }, 0);
        },
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

<template>
    <f-crud-dataset
        v-model="fruits"
        :before-create
        add-new-modal-header="Lägg till ny frukt"
        modify-modal-header="Ändra land"
        delete-modal-header="Vill du ta bort frukten?"
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default="{ updateItem, deleteItem }">
            <f-list :items="fruits" element-id="example" key-attribute="id">
                <template #default="{ item }">
                    <div class="row">
                        <div class="col col--lg-7 col--md-6">
                            <h3>{{ item.name }}</h3>
                            <p>
                                Land:
                                <em> {{ item.origin }} </em>
                                <br />
                                Beskrivning:
                                <em> {{ item.description }} </em>
                                <br />
                            </p>
                        </div>
                        <div class="col col--lg-5 col--md-6">
                            <div class="row row--align-end">
                                <div class="col">
                                    <f-button
                                        icon-left="pen"
                                        size="small"
                                        type="button"
                                        variant="tertiary"
                                        @click="updateItem(item)"
                                    >
                                        Ändra <span class="sr-only">{{ item.name }}</span>
                                    </f-button>
                                </div>
                                <div class="col">
                                    <f-button
                                        icon-left="trashcan"
                                        size="small"
                                        type="button"
                                        variant="tertiary"
                                        @click="deleteItem(item)"
                                    >
                                        Ta bort <span class="sr-only">{{ item.name }}</span>
                                    </f-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template #screenreader="{ item }"> Frukt ID {{ item.id }} </template>
            </f-list>
        </template>
        <template #add-button> Lägg till ny <span class="sr-only"> frukt </span> </template>
        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen ta bort frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

Modalstorlek

Storleken på modalerna för "Lägg till" och "Ändra" kan anpassas med propen formModalSize.

Giltiga värden är:

"" (tom sträng, standard)
"small"
"medium"
"large"
"fullwidth"

<f-crud-dataset form-modal-size="large">
    <template #default> ... </template>
    <template #add> ... </template>
    <template #modify> ... </template>
</f-crud-dataset>

Se FFormModal för mer information om modalstorlekar.

Textnycklar

Läs mer om att anpassa och översätta text.

fkui.crud-dataset.modal.header.add

‐

Default: "Lägg till rad"

fkui.crud-dataset.modal.header.modify

‐

Default: "Ändra rad"

fkui.crud-dataset.modal.header.delete

‐

Default: "Är du säker på att du vill ta bort raden?"

fkui.crud-dataset.button.add

‐

Default: "Lägg till ny"

fkui.crud-dataset.modal.confirm.add

"Save" button in "add new" modal"

Default: "Lägg till"

fkui.crud-dataset.modal.confirm.modify

"Save" button in "modify" modal

Default: "Spara"

fkui.crud-dataset.modal.cancel.add

"Cancel" button in "add new" modal

Default: "Avbryt"

fkui.crud-dataset.modal.cancel.modify

"Cancel" button in "modify" modal

Default: "Avbryt"

fkui.crud-dataset.modal.confirm.delete

"Confirm" button in "delete" modal

Default: "Ja, ta bort"

fkui.crud-dataset.modal.cancel.delete

"Cancel" button in "delete" modal

Default: "Nej, avbryt"

fkui.crud-dataset.aria-live.delete

Text announced to screenreaders when an item has been removed

Default: "Raden har tagits bort"

fkui.crud-dataset.aria-live.add

Text announced to screenreaders when an item has been added

Default: "En rad har lagts till"

fkui.crud-dataset.aria-live.modify

Text announced to screenreaders when an item has been modified

Default: "Raden har ändrats"

fkui.crud-dataset.modal.close

‐

Default: "Stäng"

fkui.crud-button.delete

Button label when action is "delete"

Default: "Ta bort"

fkui.crud-button.modify

Button label when action is "modify"

Default: "Ändra"

API

`FCrudDataset`

Props

beforeCreate: (() => T) | undefined Optional

A function that returns an item to the #add template. Can be used to populate data that the user should not input themself e.g. an id. Or to give the user suggestions for inputs. If the prop is not used an empty item will be returned.

Default: undefined

beforeSubmit: FValidationFormCallback Optional

If given, this function is called before the [[submit]] event is emitted. See <f-validation-form> beforeSubmit props for more info.

Default: function() { /* do nothing */ }

beforeValidation: FValidationFormCallback Optional

If given, this function is called before the form data is validated and the [[submit]] event is emitted. See <f-validation-form> beforeValidation props for more info.

Default: function() { /* do nothing */ }

onCancel: () => void Optional

If given, this function is called after the modal has been closed.

Default: function() { return undefined; }

addNewModalHeader: string Optional

Property for changing the "add new" modal heading

Default: TranslationService.provider.translate("fkui.crud-dataset.modal.header.add", "Lägg till rad")

modifyModalHeader: string Optional

Property for changing the "modify" modal heading

Default: TranslationService.provider.translate("fkui.crud-dataset.modal.header.modify", "Ändra rad")

deleteModalHeader: string Optional

Property for changing the "delete" modal heading

Default: TranslationService.provider.translate( "fkui.crud-dataset.modal.header.delete", "Är du säker på att du vill ta bort raden?", )

formModalSize: FModalSize | "fullscreen" | "" Optional

Property for changing the "add" and "modify" modal size

Default: ""

buttonPosition: "bottom" | "top" Optional

Property for setting the position of the add button

Default: "bottom"

Events

created

Emitted when an item is added.

Arguments:

item: T — the added item.

deleted

Emitted when an item is deleted.

Arguments:

item: T — the deleted item.

updated

Emitted when an item is updated.

Arguments:

item: T — the updated item.

Slots

add-button

Slot for changing the text in "Add new" button`

buttons

Slot for additional add buttons

Bindings:

buttonClasses: string[] — Default button classes.

default

Slot for displaying the data.

Bindings:

updateItem: (item: T) => void — Callback to trigger modification modal
deleteItem: (item: T, nested?: keyof T) => void — Callback to trigger deletion modal

add

Slot for inputs when creating a new item. The new item is available through v-slot="{ item }". If any data in the item should be set not by the user the prop beforeCreate can be used to set that data.

Bindings:

item: T — Item returned by beforeCreate or an empty object.

modify

Slot for inputs when modifying an item. The item being modified is available through v-slot="{ item }".

Bindings:

item: T — A clone of the current item.

delete

Slot for displaying a warning message before an item is deleted. The item being deleted is available through v-slot="{ item }".

Bindings:

item: T — Item about to be deleted.

`FCrudButton`

Komponenten är deprekerad. Läs mer om att migrera FCrudButton.

Kakor på webbplatsen

Datamängdredigerare