<Grouper />

data/grouper.svelte

"Together we stand, divided we fall. The importance of grouping."
A. Lincoln, 1863

Component Grouper examples :
Using slots
component Popper demo using slots
grouperMode string
showUnGrouped boolean
groupByField string
groupListItems string
code
- Choose fields
<Grouper
	bind:groupedData
	bind:activeGroupField={activeGroupFieldPredefined}
	groupListItems={['directory', 'subdirectory']}
	{data}
	/>
code
- Button mode
<Grouper
	bind:activeGroupField
	bind:groupedData
	groupByField="directory"
	grouperMode="button"
	{data}
	>
		group by directory
</Grouper>
<Grouper
	bind:groupedData
	bind:activeGroupField
	groupByField="subdirectory"
	grouperMode="button"
	{data}
>
	group by subdirectory
</Grouper>
<div class="flex-main" />
<div>
	{activeGroupField}
</div>
code
<Grouper 
	bind:groupedData
	bind:activeGroupField={activeGroupFieldAll}
	{data}
	/>
{}
Api preview :
__propDef: {
    props: {
        class?: string | undefined;
        element?: HTMLDivElement | null | undefined;
        /** Grouper mode */ grouperMode?: "button" | "menu" | undefined;
        /** binding : final grouped data as raw object  */ groupedData?: Record<string, any> | undefined;
        /** binding : final grouped data computed by component, available to slotui model caller */ groupedTemplateData?: GroupedDataType | undefined;
        /** list of available groups shown to user */ groupListItems?: string[] | undefined;
        /** data to group */ data: Data[];
        /** field from data to group by*/ groupByField?: string | undefined;
        /** presented field from data to group by*/ groupByTitleField?: string | undefined;
        /** order on which the grouped list is sorted */ groupByOrder?: "desc" | "asc" | undefined;
        /** show ungrouped data */ showUnGrouped?: boolean | undefined;
        /** ungrouped title when show ungrouped data props is set to true */ ungroupedTitle?: string | undefined;
        /** active group field, usefull when several */ activeGroupField?: string | undefined;
        /** grouping function */ groupBy?: ((dataList: any[], groupField: string, opt?: {
            keepUngroupedData: boolean;
            fieldTitle?: string;
        }) => GroupedDataType) | undefined;
    };
    events: {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        default: {};
    };
};