@cratis/components 0.1.18 → 1.0.3

package/dist/esm/Common/FormElement.stories.js

@@ -1,6 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './FormElement';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'Common/FormElement', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { FormElement } from './FormElement';
+import { InputText } from 'primereact/inputtext';
+const meta = {
+    title: 'Common/FormElement',
+    component: FormElement,
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: _jsx("i", { className: "pi pi-user" }),
+    },
+    render: (args) => (_jsx("div", { className: "p-4", children: _jsx(FormElement, { ...args, children: _jsx(InputText, { placeholder: "Username" }) }) }))
+};
+export const WithEmailIcon = {
+    args: {
+        icon: _jsx("i", { className: "pi pi-envelope" }),
+    },
+    render: (args) => (_jsx("div", { className: "p-4", children: _jsx(FormElement, { ...args, children: _jsx(InputText, { type: "email", placeholder: "Email address" }) }) }))
+};
+export const WithSearchIcon = {
+    args: {
+        icon: _jsx("i", { className: "pi pi-search" }),
+    },
+    render: (args) => (_jsx("div", { className: "p-4", children: _jsx(FormElement, { ...args, children: _jsx(InputText, { placeholder: "Search..." }) }) }))
+};
 //# sourceMappingURL=FormElement.stories.js.map

package/dist/esm/Common/FormElement.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.stories.js","sourceRoot":"","sources":["../../../Common/FormElement.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,eAAe,CAAC;AACtC,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAErE,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"FormElement.stories.js","sourceRoot":"","sources":["../../../Common/FormElement.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,IAAI,GAA6B;IACnC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,WAAW;CACzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,IAAI,EAAE,YAAG,SAAS,EAAC,YAAY,GAAG;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,SAAS,EAAC,KAAK,YAChB,KAAC,WAAW,OAAK,IAAI,YACjB,KAAC,SAAS,IAAC,WAAW,EAAC,UAAU,GAAG,GAC1B,GACZ,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAChC,IAAI,EAAE;QACF,IAAI,EAAE,YAAG,SAAS,EAAC,gBAAgB,GAAG;KACzC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,SAAS,EAAC,KAAK,YAChB,KAAC,WAAW,OAAK,IAAI,YACjB,KAAC,SAAS,IAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,eAAe,GAAG,GAC5C,GACZ,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACjC,IAAI,EAAE;QACF,IAAI,EAAE,YAAG,SAAS,EAAC,cAAc,GAAG;KACvC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,SAAS,EAAC,KAAK,YAChB,KAAC,WAAW,OAAK,IAAI,YACjB,KAAC,SAAS,IAAC,WAAW,EAAC,WAAW,GAAG,GAC3B,GACZ,CACT;CACJ,CAAC"}

package/dist/esm/Common/Page.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { Page } from './Page';
+declare const meta: Meta<typeof Page>;
+export default meta;
+type Story = StoryObj<typeof Page>;
+export declare const Default: Story;
+export declare const WithPanel: Story;
 //# sourceMappingURL=Page.stories.d.ts.map

package/dist/esm/Common/Page.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../Common/Page.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAA8D;AAE9D,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../Common/Page.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC"}

package/dist/esm/Common/Page.stories.js

@@ -1,6 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './Page';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'Common/Page', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Page } from './Page';
+const meta = {
+    title: 'Common/Page',
+    component: Page,
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'My Page Title',
+    },
+    render: (args) => (_jsx(Page, { ...args, children: _jsxs("div", { className: "p-4", children: [_jsx("p", { children: "This is the page content area." }), _jsx("p", { children: "The Page component provides a consistent layout with a title and content area." })] }) }))
+};
+export const WithPanel = {
+    args: {
+        title: 'Page with Panel',
+        panel: true,
+    },
+    render: (args) => (_jsx(Page, { ...args, children: _jsxs("div", { className: "p-4", children: [_jsx("p", { children: "This page has the panel style applied." }), _jsx("p", { children: "The panel prop adds special styling to the content area." })] }) }))
+};
 //# sourceMappingURL=Page.stories.js.map

package/dist/esm/Common/Page.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.js","sourceRoot":"","sources":["../../../Common/Page.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAE9D,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"Page.stories.js","sourceRoot":"","sources":["../../../Common/Page.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAsB;IAC5B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,IAAI;CAClB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,KAAK,EAAE,eAAe;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,KAAC,IAAI,OAAK,IAAI,YACV,eAAK,SAAS,EAAC,KAAK,aAChB,yDAAqC,EACrC,yGAAqF,IACnF,GACH,CACV;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,KAAC,IAAI,OAAK,IAAI,YACV,eAAK,SAAS,EAAC,KAAK,aAChB,iEAA6C,EAC7C,mFAA+D,IAC7D,GACH,CACV;CACJ,CAAC"}

package/dist/esm/Common/index.js

@@ -1,4 +1,4 @@
-export * from './ErrorBoundary';
-export * from './Page';
-export * from './FormElement';
-//# sourceMappingURL=index.js.map
+export { ErrorBoundary } from './ErrorBoundary.js';
+export { Page } from './Page.js';
+export { FormElement } from './FormElement.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/Common/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../Common/index.ts"],"names":[],"mappings":"AAGA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/esm/DataPage/DataPage.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { DataPage } from './DataPage';
+declare const meta: Meta<typeof DataPage>;
+export default meta;
+type Story = StoryObj<typeof DataPage>;
+export declare const Default: Story;
+export declare const WithoutDetails: Story;
 //# sourceMappingURL=DataPage.stories.d.ts.map

package/dist/esm/DataPage/DataPage.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataPage.stories.d.ts","sourceRoot":"","sources":["../../../DataPage/DataPage.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAAoE;AAEpE,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"DataPage.stories.d.ts","sourceRoot":"","sources":["../../../DataPage/DataPage.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAY,MAAM,YAAY,CAAC;AAIhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAM/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AA8CvC,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAC"}

package/dist/esm/DataPage/DataPage.stories.js

@@ -1,6 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './DataPage';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'DataPage/DataPage', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataPage, MenuItem } from './DataPage';
+import { Column } from 'primereact/column';
+import { QueryFor } from '@cratis/arc/queries';
+const meta = {
+    title: 'DataPage/DataPage',
+    component: DataPage,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+class PersonsQuery extends QueryFor {
+    route = '/api/persons';
+    routeTemplate = '/api/persons';
+    defaultValue = { id: 0, name: '', email: '', role: '' };
+    parameterDescriptors = [];
+    get requiredRequestParameters() {
+        return [];
+    }
+    constructor() {
+        super(Object, false);
+    }
+}
+const PersonDetails = ({ item }) => {
+    return (_jsxs("div", { className: "p-4", children: [_jsx("h2", { className: "text-2xl font-bold mb-4", children: "Person Details" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx("strong", { children: "ID:" }), " ", item.id] }), _jsxs("div", { children: [_jsx("strong", { children: "Name:" }), " ", item.name] }), _jsxs("div", { children: [_jsx("strong", { children: "Email:" }), " ", item.email] }), _jsxs("div", { children: [_jsx("strong", { children: "Role:" }), " ", item.role] })] })] }));
+};
+export const Default = {
+    render: () => (_jsx("div", { style: { height: '600px' }, children: _jsxs(DataPage, { title: "Persons", query: PersonsQuery, emptyMessage: "No persons found", dataKey: "id", detailsComponent: PersonDetails, globalFilterFields: ['name', 'email', 'role'], children: [_jsxs(DataPage.MenuItems, { children: [_jsx(MenuItem, { label: "Add Person", icon: () => _jsx("i", { className: "pi pi-plus" }), command: () => alert('Add person clicked') }), _jsx(MenuItem, { label: "Edit Person", icon: () => _jsx("i", { className: "pi pi-pencil" }), command: () => alert('Edit person clicked'), disableOnUnselected: true }), _jsx(MenuItem, { label: "Delete Person", icon: () => _jsx("i", { className: "pi pi-trash" }), command: () => alert('Delete person clicked'), disableOnUnselected: true })] }), _jsxs(DataPage.Columns, { children: [_jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "name", header: "Name", sortable: true, style: { width: '30%' } }), _jsx(Column, { field: "email", header: "Email", sortable: true, style: { width: '35%' } }), _jsx(Column, { field: "role", header: "Role", sortable: true, style: { width: '25%' } })] })] }) }))
+};
+export const WithoutDetails = {
+    render: () => (_jsx("div", { style: { height: '600px' }, children: _jsxs(DataPage, { title: "Persons (No Details Panel)", query: PersonsQuery, emptyMessage: "No persons found", dataKey: "id", globalFilterFields: ['name', 'email', 'role'], children: [_jsx(DataPage.MenuItems, { children: _jsx(MenuItem, { label: "Refresh", icon: () => _jsx("i", { className: "pi pi-refresh" }), command: () => alert('Refresh clicked') }) }), _jsxs(DataPage.Columns, { children: [_jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "name", header: "Name", sortable: true, style: { width: '30%' } }), _jsx(Column, { field: "email", header: "Email", sortable: true, style: { width: '35%' } }), _jsx(Column, { field: "role", header: "Role", sortable: true, style: { width: '25%' } })] })] }) }))
+};
 //# sourceMappingURL=DataPage.stories.js.map

package/dist/esm/DataPage/DataPage.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataPage.stories.js","sourceRoot":"","sources":["../../../DataPage/DataPage.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,YAAY,CAAC;AACnC,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAAiE,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAA4D,CAAC;AAEpQ,eAAe,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAEpE,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"DataPage.stories.js","sourceRoot":"","sources":["../../../DataPage/DataPage.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/DataTables/DataTableForObservableQuery.d.ts

@@ -12,6 +12,7 @@ export interface DataTableForObservableQueryProps<TQuery extends IObservableQuer
     onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;
     globalFilterFields?: string[] | undefined;
     defaultFilters?: DataTableFilterMeta;
+    clientFiltering?: boolean;
 }
 export declare const DataTableForObservableQuery: <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTableForObservableQuery.d.ts.map

package/dist/esm/DataTables/DataTableForObservableQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAC3G,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAU,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAO5C,MAAM,WAAW,gCAAgC,CAAC,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAI5J,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACxC;AASD,eAAO,MAAM,2BAA2B,GAAI,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,gCAAgC,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CA4BjO,CAAC"}
+{"version":3,"file":"DataTableForObservableQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAU,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAK/D,MAAM,WAAW,gCAAgC,CAAC,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAI5J,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAKrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD,eAAO,MAAM,2BAA2B,GAAI,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,gCAAgC,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CAgGjO,CAAC"}

package/dist/esm/DataTables/DataTableForObservableQuery.js

@@ -1,14 +1,66 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { DataTable } from 'primereact/datatable';
+import { Paginator } from 'primereact/paginator';
 import { Paging } from '@cratis/arc/queries';
 import { useObservableQueryWithPaging } from '@cratis/arc.react/queries';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 const paging = new Paging(0, 20);
 const DataTableForObservableQuery = (props) => {
     const [filters, setFilters] = useState(props.defaultFilters ?? {});
+    const [filteredTotal, setFilteredTotal] = useState(undefined);
     const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);
-    return (jsx(DataTable, { value: result.data, lazy: true, rows: paging.pageSize, totalRecords: result.paging.totalItems, paginator: true, alwaysShowPaginator: false, first: result.paging.page * paging.pageSize, onPage: (e) => setPage(e.page ?? 0), scrollable: true, scrollHeight: 'flex', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => setFilters(e.filters), globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }));
+    const containerRef = useRef(null);
+    const [tableHeight, setTableHeight] = useState(600);
+    const timeoutRef = useRef(undefined);
+    const isClientFiltering = props.clientFiltering === true;
+    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(() => {
+                for (const entry of entries) {
+                    const containerHeight = entry.contentRect.height;
+                    if (containerHeight > 0) {
+                        const paginatorHeight = result.paging.totalItems > 0 ? 56 : 0;
+                        const calculatedHeight = containerHeight - paginatorHeight - 2;
+                        const newHeight = Math.max(calculatedHeight, 200);
+                        setTableHeight(prevHeight => {
+                            if (Math.abs(newHeight - prevHeight) > 5) {
+                                return newHeight;
+                            }
+                            return prevHeight;
+                        });
+                    }
+                }
+            }, 10);
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [result.paging.totalItems]);
+    return (jsxs("div", { ref: containerRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            border: '1px solid var(--surface-border)',
+            borderRadius: 'var(--border-radius)',
+            overflow: 'hidden'
+        }, children: [jsx("div", { style: { height: `${tableHeight}px`, overflow: 'hidden' }, children: jsx(DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, scrollable: true, scrollHeight: '100%', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
+                        setFilters(e.filters);
+                        if (isClientFiltering) {
+                            const filteredValue = e.filteredValue;
+                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);
+                        }
+                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--surface-border)' }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
 };
 
 export { DataTableForObservableQuery };

package/dist/esm/DataTables/DataTableForObservableQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IObservableQueryFor, Paging } from '@cratis/arc/queries';\nimport { useObservableQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState } from 'react';\n\n \n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForObservableQueryProps<TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);\n\n    return (\n        <DataTable\n            value={result.data as unknown as object[]}\n            lazy\n            rows={paging.pageSize}\n            totalRecords={result.paging.totalItems}\n            paginator\n            alwaysShowPaginator={false}\n            first={result.paging.page * paging.pageSize}\n            onPage={(e) => setPage(e.page ?? 0)}\n            scrollable\n            scrollHeight={'flex'}\n            selectionMode='single'\n            selection={props.selection}\n            onSelectionChange={props.onSelectionChange}\n            dataKey={props.dataKey}\n            filters={filters}\n            filterDisplay='menu'\n            onFilter={(e) => setFilters(e.filters)}\n            globalFilterFields={props.globalFilterFields}\n            emptyMessage={props.emptyMessage}>\n            {props.children}\n        </DataTable>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AA6DA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAOzB,MAAM,2BAA2B,GAAG,CAAiH,KAAsE,KAAI;AAClO,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,4BAA4B,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AAEnG,IAAA,QACIA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAA,IAAA,EACJ,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,SAAS,EAAA,IAAA,EACT,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,MAAM,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EACnC,UAAU,EAAA,IAAA,EACV,YAAY,EAAE,MAAM,EACpB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,EACtC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAAA,QAAA,EAC/B,KAAK,CAAC,QAAQ,EAAA,CACP;AAEpB;;;;"}
+{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Paginator } from 'primereact/paginator';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IObservableQueryFor, Paging } from '@cratis/arc/queries';\nimport { useObservableQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState, useRef, useEffect } from 'react';\n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForObservableQueryProps<TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n\n    /**\n     * Enable client-side filtering for the data table\n     */\n    clientFiltering?: boolean;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [filteredTotal, setFilteredTotal] = useState<number | undefined>(undefined);\n    const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [tableHeight, setTableHeight] = useState<number>(600);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const isClientFiltering = props.clientFiltering === true;\n    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;\n\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n\n            timeoutRef.current = setTimeout(() => {\n                for (const entry of entries) {\n                    const containerHeight = entry.contentRect.height;\n                    if (containerHeight > 0) {\n                        const paginatorHeight = result.paging.totalItems > 0 ? 56 : 0;\n                        const calculatedHeight = containerHeight - paginatorHeight - 2;\n                        const newHeight = Math.max(calculatedHeight, 200);\n\n                        setTableHeight(prevHeight => {\n                            if (Math.abs(newHeight - prevHeight) > 5) {\n                                return newHeight;\n                            }\n                            return prevHeight;\n                        });\n                    }\n                }\n            }, 10);\n        });\n\n        resizeObserver.observe(containerRef.current);\n\n        return () => {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n            resizeObserver.disconnect();\n        };\n    }, [result.paging.totalItems]);\n\n    return (\n        <div\n            ref={containerRef}\n            style={{\n                display: 'flex',\n                flexDirection: 'column',\n                height: '100%',\n                border: '1px solid var(--surface-border)',\n                borderRadius: 'var(--border-radius)',\n                overflow: 'hidden'\n            }}>\n            <div style={{ height: `${tableHeight}px`, overflow: 'hidden' }}>\n                <DataTable\n                    value={result.data as unknown as object[]}\n                    lazy={!isClientFiltering}\n                    rows={paging.pageSize}\n                    totalRecords={totalRecords}\n                    scrollable\n                    scrollHeight='100%'\n                    selectionMode='single'\n                    selection={props.selection}\n                    onSelectionChange={props.onSelectionChange}\n                    dataKey={props.dataKey}\n                    filters={filters}\n                    filterDisplay='menu'\n                    onFilter={(e) => {\n                        setFilters(e.filters);\n                        if (isClientFiltering) {\n                            const filteredValue = e.filteredValue as unknown[] | undefined;\n                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);\n                        }\n                    }}\n                    globalFilterFields={props.globalFilterFields}\n                    emptyMessage={props.emptyMessage}>\n                    {props.children}\n                </DataTable>\n            </div>\n            {result.paging.totalItems > 0 && (\n                <div style={{ borderTop: '1px solid var(--surface-border)' }}>\n                    <Paginator\n                        first={result.paging.page * paging.pageSize}\n                        rows={paging.pageSize}\n                        totalRecords={result.paging.totalItems}\n                        onPageChange={(e) => setPage(e.page)}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { DataTableForObservableQuery } from './DataTableForObservableQuery';
+declare const meta: Meta<typeof DataTableForObservableQuery>;
+export default meta;
+type Story = StoryObj<typeof DataTableForObservableQuery>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
 //# sourceMappingURL=DataTableForObservableQuery.stories.d.ts.map

package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAAyF;AAEzF,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"DataTableForObservableQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAK5E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,2BAA2B,CAGlD,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAmD1D,eAAO,MAAM,OAAO,EAAE,KAoCrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA0C3B,CAAC"}

package/dist/esm/DataTables/DataTableForObservableQuery.stories.js

@@ -1,6 +1,56 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './DataTableForObservableQuery';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'DataTables/DataTableForObservableQuery', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DataTableForObservableQuery } from './DataTableForObservableQuery';
+import { Column } from 'primereact/column';
+import { ObservableQueryFor } from '@cratis/arc/queries';
+const meta = {
+    title: 'DataTables/DataTableForObservableQuery',
+    component: DataTableForObservableQuery,
+};
+export default meta;
+class TasksQuery extends ObservableQueryFor {
+    route = '/api/tasks';
+    routeTemplate = '/api/tasks';
+    defaultValue = { id: 0, title: '', status: 'todo', priority: 'low', assignee: '' };
+    parameterDescriptors = [];
+    get requiredRequestParameters() {
+        return [];
+    }
+    constructor() {
+        super(Object, false);
+    }
+}
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'done':
+            return 'text-green-600';
+        case 'in-progress':
+            return 'text-blue-600';
+        case 'todo':
+            return 'text-gray-600';
+        default:
+            return '';
+    }
+};
+const getPriorityColor = (priority) => {
+    switch (priority) {
+        case 'high':
+            return 'text-red-600 font-bold';
+        case 'medium':
+            return 'text-orange-600';
+        case 'low':
+            return 'text-gray-600';
+        default:
+            return '';
+    }
+};
+export const Default = {
+    render: () => (_jsx("div", { className: "p-4", children: _jsxs(DataTableForObservableQuery, { query: TasksQuery, emptyMessage: "No tasks found", dataKey: "id", children: [_jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "title", header: "Task Title", sortable: true, style: { width: '35%' } }), _jsx(Column, { field: "status", header: "Status", sortable: true, style: { width: '20%' }, body: (rowData) => (_jsx("span", { className: getStatusColor(rowData.status), children: rowData.status })) }), _jsx(Column, { field: "priority", header: "Priority", sortable: true, style: { width: '15%' }, body: (rowData) => (_jsx("span", { className: getPriorityColor(rowData.priority), children: rowData.priority })) }), _jsx(Column, { field: "assignee", header: "Assignee", sortable: true, style: { width: '20%' } })] }) }))
+};
+export const WithSelection = {
+    render: () => {
+        const [selectedTask, setSelectedTask] = useState();
+        return (_jsxs("div", { className: "p-4", children: [_jsxs(DataTableForObservableQuery, { query: TasksQuery, emptyMessage: "No tasks found", dataKey: "id", selection: selectedTask, onSelectionChange: (e) => setSelectedTask(e.value), children: [_jsx(Column, { selectionMode: "single", headerStyle: { width: '3rem' } }), _jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "title", header: "Task Title", sortable: true, style: { width: '35%' } }), _jsx(Column, { field: "status", header: "Status", sortable: true, style: { width: '20%' }, body: (rowData) => (_jsx("span", { className: getStatusColor(rowData.status), children: rowData.status })) }), _jsx(Column, { field: "assignee", header: "Assignee", sortable: true, style: { width: '20%' } })] }), selectedTask && (_jsxs("div", { className: "mt-4 p-4 border rounded", children: [_jsx("h3", { className: "font-bold mb-2", children: "Selected Task:" }), _jsxs("p", { children: [_jsx("strong", { children: "Title:" }), " ", selectedTask.title] }), _jsxs("p", { children: [_jsx("strong", { children: "Status:" }), " ", selectedTask.status] }), _jsxs("p", { children: [_jsx("strong", { children: "Priority:" }), " ", selectedTask.priority] }), _jsxs("p", { children: [_jsx("strong", { children: "Assignee:" }), " ", selectedTask.assignee] })] }))] }));
+    }
+};
 //# sourceMappingURL=DataTableForObservableQuery.stories.js.map

package/dist/esm/DataTables/DataTableForObservableQuery.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.stories.js","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,+BAA+B,CAAC;AACtD,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,wCAAwC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAEzF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"DataTableForObservableQuery.stories.js","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/DataTables/DataTableForQuery.d.ts

@@ -12,6 +12,7 @@ export interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArg
     onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;
     globalFilterFields?: string[] | undefined;
     defaultFilters?: DataTableFilterMeta;
+    clientFiltering?: boolean;
 }
 export declare const DataTableForQuery: <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTableForQuery.d.ts.map

package/dist/esm/DataTables/DataTableForQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAC3G,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAU,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAO5C,MAAM,WAAW,sBAAsB,CAAC,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAIxI,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACxC;AASD,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,sBAAsB,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CA4BnM,CAAC"}
+{"version":3,"file":"DataTableForQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAU,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAKpD,MAAM,WAAW,sBAAsB,CAAC,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAIxI,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAKrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,sBAAsB,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CAyDnM,CAAC"}

package/dist/esm/DataTables/DataTableForQuery.js

@@ -1,14 +1,32 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { DataTable } from 'primereact/datatable';
+import { Paginator } from 'primereact/paginator';
 import { Paging } from '@cratis/arc/queries';
 import { useQueryWithPaging } from '@cratis/arc.react/queries';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 
 const paging = new Paging(0, 20);
 const DataTableForQuery = (props) => {
     const [filters, setFilters] = useState(props.defaultFilters ?? {});
+    const [filteredTotal, setFilteredTotal] = useState(undefined);
     const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);
-    return (jsx(DataTable, { value: result.data, lazy: true, rows: paging.pageSize, totalRecords: result.paging.totalItems, paginator: true, alwaysShowPaginator: false, first: result.paging.page * paging.pageSize, onPage: (e) => setPage(e.page ?? 0), scrollable: true, scrollHeight: 'flex', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => setFilters(e.filters), globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }));
+    const containerRef = useRef(null);
+    const isClientFiltering = props.clientFiltering === true;
+    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    return (jsxs("div", { ref: containerRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            border: '1px solid var(--surface-border)',
+            borderRadius: 'var(--border-radius)',
+            overflow: 'hidden'
+        }, children: [jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: jsx(DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
+                        setFilters(e.filters);
+                        if (isClientFiltering) {
+                            const filteredValue = e.filteredValue;
+                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);
+                        }
+                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, style: { minWidth: '100%' }, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--surface-border)', flexShrink: 0 }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
 };
 
 export { DataTableForQuery };

package/dist/esm/DataTables/DataTableForQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForQuery.js","sources":["../../../DataTables/DataTableForQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IQueryFor, Paging } from '@cratis/arc/queries';\nimport { useQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState } from 'react';\n\n \n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional Arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);\n\n    return (\n        <DataTable\n            value={result.data as unknown as object[]}\n            lazy\n            rows={paging.pageSize}\n            totalRecords={result.paging.totalItems}\n            paginator\n            alwaysShowPaginator={false}\n            first={result.paging.page * paging.pageSize}\n            onPage={(e) => setPage(e.page ?? 0)}\n            scrollable\n            scrollHeight={'flex'}\n            selectionMode='single'\n            selection={props.selection}\n            onSelectionChange={props.onSelectionChange}\n            dataKey={props.dataKey}\n            filters={filters}\n            filterDisplay='menu'\n            onFilter={(e) => setFilters(e.filters)}\n            globalFilterFields={props.globalFilterFields}\n            emptyMessage={props.emptyMessage} >\n            {props.children}\n        </DataTable >\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AA6DA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAOzB,MAAM,iBAAiB,GAAG,CAAuG,KAA4D,KAAI;AACpM,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,MAAM,MAAM,OAAO,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AAE3F,IAAA,QACIA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAA,IAAA,EACJ,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,SAAS,EAAA,IAAA,EACT,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,MAAM,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EACnC,UAAU,EAAA,IAAA,EACV,YAAY,EAAE,MAAM,EACpB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,EACtC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAAA,QAAA,EAC/B,KAAK,CAAC,QAAQ,EAAA,CACN;AAErB;;;;"}
+{"version":3,"file":"DataTableForQuery.js","sources":["../../../DataTables/DataTableForQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Paginator } from 'primereact/paginator';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IQueryFor, Paging } from '@cratis/arc/queries';\nimport { useQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState, useRef } from 'react';\n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional Arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n\n    /**\n     * Enable client-side filtering for the data table\n     */\n    clientFiltering?: boolean;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [filteredTotal, setFilteredTotal] = useState<number | undefined>(undefined);\n    const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isClientFiltering = props.clientFiltering === true;\n    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;\n\n    return (\n        <div\n            ref={containerRef}\n            style={{\n                display: 'flex',\n                flexDirection: 'column',\n                height: '100%',\n                border: '1px solid var(--surface-border)',\n                borderRadius: 'var(--border-radius)',\n                overflow: 'hidden'\n            }}>\n            <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>\n                <DataTable\n                    value={result.data as unknown as object[]}\n                    lazy={!isClientFiltering}\n                    rows={paging.pageSize}\n                    totalRecords={totalRecords}\n                    selectionMode='single'\n                    selection={props.selection}\n                    onSelectionChange={props.onSelectionChange}\n                    dataKey={props.dataKey}\n                    filters={filters}\n                    filterDisplay='menu'\n                    onFilter={(e) => {\n                        setFilters(e.filters);\n                        if (isClientFiltering) {\n                            const filteredValue = e.filteredValue as unknown[] | undefined;\n                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);\n                        }\n                    }}\n                    globalFilterFields={props.globalFilterFields}\n                    emptyMessage={props.emptyMessage}\n                    style={{ minWidth: '100%' }}>\n                    {props.children}\n                </DataTable>\n            </div>\n\n            {result.paging.totalItems > 0 && (\n                <div style={{ borderTop: '1px solid var(--surface-border)', flexShrink: 0 }}>\n                    <Paginator\n                        first={result.paging.page * paging.pageSize}\n                        rows={paging.pageSize}\n                        totalRecords={result.paging.totalItems}\n                        onPageChange={(e) => setPage(e.page)}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAiEA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAOzB,MAAM,iBAAiB,GAAG,CAAuG,KAA4D,KAAI;AACpM,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC;IACjF,MAAM,CAAC,MAAM,MAAM,OAAO,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AAC3F,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,eAAe,KAAK,IAAI;AACxD,IAAA,MAAM,YAAY,GAAG,iBAAiB,IAAI,aAAa,KAAK,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU;AAEhH,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;AACH,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,iCAAiC;AACzC,YAAA,YAAY,EAAE,sBAAsB;AACpC,YAAA,QAAQ,EAAE;AACb,SAAA,EAAA,QAAA,EAAA,CACDC,aAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EACnDA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAE,CAAC,iBAAiB,EACxB,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAI;AACZ,wBAAA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;wBACrB,IAAI,iBAAiB,EAAE;AACnB,4BAAA,MAAM,aAAa,GAAG,CAAC,CAAC,aAAsC;AAC9D,4BAAA,gBAAgB,CAAC,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC;wBACtE;oBACJ,CAAC,EACD,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAC1B,KAAK,CAAC,QAAQ,EAAA,CACP,EAAA,CACV,EAEL,MAAM,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,KACzBA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,iCAAiC,EAAE,UAAU,EAAE,CAAC,EAAE,YACvEA,GAAA,CAAC,SAAS,IACN,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,YAAY,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GACtC,EAAA,CACA,CACT,CAAA,EAAA,CACC;AAEd;;;;"}

package/dist/esm/DataTables/DataTableForQuery.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { DataTableForQuery } from './DataTableForQuery';
+declare const meta: Meta<typeof DataTableForQuery>;
+export default meta;
+type Story = StoryObj<typeof DataTableForQuery>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
 //# sourceMappingURL=DataTableForQuery.stories.d.ts.map

package/dist/esm/DataTables/DataTableForQuery.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAA+E;AAE/E,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"DataTableForQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAKxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAGxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAyBhD,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAC"}

package/dist/esm/DataTables/DataTableForQuery.stories.js

@@ -1,6 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './DataTableForQuery';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'DataTables/DataTableForQuery', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DataTableForQuery } from './DataTableForQuery';
+import { Column } from 'primereact/column';
+import { QueryFor } from '@cratis/arc/queries';
+const meta = {
+    title: 'DataTables/DataTableForQuery',
+    component: DataTableForQuery,
+};
+export default meta;
+class ProductsQuery extends QueryFor {
+    route = '/api/products';
+    routeTemplate = '/api/products';
+    defaultValue = { id: 0, name: '', category: '', price: 0, inStock: false };
+    parameterDescriptors = [];
+    get requiredRequestParameters() {
+        return [];
+    }
+    constructor() {
+        super(Object, false);
+    }
+}
+export const Default = {
+    render: () => (_jsx("div", { className: "p-4", children: _jsxs(DataTableForQuery, { query: ProductsQuery, emptyMessage: "No products found", dataKey: "id", children: [_jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "name", header: "Product Name", sortable: true, style: { width: '30%' } }), _jsx(Column, { field: "category", header: "Category", sortable: true, style: { width: '20%' } }), _jsx(Column, { field: "price", header: "Price", sortable: true, style: { width: '20%' }, body: (rowData) => `$${rowData.price.toFixed(2)}` }), _jsx(Column, { field: "inStock", header: "In Stock", sortable: true, style: { width: '20%' }, body: (rowData) => (_jsx("span", { className: rowData.inStock ? 'text-green-600' : 'text-red-600', children: rowData.inStock ? 'Yes' : 'No' })) })] }) }))
+};
+export const WithSelection = {
+    render: () => {
+        const [selectedProduct, setSelectedProduct] = useState();
+        return (_jsxs("div", { className: "p-4", children: [_jsxs(DataTableForQuery, { query: ProductsQuery, emptyMessage: "No products found", dataKey: "id", selection: selectedProduct, onSelectionChange: (e) => setSelectedProduct(e.value), children: [_jsx(Column, { selectionMode: "single", headerStyle: { width: '3rem' } }), _jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "name", header: "Product Name", sortable: true, style: { width: '30%' } }), _jsx(Column, { field: "category", header: "Category", sortable: true, style: { width: '20%' } }), _jsx(Column, { field: "price", header: "Price", sortable: true, style: { width: '20%' }, body: (rowData) => `$${rowData.price.toFixed(2)}` })] }), selectedProduct && (_jsxs("div", { className: "mt-4 p-4 border rounded", children: [_jsx("h3", { className: "font-bold mb-2", children: "Selected Product:" }), _jsxs("p", { children: [_jsx("strong", { children: "Name:" }), " ", selectedProduct.name] }), _jsxs("p", { children: [_jsx("strong", { children: "Category:" }), " ", selectedProduct.category] }), _jsxs("p", { children: [_jsx("strong", { children: "Price:" }), " $", selectedProduct.price.toFixed(2)] }), _jsxs("p", { children: [_jsx("strong", { children: "In Stock:" }), " ", selectedProduct.inStock ? 'Yes' : 'No'] })] }))] }));
+    }
+};
 //# sourceMappingURL=DataTableForQuery.stories.js.map