antd-crud-table 0.2.0 → 0.4.0

package/dist/CrudTable.cjs

@@ -1 +1 @@
-const e=require(`./chunk-BZRuZbSa.cjs`),t=require(`./CrudTable-CDqv0ksy.cjs`),n=require(`./message-C5ORE39N.cjs`),r=require(`./jsx-runtime-D8R_Hd8N.cjs`);let i=require(`react`);var a=e.i(t.h(),1),o=r.t(),s=e=>{let r=(0,i.useRef)(null),{columns:s,service:c,rowKey:l,title:u,defaultPageSize:d=5}=e,[f,p]=(0,i.useState)(!1),[m,h]=(0,i.useState)(null),[g]=t.d.useForm(),_=(s||[]).map(e=>{let n={...e,dataIndex:e.dataIndex,title:e.title};switch(e.fieldType){case`date`:return{...n,valueType:`dateTime`,render:(n,r)=>(0,o.jsx)(`span`,{children:t.r(t.t(r[e.dataIndex]),`yyyy-MM-dd HH:mm`)})};case`enum`:return{...n,valueType:`select`,valueEnum:e.enumOptions};case`number`:return{...n,valueType:`digit`};case`boolean`:return{...n,valueType:`switch`,render:(n,r)=>(0,o.jsx)(t.s,{color:r[e.dataIndex]?`green`:`red`,children:r[e.dataIndex]?`Yes`:`No`})};case`custom`:return{...n,render:(t,n)=>e.customRender?.(n[e.dataIndex],n)};default:return n}});_.push({title:`Actions`,valueType:`option`,render:(e,n)=>[(0,o.jsx)(t.g,{type:`primary`,onClick:()=>y(n),children:`Edit`},`edit`),(0,o.jsx)(t.g,{type:`primary`,danger:!0,onClick:async()=>{await c.delete(n[l]),r.current?.reload()},children:`Delete`},`delete`)]});let v=async(e,t,r)=>{try{let n={...e,sortBy:Object.keys(t)[0],sortOrder:Object.values(t)[0],...r},{data:i,total:a}=await c.getList(n);return{data:i,success:!0,total:a}}catch{return n.t.error(`Failed to fetch data`),{data:[],success:!1,total:0}}},y=e=>{if(h(e||null),e){let t={...e};s.forEach(e=>{let n=e.dataIndex;e.fieldType===`date`&&t[n]&&(t[n]=(0,a.default)(t[n]))}),g.setFieldsValue(t)}else g.resetFields();p(!0)};return(0,o.jsxs)(t.a,{needDeps:!0,intl:t.o,children:[(0,o.jsx)(t.i,{headerTitle:u,rowKey:l,rowClassName:(e,t)=>t%2==0&&`row-differentiator`||``,actionRef:r,columns:_,request:v,search:{labelWidth:`auto`},pagination:{pageSize:d},toolBarRender:()=>[(0,o.jsx)(t.g,{type:`primary`,icon:(0,o.jsx)(t.v,{}),onClick:()=>y(),children:`New`},`add`),(0,o.jsx)(t.f,{menu:{items:[{key:`export`,label:`Export`},{key:`refresh`,label:`Refresh`,onClick:()=>r.current?.reload()}]},children:(0,o.jsx)(t.g,{children:(0,o.jsx)(t.y,{})})},`menu`)],options:{setting:{listsHeight:400},reload:()=>r.current?.reload()},dateFormatter:`string`}),(0,o.jsx)(t.l,{forceRender:!0,title:m?`Edit Item`:`Create Item`,open:f,onOk:async()=>{try{let e=await g.validateFields(),i={...e};s.forEach(n=>{let r=n.dataIndex;n.fieldType===`date`&&e[r]&&(i[r]=t.n(e[r])),n.formConfig?.transform&&(i[r]=n.formConfig.transform(e[r]))}),m&&m[l]?(await c.update(m[l],i),n.t.success(`Updated successfully`)):(await c.create(i),n.t.success(`Created successfully`)),p(!1),r.current?.reload()}catch(e){console.error(e),n.t.error(`Submit failed`)}},onCancel:()=>{p(!1)},destroyOnClose:!0,children:(0,o.jsx)(t.d,{form:g,layout:`vertical`,children:s.map(e=>{if(!e.dataIndex)return null;let n=e.dataIndex,r=e.title,i=!(e.fieldEditable??!0);switch(e.fieldType){case`string`:return(0,o.jsx)(t.d.Item,{name:n,label:r,rules:[{required:e.formConfig?.required,message:`${r} is required`}],children:(0,o.jsx)(t.u,{disabled:i})},n);case`number`:return(0,o.jsx)(t.d.Item,{name:n,label:r,rules:[{required:e.formConfig?.required,message:`${r} is required`}],children:(0,o.jsx)(t.m,{style:{width:`100%`},disabled:i})},n);case`date`:return(0,o.jsx)(t.d.Item,{name:n,label:r,rules:[{required:e.formConfig?.required,message:`${r} is required`}],children:(0,o.jsx)(t.p,{style:{width:`100%`},showTime:!0,disabled:i})},n);case`boolean`:return(0,o.jsx)(t.d.Item,{name:n,label:r,valuePropName:`checked`,children:(0,o.jsx)(t.c,{disabled:i})},n);case`enum`:return(0,o.jsx)(t.d.Item,{name:n,label:r,rules:[{required:e.formConfig?.required,message:`${r} is required`}],children:(0,o.jsx)(t._,{disabled:i,options:Object.entries(e.enumOptions||{}).map(([e,t])=>({label:t.text,value:e}))})},n);default:return null}})})})]})};module.exports=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=require(`./useCrudTable.cjs`);let l=require(`@ant-design/icons`),u=require(`@ant-design/pro-components`),d=require(`antd`),f=require(`react`),p=require(`date-fns`),m=require(`dayjs`);m=s(m,1);let h=require(`react/jsx-runtime`);var g=e=>{let{columns:t,rowKey:n,title:r,defaultPageSize:i=10,hookConfig:a,enableBulkOperations:o=!1,customActions:s}=e,g=c.useCrudTable(n,{defaultPageSize:i,...a}),[_,v]=(0,f.useState)(!1),[y,b]=(0,f.useState)(null),[x,S]=(0,f.useState)([]),[C]=d.Form.useForm();(0,f.useEffect)(()=>{g.refresh()},[]);let w=t.map(e=>{let t={...e,dataIndex:e.dataIndex,title:e.title,search:e.searchable!==!1};switch(e.fieldType){case`date`:return{...t,valueType:`dateTime`,render:(t,n)=>{let r=n[e.dataIndex];if(!r)return`-`;try{return(0,h.jsx)(`span`,{children:(0,p.format)((0,p.parseISO)(r),`yyyy-MM-dd HH:mm`)})}catch{return(0,h.jsx)(`span`,{children:r})}}};case`enum`:return{...t,valueType:`select`,valueEnum:e.enumOptions,render:(t,n)=>{let r=n[e.dataIndex],i=e.enumOptions?.[r];return i?(0,h.jsx)(d.Tag,{color:i.color,children:i.text}):r}};case`number`:return{...t,valueType:`digit`,render:(t,n)=>{let r=n[e.dataIndex];return typeof r==`number`?r.toLocaleString():r}};case`boolean`:return{...t,valueType:`switch`,render:(t,n)=>(0,h.jsx)(d.Tag,{color:n[e.dataIndex]?`green`:`red`,children:n[e.dataIndex]?`Yes`:`No`})};case`custom`:return{...t,render:(t,n)=>e.customRender?.(n[e.dataIndex],n)};default:return t}});w.push({title:`Actions`,valueType:`option`,width:200,render:(e,t)=>{let r=[(0,h.jsx)(d.Button,{type:`link`,size:`small`,onClick:()=>E(t),children:`Edit`},`edit`),(0,h.jsx)(d.Button,{type:`link`,size:`small`,danger:!0,onClick:()=>O(t[n]),children:`Delete`},`delete`)],i=s?.(t,g)||[];return[...r,...i]}});let T=async(e,t,n)=>{try{let r={current:e.current,pageSize:e.pageSize,sortBy:Object.keys(t)[0],sortOrder:Object.values(t)[0],...n,...e},i=g.operations;if(i?.getList){let e=await i.getList(r);return{data:e.data,success:!0,total:e.total}}return{data:g.state.data,success:!0,total:g.state.total}}catch{return d.message.error(`Failed to fetch data`),{data:[],success:!1,total:0}}},E=e=>{if(b(e||null),e){let n={...e};t.forEach(e=>{let t=e.dataIndex;if(e.fieldType===`date`&&n[t])try{n[t]=(0,m.default)(n[t])}catch{}}),C.setFieldsValue(n)}else C.resetFields();v(!0)},D=async()=>{try{let e=await C.validateFields(),r={...e};t.forEach(t=>{let n=t.dataIndex;if(t.fieldType===`date`&&e[n])try{r[n]=(0,p.formatISO)(e[n])}catch{}t.formConfig?.transform&&(r[n]=t.formConfig.transform(e[n]))}),y&&y[n]?await g.update(y[n],r):await g.create(r),v(!1),g.actionRef.current?.reload()}catch(e){console.error(`Form validation failed:`,e)}},O=async e=>{d.Modal.confirm({title:`Are you sure?`,content:`This action cannot be undone.`,okText:`Yes, Delete`,okType:`danger`,cancelText:`Cancel`,onOk:async()=>{await g.delete(e)&&g.actionRef.current?.reload()}})},k=async()=>{if(x.length===0){d.message.warning(`Please select items to delete`);return}d.Modal.confirm({title:`Delete ${x.length} items?`,content:`This action cannot be undone.`,okText:`Yes, Delete All`,okType:`danger`,cancelText:`Cancel`,onOk:async()=>{let e=x.map(e=>g.delete(e));await Promise.allSettled(e),S([]),g.actionRef.current?.reload()}})},A=o?{selectedRowKeys:x,onChange:S}:void 0;return(0,h.jsxs)(u.ProConfigProvider,{needDeps:!0,intl:u.enUSIntl,children:[(0,h.jsx)(u.ProTable,{headerTitle:r,rowKey:n,rowClassName:(e,t)=>t%2==0?`row-differentiator`:``,actionRef:g.actionRef,columns:w,request:T,search:{labelWidth:`auto`},pagination:{pageSize:i,showSizeChanger:!0,showQuickJumper:!0},loading:g.state.loading,rowSelection:A,toolBarRender:()=>[(0,h.jsx)(d.Button,{type:`primary`,icon:(0,h.jsx)(l.PlusOutlined,{}),onClick:()=>E(),children:`New`},`add`),...o&&x.length>0?[(0,h.jsxs)(d.Button,{danger:!0,onClick:k,children:[`Delete Selected (`,x.length,`)`]},`bulk-delete`)]:[],(0,h.jsx)(d.Dropdown,{menu:{items:[{key:`export`,label:`Export`,disabled:!0},{key:`refresh`,label:`Refresh`,onClick:()=>g.refresh()}]},children:(0,h.jsx)(d.Button,{children:(0,h.jsx)(l.EllipsisOutlined,{})})},`menu`)],options:{setting:{listsHeight:400},reload:()=>g.refresh()},dateFormatter:`string`}),(0,h.jsx)(d.Modal,{title:y?`Edit Item`:`Create Item`,open:_,onOk:D,onCancel:()=>v(!1),destroyOnClose:!0,width:600,children:(0,h.jsx)(d.Form,{form:C,layout:`vertical`,children:t.map(e=>{if(!e.dataIndex)return null;let t=e.dataIndex,n=e.title,r=!(e.fieldEditable??!0),i=e.formConfig?.rules||(e.formConfig?.required?[{required:!0,message:`${n} is required`}]:[]);if(e.formConfig?.component)return(0,h.jsx)(d.Form.Item,{name:t,label:n,rules:i,children:e.formConfig.component},t);switch(e.fieldType){case`string`:return(0,h.jsx)(d.Form.Item,{name:t,label:n,rules:i,children:(0,h.jsx)(d.Input,{disabled:r})},t);case`number`:return(0,h.jsx)(d.Form.Item,{name:t,label:n,rules:i,children:(0,h.jsx)(d.InputNumber,{style:{width:`100%`},disabled:r})},t);case`date`:return(0,h.jsx)(d.Form.Item,{name:t,label:n,rules:i,children:(0,h.jsx)(d.DatePicker,{style:{width:`100%`},showTime:!0,disabled:r})},t);case`boolean`:return(0,h.jsx)(d.Form.Item,{name:t,label:n,valuePropName:`checked`,children:(0,h.jsx)(d.Switch,{disabled:r})},t);case`enum`:return(0,h.jsx)(d.Form.Item,{name:t,label:n,rules:i,children:(0,h.jsx)(d.Select,{disabled:r,placeholder:`Select ${n.toLowerCase()}`,options:Object.entries(e.enumOptions||{}).map(([e,t])=>({label:t.text,value:e}))})},t);default:return null}})})})]})};exports.default=g,exports.t=s;

package/dist/CrudTable.d.ts

@@ -1,5 +1,5 @@
 import { ProColumns } from '@ant-design/pro-components';
-import { Rule } from 'antd/es/form';
+import { UseCrudTableConfig, CrudTableActions } from './hooks/useCrudTable';
 type DataType = Record<string, any>;
 type FieldType = 'string' | 'number' | 'date' | 'boolean' | 'enum' | 'custom';
 interface CrudColumn<T extends DataType> extends ProColumns<T> {
@@ -13,25 +13,21 @@ interface CrudColumn<T extends DataType> extends ProColumns<T> {
         required?: boolean;
         component?: React.ReactNode;
         transform?: (value: any) => any;
-        rules?: Rule[];
+        rules?: any[];
     };
     fieldEditable?: boolean;
     searchable?: boolean;
 }
 interface CrudTableConfig<T extends DataType> {
     columns: CrudColumn<T>[];
-    service: {
-        getList: (params: any) => Promise<{
-            data: T[];
-            total: number;
-        }>;
-        create: (data: Partial<T>) => Promise<T>;
-        update: (id: any, data: Partial<T>) => Promise<T>;
-        delete: (id: any) => Promise<void>;
-    };
     rowKey: keyof T;
     title: string;
     defaultPageSize?: number;
+    hookConfig: UseCrudTableConfig<T>;
+    enableBulkOperations?: boolean;
+    enableColumnSettings?: boolean;
+    enableExport?: boolean;
+    customActions?: (record: T, actions: CrudTableActions<T>) => React.ReactNode[];
 }
 declare const CrudTable: <T extends DataType>(config: CrudTableConfig<T>) => import("react/jsx-runtime").JSX.Element;
 export default CrudTable;

package/dist/CrudTable.js

@@ -1,35 +1,65 @@
-import { a as e } from "./chunk-DrlAKpkd.js";
-import { _ as t, a as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v, y } from "./CrudTable-DbG9ZeYQ.js";
-import { t as b } from "./message-C9NNC2sM.js";
-import { t as x } from "./jsx-runtime-Blo4gjKb.js";
-import { useRef as S, useState as C } from "react";
+import { useCrudTable as e } from "./useCrudTable.js";
+import { EllipsisOutlined as t, PlusOutlined as n } from "@ant-design/icons";
+import { ProConfigProvider as r, ProTable as i, enUSIntl as a } from "@ant-design/pro-components";
+import { Button as o, DatePicker as s, Dropdown as c, Form as l, Input as u, InputNumber as d, Modal as f, Select as p, Switch as m, Tag as h, message as g } from "antd";
+import { useEffect as _, useState as v } from "react";
+import { format as y, formatISO as b, parseISO as x } from "date-fns";
+import S from "dayjs";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region lib/CrudTable.tsx
-var w = /* @__PURE__ */ e(s(), 1), T = x(), E = (e) => {
-	let s = S(null), { columns: x, service: E, rowKey: D, title: O, defaultPageSize: k = 5 } = e, [A, j] = C(!1), [M, N] = C(null), [P] = i.useForm(), F = (x || []).map((e) => {
+var T = (T) => {
+	let { columns: E, rowKey: D, title: O, defaultPageSize: k = 10, hookConfig: A, enableBulkOperations: j = !1, customActions: M } = T, N = e(D, {
+		defaultPageSize: k,
+		...A
+	}), [P, F] = v(!1), [I, L] = v(null), [R, z] = v([]), [B] = l.useForm();
+	_(() => {
+		N.refresh();
+	}, []);
+	let V = E.map((e) => {
 		let t = {
 			...e,
 			dataIndex: e.dataIndex,
-			title: e.title
+			title: e.title,
+			search: e.searchable !== !1
 		};
 		switch (e.fieldType) {
 			case "date": return {
 				...t,
 				valueType: "dateTime",
-				render: (t, n) => /* @__PURE__ */ (0, T.jsx)("span", { children: m(g(n[e.dataIndex]), "yyyy-MM-dd HH:mm") })
+				render: (t, n) => {
+					let r = n[e.dataIndex];
+					if (!r) return "-";
+					try {
+						return /* @__PURE__ */ C("span", { children: y(x(r), "yyyy-MM-dd HH:mm") });
+					} catch {
+						return /* @__PURE__ */ C("span", { children: r });
+					}
+				}
 			};
 			case "enum": return {
 				...t,
 				valueType: "select",
-				valueEnum: e.enumOptions
+				valueEnum: e.enumOptions,
+				render: (t, n) => {
+					let r = n[e.dataIndex], i = e.enumOptions?.[r];
+					return i ? /* @__PURE__ */ C(h, {
+						color: i.color,
+						children: i.text
+					}) : r;
+				}
 			};
 			case "number": return {
 				...t,
-				valueType: "digit"
+				valueType: "digit",
+				render: (t, n) => {
+					let r = n[e.dataIndex];
+					return typeof r == "number" ? r.toLocaleString() : r;
+				}
 			};
 			case "boolean": return {
 				...t,
 				valueType: "switch",
-				render: (t, n) => /* @__PURE__ */ (0, T.jsx)(h, {
+				render: (t, n) => /* @__PURE__ */ C(h, {
 					color: n[e.dataIndex] ? "green" : "red",
 					children: n[e.dataIndex] ? "Yes" : "No"
 				})
@@ -41,166 +71,230 @@ var w = /* @__PURE__ */ e(s(), 1), T = x(), E = (e) => {
 			default: return t;
 		}
 	});
-	F.push({
+	V.push({
 		title: "Actions",
 		valueType: "option",
-		render: (e, t) => [/* @__PURE__ */ (0, T.jsx)(o, {
-			type: "primary",
-			onClick: () => L(t),
-			children: "Edit"
-		}, "edit"), /* @__PURE__ */ (0, T.jsx)(o, {
-			type: "primary",
-			danger: !0,
-			onClick: async () => {
-				await E.delete(t[D]), s.current?.reload();
-			},
-			children: "Delete"
-		}, "delete")]
+		width: 200,
+		render: (e, t) => {
+			let n = [/* @__PURE__ */ C(o, {
+				type: "link",
+				size: "small",
+				onClick: () => U(t),
+				children: "Edit"
+			}, "edit"), /* @__PURE__ */ C(o, {
+				type: "link",
+				size: "small",
+				danger: !0,
+				onClick: () => G(t[D]),
+				children: "Delete"
+			}, "delete")], r = M?.(t, N) || [];
+			return [...n, ...r];
+		}
 	});
-	let I = async (e, t, n) => {
+	let H = async (e, t, n) => {
 		try {
 			let r = {
-				...e,
+				current: e.current,
+				pageSize: e.pageSize,
 				sortBy: Object.keys(t)[0],
 				sortOrder: Object.values(t)[0],
-				...n
-			}, { data: i, total: a } = await E.getList(r);
+				...n,
+				...e
+			}, i = N.operations;
+			if (i?.getList) {
+				let e = await i.getList(r);
+				return {
+					data: e.data,
+					success: !0,
+					total: e.total
+				};
+			}
 			return {
-				data: i,
+				data: N.state.data,
 				success: !0,
-				total: a
+				total: N.state.total
 			};
 		} catch {
-			return b.error("Failed to fetch data"), {
+			return g.error("Failed to fetch data"), {
 				data: [],
 				success: !1,
 				total: 0
 			};
 		}
-	}, L = (e) => {
-		if (N(e || null), e) {
+	}, U = (e) => {
+		if (L(e || null), e) {
 			let t = { ...e };
-			x.forEach((e) => {
+			E.forEach((e) => {
 				let n = e.dataIndex;
-				e.fieldType === "date" && t[n] && (t[n] = (0, w.default)(t[n]));
-			}), P.setFieldsValue(t);
-		} else P.resetFields();
-		j(!0);
-	};
-	return /* @__PURE__ */ (0, T.jsxs)(n, {
+				if (e.fieldType === "date" && t[n]) try {
+					t[n] = S(t[n]);
+				} catch {}
+			}), B.setFieldsValue(t);
+		} else B.resetFields();
+		F(!0);
+	}, W = async () => {
+		try {
+			let e = await B.validateFields(), t = { ...e };
+			E.forEach((n) => {
+				let r = n.dataIndex;
+				if (n.fieldType === "date" && e[r]) try {
+					t[r] = b(e[r]);
+				} catch {}
+				n.formConfig?.transform && (t[r] = n.formConfig.transform(e[r]));
+			}), I && I[D] ? await N.update(I[D], t) : await N.create(t), F(!1), N.actionRef.current?.reload();
+		} catch (e) {
+			console.error("Form validation failed:", e);
+		}
+	}, G = async (e) => {
+		f.confirm({
+			title: "Are you sure?",
+			content: "This action cannot be undone.",
+			okText: "Yes, Delete",
+			okType: "danger",
+			cancelText: "Cancel",
+			onOk: async () => {
+				await N.delete(e) && N.actionRef.current?.reload();
+			}
+		});
+	}, K = async () => {
+		if (R.length === 0) {
+			g.warning("Please select items to delete");
+			return;
+		}
+		f.confirm({
+			title: `Delete ${R.length} items?`,
+			content: "This action cannot be undone.",
+			okText: "Yes, Delete All",
+			okType: "danger",
+			cancelText: "Cancel",
+			onOk: async () => {
+				let e = R.map((e) => N.delete(e));
+				await Promise.allSettled(e), z([]), N.actionRef.current?.reload();
+			}
+		});
+	}, q = j ? {
+		selectedRowKeys: R,
+		onChange: z
+	} : void 0;
+	return /* @__PURE__ */ w(r, {
 		needDeps: !0,
-		intl: f,
-		children: [/* @__PURE__ */ (0, T.jsx)(c, {
+		intl: a,
+		children: [/* @__PURE__ */ C(i, {
 			headerTitle: O,
 			rowKey: D,
-			rowClassName: (e, t) => t % 2 == 0 && "row-differentiator" || "",
-			actionRef: s,
-			columns: F,
-			request: I,
+			rowClassName: (e, t) => t % 2 == 0 ? "row-differentiator" : "",
+			actionRef: N.actionRef,
+			columns: V,
+			request: H,
 			search: { labelWidth: "auto" },
-			pagination: { pageSize: k },
-			toolBarRender: () => [/* @__PURE__ */ (0, T.jsx)(o, {
-				type: "primary",
-				icon: /* @__PURE__ */ (0, T.jsx)(v, {}),
-				onClick: () => L(),
-				children: "New"
-			}, "add"), /* @__PURE__ */ (0, T.jsx)(a, {
-				menu: { items: [{
-					key: "export",
-					label: "Export"
-				}, {
-					key: "refresh",
-					label: "Refresh",
-					onClick: () => s.current?.reload()
-				}] },
-				children: /* @__PURE__ */ (0, T.jsx)(o, { children: /* @__PURE__ */ (0, T.jsx)(y, {}) })
-			}, "menu")],
+			pagination: {
+				pageSize: k,
+				showSizeChanger: !0,
+				showQuickJumper: !0
+			},
+			loading: N.state.loading,
+			rowSelection: q,
+			toolBarRender: () => [
+				/* @__PURE__ */ C(o, {
+					type: "primary",
+					icon: /* @__PURE__ */ C(n, {}),
+					onClick: () => U(),
+					children: "New"
+				}, "add"),
+				...j && R.length > 0 ? [/* @__PURE__ */ w(o, {
+					danger: !0,
+					onClick: K,
+					children: [
+						"Delete Selected (",
+						R.length,
+						")"
+					]
+				}, "bulk-delete")] : [],
+				/* @__PURE__ */ C(c, {
+					menu: { items: [{
+						key: "export",
+						label: "Export",
+						disabled: !0
+					}, {
+						key: "refresh",
+						label: "Refresh",
+						onClick: () => N.refresh()
+					}] },
+					children: /* @__PURE__ */ C(o, { children: /* @__PURE__ */ C(t, {}) })
+				}, "menu")
+			],
 			options: {
 				setting: { listsHeight: 400 },
-				reload: () => s.current?.reload()
+				reload: () => N.refresh()
 			},
 			dateFormatter: "string"
-		}), /* @__PURE__ */ (0, T.jsx)(l, {
-			forceRender: !0,
-			title: M ? "Edit Item" : "Create Item",
-			open: A,
-			onOk: async () => {
-				try {
-					let e = await P.validateFields(), t = { ...e };
-					x.forEach((n) => {
-						let r = n.dataIndex;
-						n.fieldType === "date" && e[r] && (t[r] = d(e[r])), n.formConfig?.transform && (t[r] = n.formConfig.transform(e[r]));
-					}), M && M[D] ? (await E.update(M[D], t), b.success("Updated successfully")) : (await E.create(t), b.success("Created successfully")), j(!1), s.current?.reload();
-				} catch (e) {
-					console.error(e), b.error("Submit failed");
-				}
-			},
-			onCancel: () => {
-				j(!1);
-			},
+		}), /* @__PURE__ */ C(f, {
+			title: I ? "Edit Item" : "Create Item",
+			open: P,
+			onOk: W,
+			onCancel: () => F(!1),
 			destroyOnClose: !0,
-			children: /* @__PURE__ */ (0, T.jsx)(i, {
-				form: P,
+			width: 600,
+			children: /* @__PURE__ */ C(l, {
+				form: B,
 				layout: "vertical",
-				children: x.map((e) => {
+				children: E.map((e) => {
 					if (!e.dataIndex) return null;
-					let n = e.dataIndex, a = e.title, o = !(e.fieldEditable ?? !0);
+					let t = e.dataIndex, n = e.title, r = !(e.fieldEditable ?? !0), i = e.formConfig?.rules || (e.formConfig?.required ? [{
+						required: !0,
+						message: `${n} is required`
+					}] : []);
+					if (e.formConfig?.component) return /* @__PURE__ */ C(l.Item, {
+						name: t,
+						label: n,
+						rules: i,
+						children: e.formConfig.component
+					}, t);
 					switch (e.fieldType) {
-						case "string": return /* @__PURE__ */ (0, T.jsx)(i.Item, {
-							name: n,
-							label: a,
-							rules: [{
-								required: e.formConfig?.required,
-								message: `${a} is required`
-							}],
-							children: /* @__PURE__ */ (0, T.jsx)(_, { disabled: o })
-						}, n);
-						case "number": return /* @__PURE__ */ (0, T.jsx)(i.Item, {
-							name: n,
-							label: a,
-							rules: [{
-								required: e.formConfig?.required,
-								message: `${a} is required`
-							}],
-							children: /* @__PURE__ */ (0, T.jsx)(u, {
+						case "string": return /* @__PURE__ */ C(l.Item, {
+							name: t,
+							label: n,
+							rules: i,
+							children: /* @__PURE__ */ C(u, { disabled: r })
+						}, t);
+						case "number": return /* @__PURE__ */ C(l.Item, {
+							name: t,
+							label: n,
+							rules: i,
+							children: /* @__PURE__ */ C(d, {
 								style: { width: "100%" },
-								disabled: o
+								disabled: r
 							})
-						}, n);
-						case "date": return /* @__PURE__ */ (0, T.jsx)(i.Item, {
-							name: n,
-							label: a,
-							rules: [{
-								required: e.formConfig?.required,
-								message: `${a} is required`
-							}],
-							children: /* @__PURE__ */ (0, T.jsx)(p, {
+						}, t);
+						case "date": return /* @__PURE__ */ C(l.Item, {
+							name: t,
+							label: n,
+							rules: i,
+							children: /* @__PURE__ */ C(s, {
 								style: { width: "100%" },
 								showTime: !0,
-								disabled: o
+								disabled: r
 							})
-						}, n);
-						case "boolean": return /* @__PURE__ */ (0, T.jsx)(i.Item, {
-							name: n,
-							label: a,
+						}, t);
+						case "boolean": return /* @__PURE__ */ C(l.Item, {
+							name: t,
+							label: n,
 							valuePropName: "checked",
-							children: /* @__PURE__ */ (0, T.jsx)(r, { disabled: o })
-						}, n);
-						case "enum": return /* @__PURE__ */ (0, T.jsx)(i.Item, {
-							name: n,
-							label: a,
-							rules: [{
-								required: e.formConfig?.required,
-								message: `${a} is required`
-							}],
-							children: /* @__PURE__ */ (0, T.jsx)(t, {
-								disabled: o,
+							children: /* @__PURE__ */ C(m, { disabled: r })
+						}, t);
+						case "enum": return /* @__PURE__ */ C(l.Item, {
+							name: t,
+							label: n,
+							rules: i,
+							children: /* @__PURE__ */ C(p, {
+								disabled: r,
+								placeholder: `Select ${n.toLowerCase()}`,
 								options: Object.entries(e.enumOptions || {}).map(([e, t]) => ({
 									label: t.text,
 									value: e
 								}))
 							})
-						}, n);
+						}, t);
 						default: return null;
 					}
 				})
@@ -209,4 +303,4 @@ var w = /* @__PURE__ */ e(s(), 1), T = x(), E = (e) => {
 	});
 };
 //#endregion
-export { E as default };
+export { T as default };

package/dist/CrudTableLazy.cjs

@@ -1 +1 @@
-require(`./chunk-BZRuZbSa.cjs`);const e=require(`./jsx-runtime-D8R_Hd8N.cjs`);let t=require(`react`);var n=e.t(),r=(0,t.lazy)(()=>Promise.resolve().then(()=>require(`./CrudTable.cjs`))),i=e=>{let{columns:i,service:a,rowKey:o,title:s,defaultPageSize:c=5}=e;return(0,n.jsx)(t.Suspense,{fallback:(0,n.jsx)(`div`,{style:{textAlign:`center`,padding:`2rem`},children:`Loading curd table w antd`}),children:(0,n.jsx)(r,{columns:i,service:a,rowKey:o,title:s,defaultPageSize:c})})};module.exports=i;
+require(`./CrudTable.cjs`);let e=require(`react`),t=require(`react/jsx-runtime`);var n=(0,e.lazy)(()=>Promise.resolve().then(()=>require(`./CrudTable.cjs`))),r=r=>(0,t.jsx)(e.Suspense,{fallback:(0,t.jsx)(`div`,{style:{textAlign:`center`,padding:`2rem`},children:`Loading curd table w antd`}),children:(0,t.jsx)(n,{...r})});module.exports=r;

package/dist/CrudTableLazy.d.ts

@@ -1,3 +1,4 @@
 import { CrudTableConfig, DataType } from './CrudTable';
 declare const CrudTableLazy: <T extends DataType>(props: CrudTableConfig<T>) => import("react/jsx-runtime").JSX.Element;
 export default CrudTableLazy;
+export type { CrudTableConfig, DataType };

package/dist/CrudTableLazy.js

@@ -1,24 +1,15 @@
-import { t as e } from "./jsx-runtime-Blo4gjKb.js";
-import { Suspense as t, lazy as n } from "react";
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region lib/CrudTableLazy.tsx
-var r = e(), i = n(() => import("./CrudTable.js")), a = (e) => {
-	let { columns: n, service: a, rowKey: o, title: s, defaultPageSize: c = 5 } = e;
-	return /* @__PURE__ */ (0, r.jsx)(t, {
-		fallback: /* @__PURE__ */ (0, r.jsx)("div", {
-			style: {
-				textAlign: "center",
-				padding: "2rem"
-			},
-			children: "Loading curd table w antd"
-		}),
-		children: /* @__PURE__ */ (0, r.jsx)(i, {
-			columns: n,
-			service: a,
-			rowKey: o,
-			title: s,
-			defaultPageSize: c
-		})
-	});
-};
+var r = t(() => import("./CrudTable.js")), i = (t) => /* @__PURE__ */ n(e, {
+	fallback: /* @__PURE__ */ n("div", {
+		style: {
+			textAlign: "center",
+			padding: "2rem"
+		},
+		children: "Loading curd table w antd"
+	}),
+	children: /* @__PURE__ */ n(r, { ...t })
+});
 //#endregion
-export { a as default };
+export { i as default };

package/dist/exportData.cjs

@@ -0,0 +1,13 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=(e,t)=>{let n=t.filter(e=>e.fieldType!==`option`&&e.dataIndex),r=n.map(e=>String(e.title||e.dataIndex)),i=e.map(e=>n.map(t=>{let n=e[t.dataIndex];return n==null?``:t.fieldType===`boolean`?n?`Yes`:`No`:t.fieldType===`date`?String(n):t.fieldType===`enum`&&t.enumOptions&&t.enumOptions[n]?.text||String(n)}));return[r.map(e=>`"${e}"`).join(`,`),...i.map(e=>e.map(e=>`"${String(e).replace(/"/g,`""`)}"`).join(`,`))].join(`
+`)},t=(e,t,n)=>{let r=new Blob([e],{type:n}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=t,document.body.appendChild(a),a.click(),document.body.removeChild(a),URL.revokeObjectURL(i)},n=n=>{let{data:r,columns:i,filename:a=`export`}=n;t(e(r,i),`${a}.csv`,`text/csv;charset=utf-8;`)},r=e=>{let{data:n,filename:r=`export`}=e;t(JSON.stringify(n,null,2),`${r}.json`,`application/json`)},i=e=>{let{data:n,columns:r,filename:i=`export`}=e,a=r.filter(e=>e.fieldType!==`option`&&e.dataIndex),o=a.map(e=>String(e.title||e.dataIndex)),s=n.map(e=>a.map(t=>{let n=e[t.dataIndex];return n==null?``:t.fieldType===`boolean`?n?`Yes`:`No`:t.fieldType===`enum`&&t.enumOptions&&t.enumOptions[n]?.text||String(n)}));t((()=>{let e=e=>e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`).replace(/'/g,`&apos;`);return`<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet type="text/xsl" href="stylesheet.xsl"?>
+<workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet">
+  <sheets>
+    <sheet name="Export">
+      <table>
+        <row>${o.map(t=>`<c t="inlineStr"><is><t>${e(t)}</t></is></c>`).join(``)}</row>
+        ${s.map(t=>`<row>${t.map(t=>`<c t="inlineStr"><is><t>${e(String(t))}</t></is></c>`).join(``)}</row>`).join(``)}
+      </table>
+    </sheet>
+  </sheets>
+</workbook>`})(),`${i}.xls`,`application/vnd.ms-excel`)},a=e=>{let{format:t=`csv`}=e;switch(t){case`csv`:n(e);break;case`json`:r(e);break;case`xlsx`:i(e);break;default:n(e)}},o=async(e,t,n=`export`,r=`csv`)=>{try{a({data:await e(),columns:t,filename:n,format:r})}catch(e){throw console.error(`Export failed:`,e),e}};exports.default=a,exports.exportData=a,exports.exportAllData=o,exports.exportToCSV=n,exports.exportToJSON=r,exports.exportToXLSX=i;

package/dist/exportData.js

@@ -0,0 +1,64 @@
+//#region lib/utils/exportData.ts
+var e = (e, t) => {
+	let n = t.filter((e) => e.fieldType !== "option" && e.dataIndex), r = n.map((e) => String(e.title || e.dataIndex)), i = e.map((e) => n.map((t) => {
+		let n = e[t.dataIndex];
+		return n == null ? "" : t.fieldType === "boolean" ? n ? "Yes" : "No" : t.fieldType === "date" ? String(n) : t.fieldType === "enum" && t.enumOptions && t.enumOptions[n]?.text || String(n);
+	}));
+	return [r.map((e) => `"${e}"`).join(","), ...i.map((e) => e.map((e) => `"${String(e).replace(/"/g, "\"\"")}"`).join(","))].join("\n");
+}, t = (e, t, n) => {
+	let r = new Blob([e], { type: n }), i = URL.createObjectURL(r), a = document.createElement("a");
+	a.href = i, a.download = t, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(i);
+}, n = (n) => {
+	let { data: r, columns: i, filename: a = "export" } = n;
+	t(e(r, i), `${a}.csv`, "text/csv;charset=utf-8;");
+}, r = (e) => {
+	let { data: n, filename: r = "export" } = e;
+	t(JSON.stringify(n, null, 2), `${r}.json`, "application/json");
+}, i = (e) => {
+	let { data: n, columns: r, filename: i = "export" } = e, a = r.filter((e) => e.fieldType !== "option" && e.dataIndex), o = a.map((e) => String(e.title || e.dataIndex)), s = n.map((e) => a.map((t) => {
+		let n = e[t.dataIndex];
+		return n == null ? "" : t.fieldType === "boolean" ? n ? "Yes" : "No" : t.fieldType === "enum" && t.enumOptions && t.enumOptions[n]?.text || String(n);
+	}));
+	t((() => {
+		let e = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+		return `<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet type="text/xsl" href="stylesheet.xsl"?>
+<workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet">
+  <sheets>
+    <sheet name="Export">
+      <table>
+        <row>${o.map((t) => `<c t="inlineStr"><is><t>${e(t)}</t></is></c>`).join("")}</row>
+        ${s.map((t) => `<row>${t.map((t) => `<c t="inlineStr"><is><t>${e(String(t))}</t></is></c>`).join("")}</row>`).join("")}
+      </table>
+    </sheet>
+  </sheets>
+</workbook>`;
+	})(), `${i}.xls`, "application/vnd.ms-excel");
+}, a = (e) => {
+	let { format: t = "csv" } = e;
+	switch (t) {
+		case "csv":
+			n(e);
+			break;
+		case "json":
+			r(e);
+			break;
+		case "xlsx":
+			i(e);
+			break;
+		default: n(e);
+	}
+}, o = async (e, t, n = "export", r = "csv") => {
+	try {
+		a({
+			data: await e(),
+			columns: t,
+			filename: n,
+			format: r
+		});
+	} catch (e) {
+		throw console.error("Export failed:", e), e;
+	}
+};
+//#endregion
+export { a as default, a as exportData, o as exportAllData, n as exportToCSV, r as exportToJSON, i as exportToXLSX };

package/dist/index.d.ts

@@ -1,12 +1,9 @@
 export { default as CrudTable } from './CrudTable';
 export { default as CrudTableLazy } from './CrudTableLazy';
-export { default as CrudTableExperimental } from './CrudTableExperimental';
-export { default as CrudTableExperimentalLazy } from './CrudTableExperimentalLazy';
 export { useCrudTable } from './hooks/useCrudTable';
 export { useLocalStorageCrud } from './hooks/useLocalStorageCrud';
 export { exportData, exportToCSV, exportToJSON, exportToXLSX, exportAllData } from './utils/exportData';
 export type { CrudTableConfig, CrudColumn, DataType } from './CrudTable';
-export type { EnhancedCrudTableConfig } from './CrudTableExperimental';
 export type { UseCrudTableConfig, CrudTableActions, CrudOperation, CrudParams, CrudResponse, CrudState } from './hooks/useCrudTable';
 export type { UseLocalStorageCrudConfig } from './hooks/useLocalStorageCrud';
 export type { ExportFormat } from './utils/exportData';