@ltht-react/table 1.0.128 → 1.0.129

package/README.md

@@ -1,15 +1,15 @@
-# Select
-
-<!-- STORY -->
-
-### Import
-
-```js
-import Select from '@ltht-react/table'
-```
-
-### Usage
-
-```jsx
-<Table />
-```
+# Select
+
+<!-- STORY -->
+
+### Import
+
+```js
+import Select from '@ltht-react/table'
+```
+
+### Usage
+
+```jsx
+<Table />
+```

package/lib/atoms/questionnaire-withdrawn-table-cell.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-declare const QuestionnaireWithdrawnTableCell: FC<WithdrawnCellProps>;
-export interface WithdrawnCellProps {
-    text?: string;
-}
-export default QuestionnaireWithdrawnTableCell;
+import { FC } from 'react';
+declare const QuestionnaireWithdrawnTableCell: FC<WithdrawnCellProps>;
+export interface WithdrawnCellProps {
+    text?: string;
+}
+export default QuestionnaireWithdrawnTableCell;

package/lib/atoms/questionnaire-withdrawn-table-cell.js

@@ -1,19 +1,19 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var StyledText = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: line-through;\n  color: gray;\n"], ["\n  text-decoration: line-through;\n  color: gray;\n"])));
-var QuestionnaireWithdrawnTableCell = function (_a) {
-    var text = _a.text;
-    return jsx_runtime_1.jsx(StyledText, { children: text !== null && text !== void 0 ? text : '' }, void 0);
-};
-exports.default = QuestionnaireWithdrawnTableCell;
-var templateObject_1;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var StyledText = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: line-through;\n  color: gray;\n"], ["\n  text-decoration: line-through;\n  color: gray;\n"])));
+var QuestionnaireWithdrawnTableCell = function (_a) {
+    var text = _a.text;
+    return jsx_runtime_1.jsx(StyledText, { children: text !== null && text !== void 0 ? text : '' }, void 0);
+};
+exports.default = QuestionnaireWithdrawnTableCell;
+var templateObject_1;
 //# sourceMappingURL=questionnaire-withdrawn-table-cell.js.map

package/lib/index.d.ts

@@ -1,6 +1,6 @@
-import Table, { Header, DataEntity, TableData, CellProps } from './molecules/table';
-import GenericTable from './organisms/generic-table';
-import QuestionnaireTable from './organisms/questionnaire-table';
-import { AdminActionsForQuestionnaire } from './organisms/questionnaire-table-methods';
-export default Table;
-export { Header, TableData, DataEntity, CellProps, GenericTable, QuestionnaireTable, AdminActionsForQuestionnaire };
+import Table, { Header, DataEntity, TableData, CellProps } from './molecules/table';
+import GenericTable from './organisms/generic-table';
+import QuestionnaireTable from './organisms/questionnaire-table';
+import { AdminActionsForQuestionnaire } from './organisms/questionnaire-table-methods';
+export default Table;
+export { Header, TableData, DataEntity, CellProps, GenericTable, QuestionnaireTable, AdminActionsForQuestionnaire };

package/lib/index.js

@@ -1,13 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuestionnaireTable = exports.GenericTable = void 0;
-var table_1 = __importDefault(require("./molecules/table"));
-var generic_table_1 = __importDefault(require("./organisms/generic-table"));
-exports.GenericTable = generic_table_1.default;
-var questionnaire_table_1 = __importDefault(require("./organisms/questionnaire-table"));
-exports.QuestionnaireTable = questionnaire_table_1.default;
-exports.default = table_1.default;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuestionnaireTable = exports.GenericTable = void 0;
+var table_1 = __importDefault(require("./molecules/table"));
+var generic_table_1 = __importDefault(require("./organisms/generic-table"));
+exports.GenericTable = generic_table_1.default;
+var questionnaire_table_1 = __importDefault(require("./organisms/questionnaire-table"));
+exports.QuestionnaireTable = questionnaire_table_1.default;
+exports.default = table_1.default;
 //# sourceMappingURL=index.js.map

package/lib/molecules/table-cell.d.ts

@@ -1,16 +1,16 @@
-import { FC } from 'react';
-import { IconProps } from '@ltht-react/icon';
-import { ActionMenuOption } from '@ltht-react/menu';
-import { Axis } from '@ltht-react/types';
-declare const TableCell: FC<CellProps>;
-export interface CellProps {
-    adminActions?: ActionMenuOption[];
-    isButton?: boolean;
-    text?: string;
-    iconProps?: IconProps;
-    clickHandler?: React.MouseEventHandler<HTMLButtonElement>;
-    customComponentOverride?: JSX.Element;
-    parentStyle?: React.CSSProperties;
-    headerAxis?: Axis;
-}
-export default TableCell;
+import { FC } from 'react';
+import { IconProps } from '@ltht-react/icon';
+import { ActionMenuOption } from '@ltht-react/menu';
+import { Axis } from '@ltht-react/types';
+declare const TableCell: FC<CellProps>;
+export interface CellProps {
+    adminActions?: ActionMenuOption[];
+    isButton?: boolean;
+    text?: string;
+    iconProps?: IconProps;
+    clickHandler?: React.MouseEventHandler<HTMLButtonElement>;
+    customComponentOverride?: JSX.Element;
+    parentStyle?: React.CSSProperties;
+    headerAxis?: Axis;
+}
+export default TableCell;

package/lib/molecules/table-cell.js

@@ -1,96 +1,96 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var button_1 = require("@ltht-react/button");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var icon_1 = __importStar(require("@ltht-react/icon"));
-var menu_1 = __importDefault(require("@ltht-react/menu"));
-var styles_1 = require("@ltht-react/styles");
-var StyledIconText = styled_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 0.4rem;\n"], ["\n  margin-left: 0.4rem;\n"
-    // TODO: This component is still a WIP and will be re-factored soon!
-    // May be best to split it out into different components, the important part is unifying Type used by React-Table so the mapping can be simplified
-    // It will need to facilitate the Actions list capability Jonny Dyson has requested
-    // Betters ways of handling the customComponentOverride will be considered too
-])));
-// TODO: This component is still a WIP and will be re-factored soon!
-// May be best to split it out into different components, the important part is unifying Type used by React-Table so the mapping can be simplified
-// It will need to facilitate the Actions list capability Jonny Dyson has requested
-// Betters ways of handling the customComponentOverride will be considered too
-var TableCell = function (_a) {
-    var adminActions = _a.adminActions, _b = _a.isButton, isButton = _b === void 0 ? false : _b, text = _a.text, iconProps = _a.iconProps, _c = _a.headerAxis, headerAxis = _c === void 0 ? 'x' : _c, clickHandler = _a.clickHandler, customComponentOverride = _a.customComponentOverride;
-    if (customComponentOverride) {
-        return customComponentOverride;
-    }
-    if (adminActions) {
-        if (adminActions.length === 0) {
-            return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-        }
-        return (jsx_runtime_1.jsx(menu_1.default, { actions: adminActions, menuButtonOptions: {
-                type: 'button',
-                text: '',
-                buttonProps: {
-                    styling: {
-                        buttonStyle: 'standard',
-                        padding: headerAxis === 'x' ? '0.3rem 0.5rem' : '0.15rem 0.3rem',
-                    },
-                    icon: (jsx_runtime_1.jsx(icon_1.default, __assign({}, { type: headerAxis === 'x' ? 'ellipsis-vertical' : 'ellipsis-horizontal', size: 'medium' }), void 0)),
-                    iconPlacement: 'center',
-                    color: "" + styles_1.BTN_COLOURS.DANGER.VALUE,
-                },
-            }, popupStyle: { zIndex: styles_1.getZIndex(styles_1.PopUp) }, popupPlacement: headerAxis === 'x' ? 'bottom-start' : 'right-start' }, void 0));
-    }
-    if (isButton) {
-        return jsx_runtime_1.jsx(button_1.Button, { value: text, icon: iconProps && jsx_runtime_1.jsx(icon_1.default, __assign({}, iconProps), void 0), onClick: clickHandler }, void 0);
-    }
-    if (clickHandler && iconProps) {
-        return jsx_runtime_1.jsx(icon_1.IconButton, { iconProps: iconProps, text: text, onClick: clickHandler }, void 0);
-    }
-    if (iconProps) {
-        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(icon_1.default, __assign({}, iconProps), void 0),
-                text && jsx_runtime_1.jsx(StyledIconText, { children: text }, void 0)] }, void 0));
-    }
-    if (text) {
-        return jsx_runtime_1.jsx("div", { children: text !== null && text !== void 0 ? text : '' }, void 0);
-    }
-    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-};
-exports.default = TableCell;
-var templateObject_1;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var button_1 = require("@ltht-react/button");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var icon_1 = __importStar(require("@ltht-react/icon"));
+var menu_1 = __importDefault(require("@ltht-react/menu"));
+var styles_1 = require("@ltht-react/styles");
+var StyledIconText = styled_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 0.4rem;\n"], ["\n  margin-left: 0.4rem;\n"
+    // TODO: This component is still a WIP and will be re-factored soon!
+    // May be best to split it out into different components, the important part is unifying Type used by React-Table so the mapping can be simplified
+    // It will need to facilitate the Actions list capability Jonny Dyson has requested
+    // Betters ways of handling the customComponentOverride will be considered too
+])));
+// TODO: This component is still a WIP and will be re-factored soon!
+// May be best to split it out into different components, the important part is unifying Type used by React-Table so the mapping can be simplified
+// It will need to facilitate the Actions list capability Jonny Dyson has requested
+// Betters ways of handling the customComponentOverride will be considered too
+var TableCell = function (_a) {
+    var adminActions = _a.adminActions, _b = _a.isButton, isButton = _b === void 0 ? false : _b, text = _a.text, iconProps = _a.iconProps, _c = _a.headerAxis, headerAxis = _c === void 0 ? 'x' : _c, clickHandler = _a.clickHandler, customComponentOverride = _a.customComponentOverride;
+    if (customComponentOverride) {
+        return customComponentOverride;
+    }
+    if (adminActions) {
+        if (adminActions.length === 0) {
+            return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+        }
+        return (jsx_runtime_1.jsx(menu_1.default, { actions: adminActions, menuButtonOptions: {
+                type: 'button',
+                text: '',
+                buttonProps: {
+                    styling: {
+                        buttonStyle: 'standard',
+                        padding: headerAxis === 'x' ? '0.3rem 0.5rem' : '0.15rem 0.3rem',
+                    },
+                    icon: (jsx_runtime_1.jsx(icon_1.default, __assign({}, { type: headerAxis === 'x' ? 'ellipsis-vertical' : 'ellipsis-horizontal', size: 'medium' }), void 0)),
+                    iconPlacement: 'center',
+                    color: "" + styles_1.BTN_COLOURS.DANGER.VALUE,
+                },
+            }, popupStyle: { zIndex: styles_1.getZIndex(styles_1.PopUp) }, popupPlacement: headerAxis === 'x' ? 'bottom-start' : 'right-start' }, void 0));
+    }
+    if (isButton) {
+        return jsx_runtime_1.jsx(button_1.Button, { value: text, icon: iconProps && jsx_runtime_1.jsx(icon_1.default, __assign({}, iconProps), void 0), onClick: clickHandler }, void 0);
+    }
+    if (clickHandler && iconProps) {
+        return jsx_runtime_1.jsx(icon_1.IconButton, { iconProps: iconProps, text: text, onClick: clickHandler }, void 0);
+    }
+    if (iconProps) {
+        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(icon_1.default, __assign({}, iconProps), void 0),
+                text && jsx_runtime_1.jsx(StyledIconText, { children: text }, void 0)] }, void 0));
+    }
+    if (text) {
+        return jsx_runtime_1.jsx("div", { children: text !== null && text !== void 0 ? text : '' }, void 0);
+    }
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+};
+exports.default = TableCell;
+var templateObject_1;
 //# sourceMappingURL=table-cell.js.map

package/lib/molecules/table-component.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import { Table } from '@tanstack/react-table';
-import { ITableConfig } from './table';
-declare const TableComponent: <T>({ table, staticColumns, headerAxis }: ITableHeadProps<T>) => JSX.Element;
-declare const TableNavigationButton: ({ position, hidden, clickHandler }: ITableNavButtonProps) => JSX.Element;
-declare const TableSpinner: ({ position, hidden }: ITableSpinnerProps) => JSX.Element;
-interface ITableNavButtonProps {
-    position: 'bottom' | 'right';
-    hidden: boolean;
-    clickHandler: () => void;
-}
-interface ITableSpinnerProps {
-    position: 'bottom' | 'right';
-    hidden: boolean;
-}
-interface ITableHeadProps<T> extends ITableConfig {
-    table: Table<T>;
-}
-export default TableComponent;
-export { TableNavigationButton, TableSpinner };
+/// <reference types="react" />
+import { Table } from '@tanstack/react-table';
+import { ITableConfig } from './table';
+declare const TableComponent: <T>({ table, staticColumns, headerAxis }: ITableHeadProps<T>) => JSX.Element;
+declare const TableNavigationButton: ({ position, hidden, clickHandler }: ITableNavButtonProps) => JSX.Element;
+declare const TableSpinner: ({ position, hidden }: ITableSpinnerProps) => JSX.Element;
+interface ITableNavButtonProps {
+    position: 'bottom' | 'right';
+    hidden: boolean;
+    clickHandler: () => void;
+}
+interface ITableSpinnerProps {
+    position: 'bottom' | 'right';
+    hidden: boolean;
+}
+interface ITableHeadProps<T> extends ITableConfig {
+    table: Table<T>;
+}
+export default TableComponent;
+export { TableNavigationButton, TableSpinner };

package/lib/molecules/table-component.js

@@ -1,72 +1,72 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableSpinner = exports.TableNavigationButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var icon_1 = __importDefault(require("@ltht-react/icon"));
-var react_table_1 = require("@tanstack/react-table");
-var react_1 = require("react");
-var table_methods_1 = require("./table-methods");
-var table_styled_components_1 = require("./table-styled-components");
-var useDimensionRef_1 = __importDefault(require("./useDimensionRef"));
-var TableComponent = function (_a) {
-    var table = _a.table, _b = _a.staticColumns, staticColumns = _b === void 0 ? 0 : _b, headerAxis = _a.headerAxis;
-    var firstColumn = react_1.useRef(null);
-    var secondColumn = react_1.useRef(null);
-    var tableElement = react_1.useRef(null);
-    var firstColumnWidth = useDimensionRef_1.default(firstColumn, tableElement).width;
-    var secondColumnWidth = useDimensionRef_1.default(secondColumn, tableElement).width;
-    var usingExpanderColumn = table.getHeaderGroups().some(function (x) { return x.headers.some(function (h) { return h.column.id === 'expander'; }); });
-    var totalStaticColumns = react_1.useMemo(function () { return (usingExpanderColumn ? staticColumns + 1 : staticColumns); }, [
-        usingExpanderColumn,
-        staticColumns,
-    ]);
-    var getHeaderColumn = function (header, headerIndex) {
-        switch (headerIndex) {
-            case 0:
-                return getHeaderElement(header, table_methods_1.calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth), firstColumn);
-            case 1:
-                return getHeaderElement(header, table_methods_1.calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth), secondColumn);
-            default:
-                return getHeaderElement(header, table_methods_1.calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth));
-        }
-    };
-    var getHeaderElement = function (header, stickyWidth, elementRef) { return (jsx_runtime_1.jsx(table_styled_components_1.StyledTableHeader, __assign({ stickyWidth: stickyWidth, colSpan: header.colSpan, ref: elementRef, role: "columnheader" }, (header.column.id !== 'expander'
-        ? {
-            style: {
-                cursor: header.column.getCanSort() ? 'pointer' : '',
-            },
-            onClick: header.column.getToggleSortingHandler(),
-        }
-        : {}), { children: header.isPlaceholder ? null : react_table_1.flexRender(header.column.columnDef.header, header.getContext()) }), header.id)); };
-    return (jsx_runtime_1.jsxs(table_styled_components_1.StyledTable, __assign({ ref: tableElement }, { children: [jsx_runtime_1.jsx(table_styled_components_1.StyledTHead, { children: table.getHeaderGroups().map(function (headerGroup) { return (jsx_runtime_1.jsx("tr", __assign({ role: "row" }, { children: headerGroup.headers.map(function (header, headerIndex) { return getHeaderColumn(header, headerIndex); }) }), headerGroup.id)); }) }, void 0),
-            jsx_runtime_1.jsx("tbody", { children: table.getRowModel().rows.map(function (row) { return (jsx_runtime_1.jsx(table_styled_components_1.StyledTableRow, __assign({ tableHeaderAxis: headerAxis, role: "row" }, { children: row.getVisibleCells().map(function (cell, cellIdx) {
-                        var _a;
-                        return (jsx_runtime_1.jsx(table_styled_components_1.StyledTableData, __assign({ tableHeaderAxis: headerAxis, stickyWidth: table_methods_1.calculateStaticColumnOffset(cellIdx, totalStaticColumns, firstColumnWidth, secondColumnWidth), role: "cell", style: (_a = cell.getValue()) === null || _a === void 0 ? void 0 : _a.parentStyle }, { children: react_table_1.flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
-                    }) }), row.id)); }) }, void 0)] }), void 0));
-};
-var TableNavigationButton = function (_a) {
-    var position = _a.position, hidden = _a.hidden, clickHandler = _a.clickHandler;
-    return (jsx_runtime_1.jsx(table_styled_components_1.StyledNextPageButtonContainer, __assign({ role: "button", elementPosition: position, onClick: function () { return clickHandler(); }, hidden: hidden }, { children: jsx_runtime_1.jsx(icon_1.default, { type: "chevron", direction: position === 'bottom' ? 'down' : 'right', size: "medium" }, void 0) }), void 0));
-};
-exports.TableNavigationButton = TableNavigationButton;
-var TableSpinner = function (_a) {
-    var position = _a.position, hidden = _a.hidden;
-    return (jsx_runtime_1.jsx(table_styled_components_1.StyledSpinnerContainer, __assign({ elementPosition: position, hidden: hidden }, { children: jsx_runtime_1.jsx(icon_1.default, { type: "spinner", size: "medium", title: "Loading..." }, void 0) }), void 0));
-};
-exports.TableSpinner = TableSpinner;
-exports.default = TableComponent;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSpinner = exports.TableNavigationButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icon_1 = __importDefault(require("@ltht-react/icon"));
+var react_table_1 = require("@tanstack/react-table");
+var react_1 = require("react");
+var table_methods_1 = require("./table-methods");
+var table_styled_components_1 = require("./table-styled-components");
+var useDimensionRef_1 = __importDefault(require("./useDimensionRef"));
+var TableComponent = function (_a) {
+    var table = _a.table, _b = _a.staticColumns, staticColumns = _b === void 0 ? 0 : _b, headerAxis = _a.headerAxis;
+    var firstColumn = react_1.useRef(null);
+    var secondColumn = react_1.useRef(null);
+    var tableElement = react_1.useRef(null);
+    var firstColumnWidth = useDimensionRef_1.default(firstColumn, tableElement).width;
+    var secondColumnWidth = useDimensionRef_1.default(secondColumn, tableElement).width;
+    var usingExpanderColumn = table.getHeaderGroups().some(function (x) { return x.headers.some(function (h) { return h.column.id === 'expander'; }); });
+    var totalStaticColumns = react_1.useMemo(function () { return (usingExpanderColumn ? staticColumns + 1 : staticColumns); }, [
+        usingExpanderColumn,
+        staticColumns,
+    ]);
+    var getHeaderColumn = function (header, headerIndex) {
+        switch (headerIndex) {
+            case 0:
+                return getHeaderElement(header, table_methods_1.calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth), firstColumn);
+            case 1:
+                return getHeaderElement(header, table_methods_1.calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth), secondColumn);
+            default:
+                return getHeaderElement(header, table_methods_1.calculateStaticColumnOffset(headerIndex, totalStaticColumns, firstColumnWidth, secondColumnWidth));
+        }
+    };
+    var getHeaderElement = function (header, stickyWidth, elementRef) { return (jsx_runtime_1.jsx(table_styled_components_1.StyledTableHeader, __assign({ stickyWidth: stickyWidth, colSpan: header.colSpan, ref: elementRef, role: "columnheader" }, (header.column.id !== 'expander'
+        ? {
+            style: {
+                cursor: header.column.getCanSort() ? 'pointer' : '',
+            },
+            onClick: header.column.getToggleSortingHandler(),
+        }
+        : {}), { children: header.isPlaceholder ? null : react_table_1.flexRender(header.column.columnDef.header, header.getContext()) }), header.id)); };
+    return (jsx_runtime_1.jsxs(table_styled_components_1.StyledTable, __assign({ ref: tableElement }, { children: [jsx_runtime_1.jsx(table_styled_components_1.StyledTHead, { children: table.getHeaderGroups().map(function (headerGroup) { return (jsx_runtime_1.jsx("tr", __assign({ role: "row" }, { children: headerGroup.headers.map(function (header, headerIndex) { return getHeaderColumn(header, headerIndex); }) }), headerGroup.id)); }) }, void 0),
+            jsx_runtime_1.jsx("tbody", { children: table.getRowModel().rows.map(function (row) { return (jsx_runtime_1.jsx(table_styled_components_1.StyledTableRow, __assign({ tableHeaderAxis: headerAxis, role: "row" }, { children: row.getVisibleCells().map(function (cell, cellIdx) {
+                        var _a;
+                        return (jsx_runtime_1.jsx(table_styled_components_1.StyledTableData, __assign({ tableHeaderAxis: headerAxis, stickyWidth: table_methods_1.calculateStaticColumnOffset(cellIdx, totalStaticColumns, firstColumnWidth, secondColumnWidth), role: "cell", style: (_a = cell.getValue()) === null || _a === void 0 ? void 0 : _a.parentStyle }, { children: react_table_1.flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
+                    }) }), row.id)); }) }, void 0)] }), void 0));
+};
+var TableNavigationButton = function (_a) {
+    var position = _a.position, hidden = _a.hidden, clickHandler = _a.clickHandler;
+    return (jsx_runtime_1.jsx(table_styled_components_1.StyledNextPageButtonContainer, __assign({ role: "button", elementPosition: position, onClick: function () { return clickHandler(); }, hidden: hidden }, { children: jsx_runtime_1.jsx(icon_1.default, { type: "chevron", direction: position === 'bottom' ? 'down' : 'right', size: "medium" }, void 0) }), void 0));
+};
+exports.TableNavigationButton = TableNavigationButton;
+var TableSpinner = function (_a) {
+    var position = _a.position, hidden = _a.hidden;
+    return (jsx_runtime_1.jsx(table_styled_components_1.StyledSpinnerContainer, __assign({ elementPosition: position, hidden: hidden }, { children: jsx_runtime_1.jsx(icon_1.default, { type: "spinner", size: "medium", title: "Loading..." }, void 0) }), void 0));
+};
+exports.TableSpinner = TableSpinner;
+exports.default = TableComponent;
 //# sourceMappingURL=table-component.js.map

package/lib/molecules/table-methods.d.ts

@@ -1,11 +1,11 @@
-import { ColumnDef, Table } from '@tanstack/react-table';
-import { Axis } from '@ltht-react/types';
-import React from 'react';
-import { TableData, DataEntity } from './table';
-import { ScrollState } from './useScrollRef';
-declare const createColumns: (tableData: TableData, headerAxis: Axis) => ColumnDef<DataEntity>[];
-declare const calculateStaticColumnOffset: (cellIdx: number, staticColumns: number, firstColumnWidth: number, secondColumnWidth: number) => number | undefined;
-declare const handleScrollEvent: (table: Table<DataEntity>, headerAxis: Axis, scrollState: ScrollState) => void;
-declare const handleDataUpdate: (tableData: TableData, pageIndex: number, pageSize: number, headerAxis: Axis, setColumns: (value: React.SetStateAction<ColumnDef<DataEntity>[]>) => void, setData: (value: React.SetStateAction<DataEntity[]>) => void, setPageCount: (value: React.SetStateAction<number>) => void) => void;
-declare const handleDataUpdateForManualPagination: (tableData: TableData, headerAxis: Axis, keepPreviousData: boolean, setColumns: (value: React.SetStateAction<ColumnDef<DataEntity>[]>) => void, setData: (value: React.SetStateAction<DataEntity[]>) => void) => void;
-export { createColumns, calculateStaticColumnOffset, handleScrollEvent, handleDataUpdate, handleDataUpdateForManualPagination, };
+import { ColumnDef, Table } from '@tanstack/react-table';
+import { Axis } from '@ltht-react/types';
+import React from 'react';
+import { TableData, DataEntity } from './table';
+import { ScrollState } from './useScrollRef';
+declare const createColumns: (tableData: TableData, headerAxis: Axis) => ColumnDef<DataEntity>[];
+declare const calculateStaticColumnOffset: (cellIdx: number, staticColumns: number, firstColumnWidth: number, secondColumnWidth: number) => number | undefined;
+declare const handleScrollEvent: (table: Table<DataEntity>, headerAxis: Axis, scrollState: ScrollState) => void;
+declare const handleDataUpdate: (tableData: TableData, pageIndex: number, pageSize: number, headerAxis: Axis, setColumns: (value: React.SetStateAction<ColumnDef<DataEntity>[]>) => void, setData: (value: React.SetStateAction<DataEntity[]>) => void, setPageCount: (value: React.SetStateAction<number>) => void) => void;
+declare const handleDataUpdateForManualPagination: (tableData: TableData, headerAxis: Axis, keepPreviousData: boolean, setColumns: (value: React.SetStateAction<ColumnDef<DataEntity>[]>) => void, setData: (value: React.SetStateAction<DataEntity[]>) => void) => void;
+export { createColumns, calculateStaticColumnOffset, handleScrollEvent, handleDataUpdate, handleDataUpdateForManualPagination, };