Komponent

FSortFilterDataset

Status

Produktionsklar

Datamängdsorterare används vid sortering av datamängd och/eller för sökning i en datamängd i komponenterna lista eller tabell.

Användning

Sätt data till lista som ska sorteras och filtreras samt sortableAttributes till en beskrivning av de fält som är sorterbara.

<f-sort-filter-dataset
    :data="items"
    :sortable-attributes="{ givenname: 'Förnamn', surname: 'Efternamn' }"
>
    <template #header="{ slotClass }">
        <h3 :class="slotClass">Rubrik</h3>
    </template>
    <template #default="{ sortFilterResult }">
        <!-- sortFilterResult is array with filtered items -->
    </template>
</f-sort-filter-dataset>

Förvald sortering

Sätt defaultSortAttribute till namnet på fältet som ska sorteras samt defaultSortAscending till true (default) eller false för att välja om sorteringen ska ske i stigande (true) eller fallande (false) ordning.

 <f-sort-filter-dataset
     :data="items"
     :sortable-attributes="{ givenname: 'Förnamn', surname: 'Efternamn' }"
+    default-sort-attribute="name"
+    :default-sort-ascending="true"
 >
     <template #header="{ slotClass }">
         <h3 :class="slotClass">Rubrik</h3>
     </template>
     <template #default="{ sortFilterResult }">
         <!-- sortFilterResult is array with filtered items -->
     </template>
 </f-sort-filter-dataset>

Filtrering

Sätt filterAttributes till en lista med vilka attribut som ska inkluderas i filtreringen. Om filterAttributes inte anges inkluderas alla attribut i filtreringen.

 <f-sort-filter-dataset
     :data="items"
     :sortable-attributes="{ givenname: 'Förnamn', surname: 'Efternamn' }"
+    :filter-attributes="['surname']"
 >
     <template #header="{ slotClass }">
         <h3 :class="slotClass">Rubrik</h3>
     </template>
     <template #default="{ sortFilterResult }">
         <!-- sortFilterResult is array with filtered items -->
     </template>
 </f-sort-filter-dataset>

Lista med datamängdsorterare

Visar hur FSortFilterDataset kan användas med FList.

<script lang="ts">
import { defineComponent } from "vue";
import { FList, FSortFilterDataset } from "@fkui/vue";
import { fruits } from "./fruit-data";

export default defineComponent({
    components: { FSortFilterDataset, FList },
    data() {
        return {
            sortableAttributes: {
                name: "Namn",
                origin: "Land",
            },
            fruits,
        };
    },
});
</script>

<template>
    <f-sort-filter-dataset :data="fruits" :sortable-attributes>
        <template #header="{ slotClass }">
            <h3 :class="slotClass">Frukter</h3>
        </template>
        <template #default="{ sortFilterResult }">
            <f-list key-attribute="id" :items="sortFilterResult">
                <template #default="{ item }">
                    <h3>{{ item.name }}</h3>
                    <p>
                        Land:
                        <em> {{ item.origin }} </em>
                        <br />
                        Beskrivning:
                        <em> {{ item.description }} </em>
                        <br />
                    </p>
                </template>
                <template #screenreader="{ item }"> {{ item.name }} </template>
            </f-list>
        </template>
    </f-sort-filter-dataset>
</template>
./fruit-data

Tabell med datamängdsorterare

När tabell (FInteractiveTable eller FDataTable) används med datamängdsorterare måste varje tabellkolumn använda name prop med ett unikt värde. För objektet som du skickar till datamängdsorterarens sortableAttributes behöver egenskapernas namn även matcha kolumnernas namn för att kunna sortera dem.

-<f-table-column title="Datum">
+<f-table-column name="date" title="Datum">

const mySortableAttributes = {
    // Property name must match column name.
    date: "Datum",
};

Tabell med förvald sortering

Visar hur FSortFilterDataset kan användas med FInteractiveTable.

<script lang="ts">
import { defineComponent } from "vue";
import { FInteractiveTable, FSortFilterDataset, FTableColumn } from "@fkui/vue";
import { fruits } from "./fruit-data";

export default defineComponent({
    components: { FSortFilterDataset, FInteractiveTable, FTableColumn },
    data() {
        return {
            sortableAttributes: {
                name: "Namn",
                origin: "Land",
            },
            fruits,
        };
    },
});
</script>

<template>
    <f-sort-filter-dataset
        :data="fruits"
        default-sort-attribute="name"
        :default-sort-ascending="true"
        :sortable-attributes
    >
        <template #header="{ slotClass }">
            <h3 :class="slotClass">Frukter</h3>
        </template>
        <template #default="{ sortFilterResult }">
            <f-interactive-table :rows="sortFilterResult" striped key-attribute="id">
                <template #caption>
                    <span class="sr-only"> Frukter </span>
                </template>
                <template #default="{ row }">
                    <f-table-column name="name" title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column name="origin" title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column name="description" title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                </template>
            </f-interactive-table>
        </template>
    </f-sort-filter-dataset>
</template>

Tabell med åtgärder

Åtgärder som till exempel batch-funktioner som rör hela datamängden kan placeras i sloten Header för att gruppera med sortering och filtering.

<script lang="ts">
import { defineComponent } from "vue";
import { FButton, FInteractiveTable, FSortFilterDataset, FTableColumn } from "@fkui/vue";
import { fruits } from "./fruit-data";

export default defineComponent({
    components: { FButton, FInteractiveTable, FSortFilterDataset, FTableColumn },
    data() {
        return {
            sortableAttributes: {
                name: "Namn",
                origin: "Land",
            },
            fruits,
        };
    },
});
</script>

<template>
    <h3>Frukter</h3>
    <f-sort-filter-dataset
        :data="fruits"
        default-sort-attribute="name"
        :default-sort-ascending="true"
        :sortable-attributes
    >
        <template #header>
            <div class="button-group">
                <f-button
                    class="button-group__item"
                    icon-left="trashcan"
                    size="small"
                    variant="tertiary"
                >
                    <span> Ta bort </span>
                </f-button>
                <f-button
                    class="button-group__item"
                    icon-left="paper-clip"
                    size="small"
                    variant="tertiary"
                >
                    <span> Bifoga </span>
                </f-button>
            </div>
        </template>

        <template #default="{ sortFilterResult }">
            <f-interactive-table
                :rows="sortFilterResult"
                striped
                selectable="multi"
                key-attribute="id"
            >
                <template #caption>
                    <span class="sr-only"> Frukter </span>
                </template>
                <template #selectable-description> Välj denna raden </template>
                <template #default="{ row }">
                    <f-table-column name="name" title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column name="origin" title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column name="description" title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                </template>
            </f-interactive-table>
        </template>
    </f-sort-filter-dataset>
</template>

Datamängdsorterare och egen presentation

<script lang="ts">
import { defineComponent } from "vue";
import { FSortFilterDataset } from "@fkui/vue";
import { fruits } from "./fruit-data";

export default defineComponent({
    components: { FSortFilterDataset },
    data() {
        return {
            sortableAttributes: {
                name: "Namn",
                origin: "Land",
            },
            fruits: fruits.map((it) => {
                const { description, ...rest } = it;
                return rest;
            }),
        };
    },
});
</script>

<template>
    <f-sort-filter-dataset :data="fruits" :sortable-attributes>
        <template #default="{ sortFilterResult }">
            <pre v-for="item in sortFilterResult" :key="item.id">{{ item }}</pre>
        </template>
    </f-sort-filter-dataset>
</template>

<style>
.sort-filter-dataset pre {
    display: inline-block;
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}
</style>

Ändra rubriknivå

Du kan variera storleken genom att inte använda den tillgängliga slotClass (som sätter den standardiserade storleken för rubriken).

 <f-sort-filter-dataset
     :data="items"
     :sortable-attributes="{ givenname: 'Förnamn', surname: 'Efternamn' }"
 >
-    <template #header="{ slotClass }">
-        <h3 :class="slotClass">Rubrik</h3>
+    <template #header>
+        <h1>Rubrik</h1>
     </template>
     <template #default="{ sortFilterResult }">
         <!-- sortFilterResult is array with filtered items -->
     </template>
 </f-sort-filter-dataset>

<script lang="ts">
import { defineComponent } from "vue";
import { FSortFilterDataset } from "@fkui/vue";

export default defineComponent({
    components: { FSortFilterDataset },
});
</script>

<template>
    <f-sort-filter-dataset
        :data="[]"
        :sortable-attributes="{ givenname: 'Förnamn', surname: 'Efternamn' }"
    >
        <template #header>
            <h1>Stor rubrik</h1>
        </template>
        <template #default></template>
    </f-sort-filter-dataset>
</template>

Visa antalet rader

För att visa antalet rader som presenteras använder man sig av de två listornas längd.

• Om längden av de ursprungliga raderna är 0 finns inga rader att visa oavsett filtrering.
• Om längden av de filtrerade raderna är 0 (men ursprungliga är större än 0) visas inga rader på grund av filter.
• Om längden mellan de två skiljer sig åt har sökningen gett ett resultat.

Vi använder begreppet "träffar" för att presentera resultat. Om det går att specificera träffar så är det bättre att göra det, till exempel "Det finns inga frukter att visa" istället för "Det finns inga träffar att visa".

 <f-sort-filter-dataset :data="items">
     <template #default="{ sortFilterResult }">
+        Visar {{ sortFilterResult.length }} av {{ items.length }} frukter.
         <f-data-table :rows="sortFilterResult">
             <!-- [...] --->
         </f-data-table>
     </template>
 </f-sort-filter-dataset>

Detta går också utnyttja i tabell för att presentera om tabellen är tom pga filtrering eller att inga rader fanns från första början:

 <f-sort-filter-dataset :data="items">
     <template #default="{ sortFilterResult }">
         <f-data-table :rows="sortFilterResult">
             <template #empty>
+                <template v-if="items.length === 0">
+                    Det finns inga frukter att visa.
+                </template>
+                <template v-else>
+                    Sökningen gav inga träffar.
+                </template>
             </template>
         </f-data-table>
     </template>
 </f-sort-filter-dataset>

API

Props

data: TArray

The data that you wish to sort or filter.

sortableAttributes: Record

All the attributes you want to enable sorting for and the corresponding name to display in the dropdown. Structured as {attributeName: "Name for dropdown", secondAttributeName: "Name for dropdown"}

defaultSortAttribute: PropertyKey Optional

If set the data will be sorted by this attribute by default.

showSort: boolean Optional

Show/hides the sort dropdown.

showFilter: boolean Optional

Show/hides the filter input.

filterLabel: string Optional

Label text for filter input field.

placeholderFilter: string Optional Deprecated

Previously set placeholder text in filter input field.

Default is textkey "fkui.sort-filter-dataset.placeholder.filter"

Deprecated: Use filterLabel instead. Deprecated since v6.40.0.

defaultSortAscending: boolean Optional

The order the data will be sorted by if defaultSortAttribute has been set.

filterAttributes: PropertyKey[] Optional

Attributes that should be included in search when filtering by input. Default includes all attributes.

Events

datasetSorted

Emitted when the data is sorted.

Arguments:

• items: TInfered — The sorted data.

usedSortAttributes

Emits the used sorting attributes.

Arguments:

• sortAttribute: SortOrder — The attributes used when sorting the data.

Slots

header

Slot for header to the left of the filter dropdown. Slot content is available through v-slot="{ <propertyName> }", e.g. v-slot="{ slotClass }".

Bindings:

• slotClass: string[] — CSS classes to use for the SortFilter header element. Use with :class="slotClass".

default

Slot for displaying the data. The data is available through v-slot="{ <propertyName> }", e.g. v-slot="{ sortFilterResult }".

Bindings:

• sortFilterResult: T[] — The sorted or filtered data.