@akinon/akitable 0.3.0 → 0.3.5

package/dist/cjs/akitable.css

@@ -0,0 +1,33 @@
+.akitable-container {
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+
+/* For some weird reason, antd does not allow overriding
+   styles for empty component. Needed to override it w/ css
+ */
+.akitable-container .akinon-empty {
+  font-size: 1.5rem;
+  text-align: center;
+  margin-bottom: 5rem;
+  margin-top: 5rem;
+}
+
+.akitable-container .akinon-empty .akinon-empty-image svg ellipse {
+  fill: var(--color-neutral-200);
+}
+
+.akitable-container .akinon-empty .akinon-empty-image svg path {
+  fill: var(--color-neutral-150);
+}
+
+.akitable-container .akinon-empty .akinon-empty-image svg g {
+  stroke: var(--color-neutral-300);
+}
+
+.akitable-container .akinon-empty .akinon-empty-description {
+  color: var(--color-neutral-400);
+  font-size: 1rem;
+  margin-top: 1rem;
+}

package/dist/cjs/akitable.d.ts

@@ -1,4 +1,4 @@
-import './index.css';
+import './akitable.css';
 import React from 'react';
 import { AkitableProps } from './types';
 export declare const Akitable: (props: AkitableProps) => React.JSX.Element;

package/dist/cjs/akitable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7E,eAAO,MAAM,QAAQ,UAAW,aAAa,sBA4D5C,CAAC"}
+{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAIxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7E,eAAO,MAAM,QAAQ,UAAW,aAAa,sBA8D5C,CAAC"}

package/dist/cjs/akitable.js

@@ -1,7 +1,9 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Akitable = void 0;
-require("./index.css");
+require("./akitable.css");
+const react_error_boundary_1 = require("react-error-boundary");
 const antd_1 = require("antd");
 const react_1 = require("react");
 const akitable_context_1 = require("./akitable-context");
@@ -10,6 +12,7 @@ const controls_1 = require("./components/controls");
 const datatable_1 = require("./components/datatable");
 const footer_1 = require("./components/footer");
 const header_1 = require("./components/header");
+const error_1 = require("./components/error");
 const Akitable = (props) => {
     const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick } = props;
     let parsedData = [];
@@ -18,20 +21,21 @@ const Akitable = (props) => {
     // If not, table data should be accessed from type AkitableData.
     if (!!pagination) {
         const result = data;
-        total = result.count;
-        parsedData = result.results;
+        total = (result === null || result === void 0 ? void 0 : result.count) || 0;
+        parsedData = (result === null || result === void 0 ? void 0 : result.results) || [];
     }
     else {
         const result = data;
-        total = result.length;
-        parsedData = result;
+        total = (result === null || result === void 0 ? void 0 : result.length) || 0;
+        parsedData = result || [];
     }
-    return (react_1.default.createElement(akitable_context_1.AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
-        react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
-            react_1.default.createElement("div", { className: "akitable-container" },
-                react_1.default.createElement(header_1.AkitableHeader, Object.assign({}, header)),
-                react_1.default.createElement(controls_1.AkitableControls, null),
-                react_1.default.createElement(datatable_1.AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, onRowClick: onRowClick }),
-                react_1.default.createElement(footer_1.AkitableFooter, Object.assign({}, footer))))));
+    return (react_1.default.createElement("div", { className: "akitable-container" },
+        react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { fallbackRender: error_1.fallbackRender },
+            react_1.default.createElement(akitable_context_1.AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
+                react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
+                    react_1.default.createElement(header_1.AkitableHeader, Object.assign({}, header)),
+                    react_1.default.createElement(controls_1.AkitableControls, null),
+                    react_1.default.createElement(datatable_1.AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, onRowClick: onRowClick }),
+                    react_1.default.createElement(footer_1.AkitableFooter, Object.assign({}, footer)))))));
 };
 exports.Akitable = Akitable;

package/dist/cjs/components/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAKvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA+D3B,CAAC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAKvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBAgE3B,CAAC"}

package/dist/cjs/components/actions.js

@@ -11,7 +11,7 @@ const i18n_1 = require("../i18n");
 const AkitableActions = () => {
     const { t } = i18n_1.i18n;
     const [selectedAction, setSelectedAction] = react_1.default.useState(undefined);
-    const { actions, isLoading, selectedRowKeys } = (0, akitable_context_1.useAkitableContext)();
+    const { actions, isLoading, selectedRowKeys, pagination } = (0, akitable_context_1.useAkitableContext)();
     const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
         value: index + 1,
         label: action.label
@@ -27,7 +27,7 @@ const AkitableActions = () => {
         action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
     };
     return (react_1.default.createElement("div", { className: "akitable-actions" },
-        react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: handleActionChange, disabled: isLoading, allowClear: true }),
+        react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: handleActionChange, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true }),
         selectedAction && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(ui_button_1.Button, { type: "primary", icon: react_1.default.createElement(icons_1.Icon, { icon: "katalogkontrol", size: 14, style: { position: 'relative', top: 2 } }), disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
             hasSelections && (react_1.default.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));

package/dist/cjs/components/controls.js

@@ -8,7 +8,7 @@ const actions_1 = require("./actions");
 const pagination_1 = require("./pagination");
 const AkitableControls = () => {
     const { actions, pagination } = (0, akitable_context_1.useAkitableContext)();
-    if (!actions && !(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination))
+    if (!actions)
         return null;
     return (react_1.default.createElement("div", { className: "akitable-controls" },
         actions && actions.length > 0 && react_1.default.createElement(actions_1.AkitableActions, null),

package/dist/cjs/components/error.css

@@ -0,0 +1,12 @@
+.akitable-error {
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+}
+
+.akitable-error .akinon-result-title {
+  color: var(--color-ebonyClay-700);
+}
+
+.akitable-error .akinon-result-subtitle {
+  color: var(--color-neutral-400);
+}

package/dist/cjs/components/error.d.ts

@@ -0,0 +1,5 @@
+import './error.css';
+import React from 'react';
+import { FallbackProps } from 'react-error-boundary';
+export declare const fallbackRender: ({ resetErrorBoundary }: FallbackProps) => React.JSX.Element;
+//# sourceMappingURL=error.d.ts.map

package/dist/cjs/components/error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../../src/components/error.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD,eAAO,MAAM,cAAc,2BAA4B,aAAa,sBAiBnE,CAAC"}

package/dist/cjs/components/error.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fallbackRender = void 0;
+require("./error.css");
+const react_1 = require("react");
+const ui_result_1 = require("@akinon/ui-result");
+const ui_button_1 = require("@akinon/ui-button");
+const i18n_1 = require("../i18n");
+const fallbackRender = ({ resetErrorBoundary }) => {
+    const { t } = i18n_1.i18n;
+    return (react_1.default.createElement("div", { className: "akitable-error" },
+        react_1.default.createElement(ui_result_1.Result, { status: "error", title: t('errorTitle'), subTitle: t('errorDescription'), extra: [
+                react_1.default.createElement(ui_button_1.Button, { type: "primary", onClick: resetErrorBoundary }, t('errorButtonText'))
+            ] })));
+};
+exports.fallbackRender = fallbackRender;

package/dist/cjs/components/footer.js

@@ -7,9 +7,9 @@ const react_1 = require("react");
 const akitable_context_1 = require("../akitable-context");
 const pagination_1 = require("./pagination");
 const AkitableFooter = (props) => {
-    const { isLoading } = (0, akitable_context_1.useAkitableContext)();
+    const { isLoading, pagination } = (0, akitable_context_1.useAkitableContext)();
     const { extra } = props;
-    if (!extra)
+    if (!extra && !(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination))
         return null;
     return (react_1.default.createElement("div", { className: "akitable-footer" },
         extra && (react_1.default.createElement("div", { className: "akitable-footer-extra" }, isLoading ? react_1.default.createElement(ui_spin_1.Spin, null) : extra)),

package/dist/cjs/components/header.css

@@ -20,4 +20,5 @@
 
 .akitable-header-extra {
   margin-left: auto;
+  text-align: right;
 }

package/dist/cjs/components/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BA8BxD,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BAyCxD,CAAC"}

package/dist/cjs/components/header.js

@@ -7,9 +7,11 @@ const ui_spin_1 = require("@akinon/ui-spin");
 const react_1 = require("react");
 const akitable_context_1 = require("../akitable-context");
 const i18n_1 = require("../i18n");
+const pagination_1 = require("./pagination");
 const AkitableHeader = (props) => {
-    const { isLoading, pagination } = (0, akitable_context_1.useAkitableContext)();
+    const { isLoading, pagination, actions } = (0, akitable_context_1.useAkitableContext)();
     const { title, extra } = props;
+    const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     if (!title && !extra)
         return null;
     return (react_1.default.createElement("div", { className: "akitable-header" },
@@ -18,8 +20,12 @@ const AkitableHeader = (props) => {
                 title,
                 " ",
                 !isLoading && `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`),
-            !isLoading && (react_1.default.createElement("span", { className: "akitable-header-description" }, i18n_1.i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total }))),
+            !isLoading && !!(pagination === null || pagination === void 0 ? void 0 : pagination.total) && (react_1.default.createElement("span", { className: "akitable-header-description" }, i18n_1.i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total }))),
+            !isLoading && !(pagination === null || pagination === void 0 ? void 0 : pagination.total) && (react_1.default.createElement("span", { className: "akitable-header-description" }, i18n_1.i18n.t('noData'))),
             isLoading && react_1.default.createElement(ui_skeleton_1.Skeleton, { count: 0.7, className: "mt-2" }))),
-        extra && (react_1.default.createElement("div", { className: "akitable-header-extra" }, isLoading ? react_1.default.createElement(ui_spin_1.Spin, null) : extra))));
+        react_1.default.createElement("div", { className: "akitable-header-extra" },
+            extra && react_1.default.createElement("div", { className: "mb-4" }, isLoading ? react_1.default.createElement(ui_spin_1.Spin, null) : extra),
+            !hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div", null,
+                react_1.default.createElement(pagination_1.AkitablePagination, null))))));
 };
 exports.AkitableHeader = AkitableHeader;

package/dist/cjs/components/pagination.js

@@ -10,7 +10,7 @@ const AkitablePagination = () => {
     const { isLoading, pagination, onPaginationChanged } = (0, akitable_context_1.useAkitableContext)();
     const { t } = i18n_1.i18n;
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(ui_pagination_1.Pagination, { simple: true, disabled: isLoading, current: pagination === null || pagination === void 0 ? void 0 : pagination.page, pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.size, pageSizeOptions: [20, 50, 100, 250], total: pagination === null || pagination === void 0 ? void 0 : pagination.total, onChange: (page, size) => onPaginationChanged === null || onPaginationChanged === void 0 ? void 0 : onPaginationChanged(page, size), locale: {
+        react_1.default.createElement(ui_pagination_1.Pagination, { simple: true, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, current: pagination === null || pagination === void 0 ? void 0 : pagination.page, pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.size, pageSizeOptions: [20, 50, 100, 250], total: pagination === null || pagination === void 0 ? void 0 : pagination.total, onChange: (page, size) => onPaginationChanged === null || onPaginationChanged === void 0 ? void 0 : onPaginationChanged(page, size), locale: {
                 items_per_page: t('itemsPerPage')
             } })));
 };

package/dist/cjs/i18n/translations/en.d.ts

@@ -1,9 +1,13 @@
 declare const translations: {
-    readonly resultsFound: "{{count}} result(s) found.";
+    readonly apply: "Apply";
+    readonly errorTitle: "Error!";
+    readonly errorDescription: "There's been an internal error with Akitable component Please try again.";
+    readonly errorButtonText: "Try Again";
     readonly itemsPerPage: "/ page";
+    readonly noData: "No results found.";
+    readonly resultsFound: "{{count}} result(s) found.";
     readonly selectAction: "Select Action";
     readonly selectedCount: "Selected {{count}} record(s).";
-    readonly apply: "Apply";
 };
 export default translations;
 //# sourceMappingURL=en.d.ts.map

package/dist/cjs/i18n/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;CAWR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/cjs/i18n/translations/en.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const translations = {
-    resultsFound: '{{count}} result(s) found.',
+    apply: 'Apply',
+    errorTitle: 'Error!',
+    errorDescription: "There's been an internal error with Akitable component Please try again.",
+    errorButtonText: 'Try Again',
     itemsPerPage: '/ page',
+    noData: 'No results found.',
+    resultsFound: '{{count}} result(s) found.',
     selectAction: 'Select Action',
-    selectedCount: 'Selected {{count}} record(s).',
-    apply: 'Apply'
+    selectedCount: 'Selected {{count}} record(s).'
 };
 exports.default = translations;

package/dist/cjs/i18n/translations/tr.d.ts

@@ -1,9 +1,13 @@
 declare const translations: {
-    readonly resultsFound: "{{count}} sonuç bulundu.";
+    readonly apply: "Uygula";
+    readonly errorTitle: "Hata!";
+    readonly errorDescription: "Akitable bileşeniyle ilgili bir iç hata oluştu. Lütfen tekrar deneyiniz.";
+    readonly errorButtonText: "Tekrar Dene";
     readonly itemsPerPage: "/ sayfa";
+    readonly noData: "Kayıt bulunamadı.";
+    readonly resultsFound: "{{count}} sonuç bulundu.";
     readonly selectAction: "Aksiyon Seçiniz";
     readonly selectedCount: "{{count}} kayit seçildi.";
-    readonly apply: "Uygula";
 };
 export default translations;
 //# sourceMappingURL=tr.d.ts.map

package/dist/cjs/i18n/translations/tr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;CAWR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/cjs/i18n/translations/tr.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const translations = {
-    resultsFound: '{{count}} sonuç bulundu.',
+    apply: 'Uygula',
+    errorTitle: 'Hata!',
+    errorDescription: 'Akitable bileşeniyle ilgili bir iç hata oluştu. Lütfen tekrar deneyiniz.',
+    errorButtonText: 'Tekrar Dene',
     itemsPerPage: '/ sayfa',
+    noData: 'Kayıt bulunamadı.',
+    resultsFound: '{{count}} sonuç bulundu.',
     selectAction: 'Aksiyon Seçiniz',
-    selectedCount: '{{count}} kayit seçildi.',
-    apply: 'Uygula'
+    selectedCount: '{{count}} kayit seçildi.'
 };
 exports.default = translations;

package/dist/esm/akitable.css

@@ -0,0 +1,33 @@
+.akitable-container {
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+
+/* For some weird reason, antd does not allow overriding
+   styles for empty component. Needed to override it w/ css
+ */
+.akitable-container .akinon-empty {
+  font-size: 1.5rem;
+  text-align: center;
+  margin-bottom: 5rem;
+  margin-top: 5rem;
+}
+
+.akitable-container .akinon-empty .akinon-empty-image svg ellipse {
+  fill: var(--color-neutral-200);
+}
+
+.akitable-container .akinon-empty .akinon-empty-image svg path {
+  fill: var(--color-neutral-150);
+}
+
+.akitable-container .akinon-empty .akinon-empty-image svg g {
+  stroke: var(--color-neutral-300);
+}
+
+.akitable-container .akinon-empty .akinon-empty-description {
+  color: var(--color-neutral-400);
+  font-size: 1rem;
+  margin-top: 1rem;
+}

package/dist/esm/akitable.d.ts

@@ -1,4 +1,4 @@
-import './index.css';
+import './akitable.css';
 import React from 'react';
 import { AkitableProps } from './types';
 export declare const Akitable: (props: AkitableProps) => React.JSX.Element;

package/dist/esm/akitable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7E,eAAO,MAAM,QAAQ,UAAW,aAAa,sBA4D5C,CAAC"}
+{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAIxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAuC,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7E,eAAO,MAAM,QAAQ,UAAW,aAAa,sBA8D5C,CAAC"}

package/dist/esm/akitable.js

@@ -1,4 +1,6 @@
-import './index.css';
+'use client';
+import './akitable.css';
+import { ErrorBoundary } from 'react-error-boundary';
 import { ConfigProvider } from 'antd';
 import React from 'react';
 import { AkitableProvider } from './akitable-context';
@@ -7,6 +9,7 @@ import { AkitableControls } from './components/controls';
 import { AkitableDataTable } from './components/datatable';
 import { AkitableFooter } from './components/footer';
 import { AkitableHeader } from './components/header';
+import { fallbackRender } from './components/error';
 export const Akitable = (props) => {
     const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick } = props;
     let parsedData = [];
@@ -15,19 +18,20 @@ export const Akitable = (props) => {
     // If not, table data should be accessed from type AkitableData.
     if (!!pagination) {
         const result = data;
-        total = result.count;
-        parsedData = result.results;
+        total = (result === null || result === void 0 ? void 0 : result.count) || 0;
+        parsedData = (result === null || result === void 0 ? void 0 : result.results) || [];
     }
     else {
         const result = data;
-        total = result.length;
-        parsedData = result;
+        total = (result === null || result === void 0 ? void 0 : result.length) || 0;
+        parsedData = result || [];
     }
-    return (React.createElement(AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
-        React.createElement(ConfigProvider, { theme: themeOverrides },
-            React.createElement("div", { className: "akitable-container" },
-                React.createElement(AkitableHeader, Object.assign({}, header)),
-                React.createElement(AkitableControls, null),
-                React.createElement(AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, onRowClick: onRowClick }),
-                React.createElement(AkitableFooter, Object.assign({}, footer))))));
+    return (React.createElement("div", { className: "akitable-container" },
+        React.createElement(ErrorBoundary, { fallbackRender: fallbackRender },
+            React.createElement(AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
+                React.createElement(ConfigProvider, { theme: themeOverrides },
+                    React.createElement(AkitableHeader, Object.assign({}, header)),
+                    React.createElement(AkitableControls, null),
+                    React.createElement(AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, onRowClick: onRowClick }),
+                    React.createElement(AkitableFooter, Object.assign({}, footer)))))));
 };

package/dist/esm/components/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAKvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA+D3B,CAAC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAKvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBAgE3B,CAAC"}

package/dist/esm/components/actions.js

@@ -8,7 +8,7 @@ import { i18n } from '../i18n';
 export const AkitableActions = () => {
     const { t } = i18n;
     const [selectedAction, setSelectedAction] = React.useState(undefined);
-    const { actions, isLoading, selectedRowKeys } = useAkitableContext();
+    const { actions, isLoading, selectedRowKeys, pagination } = useAkitableContext();
     const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
         value: index + 1,
         label: action.label
@@ -24,7 +24,7 @@ export const AkitableActions = () => {
         action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
     };
     return (React.createElement("div", { className: "akitable-actions" },
-        React.createElement(Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: handleActionChange, disabled: isLoading, allowClear: true }),
+        React.createElement(Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: handleActionChange, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true }),
         selectedAction && (React.createElement(React.Fragment, null,
             React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { icon: "katalogkontrol", size: 14, style: { position: 'relative', top: 2 } }), disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
             hasSelections && (React.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));

package/dist/esm/components/controls.js

@@ -5,7 +5,7 @@ import { AkitableActions } from './actions';
 import { AkitablePagination } from './pagination';
 export const AkitableControls = () => {
     const { actions, pagination } = useAkitableContext();
-    if (!actions && !(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination))
+    if (!actions)
         return null;
     return (React.createElement("div", { className: "akitable-controls" },
         actions && actions.length > 0 && React.createElement(AkitableActions, null),

package/dist/esm/components/error.css

@@ -0,0 +1,12 @@
+.akitable-error {
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+}
+
+.akitable-error .akinon-result-title {
+  color: var(--color-ebonyClay-700);
+}
+
+.akitable-error .akinon-result-subtitle {
+  color: var(--color-neutral-400);
+}

package/dist/esm/components/error.d.ts

@@ -0,0 +1,5 @@
+import './error.css';
+import React from 'react';
+import { FallbackProps } from 'react-error-boundary';
+export declare const fallbackRender: ({ resetErrorBoundary }: FallbackProps) => React.JSX.Element;
+//# sourceMappingURL=error.d.ts.map

package/dist/esm/components/error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../../src/components/error.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD,eAAO,MAAM,cAAc,2BAA4B,aAAa,sBAiBnE,CAAC"}

package/dist/esm/components/error.js

@@ -0,0 +1,12 @@
+import './error.css';
+import React from 'react';
+import { Result } from '@akinon/ui-result';
+import { Button } from '@akinon/ui-button';
+import { i18n } from '../i18n';
+export const fallbackRender = ({ resetErrorBoundary }) => {
+    const { t } = i18n;
+    return (React.createElement("div", { className: "akitable-error" },
+        React.createElement(Result, { status: "error", title: t('errorTitle'), subTitle: t('errorDescription'), extra: [
+                React.createElement(Button, { type: "primary", onClick: resetErrorBoundary }, t('errorButtonText'))
+            ] })));
+};

package/dist/esm/components/footer.js

@@ -4,9 +4,9 @@ import React from 'react';
 import { useAkitableContext } from '../akitable-context';
 import { AkitablePagination } from './pagination';
 export const AkitableFooter = (props) => {
-    const { isLoading } = useAkitableContext();
+    const { isLoading, pagination } = useAkitableContext();
     const { extra } = props;
-    if (!extra)
+    if (!extra && !(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination))
         return null;
     return (React.createElement("div", { className: "akitable-footer" },
         extra && (React.createElement("div", { className: "akitable-footer-extra" }, isLoading ? React.createElement(Spin, null) : extra)),

package/dist/esm/components/header.css

@@ -20,4 +20,5 @@
 
 .akitable-header-extra {
   margin-left: auto;
+  text-align: right;
 }

package/dist/esm/components/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BA8BxD,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BAyCxD,CAAC"}

package/dist/esm/components/header.js

@@ -4,9 +4,11 @@ import { Spin } from '@akinon/ui-spin';
 import React from 'react';
 import { useAkitableContext } from '../akitable-context';
 import { i18n } from '../i18n';
+import { AkitablePagination } from './pagination';
 export const AkitableHeader = (props) => {
-    const { isLoading, pagination } = useAkitableContext();
+    const { isLoading, pagination, actions } = useAkitableContext();
     const { title, extra } = props;
+    const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     if (!title && !extra)
         return null;
     return (React.createElement("div", { className: "akitable-header" },
@@ -15,7 +17,11 @@ export const AkitableHeader = (props) => {
                 title,
                 " ",
                 !isLoading && `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`),
-            !isLoading && (React.createElement("span", { className: "akitable-header-description" }, i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total }))),
+            !isLoading && !!(pagination === null || pagination === void 0 ? void 0 : pagination.total) && (React.createElement("span", { className: "akitable-header-description" }, i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total }))),
+            !isLoading && !(pagination === null || pagination === void 0 ? void 0 : pagination.total) && (React.createElement("span", { className: "akitable-header-description" }, i18n.t('noData'))),
             isLoading && React.createElement(Skeleton, { count: 0.7, className: "mt-2" }))),
-        extra && (React.createElement("div", { className: "akitable-header-extra" }, isLoading ? React.createElement(Spin, null) : extra))));
+        React.createElement("div", { className: "akitable-header-extra" },
+            extra && React.createElement("div", { className: "mb-4" }, isLoading ? React.createElement(Spin, null) : extra),
+            !hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div", null,
+                React.createElement(AkitablePagination, null))))));
 };

package/dist/esm/components/pagination.js

@@ -7,7 +7,7 @@ export const AkitablePagination = () => {
     const { isLoading, pagination, onPaginationChanged } = useAkitableContext();
     const { t } = i18n;
     return (React.createElement("div", null,
-        React.createElement(Pagination, { simple: true, disabled: isLoading, current: pagination === null || pagination === void 0 ? void 0 : pagination.page, pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.size, pageSizeOptions: [20, 50, 100, 250], total: pagination === null || pagination === void 0 ? void 0 : pagination.total, onChange: (page, size) => onPaginationChanged === null || onPaginationChanged === void 0 ? void 0 : onPaginationChanged(page, size), locale: {
+        React.createElement(Pagination, { simple: true, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, current: pagination === null || pagination === void 0 ? void 0 : pagination.page, pageSize: pagination === null || pagination === void 0 ? void 0 : pagination.size, pageSizeOptions: [20, 50, 100, 250], total: pagination === null || pagination === void 0 ? void 0 : pagination.total, onChange: (page, size) => onPaginationChanged === null || onPaginationChanged === void 0 ? void 0 : onPaginationChanged(page, size), locale: {
                 items_per_page: t('itemsPerPage')
             } })));
 };

package/dist/esm/i18n/translations/en.d.ts

@@ -1,9 +1,13 @@
 declare const translations: {
-    readonly resultsFound: "{{count}} result(s) found.";
+    readonly apply: "Apply";
+    readonly errorTitle: "Error!";
+    readonly errorDescription: "There's been an internal error with Akitable component Please try again.";
+    readonly errorButtonText: "Try Again";
     readonly itemsPerPage: "/ page";
+    readonly noData: "No results found.";
+    readonly resultsFound: "{{count}} result(s) found.";
     readonly selectAction: "Select Action";
     readonly selectedCount: "Selected {{count}} record(s).";
-    readonly apply: "Apply";
 };
 export default translations;
 //# sourceMappingURL=en.d.ts.map

package/dist/esm/i18n/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;CAWR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/i18n/translations/en.js

@@ -1,8 +1,12 @@
 const translations = {
-    resultsFound: '{{count}} result(s) found.',
+    apply: 'Apply',
+    errorTitle: 'Error!',
+    errorDescription: "There's been an internal error with Akitable component Please try again.",
+    errorButtonText: 'Try Again',
     itemsPerPage: '/ page',
+    noData: 'No results found.',
+    resultsFound: '{{count}} result(s) found.',
     selectAction: 'Select Action',
-    selectedCount: 'Selected {{count}} record(s).',
-    apply: 'Apply'
+    selectedCount: 'Selected {{count}} record(s).'
 };
 export default translations;

package/dist/esm/i18n/translations/tr.d.ts

@@ -1,9 +1,13 @@
 declare const translations: {
-    readonly resultsFound: "{{count}} sonuç bulundu.";
+    readonly apply: "Uygula";
+    readonly errorTitle: "Hata!";
+    readonly errorDescription: "Akitable bileşeniyle ilgili bir iç hata oluştu. Lütfen tekrar deneyiniz.";
+    readonly errorButtonText: "Tekrar Dene";
     readonly itemsPerPage: "/ sayfa";
+    readonly noData: "Kayıt bulunamadı.";
+    readonly resultsFound: "{{count}} sonuç bulundu.";
     readonly selectAction: "Aksiyon Seçiniz";
     readonly selectedCount: "{{count}} kayit seçildi.";
-    readonly apply: "Uygula";
 };
 export default translations;
 //# sourceMappingURL=tr.d.ts.map

package/dist/esm/i18n/translations/tr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;CAWR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/i18n/translations/tr.js

@@ -1,8 +1,12 @@
 const translations = {
-    resultsFound: '{{count}} sonuç bulundu.',
+    apply: 'Uygula',
+    errorTitle: 'Hata!',
+    errorDescription: 'Akitable bileşeniyle ilgili bir iç hata oluştu. Lütfen tekrar deneyiniz.',
+    errorButtonText: 'Tekrar Dene',
     itemsPerPage: '/ sayfa',
+    noData: 'Kayıt bulunamadı.',
+    resultsFound: '{{count}} sonuç bulundu.',
     selectAction: 'Aksiyon Seçiniz',
-    selectedCount: '{{count}} kayit seçildi.',
-    apply: 'Uygula'
+    selectedCount: '{{count}} kayit seçildi.'
 };
 export default translations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/akitable",
-  "version": "0.3.0",
+  "version": "0.3.5",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -11,27 +11,29 @@
   "dependencies": {
     "antd": "5.17.0",
     "clsx": "^2.0.0",
-    "@akinon/akilocale": "0.10.0",
+    "react-error-boundary": "^4.0.13",
+    "@akinon/akilocale": "0.10.1",
     "@akinon/icons": "0.4.0",
     "@akinon/ui-button": "0.5.0",
+    "@akinon/ui-pagination": "0.3.0",
+    "@akinon/ui-result": "0.1.0",
     "@akinon/ui-card": "0.3.0",
+    "@akinon/ui-select": "0.3.0",
     "@akinon/ui-skeleton": "0.3.0",
-    "@akinon/ui-spin": "0.3.0",
     "@akinon/ui-space": "0.3.0",
-    "@akinon/ui-theme": "0.5.0",
-    "@akinon/ui-typography": "0.3.0",
+    "@akinon/ui-spin": "0.3.0",
     "@akinon/ui-table": "0.3.0",
-    "@akinon/ui-select": "0.3.0",
-    "@akinon/ui-pagination": "0.3.0"
+    "@akinon/ui-theme": "0.5.0",
+    "@akinon/ui-typography": "0.3.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/eslint-config": "0.1.0",
+    "@akinon/typescript-config": "0.2.0",
     "@akinon/vite-config": "0.4.0",
-    "@akinon/typescript-config": "0.2.0"
+    "@akinon/eslint-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -51,7 +53,7 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 src/*.css dist/esm && copyfiles -u 1 src/*.css dist/cjs && copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
     "clean": "rimraf dist/",
     "lint": "eslint *.ts*",
     "test": "vitest run",