@economic/taco 1.28.0 → 1.29.0

package/dist/esm/packages/taco/src/components/Table2/components/column/Header.js

@@ -3,14 +3,16 @@ import cn from 'classnames';
 import { Icon } from '../../../Icon/Icon.js';
 import { Tooltip } from '../../../Tooltip/Tooltip.js';
 import { IconButton } from '../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { Menu } from '../../../Menu/Menu.js';
 import { isOverflowing } from '../../../../utils/dom.js';
 import { flexRender } from '@tanstack/react-table';
-import { isInternalColumn, MIN_COLUMN_SIZE } from '../../utilities/columns.js';
+import { isInternalFrozenColumn, MIN_COLUMN_SIZE } from '../../utilities/columns.js';
 import { getCellSizingClasses, getCellAlignmentClasses } from '../../utilities/cell.js';
 import { ColumnBase } from './Base.js';
 
 const Header = function Header(props) {
-  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8, _header$column$column9;
   const {
     header,
     index,
@@ -20,11 +22,14 @@ const Header = function Header(props) {
     ...columnProps
   } = props;
   const textRef = React__default.useRef(null);
-  const pinned = !!header.column.getIsPinned();
+  const frozen = !!header.column.getIsPinned();
   const isOtherColumnBeingResized = table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;
+  const {
+    enableColumnFreezing
+  } = table.options.meta;
   const className = cn('group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]', {
     'z-[6]': header.column.getIsResizing(),
-    'z-[7]': pinned,
+    'z-[7]': frozen,
     'cursor-pointer select-none': header.column.getCanSort(),
     'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.menu),
     'pointer-events-none': isOtherColumnBeingResized
@@ -36,7 +41,7 @@ const Header = function Header(props) {
       const size = Math.ceil(node.getBoundingClientRect().width);
       table.setColumnSizing(sizes => ({
         ...sizes,
-        [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size
+        [header.id]: !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size
       }));
     }
   };
@@ -60,7 +65,7 @@ const Header = function Header(props) {
         ...sizes
       };
       if (size) {
-        nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
+        nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
       } else {
         delete nextSizes[header.id];
       }
@@ -93,7 +98,7 @@ const Header = function Header(props) {
     ref: refCallback,
     role: "columnheader",
     "data-column-index": index
-  }), isInternalColumn(header.id) ? flexRender(header.column.columnDef.header, header.getContext()) : /*#__PURE__*/React__default.createElement("div", {
+  }), isInternalFrozenColumn(header.id) ? flexRender(header.column.columnDef.header, header.getContext()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: cn('flex flex-grow overflow-hidden', {
       'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!((_header$column$column4 = header.column.columnDef.meta) !== null && _header$column$column4 !== void 0 && _header$column$column4.menu)
     }, getCellAlignmentClasses((_header$column$column5 = header.column.columnDef.meta) === null || _header$column$column5 === void 0 ? void 0 : _header$column$column5.align))
@@ -109,9 +114,12 @@ const Header = function Header(props) {
       name: "chevron-down-solid",
       className: "pointer-events-none -my-0.5"
     })
-  }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), (_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
-    header: header
-  }) : null, header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+  }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), (_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu || enableColumnFreezing ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
+    menu: (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu,
+    enableColumnFreezing: enableColumnFreezing,
+    table: table,
+    columnIndex: index
+  }) : null), header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
     placement: "top",
     title: "Resize column"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -133,26 +141,84 @@ const Header = function Header(props) {
   }))) : null);
 };
 const HeaderMenu = ({
-  header
+  menu,
+  enableColumnFreezing,
+  table,
+  columnIndex
 }) => {
   const [open, setOpen] = React__default.useState(false);
+  const {
+    texts
+  } = useLocalization();
+  const {
+    frozenColumnsCount,
+    setFrozenColumnsCount
+  } = table.options.meta;
+  const columns = table.getAllLeafColumns();
+  const {
+    columnVisibility,
+    columnOrder
+  } = table.getState();
+  const visibleInternalColumnsCount = React__default.useMemo(() => columns.filter(column => isInternalFrozenColumn(column.id)).length, [columns]);
+  const columnPosition = columnIndex + 1;
+  const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
+  const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
+  const freeAllColumns = () => {
+    setFrozenColumnsCount(0);
+  };
+  const freezeColumns = () => {
+    setFrozenColumnsCount(externalFrozenColumnsCount);
+  };
   const className = cn('-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex', {
     '!flex': open
   });
-  return header.column.columnDef.meta ?
-  /*#__PURE__*/
-  // This div catches the mousedown events from menu item and menu trigger and prevents
-  // mousedown event from bubbling up to the Header component to prevent toggling sorting
-  React__default.createElement("div", {
-    onMouseDown: event => event.stopPropagation()
-  }, header.column.columnDef.meta.menu({
+  const freezeMenuItems = [/*#__PURE__*/React__default.createElement(Menu.Item, {
+    icon: "column-freeze",
+    onClick: freezeColumns,
+    key: "_freeze-columns_"
+  }, externalFrozenColumnsCount > 1 ? texts.table2.columns.menu.freezeColumns.replace('[X]', String(externalFrozenColumnsCount)) : texts.table2.columns.menu.freezeColumns.replace('[X] ', '')), ...(isSomeExternalColumnFrozen ? [/*#__PURE__*/React__default.createElement(Menu.Item, {
+    icon: "column-unfreeze",
+    onClick: freeAllColumns,
+    key: "_unfreeze-columns_"
+  }, texts.table2.columns.menu.unfreezeColumns)] : [])];
+  React__default.useEffect(() => {
+    // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes
+    const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;
+    table.setColumnPinning({
+      left: columns.slice(0, totalFrozenColumnsCount).map(column => column.id),
+      right: []
+    });
+  }, [frozenColumnsCount, columnVisibility, columnOrder, visibleInternalColumnsCount]);
+  const menuProps = {
     trigger: /*#__PURE__*/React__default.createElement(IconButton, {
       className: className,
       icon: "more"
     }),
     open: open,
     onChange: setOpen
-  })) : null;
+  };
+  let menuComponent = null;
+  if (menu) {
+    menuComponent = menu(menuProps);
+    if (enableColumnFreezing) {
+      const menuContent = React__default.Children.only(menuComponent.props.children);
+      const menuContentChildren = React__default.Children.toArray(menuContent.props.children);
+      const menuItemsWithFreezingItems = [...menuContentChildren, /*#__PURE__*/React__default.createElement(Menu.Separator, null), ...freezeMenuItems];
+      const menuContentWithFreezingItems = /*#__PURE__*/React__default.createElement(Menu.Content, null, menuItemsWithFreezingItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
+        key
+      })));
+      menuComponent = /*#__PURE__*/React__default.cloneElement(menuComponent, {
+        children: menuContentWithFreezingItems
+      });
+    }
+  } else if (enableColumnFreezing) {
+    menuComponent = /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, freezeMenuItems));
+  }
+  // This div catches the mousedown events from menu item and menu trigger and prevents
+  // mousedown event from bubbling up to the Header component to prevent toggling sorting
+  return menuComponent ? /*#__PURE__*/React__default.createElement("div", {
+    onMouseDown: event => event.stopPropagation()
+  }, menuComponent) : null;
 };
 
 export { Header };

package/dist/esm/packages/taco/src/components/Table2/components/column/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../../src/components/Table2/components/column/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, Header as RTHeader } from '@tanstack/react-table';\nimport { Icon } from '../../../Icon/Icon';\nimport { ColumnBase, ColumnBaseProps } from './Base';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { isInternalColumn, MIN_COLUMN_SIZE } from '../../utilities/columns';\nimport { isOverflowing } from '../../../../utils/dom';\nimport { getCellAlignmentClasses, getCellSizingClasses } from '../../utilities/cell';\nimport { IconButton } from '../../../IconButton/IconButton';\n\ntype HeaderProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    header: RTHeader<TType, unknown>;\n    index: number;\n    isLastColumn: boolean;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const Header = function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, index, isLastColumn, table, tableRef, ...columnProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n    const pinned = !!header.column.getIsPinned();\n    const isOtherColumnBeingResized =\n        table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;\n\n    const className = cn(\n        'group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]',\n        {\n            'z-[6]': header.column.getIsResizing(),\n            'z-[7]': pinned, // pinned headers should show above cells and other headers, so we assign a higher z-index\n            'cursor-pointer select-none': header.column.getCanSort(),\n            'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || header.column.columnDef.meta?.menu,\n            'pointer-events-none': isOtherColumnBeingResized,\n        },\n        getCellSizingClasses('normal'),\n        header.column.columnDef.meta?.headerClassName,\n        props.className\n    );\n\n    // set the column size after the first render (after auto layout with 'max-content') has run\n    // this way columns default to fit their content, then we save that size for resizing\n    const refCallback = (node: HTMLDivElement) => {\n        if (node && !table.getState().columnSizing[header.id]) {\n            const size = Math.ceil(node.getBoundingClientRect().width);\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size,\n            }));\n        }\n    };\n\n    // we use mousedown because clicking and dragging resize and then letting go over the\n    // column, results in sorting being applied\n    const handleMouseDown = header.column.getCanSort()\n        ? (event: React.MouseEvent) => {\n              // only detect left clicks\n              if (event.button === 0) {\n                  event.preventDefault();\n                  table.resetRowSelection();\n                  header.column.toggleSorting();\n                  tableRef.current?.focus();\n              }\n          }\n        : undefined;\n\n    const handleResizerDoubleClick = () => {\n        const size = header.column.columnDef.meta?.defaultWidth;\n        table.setColumnSizing(sizes => {\n            const nextSizes = { ...sizes };\n\n            if (size) {\n                nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;\n            } else {\n                delete nextSizes[header.id];\n            }\n\n            return nextSizes;\n        });\n    };\n\n    const handleResizerClick = event => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleResize = event => {\n        // prevent the parent onMouseDown propagating\n        event.stopPropagation();\n        header.getResizeHandler()(event);\n    };\n\n    const content = (\n        <div className=\"truncate\" ref={textRef}>\n            {flexRender(header.column.columnDef.header, header.getContext())}\n        </div>\n    );\n\n    return (\n        <ColumnBase\n            {...columnProps}\n            // base props\n            column={header.column}\n            table={table}\n            // other props\n            aria-sort={\n                {\n                    asc: 'ascending',\n                    desc: 'descending',\n                }[header.column.getIsSorted() as any] ?? 'none'\n            }\n            className={className}\n            onMouseDown={handleMouseDown}\n            ref={refCallback}\n            role=\"columnheader\"\n            // helper props\n            data-column-index={index}>\n            {isInternalColumn(header.id) ? (\n                flexRender(header.column.columnDef.header, header.getContext())\n            ) : (\n                <div\n                    className={cn(\n                        'flex flex-grow overflow-hidden',\n                        {\n                            'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!header.column.columnDef.meta?.menu,\n                        },\n                        getCellAlignmentClasses(header.column.columnDef.meta?.align)\n                    )}>\n                    {isOverflowing(textRef.current) ? (\n                        <Tooltip title={header.column.columnDef.meta?.tooltip ?? content} placement=\"top\">\n                            {content}\n                        </Tooltip>\n                    ) : (\n                        content\n                    )}\n                    {{\n                        asc: <Icon name=\"chevron-up-solid\" className=\"pointer-events-none -my-0.5\" />,\n                        desc: <Icon name=\"chevron-down-solid\" className=\"pointer-events-none -my-0.5\" />,\n                    }[header.column.getIsSorted() as string] ?? null}\n                </div>\n            )}\n            {header.column.columnDef.meta?.menu ? <HeaderMenu header={header} /> : null}\n            {header.column.getCanResize() ? (\n                <Tooltip placement=\"top\" title=\"Resize column\">\n                    <div\n                        className={cn(\n                            'invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible',\n                            {\n                                '-mr-2.5 w-5 justify-center': !isLastColumn,\n                                'w-2': isLastColumn,\n                                '!visible': header.column.getIsResizing(),\n                            }\n                        )}\n                        onDoubleClick={handleResizerDoubleClick}\n                        onMouseDown={handleResize}\n                        onTouchStart={handleResize}\n                        // this prevents sort handlers being activated\n                        onClick={handleResizerClick}>\n                        <div\n                            className={cn('h-full w-1 rounded', {\n                                '!bg-blue-500': header.column.getIsResizing(),\n                                'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing(),\n                            })}\n                        />\n                    </div>\n                </Tooltip>\n            ) : null}\n        </ColumnBase>\n    );\n};\n\nconst HeaderMenu = ({ header }) => {\n    const [open, setOpen] = React.useState(false);\n\n    const className = cn(\n        '-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex',\n        {\n            '!flex': open,\n        }\n    );\n    return header.column.columnDef.meta ? (\n        // This div catches the mousedown events from menu item and menu trigger and prevents\n        // mousedown event from bubbling up to the Header component to prevent toggling sorting\n        <div onMouseDown={event => event.stopPropagation()}>\n            {header.column.columnDef.meta.menu({\n                trigger: <IconButton className={className} icon=\"more\" />,\n                open: open,\n                onChange: setOpen,\n            })}\n        </div>\n    ) : null;\n};\n"],"names":["Header","props","header","index","isLastColumn","table","tableRef","columnProps","textRef","React","useRef","pinned","column","getIsPinned","isOtherColumnBeingResized","getState","columnSizingInfo","isResizingColumn","id","className","cn","getIsResizing","getCanSort","getCanResize","columnDef","meta","menu","getCellSizingClasses","headerClassName","refCallback","node","columnSizing","size","Math","ceil","getBoundingClientRect","width","setColumnSizing","sizes","isInternalColumn","MIN_COLUMN_SIZE","handleMouseDown","event","button","preventDefault","resetRowSelection","toggleSorting","current","focus","undefined","handleResizerDoubleClick","defaultWidth","nextSizes","handleResizerClick","stopPropagation","handleResize","getResizeHandler","content","ref","flexRender","getContext","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","HeaderMenu","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","trigger","IconButton","icon","onChange"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../src/components/Table2/components/column/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, Header as RTHeader, TableMeta, Table as RTTable } from '@tanstack/react-table';\nimport { Icon } from '../../../Icon/Icon';\nimport { ColumnBase, ColumnBaseProps } from './Base';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { isInternalFrozenColumn, MIN_COLUMN_SIZE } from '../../utilities/columns';\nimport { isOverflowing } from '../../../../utils/dom';\nimport { getCellAlignmentClasses, getCellSizingClasses } from '../../utilities/cell';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { Table2ColumnHeaderMenu } from '../../types';\nimport { useLocalization } from '../../../Provider/Localization';\n\ntype HeaderProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    header: RTHeader<TType, unknown>;\n    index: number;\n    isLastColumn: boolean;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const Header = function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, index, isLastColumn, table, tableRef, ...columnProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n    const frozen = !!header.column.getIsPinned();\n    const isOtherColumnBeingResized =\n        table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;\n\n    const { enableColumnFreezing } = table.options.meta as TableMeta<TType>;\n\n    const className = cn(\n        'group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]',\n        {\n            'z-[6]': header.column.getIsResizing(),\n            'z-[7]': frozen, // frozen headers should show above cells and other headers, so we assign a higher z-index\n            'cursor-pointer select-none': header.column.getCanSort(),\n            'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || header.column.columnDef.meta?.menu,\n            'pointer-events-none': isOtherColumnBeingResized,\n        },\n        getCellSizingClasses('normal'),\n        header.column.columnDef.meta?.headerClassName,\n        props.className\n    );\n\n    // set the column size after the first render (after auto layout with 'max-content') has run\n    // this way columns default to fit their content, then we save that size for resizing\n    const refCallback = (node: HTMLDivElement) => {\n        if (node && !table.getState().columnSizing[header.id]) {\n            const size = Math.ceil(node.getBoundingClientRect().width);\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [header.id]: !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size,\n            }));\n        }\n    };\n\n    // we use mousedown because clicking and dragging resize and then letting go over the\n    // column, results in sorting being applied\n    const handleMouseDown = header.column.getCanSort()\n        ? (event: React.MouseEvent) => {\n              // only detect left clicks\n              if (event.button === 0) {\n                  event.preventDefault();\n                  table.resetRowSelection();\n                  header.column.toggleSorting();\n                  tableRef.current?.focus();\n              }\n          }\n        : undefined;\n\n    const handleResizerDoubleClick = () => {\n        const size = header.column.columnDef.meta?.defaultWidth;\n        table.setColumnSizing(sizes => {\n            const nextSizes = { ...sizes };\n\n            if (size) {\n                nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;\n            } else {\n                delete nextSizes[header.id];\n            }\n\n            return nextSizes;\n        });\n    };\n\n    const handleResizerClick = event => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleResize = event => {\n        // prevent the parent onMouseDown propagating\n        event.stopPropagation();\n        header.getResizeHandler()(event);\n    };\n\n    const content = (\n        <div className=\"truncate\" ref={textRef}>\n            {flexRender(header.column.columnDef.header, header.getContext())}\n        </div>\n    );\n\n    return (\n        <ColumnBase\n            {...columnProps}\n            // base props\n            column={header.column}\n            table={table}\n            // other props\n            aria-sort={\n                {\n                    asc: 'ascending',\n                    desc: 'descending',\n                }[header.column.getIsSorted() as any] ?? 'none'\n            }\n            className={className}\n            onMouseDown={handleMouseDown}\n            ref={refCallback}\n            role=\"columnheader\"\n            // helper props\n            data-column-index={index}>\n            {isInternalFrozenColumn(header.id) ? (\n                flexRender(header.column.columnDef.header, header.getContext())\n            ) : (\n                <>\n                    <div\n                        className={cn(\n                            'flex flex-grow overflow-hidden',\n                            {\n                                'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!header.column.columnDef.meta?.menu,\n                            },\n                            getCellAlignmentClasses(header.column.columnDef.meta?.align)\n                        )}>\n                        {isOverflowing(textRef.current) ? (\n                            <Tooltip title={header.column.columnDef.meta?.tooltip ?? content} placement=\"top\">\n                                {content}\n                            </Tooltip>\n                        ) : (\n                            content\n                        )}\n                        {{\n                            asc: <Icon name=\"chevron-up-solid\" className=\"pointer-events-none -my-0.5\" />,\n                            desc: <Icon name=\"chevron-down-solid\" className=\"pointer-events-none -my-0.5\" />,\n                        }[header.column.getIsSorted() as string] ?? null}\n                    </div>\n                    {header.column.columnDef.meta?.menu || enableColumnFreezing ? (\n                        <HeaderMenu\n                            menu={header.column.columnDef.meta?.menu}\n                            enableColumnFreezing={enableColumnFreezing}\n                            table={table}\n                            columnIndex={index}\n                        />\n                    ) : null}\n                </>\n            )}\n            {header.column.getCanResize() ? (\n                <Tooltip placement=\"top\" title=\"Resize column\">\n                    <div\n                        className={cn(\n                            'invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible',\n                            {\n                                '-mr-2.5 w-5 justify-center': !isLastColumn,\n                                'w-2': isLastColumn,\n                                '!visible': header.column.getIsResizing(),\n                            }\n                        )}\n                        onDoubleClick={handleResizerDoubleClick}\n                        onMouseDown={handleResize}\n                        onTouchStart={handleResize}\n                        // this prevents sort handlers being activated\n                        onClick={handleResizerClick}>\n                        <div\n                            className={cn('h-full w-1 rounded', {\n                                '!bg-blue-500': header.column.getIsResizing(),\n                                'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing(),\n                            })}\n                        />\n                    </div>\n                </Tooltip>\n            ) : null}\n        </ColumnBase>\n    );\n};\n\ntype HeaderMenuProps = {\n    enableColumnFreezing: boolean;\n    menu?: Table2ColumnHeaderMenu;\n    table: RTTable<any>;\n    columnIndex: number;\n};\n\nconst HeaderMenu = ({ menu, enableColumnFreezing, table, columnIndex }: HeaderMenuProps) => {\n    const [open, setOpen] = React.useState(false);\n    const { texts } = useLocalization();\n    const { frozenColumnsCount, setFrozenColumnsCount } = table.options.meta as TableMeta<any>;\n\n    const columns = table.getAllLeafColumns();\n    const { columnVisibility, columnOrder } = table.getState();\n    const visibleInternalColumnsCount = React.useMemo(\n        () => columns.filter(column => isInternalFrozenColumn(column.id)).length,\n        [columns]\n    );\n    const columnPosition = columnIndex + 1;\n    const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;\n    const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;\n    const freeAllColumns = () => {\n        setFrozenColumnsCount(0);\n    };\n    const freezeColumns = () => {\n        setFrozenColumnsCount(externalFrozenColumnsCount);\n    };\n\n    const className = cn(\n        '-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex',\n        {\n            '!flex': open,\n        }\n    );\n    const freezeMenuItems = [\n        <Menu.Item icon=\"column-freeze\" onClick={freezeColumns} key=\"_freeze-columns_\">\n            {externalFrozenColumnsCount > 1\n                ? texts.table2.columns.menu.freezeColumns.replace('[X]', String(externalFrozenColumnsCount))\n                : texts.table2.columns.menu.freezeColumns.replace('[X] ', '')}\n        </Menu.Item>,\n        ...(isSomeExternalColumnFrozen\n            ? [\n                  <Menu.Item icon=\"column-unfreeze\" onClick={freeAllColumns} key=\"_unfreeze-columns_\">\n                      {texts.table2.columns.menu.unfreezeColumns}\n                  </Menu.Item>,\n              ]\n            : []),\n    ];\n\n    React.useEffect(() => {\n        // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes\n        const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;\n\n        table.setColumnPinning({ left: columns.slice(0, totalFrozenColumnsCount).map(column => column.id), right: [] });\n    }, [frozenColumnsCount, columnVisibility, columnOrder, visibleInternalColumnsCount]);\n\n    const menuProps = {\n        trigger: <IconButton className={className} icon=\"more\" />,\n        open: open,\n        onChange: setOpen,\n    };\n    let menuComponent: JSX.Element | null = null;\n\n    if (menu) {\n        menuComponent = menu(menuProps);\n\n        if (enableColumnFreezing) {\n            const menuContent = React.Children.only(menuComponent.props.children);\n            const menuContentChildren = React.Children.toArray(menuContent.props.children);\n            const menuItemsWithFreezingItems = [...menuContentChildren, <Menu.Separator />, ...freezeMenuItems];\n            const menuContentWithFreezingItems = (\n                <Menu.Content>\n                    {menuItemsWithFreezingItems.map((item, key) => React.cloneElement(item as any, { key }))}\n                </Menu.Content>\n            );\n\n            menuComponent = React.cloneElement(menuComponent, { children: menuContentWithFreezingItems });\n        }\n    } else if (enableColumnFreezing) {\n        menuComponent = (\n            <Menu {...menuProps}>\n                <Menu.Content>{freezeMenuItems}</Menu.Content>\n            </Menu>\n        );\n    }\n\n    // This div catches the mousedown events from menu item and menu trigger and prevents\n    // mousedown event from bubbling up to the Header component to prevent toggling sorting\n    return menuComponent ? <div onMouseDown={event => event.stopPropagation()}>{menuComponent}</div> : null;\n};\n"],"names":["Header","props","header","index","isLastColumn","table","tableRef","columnProps","textRef","React","useRef","frozen","column","getIsPinned","isOtherColumnBeingResized","getState","columnSizingInfo","isResizingColumn","id","enableColumnFreezing","options","meta","className","cn","getIsResizing","getCanSort","getCanResize","columnDef","menu","getCellSizingClasses","headerClassName","refCallback","node","columnSizing","size","Math","ceil","getBoundingClientRect","width","setColumnSizing","sizes","isInternalFrozenColumn","MIN_COLUMN_SIZE","handleMouseDown","event","button","preventDefault","resetRowSelection","toggleSorting","current","focus","undefined","handleResizerDoubleClick","defaultWidth","nextSizes","handleResizerClick","stopPropagation","handleResize","getResizeHandler","content","ref","flexRender","getContext","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","HeaderMenu","columnIndex","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","texts","useLocalization","frozenColumnsCount","setFrozenColumnsCount","columns","getAllLeafColumns","columnVisibility","columnOrder","visibleInternalColumnsCount","useMemo","filter","length","columnPosition","externalFrozenColumnsCount","isSomeExternalColumnFrozen","freeAllColumns","freezeColumns","freezeMenuItems","Menu","Item","icon","key","table2","replace","String","unfreezeColumns","useEffect","totalFrozenColumnsCount","setColumnPinning","left","slice","map","right","menuProps","trigger","IconButton","onChange","menuComponent","menuContent","Children","only","children","menuContentChildren","toArray","menuItemsWithFreezingItems","Separator","menuContentWithFreezingItems","Content","item","cloneElement"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/components/row/ExpandedRow.js

@@ -22,6 +22,9 @@ const ExpandedRow = ({
       });
     }
   }, []);
+  if (props.children === null || props.children === undefined) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: "border-grey-300 bg-grey-50 col-span-full border-b p-4"
   }, props, {

package/dist/esm/packages/taco/src/components/Table2/components/row/ExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandedRow.js","sources":["../../../../../../../../../src/components/Table2/components/row/ExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nexport const ExpandedRow = ({ index, setSize, ...props }) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const height = ref.current?.getBoundingClientRect().height;\n\n            setSize(sizes => {\n                if (height !== sizes[index]) {\n                    return { ...sizes, [index]: ref.current?.getBoundingClientRect().height };\n                }\n\n                return sizes;\n            });\n        }\n    }, []);\n\n    return <div className=\"border-grey-300 bg-grey-50 col-span-full border-b p-4\" {...props} ref={ref} />;\n};\n"],"names":["ExpandedRow","index","setSize","props","ref","React","useRef","useEffect","current","height","getBoundingClientRect","sizes","className"],"mappings":";;MAEaA,WAAW,GAAG,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAE,GAAGC;CAAO;EACpD,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAE9CD,cAAK,CAACE,SAAS,CAAC;IACZ,IAAIH,GAAG,CAACI,OAAO,EAAE;MAAA;MACb,MAAMC,MAAM,mBAAGL,GAAG,CAACI,OAAO,iDAAX,aAAaE,qBAAqB,EAAE,CAACD,MAAM;MAE1DP,OAAO,CAACS,KAAK;QACT,IAAIF,MAAM,KAAKE,KAAK,CAACV,KAAK,CAAC,EAAE;UAAA;UACzB,OAAO;YAAE,GAAGU,KAAK;YAAE,CAACV,KAAK,oBAAGG,GAAG,CAACI,OAAO,kDAAX,cAAaE,qBAAqB,EAAE,CAACD;WAAQ;;QAG7E,OAAOE,KAAK;OACf,CAAC;;GAET,EAAE,EAAE,CAAC;EAEN,oBAAON;IAAKO,SAAS,EAAC;KAA4DT,KAAK;IAAEC,GAAG,EAAEA;KAAO;AACzG;;;;"}
+{"version":3,"file":"ExpandedRow.js","sources":["../../../../../../../../../src/components/Table2/components/row/ExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nexport const ExpandedRow = ({ index, setSize, ...props }) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const height = ref.current?.getBoundingClientRect().height;\n\n            setSize(sizes => {\n                if (height !== sizes[index]) {\n                    return { ...sizes, [index]: ref.current?.getBoundingClientRect().height };\n                }\n\n                return sizes;\n            });\n        }\n    }, []);\n\n    if (props.children === null || props.children === undefined) {\n        return null;\n    }\n\n    return <div className=\"border-grey-300 bg-grey-50 col-span-full border-b p-4\" {...props} ref={ref} />;\n};\n"],"names":["ExpandedRow","index","setSize","props","ref","React","useRef","useEffect","current","height","getBoundingClientRect","sizes","children","undefined","className"],"mappings":";;MAEaA,WAAW,GAAG,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAE,GAAGC;CAAO;EACpD,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAE9CD,cAAK,CAACE,SAAS,CAAC;IACZ,IAAIH,GAAG,CAACI,OAAO,EAAE;MAAA;MACb,MAAMC,MAAM,mBAAGL,GAAG,CAACI,OAAO,iDAAX,aAAaE,qBAAqB,EAAE,CAACD,MAAM;MAE1DP,OAAO,CAACS,KAAK;QACT,IAAIF,MAAM,KAAKE,KAAK,CAACV,KAAK,CAAC,EAAE;UAAA;UACzB,OAAO;YAAE,GAAGU,KAAK;YAAE,CAACV,KAAK,oBAAGG,GAAG,CAACI,OAAO,kDAAX,cAAaE,qBAAqB,EAAE,CAACD;WAAQ;;QAG7E,OAAOE,KAAK;OACf,CAAC;;GAET,EAAE,EAAE,CAAC;EAEN,IAAIR,KAAK,CAACS,QAAQ,KAAK,IAAI,IAAIT,KAAK,CAACS,QAAQ,KAAKC,SAAS,EAAE;IACzD,OAAO,IAAI;;EAGf,oBAAOR;IAAKS,SAAS,EAAC;KAA4DX,KAAK;IAAEC,GAAG,EAAEA;KAAO;AACzG;;;;"}

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js

@@ -1,14 +1,17 @@
 import React__default from 'react';
 
-// pinned columns have position sticky, and because we support more than one of them
+// frozen columns have position sticky, and because we support more than one of them
 // we must set a 'left' css value. this hook listens to changes on state that will
-// affect the left offset (resize, visibility, pinning) and updates offsets based on width
+// affect the left offset (resize, visibility, freezing) and updates offsets based on width
 const useColumnOffsetStateListener = (table, setColumnOffsets) => {
   const {
     columnOrder,
     columnSizingInfo,
     columnVisibility
   } = table.getState();
+  const {
+    frozenColumnsCount
+  } = table.options.meta;
   React__default.useEffect(() => {
     const offsets = {};
     // store left offsets for each visible column
@@ -17,7 +20,7 @@ const useColumnOffsetStateListener = (table, setColumnOffsets) => {
       return offset + column.getSize();
     }, 0);
     setColumnOffsets(offsets);
-  }, [columnOrder, columnSizingInfo, columnVisibility]);
+  }, [columnOrder, columnSizingInfo, columnVisibility, frozenColumnsCount]);
 };
 
 export { useColumnOffsetStateListener };

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnOffsetStateListener.js","sources":["../../../../../../../../../src/components/Table2/hooks/listeners/useColumnOffsetStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, OnChangeFn } from '@tanstack/react-table';\nimport { ColumnOffsetState } from '../../types';\n\n// pinned columns have position sticky, and because we support more than one of them\n// we must set a 'left' css value. this hook listens to changes on state that will\n// affect the left offset (resize, visibility, pinning) and updates offsets based on width\nexport const useColumnOffsetStateListener = (table: RTTable<any>, setColumnOffsets: OnChangeFn<ColumnOffsetState>) => {\n    const { columnOrder, columnSizingInfo, columnVisibility } = table.getState();\n\n    React.useEffect(() => {\n        const offsets = {};\n\n        // store left offsets for each visible column\n        table.getVisibleLeafColumns().reduce((offset, column) => {\n            offsets[column.id] = offset;\n            return offset + column.getSize();\n        }, 0);\n\n        setColumnOffsets(offsets);\n    }, [columnOrder, columnSizingInfo, columnVisibility]);\n};\n"],"names":["useColumnOffsetStateListener","table","setColumnOffsets","columnOrder","columnSizingInfo","columnVisibility","getState","React","useEffect","offsets","getVisibleLeafColumns","reduce","offset","column","id","getSize"],"mappings":";;AAIA;AACA;AACA;MACaA,4BAA4B,GAAG,CAACC,KAAmB,EAAEC,gBAA+C;EAC7G,MAAM;IAAEC,WAAW;IAAEC,gBAAgB;IAAEC;GAAkB,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAE5EC,cAAK,CAACC,SAAS,CAAC;IACZ,MAAMC,OAAO,GAAG,EAAE;;IAGlBR,KAAK,CAACS,qBAAqB,EAAE,CAACC,MAAM,CAAC,CAACC,MAAM,EAAEC,MAAM;MAChDJ,OAAO,CAACI,MAAM,CAACC,EAAE,CAAC,GAAGF,MAAM;MAC3B,OAAOA,MAAM,GAAGC,MAAM,CAACE,OAAO,EAAE;KACnC,EAAE,CAAC,CAAC;IAELb,gBAAgB,CAACO,OAAO,CAAC;GAC5B,EAAE,CAACN,WAAW,EAAEC,gBAAgB,EAAEC,gBAAgB,CAAC,CAAC;AACzD;;;;"}
+{"version":3,"file":"useColumnOffsetStateListener.js","sources":["../../../../../../../../../src/components/Table2/hooks/listeners/useColumnOffsetStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, OnChangeFn, TableMeta } from '@tanstack/react-table';\nimport { ColumnOffsetState } from '../../types';\n\n// frozen columns have position sticky, and because we support more than one of them\n// we must set a 'left' css value. this hook listens to changes on state that will\n// affect the left offset (resize, visibility, freezing) and updates offsets based on width\nexport const useColumnOffsetStateListener = (table: RTTable<any>, setColumnOffsets: OnChangeFn<ColumnOffsetState>) => {\n    const { columnOrder, columnSizingInfo, columnVisibility } = table.getState();\n    const { frozenColumnsCount } = table.options.meta as TableMeta<any>;\n\n    React.useEffect(() => {\n        const offsets = {};\n\n        // store left offsets for each visible column\n        table.getVisibleLeafColumns().reduce((offset, column) => {\n            offsets[column.id] = offset;\n            return offset + column.getSize();\n        }, 0);\n\n        setColumnOffsets(offsets);\n    }, [columnOrder, columnSizingInfo, columnVisibility, frozenColumnsCount]);\n};\n"],"names":["useColumnOffsetStateListener","table","setColumnOffsets","columnOrder","columnSizingInfo","columnVisibility","getState","frozenColumnsCount","options","meta","React","useEffect","offsets","getVisibleLeafColumns","reduce","offset","column","id","getSize"],"mappings":";;AAIA;AACA;AACA;MACaA,4BAA4B,GAAG,CAACC,KAAmB,EAAEC,gBAA+C;EAC7G,MAAM;IAAEC,WAAW;IAAEC,gBAAgB;IAAEC;GAAkB,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAC5E,MAAM;IAAEC;GAAoB,GAAGN,KAAK,CAACO,OAAO,CAACC,IAAsB;EAEnEC,cAAK,CAACC,SAAS,CAAC;IACZ,MAAMC,OAAO,GAAG,EAAE;;IAGlBX,KAAK,CAACY,qBAAqB,EAAE,CAACC,MAAM,CAAC,CAACC,MAAM,EAAEC,MAAM;MAChDJ,OAAO,CAACI,MAAM,CAACC,EAAE,CAAC,GAAGF,MAAM;MAC3B,OAAOA,MAAM,GAAGC,MAAM,CAACE,OAAO,EAAE;KACnC,EAAE,CAAC,CAAC;IAELhB,gBAAgB,CAACU,OAAO,CAAC;GAC5B,EAAE,CAACT,WAAW,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEE,kBAAkB,CAAC,CAAC;AAC7E;;;;"}

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useSettingsStateListener.js

@@ -9,16 +9,16 @@ const useSettingsStateListener = (table, onChangeSettings) => {
       handler = setTimeout(() => onChangeSettings({
         columnFilters: state.columnFilters,
         columnOrder: state.columnOrder,
-        columnPinning: state.columnPinning,
         columnSizing: state.columnSizing,
         columnVisibility: state.columnVisibility,
+        frozenColumnCount: meta.frozenColumnsCount,
         globalFilter: state.globalFilter,
         rowDensity: meta.rowDensity,
         sorting: state.sorting
       }), 250);
     }
     return () => clearTimeout(handler);
-  }, [state.columnFilters, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, state.globalFilter, meta.rowDensity, state.sorting]);
+  }, [state.columnFilters, state.columnOrder, meta.frozenColumnsCount, state.columnSizing, state.columnVisibility, state.globalFilter, meta.rowDensity, state.sorting]);
 };
 
 export { useSettingsStateListener };

package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useSettingsStateListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSettingsStateListener.js","sources":["../../../../../../../../../src/components/Table2/hooks/listeners/useSettingsStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { SettingsHandler } from '../../types';\n\nexport const useSettingsStateListener = (table: RTTable<any>, onChangeSettings: SettingsHandler | undefined) => {\n    const meta = table.options.meta as TableMeta<any>;\n    const state = table.getState();\n\n    React.useEffect(() => {\n        let handler;\n\n        if (typeof onChangeSettings === 'function') {\n            handler = setTimeout(\n                () =>\n                    onChangeSettings({\n                        columnFilters: state.columnFilters,\n                        columnOrder: state.columnOrder,\n                        columnPinning: state.columnPinning,\n                        columnSizing: state.columnSizing,\n                        columnVisibility: state.columnVisibility,\n                        globalFilter: state.globalFilter,\n                        rowDensity: meta.rowDensity,\n                        sorting: state.sorting,\n                    }),\n                250\n            );\n        }\n\n        return () => clearTimeout(handler);\n    }, [\n        state.columnFilters,\n        state.columnOrder,\n        state.columnPinning,\n        state.columnSizing,\n        state.columnVisibility,\n        state.globalFilter,\n        meta.rowDensity,\n        state.sorting,\n    ]);\n};\n"],"names":["useSettingsStateListener","table","onChangeSettings","meta","options","state","getState","React","useEffect","handler","setTimeout","columnFilters","columnOrder","columnPinning","columnSizing","columnVisibility","globalFilter","rowDensity","sorting","clearTimeout"],"mappings":";;MAIaA,wBAAwB,GAAG,CAACC,KAAmB,EAAEC,gBAA6C;EACvG,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAsB;EACjD,MAAME,KAAK,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAE9BC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAI,OAAOP,gBAAgB,KAAK,UAAU,EAAE;MACxCO,OAAO,GAAGC,UAAU,CAChB,MACIR,gBAAgB,CAAC;QACbS,aAAa,EAAEN,KAAK,CAACM,aAAa;QAClCC,WAAW,EAAEP,KAAK,CAACO,WAAW;QAC9BC,aAAa,EAAER,KAAK,CAACQ,aAAa;QAClCC,YAAY,EAAET,KAAK,CAACS,YAAY;QAChCC,gBAAgB,EAAEV,KAAK,CAACU,gBAAgB;QACxCC,YAAY,EAAEX,KAAK,CAACW,YAAY;QAChCC,UAAU,EAAEd,IAAI,CAACc,UAAU;QAC3BC,OAAO,EAAEb,KAAK,CAACa;OAClB,CAAC,EACN,GAAG,CACN;;IAGL,OAAO,MAAMC,YAAY,CAACV,OAAO,CAAC;GACrC,EAAE,CACCJ,KAAK,CAACM,aAAa,EACnBN,KAAK,CAACO,WAAW,EACjBP,KAAK,CAACQ,aAAa,EACnBR,KAAK,CAACS,YAAY,EAClBT,KAAK,CAACU,gBAAgB,EACtBV,KAAK,CAACW,YAAY,EAClBb,IAAI,CAACc,UAAU,EACfZ,KAAK,CAACa,OAAO,CAChB,CAAC;AACN;;;;"}
+{"version":3,"file":"useSettingsStateListener.js","sources":["../../../../../../../../../src/components/Table2/hooks/listeners/useSettingsStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { SettingsHandler } from '../../types';\n\nexport const useSettingsStateListener = (table: RTTable<any>, onChangeSettings: SettingsHandler | undefined) => {\n    const meta = table.options.meta as TableMeta<any>;\n    const state = table.getState();\n\n    React.useEffect(() => {\n        let handler;\n\n        if (typeof onChangeSettings === 'function') {\n            handler = setTimeout(\n                () =>\n                    onChangeSettings({\n                        columnFilters: state.columnFilters,\n                        columnOrder: state.columnOrder,\n                        columnSizing: state.columnSizing,\n                        columnVisibility: state.columnVisibility,\n                        frozenColumnCount: meta.frozenColumnsCount,\n                        globalFilter: state.globalFilter,\n                        rowDensity: meta.rowDensity,\n                        sorting: state.sorting,\n                    }),\n                250\n            );\n        }\n\n        return () => clearTimeout(handler);\n    }, [\n        state.columnFilters,\n        state.columnOrder,\n        meta.frozenColumnsCount,\n        state.columnSizing,\n        state.columnVisibility,\n        state.globalFilter,\n        meta.rowDensity,\n        state.sorting,\n    ]);\n};\n"],"names":["useSettingsStateListener","table","onChangeSettings","meta","options","state","getState","React","useEffect","handler","setTimeout","columnFilters","columnOrder","columnSizing","columnVisibility","frozenColumnCount","frozenColumnsCount","globalFilter","rowDensity","sorting","clearTimeout"],"mappings":";;MAIaA,wBAAwB,GAAG,CAACC,KAAmB,EAAEC,gBAA6C;EACvG,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAsB;EACjD,MAAME,KAAK,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAE9BC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAI,OAAOP,gBAAgB,KAAK,UAAU,EAAE;MACxCO,OAAO,GAAGC,UAAU,CAChB,MACIR,gBAAgB,CAAC;QACbS,aAAa,EAAEN,KAAK,CAACM,aAAa;QAClCC,WAAW,EAAEP,KAAK,CAACO,WAAW;QAC9BC,YAAY,EAAER,KAAK,CAACQ,YAAY;QAChCC,gBAAgB,EAAET,KAAK,CAACS,gBAAgB;QACxCC,iBAAiB,EAAEZ,IAAI,CAACa,kBAAkB;QAC1CC,YAAY,EAAEZ,KAAK,CAACY,YAAY;QAChCC,UAAU,EAAEf,IAAI,CAACe,UAAU;QAC3BC,OAAO,EAAEd,KAAK,CAACc;OAClB,CAAC,EACN,GAAG,CACN;;IAGL,OAAO,MAAMC,YAAY,CAACX,OAAO,CAAC;GACrC,EAAE,CACCJ,KAAK,CAACM,aAAa,EACnBN,KAAK,CAACO,WAAW,EACjBT,IAAI,CAACa,kBAAkB,EACvBX,KAAK,CAACQ,YAAY,EAClBR,KAAK,CAACS,gBAAgB,EACtBT,KAAK,CAACY,YAAY,EAClBd,IAAI,CAACe,UAAU,EACfb,KAAK,CAACc,OAAO,CAChB,CAAC;AACN;;;;"}

package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { useLocalization } from '../../Provider/Localization.js';
 import { createColumnHelper } from '@tanstack/react-table';
-import { createRowExpansionColumn, createRowSelectionColumn, createRowDraggableColumn, createRowActionsColumn, MIN_COLUMN_SIZE, COLUMN_ID_FOR_EXPANSION, COLUMN_ID_FOR_SELECTION, COLUMN_ID_FOR_DRAGGABLE } from '../utilities/columns.js';
+import { createRowExpansionColumn, createRowSelectionColumn, createRowDraggableColumn, createRowActionsColumn, MIN_COLUMN_SIZE } from '../utilities/columns.js';
 
 function useColumnDefinitions(children, options, tableRef) {
   const {
@@ -11,9 +11,9 @@ function useColumnDefinitions(children, options, tableRef) {
   const columnHelper = createColumnHelper();
   return React__default.useMemo(() => {
     var _options$actionsForRo;
+    let internalFrozenColumnCount = 0;
     // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved
     const columns = [];
-    const defaultColumnPinning = [];
     const defaultColumnSizing = {};
     const defaultColumnVisibility = {};
     const defaultSorting = [];
@@ -21,9 +21,6 @@ function useColumnDefinitions(children, options, tableRef) {
     React__default.Children.toArray(children).filter(child => !!child).forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child)) {
         var _child$props$minWidth;
-        if (child.props.defaultPinned && options.enableColumnPinning) {
-          defaultColumnPinning.push(child.props.accessor);
-        }
         if (child.props.defaultWidth) {
           defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;
         }
@@ -82,22 +79,22 @@ function useColumnDefinitions(children, options, tableRef) {
     });
     if (options.enableRowExpansion && options.expandedRowRenderer) {
       columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));
-      defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);
+      internalFrozenColumnCount++;
     }
     if (options.enableRowSelection) {
       columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableMultipleRowSelection, lastSelectedRowIndex, options.onRowDrag, tableRef, texts)));
-      defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);
+      internalFrozenColumnCount++;
     }
     if (options.onRowDrag) {
       columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));
-      defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);
+      internalFrozenColumnCount++;
     }
     if ((_options$actionsForRo = options.actionsForRow) !== null && _options$actionsForRo !== void 0 && _options$actionsForRo.length) {
       columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));
     }
     return {
       columns,
-      defaultColumnPinning,
+      internalFrozenColumnCount,
       defaultColumnSizing,
       defaultColumnVisibility,
       defaultSorting,

package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    createColumnHelper,\n    ColumnSort,\n    ColumnSizingState,\n    Row,\n    RowData,\n    VisibilityState,\n    SortingFnOption,\n    Table,\n} from '@tanstack/react-table';\nimport {\n    CellAlignment,\n    ColumnDataType,\n    RowDragHandler,\n    RowExpansionRenderer,\n    Table2Children,\n    Table2ColumnControlRenderer,\n    Table2ColumnFooterRenderer,\n    Table2ColumnHeaderMenu,\n    Table2ColumnProps,\n    Table2RowActionProps,\n} from '../types';\nimport {\n    COLUMN_ID_FOR_DRAGGABLE,\n    COLUMN_ID_FOR_EXPANSION,\n    COLUMN_ID_FOR_SELECTION,\n    createRowActionsColumn,\n    createRowDraggableColumn,\n    createRowExpansionColumn,\n    createRowSelectionColumn,\n    MIN_COLUMN_SIZE,\n} from '../utilities/columns';\nimport { useLocalization } from '../../Provider/Localization';\n\ndeclare module '@tanstack/table-core' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        align?: CellAlignment;\n        className?: string | ((row: Row<TData>, table: Table<TData>) => string);\n        control?: Table2ColumnControlRenderer;\n        dataType?: ColumnDataType;\n        disableReordering?: boolean;\n        defaultWidth?: number;\n        headerClassName?: string;\n        menu?: Table2ColumnHeaderMenu;\n        tooltip?: string;\n    }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n    actionsForRow: Table2RowActionProps<TType>[];\n    enableColumnFiltering: boolean;\n    enableColumnHiding: boolean;\n    enableColumnPinning: boolean;\n    enableRowExpansion: boolean;\n    enableRowSelection: boolean;\n    enableMultipleRowSelection: boolean;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n    children: Table2Children,\n    options: useColumnDefinitionsOptions<TType>,\n    tableRef: React.RefObject<HTMLDivElement>\n) {\n    const { texts } = useLocalization();\n    const lastSelectedRowIndex = React.useRef<number>();\n    const columnHelper = createColumnHelper<TType>();\n\n    return React.useMemo(() => {\n        // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n        const columns: any[] = [];\n        const defaultColumnPinning: string[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n        const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n        (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[])\n            .filter((child: any) => !!child)\n            .forEach(child => {\n                if (React.isValidElement(child)) {\n                    if (child.props.defaultPinned && options.enableColumnPinning) {\n                        defaultColumnPinning.push(child.props.accessor);\n                    }\n\n                    if (child.props.defaultWidth) {\n                        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    if (child.props.footer) {\n                        footers[child.props.accessor] = child.props.footer;\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor,\n                        cell: props => {\n                            let value = props.getValue();\n\n                            if (typeof child.props.renderer === 'function') {\n                                value = child.props.renderer(value, props.row.original);\n                            }\n\n                            if (typeof value === 'string' || typeof value === 'number') {\n                                return <span className=\"truncate\">{value}</span>;\n                            }\n\n                            return value ?? null;\n                        },\n                        header: child.props.header,\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            defaultWidth: child.props.defaultWidth,\n                            disableReordering: child.props.disableReordering,\n                            menu: child.props.menu,\n                            tooltip: child.props.tooltip,\n                        },\n                        enableHiding: !child.props.disableHiding,\n                        // filtering\n                        enableColumnFilter: !child.props.disableFiltering,\n                        filterFn:\n                            options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n                        // sizing\n                        enableResizing: !child.props.disableResizing,\n                        minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n                        size: child.props.defaultWidth,\n                        // sorting\n                        enableSorting: !child.props.disableSorting,\n                        sortingFn: getSortingFn(child.props.dataType),\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && options.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));\n            defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn(\n                        options.enableMultipleRowSelection,\n                        lastSelectedRowIndex,\n                        options.onRowDrag,\n                        tableRef,\n                        texts\n                    )\n                )\n            );\n            defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);\n        }\n\n        if (options.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));\n            defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);\n        }\n\n        if (options.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));\n        }\n\n        return { columns, defaultColumnPinning, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n    }, [children]);\n}\n\nconst getSortingFn = (dataType?: ColumnDataType): SortingFnOption<any> => {\n    if (dataType && dataType !== 'boolean') {\n        return dataType;\n    }\n\n    return 'auto';\n};\n"],"names":["useColumnDefinitions","children","options","tableRef","texts","useLocalization","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","columns","defaultColumnPinning","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","filter","child","forEach","isValidElement","props","defaultPinned","enableColumnPinning","push","accessor","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","id","desc","footer","accessorKey","cell","value","getValue","renderer","row","original","className","header","meta","align","control","dataType","disableReordering","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","COLUMN_ID_FOR_EXPANSION","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","COLUMN_ID_FOR_SELECTION","createRowDraggableColumn","COLUMN_ID_FOR_DRAGGABLE","actionsForRow","length","createRowActionsColumn"],"mappings":"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"}
+{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    createColumnHelper,\n    ColumnSort,\n    ColumnSizingState,\n    Row,\n    RowData,\n    VisibilityState,\n    SortingFnOption,\n    Table,\n} from '@tanstack/react-table';\nimport {\n    CellAlignment,\n    ColumnDataType,\n    RowDragHandler,\n    RowExpansionRenderer,\n    Table2Children,\n    Table2ColumnControlRenderer,\n    Table2ColumnFooterRenderer,\n    Table2ColumnHeaderMenu,\n    Table2ColumnProps,\n    Table2RowActionProps,\n} from '../types';\nimport {\n    createRowActionsColumn,\n    createRowDraggableColumn,\n    createRowExpansionColumn,\n    createRowSelectionColumn,\n    MIN_COLUMN_SIZE,\n} from '../utilities/columns';\nimport { useLocalization } from '../../Provider/Localization';\n\ndeclare module '@tanstack/table-core' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        align?: CellAlignment;\n        className?: string | ((row: Row<TData>, table: Table<TData>) => string);\n        control?: Table2ColumnControlRenderer;\n        dataType?: ColumnDataType;\n        disableReordering?: boolean;\n        defaultWidth?: number;\n        headerClassName?: string;\n        menu?: Table2ColumnHeaderMenu;\n        tooltip?: string;\n    }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n    actionsForRow: Table2RowActionProps<TType>[];\n    enableColumnFiltering: boolean;\n    enableColumnHiding: boolean;\n    enableColumnFreezing: boolean;\n    enableRowExpansion: boolean;\n    enableRowSelection: boolean;\n    enableMultipleRowSelection: boolean;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n    children: Table2Children,\n    options: useColumnDefinitionsOptions<TType>,\n    tableRef: React.RefObject<HTMLDivElement>\n) {\n    const { texts } = useLocalization();\n    const lastSelectedRowIndex = React.useRef<number>();\n    const columnHelper = createColumnHelper<TType>();\n\n    return React.useMemo(() => {\n        let internalFrozenColumnCount = 0;\n        // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n        const columns: any[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n        const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n        (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[])\n            .filter((child: any) => !!child)\n            .forEach(child => {\n                if (React.isValidElement(child)) {\n                    if (child.props.defaultWidth) {\n                        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    if (child.props.footer) {\n                        footers[child.props.accessor] = child.props.footer;\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor,\n                        cell: props => {\n                            let value = props.getValue();\n\n                            if (typeof child.props.renderer === 'function') {\n                                value = child.props.renderer(value, props.row.original);\n                            }\n\n                            if (typeof value === 'string' || typeof value === 'number') {\n                                return <span className=\"truncate\">{value}</span>;\n                            }\n\n                            return value ?? null;\n                        },\n                        header: child.props.header,\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            defaultWidth: child.props.defaultWidth,\n                            disableReordering: child.props.disableReordering,\n                            menu: child.props.menu,\n                            tooltip: child.props.tooltip,\n                        },\n                        enableHiding: !child.props.disableHiding,\n                        // filtering\n                        enableColumnFilter: !child.props.disableFiltering,\n                        filterFn:\n                            options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n                        // sizing\n                        enableResizing: !child.props.disableResizing,\n                        minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n                        size: child.props.defaultWidth,\n                        // sorting\n                        enableSorting: !child.props.disableSorting,\n                        sortingFn: getSortingFn(child.props.dataType),\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && options.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn(\n                        options.enableMultipleRowSelection,\n                        lastSelectedRowIndex,\n                        options.onRowDrag,\n                        tableRef,\n                        texts\n                    )\n                )\n            );\n            internalFrozenColumnCount++;\n        }\n\n        if (options.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));\n        }\n\n        return { columns, internalFrozenColumnCount, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n    }, [children]);\n}\n\nconst getSortingFn = (dataType?: ColumnDataType): SortingFnOption<any> => {\n    if (dataType && dataType !== 'boolean') {\n        return dataType;\n    }\n\n    return 'auto';\n};\n"],"names":["useColumnDefinitions","children","options","tableRef","texts","useLocalization","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","internalFrozenColumnCount","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","filter","child","forEach","isValidElement","props","defaultWidth","accessor","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","footer","accessorKey","cell","value","getValue","renderer","row","original","className","header","meta","align","control","dataType","disableReordering","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","createRowDraggableColumn","actionsForRow","length","createRowActionsColumn"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js

@@ -11,14 +11,14 @@ import { useActiveRow } from './useActiveRow.js';
 import { useActiveRowStateListener } from './listeners/useActiveRowStateListener.js';
 
 function useTable(children, props, ref) {
-  var _settings$columnOrder, _ref, _settings$columnPinni, _settings$columnPinni2, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
+  var _settings$frozenColum, _settings$columnOrder, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
   const {
     actionsForRow = [],
     data,
     defaultActiveRowIndex,
     disableColumnFiltering = false,
     disableColumnHiding = false,
-    disableColumnPinning = false,
+    disableColumnFreezing = false,
     disableColumnReordering = false,
     disableColumnResizing = false,
     disableRowDensity = false,
@@ -45,7 +45,7 @@ function useTable(children, props, ref) {
   const enableMultipleRowSelection = !disableMultipleRowSelection && enableRowSelection;
   const {
     columns,
-    defaultColumnPinning,
+    internalFrozenColumnCount,
     defaultColumnSizing,
     defaultSorting,
     defaultColumnVisibility,
@@ -54,7 +54,7 @@ function useTable(children, props, ref) {
     actionsForRow,
     enableColumnFiltering: !disableColumnFiltering,
     enableColumnHiding: !disableColumnHiding,
-    enableColumnPinning: !disableColumnPinning,
+    enableColumnFreezing: !disableColumnFreezing,
     enableRowExpansion,
     enableRowSelection,
     enableMultipleRowSelection,
@@ -62,11 +62,13 @@ function useTable(children, props, ref) {
     onRowDrag
   }, ref);
   const lastSortedOrFilteredRows = React__default.useRef(null);
+  const totalFrozenColumns = internalFrozenColumnCount + ((_settings$frozenColum = settings === null || settings === void 0 ? void 0 : settings.frozenColumnCount) !== null && _settings$frozenColum !== void 0 ? _settings$frozenColum : 0);
+  const frozenColumns = columns.slice(0, totalFrozenColumns).map(column => column.id);
   // defaults
   const initialState = {
     columnOrder: (_settings$columnOrder = settings === null || settings === void 0 ? void 0 : settings.columnOrder) !== null && _settings$columnOrder !== void 0 ? _settings$columnOrder : columns.map(column => column.id),
     columnPinning: {
-      left: (_ref = (_settings$columnPinni = settings === null || settings === void 0 ? void 0 : (_settings$columnPinni2 = settings.columnPinning) === null || _settings$columnPinni2 === void 0 ? void 0 : _settings$columnPinni2.left) !== null && _settings$columnPinni !== void 0 ? _settings$columnPinni : defaultColumnPinning) !== null && _ref !== void 0 ? _ref : [],
+      left: frozenColumns,
       right: []
     },
     columnSizing: (_settings$columnSizin = settings === null || settings === void 0 ? void 0 : settings.columnSizing) !== null && _settings$columnSizin !== void 0 ? _settings$columnSizin : defaultColumnSizing,
@@ -84,6 +86,8 @@ function useTable(children, props, ref) {
   const [dragging, setDragging] = React__default.useState({});
   const [shouldPauseSortingAndFiltering, setShouldPauseSortingAndFiltering] = React__default.useState(false);
   const [shouldDisableTableActions, setShouldDisableTableActions] = React__default.useState(false);
+  // Frozen column count is the count of external columns that are frozen
+  const [frozenColumnsCount, setFrozenColumnsCount] = React__default.useState(totalFrozenColumns - internalFrozenColumnCount);
   // For some reason, using state instead of ref didn't work as expected, that's why ref is used
   const focussableColumnIndexes = React__default.useRef([]);
   // some options get set even if they are undefined, so we have to do it conditionally
@@ -93,7 +97,7 @@ function useTable(children, props, ref) {
     enableColumnResizing: !disableColumnResizing,
     enableGlobalFilter: !disableSearch,
     enableHiding: !disableColumnHiding,
-    enablePinning: !disableColumnPinning,
+    enablePinning: !disableColumnFreezing,
     enableRowSelection: enableRowSelection,
     enableMultiRowSelection: enableMultipleRowSelection,
     enableSorting: !disableSorting
@@ -154,9 +158,13 @@ function useTable(children, props, ref) {
       dragging,
       setDragging,
       // computed
+      enableColumnFreezing: !disableColumnFreezing,
       enableColumnReordering: !disableColumnReordering,
+      enableColumnHiding: !disableColumnHiding,
       shouldPauseHoverState,
       setShouldPauseHoverState,
+      frozenColumnsCount,
+      setFrozenColumnsCount,
       // resorting
       shouldPauseSortingAndFiltering,
       setShouldPauseSortingAndFiltering,