@akinon/akitable 0.2.1 → 0.3.1

package/dist/cjs/index.js

@@ -1,96 +1,18 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Akitable = void 0;
-require("./index.css");
-const ui_theme_1 = require("@akinon/ui-theme");
-const antd_1 = require("antd");
-const React = require("react");
-const components_1 = require("./components");
-const context_1 = require("./context");
-/**
- * Akitable component
- * @param {AkitableProps} props
- * @returns {React.ReactElement}
- */
-const Akitable = (_a) => {
-    var { useAkitablePagination, title, description, headerActions, headerMiddleBlock } = _a, restProps = __rest(_a, ["useAkitablePagination", "title", "description", "headerActions", "headerMiddleBlock"]);
-    return (React.createElement("div", { className: "akitable-container" },
-        React.createElement(antd_1.ConfigProvider, { prefixCls: "akinon", theme: {
-                components: {
-                    Checkbox: {
-                        colorBgBase: ui_theme_1.theme.colors.neutral['50'],
-                        algorithm: antd_1.theme.defaultAlgorithm
-                    },
-                    Card: {
-                        paddingLG: 0,
-                        colorBgContainer: ui_theme_1.theme.colors.neutral['50'],
-                        colorBgBase: ui_theme_1.theme.colors.neutral['50'],
-                        colorTextBase: ui_theme_1.theme.colors.neutral['950'],
-                        algorithm: antd_1.theme.defaultAlgorithm
-                    },
-                    Typography: {
-                        colorTextHeading: ui_theme_1.theme.colors.neutral['950'],
-                        colorText: ui_theme_1.theme.colors.neutral['500'],
-                        titleMarginBottom: 0,
-                        fontWeightStrong: 500
-                    },
-                    Select: {
-                        colorText: ui_theme_1.theme.colors.neutral['950'],
-                        selectorBg: ui_theme_1.theme.colors.neutral['50'],
-                        colorBgElevated: ui_theme_1.theme.colors.neutral['100'],
-                        colorBorder: ui_theme_1.theme.colors.neutral['350'],
-                        colorTextQuaternary: ui_theme_1.theme.colors.neutral['500'],
-                        optionSelectedBg: ui_theme_1.theme.colors.azure['100'],
-                        algorithm: antd_1.theme.defaultAlgorithm
-                    },
-                    Pagination: {
-                        colorText: ui_theme_1.theme.colors.neutral['950'],
-                        itemInputBg: ui_theme_1.theme.colors.neutral['75'],
-                        colorBorder: ui_theme_1.theme.colors.neutral['350'],
-                        borderRadius: 0,
-                        itemActiveBg: ui_theme_1.theme.colors.neutral['500'],
-                        colorTextDisabled: ui_theme_1.theme.colors.neutral['375'],
-                        marginXS: 0,
-                        itemSizeSM: 38
-                    },
-                    Spin: {
-                        colorBgContainer: ui_theme_1.theme.colors.neutral['50']
-                    },
-                    Table: {
-                        headerBorderRadius: 0,
-                        headerBg: ui_theme_1.theme.colors.neutral['150'],
-                        headerColor: ui_theme_1.theme.colors.neutral['500'],
-                        borderColor: ui_theme_1.theme.colors.neutral['350'],
-                        fontSize: ui_theme_1.fontSize * 0.875,
-                        colorBgContainer: ui_theme_1.theme.colors.neutral['50'],
-                        colorText: ui_theme_1.theme.colors.neutral['500'],
-                        cellPaddingInline: 28,
-                        colorBgBase: ui_theme_1.theme.colors.neutral['50'],
-                        algorithm: antd_1.theme.defaultAlgorithm
-                    },
-                    Button: {
-                        colorBgBase: ui_theme_1.theme.colors.neutral['50'],
-                        colorTextBase: ui_theme_1.theme.colors.azure['500'],
-                        colorBorder: ui_theme_1.theme.colors.azure['500'],
-                        borderColorDisabled: ui_theme_1.theme.colors.neutral['350'],
-                        algorithm: antd_1.theme.defaultAlgorithm
-                    }
-                }
-            } },
-            React.createElement(context_1.AkitableContextProvider, { useAkitablePagination: useAkitablePagination, headerActions: headerActions },
-                React.createElement(components_1.AkitableHeader, { title: title, description: description, headerMiddleBlock: headerMiddleBlock }),
-                React.createElement(components_1.AntdTable, Object.assign({}, restProps)),
-                React.createElement(components_1.AkitableFooter, null)))));
-};
-exports.Akitable = Akitable;
+__exportStar(require("./akitable"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/types.d.ts

@@ -1,18 +1,52 @@
-/// <reference types="react" />
-export type AkitablePagination = {
-    currentPage: number;
-    pageSize: number;
-    totalDataLength: number;
-    paginationLabel?: string;
-};
-export type UseAkitablePagination = [
-    AkitablePagination,
-    React.Dispatch<React.SetStateAction<AkitablePagination>>
-];
-export type HeaderAction<IData> = {
+import { TableColumnType } from 'antd';
+import { ReactNode } from 'react';
+type RowClickEvent = (record: AkitableData, event?: React.MouseEvent<HTMLElement>, rowIndex?: number) => void;
+export type PaginationChangeEvent = (page: number, size: number) => void;
+export interface AkitableProps {
+    actions?: AkitableAction[];
+    columns: AkitableColumn[];
+    data: AkitableData[] | AkitablePaginatedData;
+    header?: AkitableHeaderProps;
+    footer?: AkitableFooterProps;
+    isLoading?: boolean;
+    pagination?: AkitablePaginationProps;
+    rowKey: string;
+    onPaginationChanged?: PaginationChangeEvent;
+    onRowClick?: RowClickEvent;
+}
+export interface AkitableHeaderProps {
+    title?: string;
+    extra?: ReactNode;
+}
+export interface AkitableFooterProps {
+    extra?: ReactNode;
+}
+export interface AkitableDataTableProps {
+    columns: AkitableColumn[];
+    data: AkitableData[];
+    rowKey: string;
+    onRowClick?: RowClickEvent;
+}
+export type AkitablePageSizes = 20 | 50 | 100 | 250;
+export interface AkitablePaginationProps {
+    page: number;
+    size: AkitablePageSizes;
+}
+export interface AkitableColumn extends TableColumnType<AkitableData> {
+    copyable?: boolean;
+}
+export interface AkitableData {
+    [key: string]: any;
+}
+export interface AkitablePaginatedData {
+    count: number;
+    next?: string | null;
+    previous?: string | null;
+    results: AkitableData[];
+}
+export interface AkitableAction {
     label: string;
-    handler: (selectedRows: IData[]) => void;
-    disabled?: boolean;
-};
-export type AnyObject = Record<string, any>;
+    onSelect: (selectedRowKeys: React.Key[]) => void;
+}
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.tsx"],"names":[],"mappings":";AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,kBAAkB;IAClB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,KAAK,IAAI;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,KAAK,aAAa,GAAG,CACnB,MAAM,EAAE,YAAY,EACpB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EACrC,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;AAEV,MAAM,MAAM,qBAAqB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AAEzE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,YAAY,EAAE,GAAG,qBAAqB,CAAC;IAC7C,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,qBAAqB,CAAC;IAC5C,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAGD,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,YAAY,CAAC;IAEnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAE3B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC;CAClD"}

package/dist/esm/akitable-context.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AkitableAction, AkitablePaginationProps, PaginationChangeEvent } from './types';
+export interface AkitableInternalPaginationProps extends AkitablePaginationProps {
+    total: number;
+    hasPagination: boolean;
+}
+export interface AkitableContextProps {
+    isLoading?: boolean;
+    children?: React.ReactNode;
+    pagination?: AkitableInternalPaginationProps;
+    onPaginationChanged?: PaginationChangeEvent;
+    actions?: AkitableAction[];
+    selectedRowKeys?: React.Key[];
+    setSelectedRowKeys?: React.Dispatch<React.SetStateAction<React.Key[]>>;
+}
+export declare const useAkitableContext: () => AkitableContextProps;
+export declare const AkitableProvider: React.FC<AkitableContextProps>;
+//# sourceMappingURL=akitable-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"akitable-context.d.ts","sourceRoot":"","sources":["../../src/akitable-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAEnE,OAAO,EACL,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,+BACf,SAAQ,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,+BAA+B,CAAC;IAC7C,mBAAmB,CAAC,EAAE,qBAAqB,CAAC;IAC5C,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;CACxE;AAID,eAAO,MAAM,kBAAkB,4BAAoC,CAAC;AAEpE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuB3D,CAAC"}

package/dist/esm/akitable-context.js

@@ -0,0 +1,14 @@
+import React, { createContext, useContext, useState } from 'react';
+const AkitableContext = createContext({});
+export const useAkitableContext = () => useContext(AkitableContext);
+export const AkitableProvider = ({ actions, isLoading, pagination, onPaginationChanged, children }) => {
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    return (React.createElement(AkitableContext.Provider, { value: {
+            actions,
+            isLoading,
+            pagination,
+            onPaginationChanged,
+            selectedRowKeys,
+            setSelectedRowKeys
+        } }, children));
+};

package/dist/esm/akitable.css

@@ -0,0 +1,8 @@
+.akitable-container {
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+
+.akitable-header {
+}

package/dist/esm/akitable.d.ts

@@ -0,0 +1,5 @@
+import './akitable.css';
+import React from 'react';
+import { AkitableProps } from './types';
+export declare const Akitable: (props: AkitableProps) => React.JSX.Element;
+//# sourceMappingURL=akitable.d.ts.map

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

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

package/dist/esm/akitable.js

@@ -0,0 +1,33 @@
+import './akitable.css';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { AkitableProvider } from './akitable-context';
+import { themeOverrides } from './common/theme-overrides';
+import { AkitableControls } from './components/controls';
+import { AkitableDataTable } from './components/datatable';
+import { AkitableFooter } from './components/footer';
+import { AkitableHeader } from './components/header';
+export const Akitable = (props) => {
+    const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick } = props;
+    let parsedData = [];
+    let total;
+    // If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
+    // If not, table data should be accessed from type AkitableData.
+    if (!!pagination) {
+        const result = data;
+        total = result.count;
+        parsedData = result.results;
+    }
+    else {
+        const result = data;
+        total = result.length;
+        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))))));
+};

package/dist/esm/common/theme-overrides.d.ts

@@ -0,0 +1,3 @@
+import { ThemeConfig } from 'antd';
+export declare const themeOverrides: ThemeConfig;
+//# sourceMappingURL=theme-overrides.d.ts.map

package/dist/esm/common/theme-overrides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAE,MAAM,MAAM,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,WAsD5B,CAAC"}

package/dist/esm/common/theme-overrides.js

@@ -0,0 +1,57 @@
+import { theme } from '@akinon/ui-theme';
+import { theme as antdTheme } from 'antd';
+export const themeOverrides = {
+    algorithm: antdTheme.defaultAlgorithm,
+    components: {
+        Checkbox: {
+            colorBgBase: theme.colors.neutral['50'],
+            algorithm: antdTheme.defaultAlgorithm
+        },
+        Card: {
+            paddingLG: 0,
+            colorBgContainer: theme.colors.neutral['50'],
+            colorBgBase: theme.colors.neutral['50'],
+            colorTextBase: theme.colors.neutral['950'],
+            algorithm: antdTheme.defaultAlgorithm
+        },
+        Typography: {
+            colorTextHeading: theme.colors.neutral['950'],
+            colorText: theme.colors.neutral['500'],
+            titleMarginBottom: 0,
+            fontWeightStrong: 500
+        },
+        Select: {
+            colorBgContainerDisabled: theme.colors.neutral['50'],
+            colorTextDisabled: theme.colors.neutral['375'],
+            colorTextPlaceholder: theme.colors.neutral['375'],
+            colorText: theme.colors.neutral['950'],
+            selectorBg: theme.colors.neutral['50'],
+            colorBgElevated: theme.colors.neutral['100'],
+            colorBorder: theme.colors.neutral['350'],
+            colorTextQuaternary: theme.colors.neutral['500'],
+            optionSelectedBg: theme.colors.azure['100'],
+            algorithm: antdTheme.defaultAlgorithm
+        },
+        Spin: {
+            colorBgContainer: theme.colors.neutral['50']
+        },
+        Table: {
+            headerBorderRadius: 0,
+            headerBg: theme.colors.neutral['150'],
+            headerColor: theme.colors.ebonyClay['375'],
+            borderColor: theme.colors.neutral['350'],
+            colorBgContainer: theme.colors.neutral['50'],
+            colorText: theme.colors.ebonyClay['900'],
+            cellPaddingInline: 28,
+            colorBgBase: theme.colors.neutral['50'],
+            algorithm: antdTheme.defaultAlgorithm
+        },
+        Button: {
+            colorBgBase: theme.colors.neutral['50'],
+            colorTextBase: theme.colors.azure['500'],
+            colorBorder: theme.colors.azure['500'],
+            borderColorDisabled: theme.colors.neutral['350'],
+            algorithm: antdTheme.defaultAlgorithm
+        }
+    }
+};

package/dist/esm/components/actions.css

@@ -0,0 +1,19 @@
+.akitable-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.akitable-actions .akinon-select {
+  min-width: 200px;
+  height: 38px;
+}
+
+.akitable-actions .akinon-btn {
+  height: 36px;
+}
+
+.akitable-actions .akitable-actions-info {
+  color: var(--color-neutral-400);
+  margin-left: 0.25rem;
+}

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

@@ -0,0 +1,4 @@
+import './actions.css';
+import React from 'react';
+export declare const AkitableActions: () => React.JSX.Element;
+//# sourceMappingURL=actions.d.ts.map

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

@@ -0,0 +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"}

package/dist/esm/components/actions.js

@@ -0,0 +1,31 @@
+import './actions.css';
+import { Icon } from '@akinon/icons';
+import { Button } from '@akinon/ui-button';
+import { Select } from '@akinon/ui-select';
+import React from 'react';
+import { useAkitableContext } from '../akitable-context';
+import { i18n } from '../i18n';
+export const AkitableActions = () => {
+    const { t } = i18n;
+    const [selectedAction, setSelectedAction] = React.useState(undefined);
+    const { actions, isLoading, selectedRowKeys } = useAkitableContext();
+    const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
+        value: index + 1,
+        label: action.label
+    }));
+    const hasSelections = selectedRowKeys && selectedRowKeys.length > 0;
+    const handleActionChange = (value) => {
+        setSelectedAction(value);
+    };
+    const handleActionTrigger = () => {
+        if (!selectedAction || !selectedRowKeys || selectedRowKeys.length === 0)
+            return;
+        const action = actions === null || actions === void 0 ? void 0 : actions.find((_, index) => index === selectedAction - 1);
+        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 }),
+        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.css

@@ -0,0 +1,5 @@
+.akitable-controls {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}

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

@@ -0,0 +1,4 @@
+import './controls.css';
+import React from 'react';
+export declare const AkitableControls: () => React.JSX.Element | null;
+//# sourceMappingURL=controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../src/components/controls.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,gCAe5B,CAAC"}

package/dist/esm/components/controls.js

@@ -0,0 +1,14 @@
+import './controls.css';
+import React from 'react';
+import { useAkitableContext } from '../akitable-context';
+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))
+        return null;
+    return (React.createElement("div", { className: "akitable-controls" },
+        actions && actions.length > 0 && React.createElement(AkitableActions, null),
+        (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div", { className: "ml-auto" },
+            React.createElement(AkitablePagination, null)))));
+};

package/dist/esm/components/datatable.css

@@ -0,0 +1,57 @@
+.akinon-table-wrapper .akinon-table-thead > tr > th {
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+  padding-top: 0.65rem;
+}
+
+.akitable-wrapper {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  margin-bottom: 1rem;
+}
+
+.akinon-table-content {
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+}
+
+.akinon-table-content::-webkit-scrollbar {
+  height: 8px;
+}
+
+.akinon-table-content::-webkit-scrollbar-track {
+  background-color: var(--color-neutral-100);
+  border: none;
+  padding: 1px;
+}
+
+.akinon-table-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-300);
+  border-radius: 3px;
+  border: none;
+}
+
+.akinon-table-row {
+  /* Add background for alternate rows. */
+  &:nth-child(odd) td {
+    background-color: var(--color-neutral-100);
+  }
+}
+
+.akinon-table-row.is-selectable {
+  cursor: pointer;
+
+  & td {
+    transition: background-color 0.2s;
+  }
+
+  &:hover td {
+    background-color: var(--color-blue-100) !important;
+  }
+
+  &:hover td[class*='akinon-table-cell-fix-'] {
+    background-color: var(--color-blue-200) !important;
+  }
+}

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

@@ -0,0 +1,5 @@
+import './datatable.css';
+import React from 'react';
+import { AkitableDataTableProps } from '../types';
+export declare const AkitableDataTable: (props: AkitableDataTableProps) => React.JSX.Element;
+//# sourceMappingURL=datatable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAgB,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEhE,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,sBAsC9D,CAAC"}

package/dist/esm/components/datatable.js

@@ -0,0 +1,25 @@
+import './datatable.css';
+import { Table } from '@akinon/ui-table';
+import clsx from 'clsx';
+import React from 'react';
+import { useAkitableContext } from '../akitable-context';
+export const AkitableDataTable = (props) => {
+    const { isLoading, selectedRowKeys, setSelectedRowKeys, actions } = useAkitableContext();
+    const { columns, data, rowKey, onRowClick } = props;
+    const hasActions = actions && actions.length > 0;
+    const onSelectChange = (newSelectedRowKeys) => {
+        setSelectedRowKeys === null || setSelectedRowKeys === void 0 ? void 0 : setSelectedRowKeys(newSelectedRowKeys);
+    };
+    const rowSelection = {
+        selectedRowKeys,
+        onChange: onSelectChange
+    };
+    return (React.createElement("div", { className: "akitable-wrapper" },
+        React.createElement(Table, { columns: columns, dataSource: data, rowKey: (record) => record[rowKey], bordered: true, rowHoverable: true, pagination: false, scroll: { x: 1500 }, loading: isLoading, onRow: (record, rowIndex) => {
+                return {
+                    onClick: (event) => {
+                        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record, event, rowIndex);
+                    }
+                };
+            }, rowClassName: clsx({ 'is-selectable': !!onRowClick }), rowSelection: hasActions ? rowSelection : undefined })));
+};

package/dist/esm/components/footer.css

@@ -0,0 +1,5 @@
+.akitable-footer {
+  display: flex;
+  /* Setting min-height to prevent cumulative layout shifts. */
+  min-height: 40px;
+}

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

@@ -0,0 +1,5 @@
+import './footer.css';
+import React from 'react';
+import { AkitableFooterProps } from '../types';
+export declare const AkitableFooter: (props: AkitableFooterProps) => React.JSX.Element | null;
+//# sourceMappingURL=footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAW,mBAAmB,6BAkBxD,CAAC"}

package/dist/esm/components/footer.js

@@ -0,0 +1,15 @@
+import './footer.css';
+import { Spin } from '@akinon/ui-spin';
+import React from 'react';
+import { useAkitableContext } from '../akitable-context';
+import { AkitablePagination } from './pagination';
+export const AkitableFooter = (props) => {
+    const { isLoading } = useAkitableContext();
+    const { extra } = props;
+    if (!extra)
+        return null;
+    return (React.createElement("div", { className: "akitable-footer" },
+        extra && (React.createElement("div", { className: "akitable-footer-extra" }, isLoading ? React.createElement(Spin, null) : extra)),
+        React.createElement("div", { className: "ml-auto" },
+            React.createElement(AkitablePagination, null))));
+};

package/dist/esm/components/header.css

@@ -0,0 +1,23 @@
+.akitable-header {
+  display: flex;
+  margin-bottom: 1.5rem;
+  /* Setting min-height to prevent cumulative layout shifts. */
+  min-height: 40px;
+}
+
+.akitable-header-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  color: var(--color-gray-900);
+}
+
+.akitable-header-description {
+  color: var(--color-gray-400);
+}
+
+.akitable-header-extra {
+  margin-left: auto;
+}

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

@@ -0,0 +1,5 @@
+import './header.css';
+import React from 'react';
+import { AkitableHeaderProps } from '../types';
+export declare const AkitableHeader: (props: AkitableHeaderProps) => React.JSX.Element | null;
+//# sourceMappingURL=header.d.ts.map

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

@@ -0,0 +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"}

package/dist/esm/components/header.js

@@ -0,0 +1,21 @@
+import './header.css';
+import { Skeleton } from '@akinon/ui-skeleton';
+import { Spin } from '@akinon/ui-spin';
+import React from 'react';
+import { useAkitableContext } from '../akitable-context';
+import { i18n } from '../i18n';
+export const AkitableHeader = (props) => {
+    const { isLoading, pagination } = useAkitableContext();
+    const { title, extra } = props;
+    if (!title && !extra)
+        return null;
+    return (React.createElement("div", { className: "akitable-header" },
+        title && (React.createElement("div", null,
+            React.createElement("h2", { className: "akitable-header-title" },
+                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 && React.createElement(Skeleton, { count: 0.7, className: "mt-2" }))),
+        extra && (React.createElement("div", { className: "akitable-header-extra" }, isLoading ? React.createElement(Spin, null) : extra))));
+};

package/dist/esm/components/pagination.css

@@ -0,0 +1,3 @@
+.akinon-pagination-options .akinon-select {
+  height: 38px;
+}