@eventuras/datatable 0.5.12

package/dist/DataTable.d.ts

@@ -0,0 +1,31 @@
+import { RankingInfo } from '@tanstack/match-sorter-utils';
+import { ColumnFilter, FilterFn, Row, TableState } from '@tanstack/react-table';
+import { default as React } from 'react';
+type DataTableProps = {
+    columns: any[];
+    data: any[];
+    pageSize?: number;
+    clientsidePagination?: boolean;
+    state?: Partial<TableState>;
+    enableGlobalSearch?: boolean;
+    columnFilters?: ColumnFilter[];
+    renderToolbar?: (searchInput: React.ReactNode) => React.ReactNode;
+    renderSubComponent?: (props: {
+        row: Row<any>;
+    }) => React.ReactElement;
+    getRowCanExpand?: (row: Row<any>) => boolean;
+    getRowId?: (originalRow: any, index: number) => string;
+};
+declare module '@tanstack/table-core' {
+    interface FilterFns {
+        fuzzy: FilterFn<unknown>;
+    }
+    interface FilterMeta {
+        itemRank: RankingInfo;
+    }
+}
+declare const DataTable: (props: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;
+export type { ColumnFilter, ColumnSort, TableState } from '@tanstack/react-table';
+export { createColumnHelper } from '@tanstack/react-table';
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../src/DataTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAY,MAAM,8BAA8B,CAAC;AAErE,OAAO,EACL,YAAY,EAGZ,QAAQ,EAMR,GAAG,EACH,UAAU,EAEX,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,CAAC;IACtE,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxD,CAAC;AACF,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,SAAS;QACjB,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;KAC1B;IACD,UAAU,UAAU;QAClB,QAAQ,EAAE,WAAW,CAAC;KACvB;CACF;AAWD,QAAA,MAAM,SAAS,GAAI,OAAO,cAAc,4CAmKvC,CAAC;AACF,eAAe,SAAS,CAAC;AACzB,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/DataTable.js

@@ -0,0 +1,98 @@
+"use client";
+import { rankItem as e } from "@tanstack/match-sorter-utils";
+import { Pagination as t } from "@eventuras/ratio-ui/core/Pagination";
+import { createColumnHelper as n, flexRender as r, getCoreRowModel as i, getExpandedRowModel as a, getFilteredRowModel as o, getPaginationRowModel as s, useReactTable as c } from "@tanstack/react-table";
+import l, { useEffect as u } from "react";
+import { SearchField as d } from "@eventuras/ratio-ui/forms";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/DataTable.tsx
+var h = (t, n, r, i) => {
+	let a = e(t.getValue(n), r);
+	return i({ itemRank: a }), a.passed;
+}, g = (e) => {
+	let { columns: n, data: g, clientsidePagination: _, pageSize: v = 25, state: y } = e, [b, x] = l.useState([]), [S, C] = l.useState(""), [w, T] = l.useState({}), E = (e) => {
+		O.setPageIndex(e);
+	};
+	u(() => {
+		e.columnFilters && x(e.columnFilters);
+	}, [e.columnFilters]), u(() => {
+		T(S ? !0 : {});
+	}, [S]);
+	let D = l.useCallback((e) => {
+		if (S) {
+			T(e);
+			return;
+		}
+		T((t) => {
+			let n = typeof e == "function" ? e(t) : e;
+			if (typeof n == "boolean") return n;
+			let r = Object.keys(t).filter((e) => t[e]), i = Object.keys(n).filter((e) => n[e]);
+			if (i.length > r.length) {
+				let e = i.find((e) => !r.includes(e));
+				if (e) return { [e]: !0 };
+			}
+			return n;
+		});
+	}, [S]), O = c({
+		columns: n,
+		data: g,
+		getRowId: e.getRowId,
+		getCoreRowModel: i(),
+		getPaginationRowModel: s(),
+		getExpandedRowModel: a(),
+		onGlobalFilterChange: C,
+		onColumnFiltersChange: x,
+		onExpandedChange: D,
+		getFilteredRowModel: o(),
+		getRowCanExpand: e.getRowCanExpand,
+		filterFns: { fuzzy: h },
+		globalFilterFn: h,
+		initialState: { pagination: { pageSize: v } },
+		state: {
+			...y,
+			globalFilter: S,
+			columnFilters: b,
+			expanded: w
+		}
+	});
+	u(() => {
+		_ && O.setPageSize(v);
+	}, []);
+	let k = e.enableGlobalSearch ? /* @__PURE__ */ p(d, {
+		value: S ?? "",
+		onChange: (e) => C(e),
+		placeholder: "Search all columns...",
+		"aria-label": "Search table"
+	}) : null;
+	return /* @__PURE__ */ m(f, { children: [
+		e.renderToolbar ? e.renderToolbar(k) : k,
+		/* @__PURE__ */ m("table", {
+			className: "table-auto w-full",
+			children: [/* @__PURE__ */ p("thead", { children: O.getHeaderGroups().map((e) => /* @__PURE__ */ p("tr", { children: e.headers.map((e) => /* @__PURE__ */ p("th", {
+				className: "text-left",
+				children: e.isPlaceholder ? null : r(e.column.columnDef.header, e.getContext())
+			}, e.id)) }, e.id)) }), /* @__PURE__ */ p("tbody", { children: O.getRowModel().rows.map((t) => /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ p("tr", {
+				className: "group even:bg-gray-50 odd:bg-white dark:even:bg-gray-950 dark:odd:bg-gray-900 text-black dark:text-white",
+				children: t.getVisibleCells().map((e) => /* @__PURE__ */ p("td", {
+					className: "p-2",
+					children: r(e.column.columnDef.cell, e.getContext())
+				}, e.id))
+			}), t.getIsExpanded() && e.renderSubComponent && /* @__PURE__ */ p("tr", {
+				className: "bg-gray-100 dark:bg-gray-800",
+				children: /* @__PURE__ */ p("td", {
+					colSpan: t.getVisibleCells().length,
+					className: "p-4",
+					children: e.renderSubComponent({ row: t })
+				})
+			})] }, t.id ?? t.index)) })]
+		}),
+		_ && O.getPageCount() > 1 ? /* @__PURE__ */ p(t, {
+			currentPage: O.getState().pagination.pageIndex + 1,
+			totalPages: O.getPageCount(),
+			onPreviousPageClick: () => E(O.getState().pagination.pageIndex - 1),
+			onNextPageClick: () => E(O.getState().pagination.pageIndex + 1)
+		}) : null
+	] });
+};
+//#endregion
+export { n as createColumnHelper, g as default };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DataTable, createColumnHelper } from './DataTable';
+export type { ColumnFilter } from './DataTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACvE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+import e, { createColumnHelper as t } from "./DataTable.js";
+export { e as DataTable, t as createColumnHelper };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@eventuras/datatable",
+  "version": "0.5.12",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "@eventuras/ratio-ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@eventuras/eslint-config": "workspace:*",
+    "@eventuras/typescript-config": "workspace:*",
+    "@eventuras/vite-config": "workspace:*",
+    "@tanstack/match-sorter-utils": "^8.19.4",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "lucide-react": "^1.7.0",
+    "vite": "^8.0.3"
+  },
+  "peerDependencies": {
+    "@tanstack/match-sorter-utils": "^8.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "@tanstack/table-core": "^8.0.0",
+    "lucide-react": "^0.555.0 || ^0.577.0 || ^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}