@updog/data-editor 0.1.31 → 0.1.33

package/README.md

@@ -1,6 +1,6 @@
-# @updog/data-editor
+# React CSV Importer & Spreadsheet Editor
 
-Client-side CSV importer and spreadsheet editor SDK for React. Your users import files, match columns to your schema, fix errors, and submit clean data. Edits happen inline, in the browser, at 1M+ rows.
+> `@updog/data-editor`: client-side CSV importer and spreadsheet editor SDK for React. Your users import files, match columns to your schema, fix errors, and submit clean data. Edits happen inline, in the browser, at 1M+ rows.
 
 ## What is @updog/data-editor
 
@@ -145,13 +145,13 @@ In inline mode, `open` and `onClose` don't apply.
 | `readonly` | `boolean` | No | `false` | Hide all editing UI. |
 | `enableDeleteRow` | `"all"` \| `"new"` \| `false` | No | `false` | Row deletion policy. |
 | `enableAddRow` | `boolean` | No | `true` | Show the "Add row" button. |
+| `enableAddSource` | `boolean` | No | `true` | Show the "Add data source" button. |
 | `enableCreateColumn` | `boolean` | No | `true` | Allow creating columns for unmatched CSV headers during import. |
-| `importFormats` | `DataEditorFormat[]` | No | all | Allowed import formats. `[]` disables import. |
-| `exportFormats` | `DataEditorFormat[]` | No | all | Allowed export formats. `[]` disables export. |
+| `importFormats` | `DataEditorFormat[] \| false` | No | all | Allowed import formats. `false` or `[]` disables import. |
+| `exportFormats` | `DataEditorFormat[] \| false` | No | all | Allowed export formats. `false` or `[]` disables export. |
 | `remoteSources` | `RemoteSource[]` | No | — | Custom import buttons (Google Sheets, S3, etc.) rendered on the upload step. |
 | `rowHeight` | `number` | No | `34` | Row height in pixels. |
 | `headerHeight` | `number` | No | `36` | Header height in pixels. |
-| `server` | `DataEditorServer<TRow>` | No | — | Server-delegated mode: SDK renders, your backend handles queries and mutations. |
 | `chat` | `DataEditorChat<TRow>` | No | — | Bring-your-own AI chat panel. |
 | `onColumnMatch` | `(headers, columns) => ...` | No | — | Override import column matching. |
 | `onValueMatch` | `(valuesToMatch) => ...` | No | — | Override import value matching for `select` columns. |
@@ -196,6 +196,9 @@ const columns: DataEditorColumn[] = [
     // Sidebar filter control.
     filter: { type: "select" },
 
+    // Allow pinning this column to the leading edge via the header menu. Default true.
+    pinnable: true,
+
     // Lock cells in this column. `"default"` locks only default-source rows.
     locked: "default",
   },
@@ -208,7 +211,7 @@ const columns: DataEditorColumn[] = [
 
 ## Built-in Validators
 
-Validators are declarative objects passed in the `validators` array on each column. The SDK ships a TS interpreter for the client; Updog Scale ships a matching Go interpreter for server mode. Both runtimes are pinned to the same fixture set, so a column definition produces identical pass/fail results regardless of where it runs.
+Validators are declarative objects passed in the `validators` array on each column. They run on every edit, entirely in the browser.
 
 | `type` | Fields | Behavior |
 |---|---|---|
@@ -251,7 +254,7 @@ A `ValidationError` with `level: "error"` flags the cell in the grid but does **
 
 ### Custom validators
 
-For cross-field checks or anything not covered by the built-ins, wrap a `CellValidator` function in `{ type: "function", fn }`. Function validators are client-mode only — they're dropped (with a one-time warning) when the SDK serializes the schema for server mode. Use `dependentFields` on the column to trigger re-validation when another column changes.
+For cross-field checks or anything not covered by the built-ins, wrap a `CellValidator` function in `{ type: "function", fn }`. Use `dependentFields` on the column to trigger re-validation when another column changes.
 
 ```tsx
 import type { CellValidator, DataEditorColumn } from "@updog/data-editor";

package/index.d.ts

@@ -132,6 +132,7 @@ declare var export_default = {
     },
     footer: {
       submit: "Submit",
+      submitBlockedByErrors: "Fix errors before submitting",
       import: "Import",
       next: "Next",
       cancel: "Cancel",
@@ -2917,6 +2918,11 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
      * @default true
      */
     enableAddSource?: boolean;
+    /**
+     * Disable submit while any row has a validation error.
+     * @default false
+     */
+    blockSubmitOnError?: boolean;
     /**
      * Which file formats the user can import. `undefined` allows all formats,
      * `false` disables import entirely.
@@ -3152,7 +3158,6 @@ declare function exportDataEditor<TRow extends DataEditorRow>(params: ExportPara
  *   onClose={() => setIsOpen(false)}
  *   columns={columns}
  *   primaryKey="id"
- *   server={{ url: scaleUrl }}
  *   loadData={async (onChunk) => onChunk(await fetchRows())}
  *   onComplete={async (result) => { await saveChanges(result); }}
  * />

package/index.js

@@ -121,6 +121,7 @@ var Ur = {
 		},
 		footer: {
 			submit: "Submit",
+			submitBlockedByErrors: "Fix errors before submitting",
 			import: "Import",
 			next: "Next",
 			cancel: "Cancel",
@@ -10007,71 +10008,72 @@ function gl(e, t, n, r) {
 }
 //#endregion
 //#region src/context/useViewModel.tsx
-function _l({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete: i, variant: a, showUploader: o, setShowUploader: s, storeRef: c, enableDeleteRow: l, enableAddRow: u, enableAddSource: f, importFormats: m, exportFormats: h, rowHeight: g, headerHeight: _, readonly: v, enableCreateColumn: x, onColumnMatch: S, onValueMatch: C, synonyms: w, sampleData: T, chat: E, remoteSources: D, onError: O, errorHandler: k }) {
-	let { t: A } = J(), j = r ? "server" : "client", M = sl(j, r, A("dataEditor.dataSources.existingData"), k ?? new zo(O));
-	M.setSchemaColumns(e);
-	let { addDynamicColumns: N, removeDynamicColumn: P, updateColumn: F } = dl(M), I = d((e) => {
-		M.setDynamicColumns(e);
-	}, [M]), L = b(M.subscribe, M.getEffectiveColumns), { navigateToCell: R, navigateByIndex: z, navigateToCellRef: B, resetScrollRef: V, scrollToGridTop: H } = fl(M), { validator: ee, validatorRef: U, findReplace: W } = gl(M, L, r?.findAndReplace, z), { search: te, setSearch: ne, matchCase: re, setMatchCase: ie, matchEntireCell: ae, setMatchEntireCell: oe, searchMode: se, setSearchMode: ce, filterColumns: le, setFilterColumns: ue, filtersResetKey: de, resetFilters: fe } = ml(M, W, R, H);
-	ul(M, U, n, j);
-	let { onVisibleRangeChange: pe } = hl(M, j), { portalRef: me } = pl(), [he, ge] = y(null);
-	return p(() => (c && (c.current = M), () => {
+function _l({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete: i, variant: a, showUploader: o, setShowUploader: s, storeRef: c, enableDeleteRow: l, enableAddRow: u, enableAddSource: f, blockSubmitOnError: m, importFormats: h, exportFormats: g, rowHeight: _, headerHeight: v, readonly: x, enableCreateColumn: S, onColumnMatch: C, onValueMatch: w, synonyms: T, sampleData: E, chat: D, remoteSources: O, onError: k, errorHandler: A }) {
+	let { t: j } = J(), M = r ? "server" : "client", N = sl(M, r, j("dataEditor.dataSources.existingData"), A ?? new zo(k));
+	N.setSchemaColumns(e);
+	let { addDynamicColumns: P, removeDynamicColumn: F, updateColumn: I } = dl(N), L = d((e) => {
+		N.setDynamicColumns(e);
+	}, [N]), R = b(N.subscribe, N.getEffectiveColumns), { navigateToCell: z, navigateByIndex: B, navigateToCellRef: V, resetScrollRef: H, scrollToGridTop: ee } = fl(N), { validator: U, validatorRef: W, findReplace: te } = gl(N, R, r?.findAndReplace, B), { search: ne, setSearch: re, matchCase: ie, setMatchCase: ae, matchEntireCell: oe, setMatchEntireCell: se, searchMode: ce, setSearchMode: le, filterColumns: ue, setFilterColumns: de, filtersResetKey: fe, resetFilters: pe } = ml(N, te, z, ee);
+	ul(N, W, n, M);
+	let { onVisibleRangeChange: me } = hl(N, M), { portalRef: he } = pl(), [ge, _e] = y(null);
+	return p(() => (c && (c.current = N), () => {
 		c && (c.current = null);
-	}), [M, c]), p(() => {
-		t && M.setPrimaryKey(t);
-	}, [M, t]), {
-		mode: j,
+	}), [N, c]), p(() => {
+		t && N.setPrimaryKey(t);
+	}, [N, t]), {
+		mode: M,
 		scaleClient: r,
-		columns: L,
+		columns: R,
 		primaryKey: t,
 		enableDeleteRow: l ?? !1,
 		enableAddRow: u ?? !0,
 		enableAddSource: f ?? !0,
-		importFormats: m ?? Vo,
-		exportFormats: h ?? Vo,
-		rowHeight: g ?? 34,
-		headerHeight: _ ?? 36,
-		store: M,
-		validator: ee,
-		findReplace: W,
+		blockSubmitOnError: m ?? !1,
+		importFormats: h ?? Vo,
+		exportFormats: g ?? Vo,
+		rowHeight: _ ?? 34,
+		headerHeight: v ?? 36,
+		store: N,
+		validator: U,
+		findReplace: te,
 		onComplete: i,
 		showUploader: o,
 		setShowUploader: s,
 		variant: a ?? "editor",
-		search: te,
-		setSearch: ne,
-		matchCase: re,
-		setMatchCase: ie,
-		matchEntireCell: ae,
-		setMatchEntireCell: oe,
-		searchMode: se,
-		setSearchMode: ce,
-		filterColumns: le,
-		setFilterColumns: ue,
-		navigateToCell: R,
-		navigateToCellRef: B,
-		resetScrollRef: V,
-		scrollToGridTop: H,
-		portalRef: me,
-		readonly: v ?? !1,
-		filtersResetKey: de,
-		resetFilters: fe,
+		search: ne,
+		setSearch: re,
+		matchCase: ie,
+		setMatchCase: ae,
+		matchEntireCell: oe,
+		setMatchEntireCell: se,
+		searchMode: ce,
+		setSearchMode: le,
+		filterColumns: ue,
+		setFilterColumns: de,
+		navigateToCell: z,
+		navigateToCellRef: V,
+		resetScrollRef: H,
+		scrollToGridTop: ee,
+		portalRef: he,
+		readonly: x ?? !1,
+		filtersResetKey: fe,
+		resetFilters: pe,
 		originalColumns: e,
-		dynamicColumns: M.getDynamicColumns(),
-		setDynamicColumns: I,
-		addDynamicColumns: N,
-		removeDynamicColumn: P,
-		updateColumn: F,
-		gridClipboard: he,
-		setGridClipboard: ge,
-		enableCreateColumn: x ?? !0,
-		onColumnMatch: S,
-		onValueMatch: C,
-		synonyms: w,
-		sampleData: T,
-		onVisibleRangeChange: pe,
-		chat: E,
-		remoteSources: D ?? []
+		dynamicColumns: N.getDynamicColumns(),
+		setDynamicColumns: L,
+		addDynamicColumns: P,
+		removeDynamicColumn: F,
+		updateColumn: I,
+		gridClipboard: ge,
+		setGridClipboard: _e,
+		enableCreateColumn: S ?? !0,
+		onColumnMatch: C,
+		onValueMatch: w,
+		synonyms: T,
+		sampleData: E,
+		onVisibleRangeChange: me,
+		chat: D,
+		remoteSources: O ?? []
 	};
 }
 //#endregion
@@ -13397,74 +13399,74 @@ var Yh = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
 		})
 	});
 }, Zh = () => {
-	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a } = Q(), { t: o, rtl: s } = J(), { canUndo: c, canRedo: l, undo: u, redo: f } = Yo(e, a), { dirtyRowCount: p, deletedRowCount: m, isLoading: h, sources: g, phase: v } = Bo(e), b = p > 0 || m > 0, w = h || g.some((e) => e.isLoading), T = v === "processing", [E, D] = y(!1), { value: O, setTrue: k, setFalse: A } = Ro(!1), [j, M] = y(!1), N = d(async () => {
+	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a, blockSubmitOnError: o } = Q(), { t: s, rtl: c } = J(), { canUndo: l, canRedo: u, undo: f, redo: p } = Yo(e, a), { dirtyRowCount: m, deletedRowCount: h, errorCount: g, isLoading: v, sources: b, phase: w } = Bo(e), T = m > 0 || h > 0, E = v || b.some((e) => e.isLoading), D = w === "processing", O = o && g > 0, [k, A] = y(!1), { value: j, setTrue: M, setFalse: N } = Ro(!1), [P, F] = y(!1), I = d(async () => {
 		if (!n) return;
 		let t = e.getResultBySource();
-		M(!0);
+		F(!0);
 		try {
-			await n(t), e.clear(), A();
+			await n(t), e.clear(), N();
 		} catch {} finally {
-			M(!1);
+			F(!1);
 		}
 	}, [
 		e,
 		n,
-		A
-	]), P = o("dataEditor.footer.export"), F = o("dataEditor.footer.exportAll"), I = o("dataEditor.footer.exportFiltered"), R = o("dataEditor.footer.csvFormat"), z = o("dataEditor.footer.excelFormat"), B = o("dataEditor.footer.jsonFormat"), V = o("dataEditor.footer.tsvFormat"), H = o("dataEditor.footer.xmlFormat"), ee = _(() => [
+		N
+	]), R = s("dataEditor.footer.export"), z = s("dataEditor.footer.exportAll"), B = s("dataEditor.footer.exportFiltered"), V = s("dataEditor.footer.csvFormat"), H = s("dataEditor.footer.excelFormat"), ee = s("dataEditor.footer.jsonFormat"), U = s("dataEditor.footer.tsvFormat"), W = s("dataEditor.footer.xmlFormat"), te = _(() => [
 		{
 			menuId: "csv",
 			format: "csv",
-			text: R
+			text: V
 		},
 		{
 			menuId: "tsv",
 			format: "tsv",
-			text: V
+			text: U
 		},
 		{
 			menuId: "excel",
 			format: "xlsx",
-			text: z
+			text: H
 		},
 		{
 			menuId: "json",
 			format: "json",
-			text: B
+			text: ee
 		},
 		{
 			menuId: "xml",
 			format: "xml",
-			text: H
+			text: W
 		}
 	], [
-		R,
 		V,
-		z,
-		B,
-		H
-	]), U = r !== !1 && (!e.isServer() || e.hasServerExport), W = _(() => {
-		let e = r === !1 ? [] : ee.filter((e) => r.includes(e.format));
+		U,
+		H,
+		ee,
+		W
+	]), ne = r !== !1 && (!e.isServer() || e.hasServerExport), re = _(() => {
+		let e = r === !1 ? [] : te.filter((e) => r.includes(e.format));
 		return [{
 			id: "export-all",
-			text: F,
+			text: z,
 			options: e.map((e) => ({
 				id: `all-${e.menuId}`,
 				text: e.text
 			}))
 		}, {
 			id: "export-filtered",
-			text: I,
+			text: B,
 			options: e.map((e) => ({
 				id: `filtered-${e.menuId}`,
 				text: e.text
 			}))
 		}];
 	}, [
-		F,
-		I,
-		ee,
+		z,
+		B,
+		te,
 		r
-	]), te = d((n) => {
+	]), ie = d((n) => {
 		let [r, i] = n.split("-"), a = {
 			csv: "csv",
 			tsv: "tsv",
@@ -13472,70 +13474,75 @@ var Yh = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
 			json: "json",
 			xml: "xml"
 		};
-		D(!0), (e.isServer() ? e.serverExport(a[i], r === "all", s) : Jh({
+		A(!0), (e.isServer() ? e.serverExport(a[i], r === "all", c) : Jh({
 			store: e,
 			columns: t,
 			format: a[i],
 			scope: r,
-			rtl: s
-		})).finally(() => D(!1));
+			rtl: c
+		})).finally(() => A(!1));
 	}, [
 		e,
 		t,
-		s
-	]), ne = o("dataEditor.footer.submit");
+		c
+	]), ae = s("dataEditor.footer.submit"), oe = !T || D || P || O;
 	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C("footer", {
 		className: "updog__data-editor-footer",
 		children: [/* @__PURE__ */ S(Xh, {}), /* @__PURE__ */ C("div", {
 			className: "updog__data-editor-footer__actions",
 			children: [
 				!i && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(ua, {
-					content: o("dataEditor.undoRedo.undo"),
+					content: s("dataEditor.undoRedo.undo"),
 					children: /* @__PURE__ */ S(Z, {
 						variant: "ghost",
 						color: "neutral",
-						disabled: !c || T,
-						onClick: u,
-						"aria-label": o("dataEditor.undoRedo.undo"),
+						disabled: !l || D,
+						onClick: f,
+						"aria-label": s("dataEditor.undoRedo.undo"),
 						children: /* @__PURE__ */ S(Ne, { className: "rtl-mirror" })
 					})
 				}), /* @__PURE__ */ S(ua, {
-					content: o("dataEditor.undoRedo.redo"),
+					content: s("dataEditor.undoRedo.redo"),
 					children: /* @__PURE__ */ S(Z, {
 						variant: "ghost",
 						color: "neutral",
-						disabled: !l || T,
-						onClick: f,
-						"aria-label": o("dataEditor.undoRedo.redo"),
+						disabled: !u || D,
+						onClick: p,
+						"aria-label": s("dataEditor.undoRedo.redo"),
 						children: /* @__PURE__ */ S(xe, { className: "rtl-mirror" })
 					})
 				})] }),
-				U && /* @__PURE__ */ S(Pa, {
-					options: W,
-					onSelect: te,
+				ne && /* @__PURE__ */ S(Pa, {
+					options: re,
+					onSelect: ie,
 					placement: "top-end",
 					children: /* @__PURE__ */ S(X, {
 						variant: "outlined",
 						color: "neutral",
-						loading: E,
-						disabled: w || T,
+						loading: k,
+						disabled: E || D,
 						spinnerPosition: "end",
 						endIcon: /* @__PURE__ */ S(L, {}),
-						children: P
+						children: R
 					})
 				}),
-				!i && /* @__PURE__ */ S(X, {
-					disabled: !b || T || j,
-					onClick: k,
-					children: ne
+				!i && /* @__PURE__ */ S(ua, {
+					disabled: !O,
+					content: s("dataEditor.footer.submitBlockedByErrors"),
+					placement: "top-end",
+					children: /* @__PURE__ */ S(X, {
+						disabled: oe,
+						onClick: M,
+						children: ae
+					})
 				})
 			]
 		})]
 	}), /* @__PURE__ */ S(Yh, {
-		open: O,
-		onClose: A,
-		onConfirm: N,
-		loading: j
+		open: j,
+		onClose: N,
+		onConfirm: I,
+		loading: P
 	})] });
 }, Qh = ({ initialValues: e, existingNames: t, onClose: n, onSubmit: r }) => {
 	let { t: i } = J(), a = e.id !== void 0, o = _(() => {
@@ -25842,6 +25849,7 @@ function QT(e) {
 		enableDeleteRow: e.enableDeleteRow,
 		enableAddRow: e.enableAddRow,
 		enableAddSource: e.enableAddSource,
+		blockSubmitOnError: e.blockSubmitOnError,
 		importFormats: e.importFormats,
 		exportFormats: e.exportFormats,
 		readonly: e.readonly,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "Client-side CSV importer and spreadsheet editor SDK for React. Import CSV, Excel, JSON, TSV, and XML, match columns, validate, and edit 1M+ rows entirely in the browser.",
   "author": "Mikhail Kutateladze <admin@updog.tech>",
   "homepage": "https://updog.tech",
@@ -52,8 +52,11 @@
   "keywords": [
     "csv-importer",
     "csv-import",
+    "importer",
     "data-import",
     "data-import-sdk",
+    "column-mapping",
+    "spreadsheet",
     "spreadsheet-editor",
     "react",
     "react-csv",
@@ -62,9 +65,13 @@
     "data-editor",
     "csv",
     "xlsx",
+    "excel",
     "grid",
     "table",
-    "validation"
+    "validation",
+    "flatfile-alternative",
+    "dromo-alternative",
+    "usecsv-alternative"
   ],
   "publishConfig": {
     "access": "public",