wx-svelte-grid 2.5.1 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "2.5.1",
+	"version": "2.6.1",
 	"description": "A fast, feature-rich Svelte DataGrid component",
 	"productTag": "grid",
 	"productTrial": false,
@@ -33,19 +33,19 @@
 	},
 	"homepage": "https://svar.dev/svelte/datagrid/",
 	"dependencies": {
-		"@svar-ui/lib-dom": "0.12.0",
+		"@svar-ui/lib-dom": "0.12.1",
 		"@svar-ui/lib-state": "1.9.6",
 		"@svar-ui/lib-svelte": "0.5.2",
-		"@svar-ui/svelte-menu": "2.4.2",
-		"@svar-ui/svelte-core": "2.4.1",
-		"@svar-ui/svelte-toolbar": "2.4.1",
-		"@svar-ui/grid-data-provider": "2.5.1",
-		"@svar-ui/grid-locales": "2.5.1",
-		"@svar-ui/grid-store": "2.5.1"
+		"@svar-ui/svelte-menu": "2.5.1",
+		"@svar-ui/svelte-core": "2.5.1",
+		"@svar-ui/svelte-toolbar": "2.5.1",
+		"@svar-ui/grid-data-provider": "2.6.1",
+		"@svar-ui/grid-locales": "2.6.1",
+		"@svar-ui/grid-store": "2.6.1"
 	},
 	"devDependencies": {
-		"@svar-ui/svelte-editor": "2.4.1",
-		"@svar-ui/svelte-filter": "2.4.2"
+		"@svar-ui/svelte-editor": "2.5.1",
+		"@svar-ui/svelte-filter": "2.5.0"
 	},
 	"files": [
 		"src",

package/readme.md

@@ -19,7 +19,7 @@
 
 </div>
 
-[SVAR Svelte DataGrid](https://svar.dev/svelte/datagrid/) is a high-performance Svelte component for building feature-rich, accessible data tables with sorting, filtering, paging, in-cell editing, and virtual scrolling. Easily customizable with CSS and a developer-friendly API.
+[SVAR Svelte DataGrid](https://svar.dev/svelte/datagrid/) is a high-performance Svelte component for building feature-rich, accessible data tables. It supports sorting, advanced filtering, paging, in-cell editing, and virtual scrolling out of the box. Comes with full TypeScript support and a flexible, developer-friendly API. Suitable for dashboards, admin panels, and data-heavy SaaS applications.
 
 <div align="center">
   <img src="https://cdn.svar.dev/public/react-grid.png" alt="SVAR Svelte DataGrid - Screenshot" width="700">
@@ -29,26 +29,30 @@
 
 Here is a quick overview of what SVAR Svelte DataGrid offers:
 
--   High performance (virtual scrolling for rows and columns)
+-   High performance (virtual scrolling and dynamic loading)
 -   In-cell editing with different cell editors (datepicker, combo, select, rich select, etc.)
+-   External editor for grid data
 -   Custom HTML for cells
 -   Sorting by multiple columns
--   Filtering
+-   Advanced filtering (including natural language)
 -   Paging
--   Fixed columns
+-   Frozen columns
 -   Expandable/collapsible columns
+-   Row reordering with drag-and-drop
 -   Customizable tooltips for grid cells
 -   Context menu
--   External editor for grid data
+-   Built-in toolbar
 -   Tree-like structure
--   Print support
--   Responsive design to adapt to different screen/container sizes
--   Accessibility: compatible with [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standard
+-   Print support, export to CSV
+-   Undo/redo
 -   Keyboard navigation
+-   Accessibility: compatibility with [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standard
 -   RestDataProvider for easy backend data binding
--   Dark and light skins
+-   Dark and light skins, customizable with CSS (no Tailwind dependency)
 -   Full TypeScript support
 
+[Check the demos](https://docs.svar.dev/svelte/grid/samples/#/base/willow) to see how these features work.
+
 ### :hammer_and_wrench: How to Use
 
 To use SVAR Svelte DataGrid, simply import the package and include the component in your Svelte file:
@@ -87,14 +91,14 @@ To use SVAR Svelte DataGrid, simply import the package and include the component
 
 For further instructions, see the detailed [how-to-start guide](https://docs.svar.dev/svelte/grid/getting_started).
 
-### :computer: How to Modify
+### How to Modify
 
 Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
 
 1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
 2. Start the project in development mode with `yarn start`
 
-### :white_check_mark: Run Tests
+### Run Tests
 
 To run the test:
 
@@ -107,6 +111,10 @@ To run the test:
     yarn test:cypress
     ```
 
-### :speech_balloon: Need Help?
+### Need Help?
 
 Join our [community forum](https://forum.svar.dev) to get help or post feature requests.
+
+### ⭐ Show Your Support
+
+If SVAR Svelte DataGrid helps your project, [give us a star on GitHub](https://github.com/svar-widgets/grid)! It helps more developers discover this component and keeps our team motivated to ship new features.

package/src/components/Grid.svelte

@@ -39,6 +39,7 @@
 		sortMarks = {},
 		undo = false,
 		hotkeys = null,
+		filterValues = {},
 		...restProps
 	} = $props();
 
@@ -147,7 +148,7 @@
 	let _skin = $derived(getContext("wx-theme"));
 	let init_once = true;
 
-	$effect.pre(() => {
+	const reinitStore = () => {
 		dataStore.init({
 			data,
 			columns: finalColumns,
@@ -157,6 +158,7 @@
 			dynamic,
 			tree,
 			sortMarks,
+			filterValues,
 			select,
 			undo,
 			reorder,
@@ -167,7 +169,10 @@
 			init(api);
 			init_once = false;
 		}
-	});
+	};
+
+	reinitStore();
+	$effect(reinitStore);
 </script>
 
 <Locale words={en} optional={true}>

package/src/components/Layout.svelte

@@ -120,12 +120,11 @@
 				.filter(c => !c.hidden)
 				.map(a => ({ ...a }));
 			columns.forEach(a => {
-				a.fixed = { left: 1 };
+				a.fixed = { left: 1, leftSize: $split.left };
 				a.left = width;
 				width += a.width;
 			});
-			if (columns.length)
-				columns[columns.length - 1].fixed = { left: -1 };
+			if (columns.length) columns[columns.length - 1].fixed.left = -1;
 		}
 
 		return { columns, width };

package/src/components/inlineEditors/Combo.svelte

@@ -1,17 +1,21 @@
 <script>
 	import { onMount } from "svelte";
 	import { SuggestDropdown } from "@svar-ui/svelte-core";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { actions, editor, onaction } = $props();
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let { value, renderedValue: text, options: filterOptions } = $state(editor);
-	let { template, cell } = $state(editor?.config || {});
+
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+
+	const dropdownOptions = $derived({ trackScroll: true, ...dropdown });
 
 	let index = $derived(filterOptions.findIndex(a => a.id === value));
 
 	function updateValue({ id }) {
-		actions.updateValue(id);
-		actions.save();
+		onapply(id);
+		onsave();
 	}
 
 	let navigate;
@@ -46,8 +50,15 @@
 	bind:value={text}
 	oninput={input}
 	onkeydown={e => keydown(e, index)}
+	use:clickOutside={() => onsave(true)}
 />
-<SuggestDropdown items={filterOptions} onready={ready} onselect={updateValue}>
+<SuggestDropdown
+	items={filterOptions}
+	onready={ready}
+	onselect={updateValue}
+	{...dropdownOptions}
+	{oncancel}
+>
 	{#snippet children({ option })}
 		{#if template}
 			{template(option)}

package/src/components/inlineEditors/Datepicker.svelte

@@ -1,18 +1,22 @@
 <script>
 	import { onMount } from "svelte";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
 	import { Calendar, Dropdown } from "@svar-ui/svelte-core";
 
-	let { actions, editor, onaction } = $props();
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let value = $state(editor.value || new Date());
-
-	let template = $state(editor.config?.template);
-	let cell = $state(editor.config?.cell);
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+	const dropdownOptions = $derived({
+		trackScroll: true,
+		width: "auto",
+		...dropdown,
+	});
 
 	function updateValue({ value }) {
-		actions.updateValue(value);
-		actions.save();
+		onapply(value);
+		onsave();
 	}
 
 	let node;
@@ -31,7 +35,7 @@
 	class="wx-value"
 	bind:this={node}
 	tabindex="0"
-	onclick={() => actions.cancel()}
+	onclick={oncancel}
 	onkeydown={ev => ev.preventDefault()}
 >
 	{#if template}
@@ -41,8 +45,14 @@
 		<SvelteComponent data={editor.value} {onaction} />
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
-<Dropdown width={"auto"}>
-	<Calendar {value} onchange={updateValue} buttons={editor.config?.buttons} />
+<Dropdown {...dropdownOptions} {oncancel}>
+	<div use:clickOutside={() => onsave(true)}>
+		<Calendar
+			{value}
+			onchange={updateValue}
+			buttons={editor.config?.buttons}
+		/>
+	</div>
 </Dropdown>
 
 <style>

package/src/components/inlineEditors/Editor.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { getContext } from "svelte";
 	import { getStyle } from "../../helpers/columnWidth";
-	import { clickOutside } from "@svar-ui/lib-dom";
 	import { editors } from "./editors";
 
 	let { column, row } = $props();
@@ -35,7 +34,13 @@
 	}
 
 	function keyHandler(ev) {
-		if (ev.key === "Enter" && $editor) cancel();
+		if (ev.key === "Enter" && $editor) {
+			if (column.editor.type === "multiselect") {
+				updateValue($editor.value);
+			} else {
+				cancel();
+			}
+		}
 	}
 
 	let style = $derived(
@@ -71,11 +76,12 @@
 	onclick={ev => ev.stopPropagation()}
 	ondblclick={ev => ev.stopPropagation()}
 	onkeydown={keyHandler}
-	use:clickOutside={() => save(true)}
 >
 	<SvelteComponent
 		editor={$editor}
-		actions={{ save, cancel, updateValue }}
+		onsave={save}
+		onapply={updateValue}
+		oncancel={cancel}
 		onaction={({ action, data }) => api.exec(action, data)}
 	/>
 </div>
@@ -87,7 +93,7 @@
 		background-color: var(--wx-background);
 		color: var(--wx-color-font);
 		position: relative;
-		z-index: 3;
+		z-index: 2;
 	}
 	.wx-cell :global(.wx-dropdown) {
 		border: var(--wx-table-editor-dropdown-border);

package/src/components/inlineEditors/MultiSelect.svelte

@@ -0,0 +1,121 @@
+<script>
+	import { SuggestDropdown } from "@svar-ui/svelte-core";
+	import { clickOutside } from "@svar-ui/lib-dom";
+	import { onMount } from "svelte";
+
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
+	let { config } = $state(editor);
+
+	const options = $derived(editor?.options ?? []);
+	let value = $derived(editor?.value || []);
+	let renderedValue = $derived(editor?.renderedValue);
+
+	let index = $derived.by(() => {
+		const firstSelected = options.find(opt => value.includes(opt.id));
+		return firstSelected ? options.indexOf(firstSelected) : -1;
+	});
+
+	const dropdownOptions = $derived.by(() => {
+		const dropdown = config?.dropdown || {};
+		return { trackScroll: true, ...dropdown };
+	});
+
+	function updateValue({ id }) {
+		onapply(id);
+		node.focus();
+	}
+
+	let navigate;
+	let keydown = $state();
+
+	function ready(ev) {
+		navigate = ev.navigate;
+		keydown = ev.keydown;
+		navigate(index);
+	}
+
+	let node = $state();
+	onMount(() => {
+		node.focus();
+		if (window && window.getSelection) {
+			window.getSelection().removeAllRanges();
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	bind:this={node}
+	class="wx-value"
+	tabindex="0"
+	onclick={oncancel}
+	onkeydown={ev => {
+		keydown(ev, index);
+		ev.preventDefault();
+	}}
+	use:clickOutside={() => onsave(true)}
+>
+	{#if config?.template}
+		{config.template(value?.map(id => options.find(opt => opt.id === id)))}
+	{:else if config?.cell}
+		{@const SvelteComponent = config.cell}
+		<SvelteComponent
+			data={value.map(id => options.find(opt => opt.id === id))}
+		/>
+	{:else}
+		<span class="wx-text">{renderedValue}</span>
+	{/if}
+</div>
+
+<SuggestDropdown
+	items={options}
+	onready={ready}
+	onselect={updateValue}
+	checkboxes={true}
+	multiselect={true}
+	{...dropdownOptions}
+	{oncancel}
+	{value}
+>
+	{#snippet children({ option })}
+		<div class="wx-option">
+			{#if config?.template}
+				{config.template(option)}
+			{:else if config?.cell}
+				{@const SvelteComponent = config.cell}
+				<SvelteComponent data={option} {onaction} />
+			{:else}
+				{option.label}
+			{/if}
+		</div>
+	{/snippet}
+</SuggestDropdown>
+
+<style>
+	.wx-option {
+		display: flex;
+		direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+	.wx-text {
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.wx-value {
+		width: 100%;
+		height: 100%;
+		padding: 8px;
+		overflow: hidden;
+		outline: none;
+		border: 1px solid var(--wx-color-primary);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/src/components/inlineEditors/Richselect.svelte

@@ -1,18 +1,20 @@
 <script>
 	import { onMount } from "svelte";
 	import { SuggestDropdown } from "@svar-ui/svelte-core";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { actions, editor, onaction } = $props();
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let data = $state(editor.options.find(opt => opt.id === editor.value));
 	let { value, options } = $state(editor);
-	let { template, cell } = $state(editor?.config || {});
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+	const dropdownOptions = $derived({ trackScroll: true, ...dropdown });
 
 	let index = $derived(options.findIndex(a => a.id === value));
 
 	function updateValue({ id }) {
-		actions.updateValue(id);
-		actions.save();
+		onapply(id);
+		onsave();
 	}
 
 	let navigate;
@@ -40,11 +42,12 @@
 	bind:this={node}
 	class="wx-value"
 	tabindex="0"
-	onclick={() => actions.cancel()}
+	onclick={oncancel}
 	onkeydown={ev => {
 		keydown(ev, index);
 		ev.preventDefault();
 	}}
+	use:clickOutside={() => onsave(true)}
 >
 	{#if template}
 		{template(data)}
@@ -53,7 +56,13 @@
 		<SvelteComponent {data} {onaction} />
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
-<SuggestDropdown items={options} onready={ready} onselect={updateValue}>
+<SuggestDropdown
+	items={options}
+	onready={ready}
+	onselect={updateValue}
+	{...dropdownOptions}
+	{oncancel}
+>
 	{#snippet children({ option })}
 		{#if template}
 			{template(option)}

package/src/components/inlineEditors/Text.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { onMount } from "svelte";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { actions, editor } = $props();
+	let { editor, onsave, onapply } = $props();
 
 	let value = $state(editor.value || "");
 
@@ -10,15 +11,16 @@
 
 	function updateValue() {
 		value = node.value;
-		actions.updateValue(node.value);
+		onapply(node.value);
 	}
 
 	function closeAndSave({ key }) {
-		if (key === "Enter") actions.save();
+		if (key === "Enter") onsave();
 	}
 </script>
 
 <input
+	use:clickOutside={() => onsave(true)}
 	class="wx-text"
 	oninput={updateValue}
 	onkeydown={closeAndSave}

package/src/components/inlineEditors/editors.js

@@ -2,10 +2,16 @@ import Text from "./Text.svelte";
 import Combo from "./Combo.svelte";
 import Datepicker from "./Datepicker.svelte";
 import Richselect from "./Richselect.svelte";
+import Multiselect from "./MultiSelect.svelte";
 
 export const editors = {
 	text: Text,
 	combo: Combo,
 	datepicker: Datepicker,
 	richselect: Richselect,
+	multiselect: Multiselect,
 };
+
+export function registerInlineEditor(type, component) {
+	editors[type] = component;
+}

package/src/components/inlineFilters/DatePicker.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { DatePicker } from "@svar-ui/svelte-core";
+
+	let { filter, column, action, filterValue } = $props();
+
+	function filterRows({ value }) {
+		action({ value, key: column.id });
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div style="width:100%;">
+	<DatePicker
+		placeholder={""}
+		clear={true}
+		{...filter.config ?? {}}
+		value={filterValue}
+		onchange={filterRows}
+	/>
+</div>
+
+<style>
+	:global(.wx-cell.wx-filter div.wx-datepicker input) {
+		height: 28px;
+		padding: 4px 8px;
+	}
+</style>

package/src/components/inlineFilters/filters.js

@@ -1,7 +1,9 @@
 import Text from "./Text.svelte";
 import Richselect from "./Richselect.svelte";
+import DatePicker from "./DatePicker.svelte";
 
 export const filters = {
 	text: Text,
 	richselect: Richselect,
+	datepicker: DatePicker,
 };

package/src/helpers/columnWidth.js

@@ -18,7 +18,12 @@ export function getCssName(column, cell, columnStyle) {
 
 	if (column.fixed) {
 		for (const pos in column.fixed) {
-			css += column.fixed[pos] === -1 ? "wx-shadow " : "wx-fixed ";
+			let isShadow = column.fixed[pos] === -1;
+			if (!isShadow && column.fixed.leftSize && cell.colspan) {
+				const spanIndex = cell.colspan + column._colindex - 1;
+				isShadow = spanIndex === column.fixed.leftSize;
+			}
+			css += isShadow ? "wx-shadow " : "wx-fixed ";
 		}
 	}
 	css += cell.rowspan > 1 ? "wx-rowspan " : "";

package/src/index.js

@@ -18,6 +18,8 @@ import { setEnv } from "@svar-ui/lib-dom";
 import { env } from "@svar-ui/lib-svelte";
 setEnv(env);
 
+export { registerInlineEditor } from "./components/inlineEditors/editors";
+
 export {
 	Grid,
 	HeaderMenu,

package/types/index.d.ts

@@ -10,6 +10,7 @@ import type {
 	TMethodsConfig,
 	IConfig,
 	TEditorType,
+	TEditorConfig,
 	IColumnEditor,
 	IHeaderCell,
 } from "@svar-ui/grid-store";
@@ -131,6 +132,20 @@ export declare const WillowDark: Component<{
 	children?: () => any;
 }>;
 
+export declare function registerInlineEditor(
+	type: string,
+	component: Component<{
+		editor: TEditorConfig;
+		onsave?: (ignoreFocus: boolean) => void;
+		oncancel?: () => void;
+		onapply?: (value: any) => void;
+		onaction?: (ev: {
+			action: string;
+			data?: { [key: string]: any };
+		}) => void;
+	}>
+): void;
+
 /* get component events from store actions*/
 type RemoveHyphen<S extends string> = S extends `${infer Head}-${infer Tail}`
 	? `${Head}${RemoveHyphen<Tail>}`

package/whatsnew.md

@@ -1,3 +1,30 @@
+## 2.6.1
+
+### Fixes
+
+-   Impossible to configure inline editor dropdown
+-   Inline editor dropdown is detached during scroll
+-   Editor state object is mutated instead of being reset
+-   DataProvider adds trailing slash to getData url
+-   Incorrect height of sidebar Editor
+
+## 2.6.0
+
+### New features
+
+-   Multiselect inline editor
+-   Ability to register custom inline editors
+
+### Updates
+
+-   Integration with FilterQuery
+
+### Fixes
+
+-   Dropdown editors are cut off in small tables
+-   DataGrid fails to initialize in SvelteKit with serverside rendering
+-   Error in fetching Typescript definitions from store
+
 ## 2.5.1
 
 ### Fixes

package/src/components/editor/Editor.svelte

@@ -1,56 +0,0 @@
-<script>
-	import {
-		Field,
-		Text,
-		RichSelect,
-		MultiCombo,
-		DatePicker,
-		Area,
-		Checkbox,
-		Switch,
-	} from "@svar-ui/svelte-core";
-
-	let { editors, data = null } = $props();
-</script>
-
-{#if data}
-	{#each editors as editor}
-		{#if editor.type === "combo"}
-			<Field label={editor.label}>
-				<RichSelect
-					options={editor.options || []}
-					bind:value={$data[editor.id]}
-				/>
-			</Field>
-		{:else if editor.type === "multicombo"}
-			<Field label={editor.label}>
-				<MultiCombo
-					textField="name"
-					checkboxes={false}
-					options={editor.options || []}
-					bind:value={$data[editor.id]}
-				/>
-			</Field>
-		{:else if editor.type === "datepicker"}
-			<Field label={editor.label}>
-				<DatePicker bind:value={$data[editor.id]} />
-			</Field>
-		{:else if editor.type === "textarea"}
-			<Field label={editor.label}>
-				<Area bind:value={$data[editor.id]} />
-			</Field>
-		{:else if editor.type === "switch"}
-			<Field label={editor.label}>
-				<Switch bind:value={$data[editor.id]} />
-			</Field>
-		{:else if editor.type === "checkbox"}
-			<Field label={editor.label}>
-				<Checkbox bind:value={$data[editor.id]} />
-			</Field>
-		{:else}
-			<Field label={editor.label}>
-				<Text bind:value={$data[editor.id]} />
-			</Field>
-		{/if}
-	{/each}
-{/if}