@economic/taco 2.26.12 → 2.26.14

package/dist/esm/index.css

@@ -607,7 +607,7 @@ table[data-taco^='table'] tr:last-child th:before {
 /* row groups */
 
 table[data-taco^='table'] tr[data-row-group] {
-        @apply bg-grey-100 sticky top-[calc(var(--table-header-group-depth)_*_42px)] z-20 mt-10 print:mt-0;
+        @apply bg-grey-100 sticky top-[calc(var(--table-header-group-depth)_*_42px)] z-30 mt-10 print:mt-0;
     }
 
 table[data-taco^='table'] tr[data-row-group]:first-child {

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/Header.js

@@ -50,6 +50,7 @@ function Header(props) {
     children: flexRender(header.column.columnDef.header, header.getContext()),
     colSpan: header.colSpan,
     customMenu: columnMeta.menu,
+    defaultWidth: columnMeta.defaultWidth,
     hasMenu,
     id: header.id,
     isFiltered: header.column.getIsFiltered(),
@@ -131,6 +132,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     className,
     colSpan,
     customMenu,
+    defaultWidth,
     hasMenu,
     id,
     index,
@@ -156,7 +158,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   } = props;
   const [ref, setRef] = React__default.useState(null);
   // save column width if none is set
-  useSetInitialColumnSizing(id, width, ref, canMeasureSize, setColumnSizing);
+  useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);
   // feature specific styles
   const style = {};
   // column groups often span multiple columns

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    TableMeta as ReactTableMeta,\n    ColumnMeta as ReactTableColumnMeta,\n    Header as ReactTableHeader,\n    ColumnPinningPosition as ReactTableColumnPinningPosition,\n    flexRender,\n} from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { freezeUptoExternalColumn, isInternalColumn, unfreezeAllExternalColumns } from '../../../useTableManager/util/columns';\nimport { Tooltip } from '../../../../../components/Tooltip/Tooltip';\nimport { SortIndicator, getSortAttributes } from './components/SortIndicator';\nimport {\n    TableColumnAlignment,\n    TableColumnMenu,\n    TableColumnSortDirection,\n    TableColumnWidth,\n    TableFilterComparator,\n} from '../../../types';\nimport { Resizer } from './components/Resizer';\nimport { HeaderMenu } from './components/Menu';\nimport { getIsPinned, useSetInitialColumnSizing } from './util';\n\nexport type HeaderProps<TType = unknown> = {\n    header: ReactTableHeader<TType, unknown>;\n    scrollToIndex: (index: number) => void;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, scrollToIndex } = props;\n\n    if (header.column.getIsGrouped()) {\n        return null;\n    }\n\n    const { table } = header.getContext();\n\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (header.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n\n    const isGroup = !!header.subHeaders.length;\n    const isPinned = getIsPinned(header);\n\n    const canFilter = !header.isPlaceholder && header.column.getCanFilter() && !!table.options.enableColumnFilters;\n    const canHide = !header.isPlaceholder && !isGroup && header.column.getCanHide();\n    const canMeasureSize = !!table.getRowModel().rows.length;\n    const canPin = !header.isPlaceholder && !isGroup && header.column.getCanPin();\n    const canResize = !header.isPlaceholder && !isGroup && header.column.getCanResize();\n    const canSort = !header.isPlaceholder && !isGroup && header.column.getCanSort();\n    const canGoto = canSort && !header.isPlaceholder && !isGroup && tableMeta.rowGoto.isEnabled && !!header.column.getIsSorted();\n\n    const hasMenu = !isInternalColumn(header.id) && (canHide || canGoto || canPin || canSort || !!columnMeta.menu);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const memoedProps: MemoedHeaderProps = {\n        align: columnMeta.align,\n        canFilter,\n        canHide,\n        canGoto,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        className: cn('group/header', columnMeta.headerClassName),\n        children: flexRender(header.column.columnDef.header, header.getContext()),\n        colSpan: header.colSpan,\n        customMenu: columnMeta.menu,\n        hasMenu,\n        id: header.id,\n        isFiltered: header.column.getIsFiltered(),\n        index: header.index,\n        isGroup,\n        isPinned,\n        isPlaceholder: header.isPlaceholder,\n        offset: header.column.getStart(isPinned),\n        scrollToIndex,\n        setRowActiveIndex: tableMeta.rowActive.setRowActiveIndex,\n        setColumnSizing: table.setColumnSizing,\n        tooltip: columnMeta.tooltip,\n        width: table.getState().columnSizing[header.id],\n    };\n\n    if (header.isPlaceholder) {\n        const nextHeader = header.headerGroup.headers[header.index + 1];\n        memoedProps.className = cn('!bg-white before:!content-none', memoedProps.className, {\n            'after:!content-none': nextHeader?.isPlaceholder,\n        });\n    }\n\n    if (canFilter) {\n        memoedProps.onFilter = () => {\n            header.column.setFilterValue({ comparator: TableFilterComparator.Contains });\n        };\n    }\n\n    if (canGoto) {\n        memoedProps.onGoto = ((query: string) => tableMeta.rowGoto.handleGoto?.(header.id, query, sorting, filters, search)) as (\n            query: string\n        ) => Promise<number>;\n    }\n\n    if (canHide) {\n        memoedProps.onHide = header.column.getToggleVisibilityHandler();\n    }\n\n    if (canPin) {\n        memoedProps.onPin = (index: number | undefined) => {\n            // TODO: this can probably be moved to a feature hook\n            table.setColumnPinning(pinningState => {\n                return {\n                    ...pinningState,\n                    left:\n                        index === undefined\n                            ? unfreezeAllExternalColumns(pinningState.left)\n                            : freezeUptoExternalColumn(\n                                  index,\n                                  table.getAllLeafColumns().map(column => column.id)\n                              ),\n                };\n            });\n        };\n    }\n\n    if (canResize) {\n        memoedProps.isResizing = header.column.getIsResizing();\n        memoedProps.onResize = header.getResizeHandler();\n    }\n\n    if (canSort) {\n        const handleSortToggle = (sortDirection: TableColumnSortDirection | false) => {\n            if (sortDirection === false) {\n                header.column.clearSorting();\n            } else {\n                header.column.toggleSorting(sortDirection === 'desc');\n            }\n        };\n\n        memoedProps.onSort = header.column.getToggleSortingHandler();\n        memoedProps.onSortToggle = handleSortToggle;\n        memoedProps.sortDirection = header.column.getIsSorted();\n    }\n\n    return <MemoedHeader key={header.id} {...memoedProps} />;\n}\n\nexport type MemoedHeaderProps = {\n    align?: TableColumnAlignment;\n    canFilter: boolean;\n    canHide: boolean;\n    canGoto: boolean;\n    canMeasureSize: boolean;\n    canPin: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    children: JSX.Element | React.ReactNode;\n    className?: string;\n    colSpan: number;\n    customMenu?: TableColumnMenu;\n    defaultWidth?: TableColumnWidth;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFiltered: boolean;\n    isGroup: boolean;\n    isPinned?: ReactTableColumnPinningPosition;\n    isPlaceholder: boolean;\n    isResizing?: boolean;\n    offset?: number;\n    onFilter?: () => void;\n    onGoto?: (query: string) => Promise<number>;\n    onHide?: (event: unknown) => void;\n    onPin?: (index: number | undefined) => void;\n    onResize?: (event: unknown) => void;\n    onSort?: (event: unknown) => void;\n    onSortToggle?: (sortDirection: TableColumnSortDirection | false) => void;\n    scrollToIndex: (index: number) => void;\n    setRowActiveIndex: (index: number) => void;\n    setColumnSizing: any;\n    sortDirection?: TableColumnSortDirection | false;\n    tooltip?: string;\n    width?: TableColumnWidth;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader(props: MemoedHeaderProps) {\n    const {\n        align,\n        canFilter,\n        canGoto,\n        canHide,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        children,\n        className,\n        colSpan,\n        customMenu,\n        hasMenu,\n        id,\n        index,\n        isFiltered,\n        isGroup,\n        isPinned,\n        isPlaceholder,\n        isResizing,\n        offset,\n        onFilter: handleFilter,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onPin: handlePin,\n        onResize: handleResize,\n        onSort: handleSort,\n        onSortToggle: handleSortToggle,\n        scrollToIndex,\n        setRowActiveIndex,\n        setColumnSizing,\n        sortDirection,\n        tooltip,\n        width,\n    } = props;\n    const [ref, setRef] = React.useState<HTMLTableCellElement | null>(null);\n\n    // save column width if none is set\n    useSetInitialColumnSizing(id, width, ref, canMeasureSize, setColumnSizing);\n\n    // feature specific styles\n    const style: React.CSSProperties = {};\n\n    // column groups often span multiple columns\n    if (colSpan > 1) {\n        style.gridColumn = `span ${colSpan}`;\n    }\n\n    // pinned columns should be offset from either the left or right\n    if (isPinned) {\n        style[isPinned] = `${offset}px`;\n    }\n\n    return (\n        <th\n            {...getSortAttributes(canSort, handleSort, sortDirection)}\n            className={className}\n            data-cell-align={isGroup ? 'center' : align}\n            data-cell-id={id}\n            data-cell-pinned={isPinned ? isPinned : undefined}\n            style={style}\n            ref={setRef}>\n            {isPlaceholder ? null : isInternalColumn(id) ? (\n                children\n            ) : (\n                <Tooltip title={String(tooltip ?? children)} placement=\"top\">\n                    <span className=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {sortDirection ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <HeaderMenu\n                    canFilter={canFilter}\n                    canGoto={canGoto}\n                    canHide={canHide}\n                    canPin={canPin}\n                    canSort={canSort}\n                    className={cn({\n                        'ml-auto': align !== 'right',\n                        'ml-0': align === 'right',\n                    })}\n                    customMenu={customMenu}\n                    index={index}\n                    isFiltered={isFiltered}\n                    onFilter={handleFilter}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    onPin={handlePin}\n                    onSortToggle={handleSortToggle}\n                    scrollToIndex={scrollToIndex}\n                    setRowActiveIndex={setRowActiveIndex}\n                    sortDirection={sortDirection}\n                />\n            ) : null}\n            {canResize ? (\n                <Resizer\n                    headerRef={ref}\n                    id={id}\n                    isResizing={isResizing as boolean}\n                    onResize={handleResize as (event: unknown) => void}\n                    setColumnSizing={setColumnSizing}\n                    width={width}\n                />\n            ) : null}\n        </th>\n    );\n});\n"],"names":["Header","props","header","scrollToIndex","column","getIsGrouped","table","getContext","tableMeta","options","meta","columnMeta","_header$column$column","columnDef","isGroup","subHeaders","length","isPinned","getIsPinned","canFilter","isPlaceholder","getCanFilter","enableColumnFilters","canHide","getCanHide","canMeasureSize","getRowModel","rows","canPin","getCanPin","canResize","getCanResize","canSort","getCanSort","canGoto","rowGoto","isEnabled","getIsSorted","hasMenu","isInternalColumn","id","menu","sorting","getState","filters","columnFilters","search","globalFilter","memoedProps","align","className","cn","headerClassName","children","flexRender","colSpan","customMenu","isFiltered","getIsFiltered","index","offset","getStart","setRowActiveIndex","rowActive","setColumnSizing","tooltip","width","columnSizing","nextHeader","headerGroup","headers","onFilter","setFilterValue","comparator","TableFilterComparator","Contains","onGoto","query","_tableMeta$rowGoto$ha","_tableMeta$rowGoto","handleGoto","call","onHide","getToggleVisibilityHandler","onPin","setColumnPinning","pinningState","left","undefined","unfreezeAllExternalColumns","freezeUptoExternalColumn","getAllLeafColumns","map","isResizing","getIsResizing","onResize","getResizeHandler","handleSortToggle","sortDirection","clearSorting","toggleSorting","onSort","getToggleSortingHandler","onSortToggle","React","MemoedHeader","key","memo","handleFilter","handleHide","handlePin","handleResize","handleSort","ref","setRef","useState","useSetInitialColumnSizing","style","gridColumn","getSortAttributes","Tooltip","title","String","placement","SortIndicator","direction","HeaderMenu","Resizer","headerRef"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    TableMeta as ReactTableMeta,\n    ColumnMeta as ReactTableColumnMeta,\n    Header as ReactTableHeader,\n    ColumnPinningPosition as ReactTableColumnPinningPosition,\n    flexRender,\n} from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { freezeUptoExternalColumn, isInternalColumn, unfreezeAllExternalColumns } from '../../../useTableManager/util/columns';\nimport { Tooltip } from '../../../../../components/Tooltip/Tooltip';\nimport { SortIndicator, getSortAttributes } from './components/SortIndicator';\nimport {\n    TableColumnAlignment,\n    TableColumnMenu,\n    TableColumnSortDirection,\n    TableColumnWidth,\n    TableFilterComparator,\n} from '../../../types';\nimport { Resizer } from './components/Resizer';\nimport { HeaderMenu } from './components/Menu';\nimport { getIsPinned, useSetInitialColumnSizing } from './util';\n\nexport type HeaderProps<TType = unknown> = {\n    header: ReactTableHeader<TType, unknown>;\n    scrollToIndex: (index: number) => void;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, scrollToIndex } = props;\n\n    if (header.column.getIsGrouped()) {\n        return null;\n    }\n\n    const { table } = header.getContext();\n\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (header.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n\n    const isGroup = !!header.subHeaders.length;\n    const isPinned = getIsPinned(header);\n\n    const canFilter = !header.isPlaceholder && header.column.getCanFilter() && !!table.options.enableColumnFilters;\n    const canHide = !header.isPlaceholder && !isGroup && header.column.getCanHide();\n    const canMeasureSize = !!table.getRowModel().rows.length;\n    const canPin = !header.isPlaceholder && !isGroup && header.column.getCanPin();\n    const canResize = !header.isPlaceholder && !isGroup && header.column.getCanResize();\n    const canSort = !header.isPlaceholder && !isGroup && header.column.getCanSort();\n    const canGoto = canSort && !header.isPlaceholder && !isGroup && tableMeta.rowGoto.isEnabled && !!header.column.getIsSorted();\n\n    const hasMenu = !isInternalColumn(header.id) && (canHide || canGoto || canPin || canSort || !!columnMeta.menu);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const memoedProps: MemoedHeaderProps = {\n        align: columnMeta.align,\n        canFilter,\n        canHide,\n        canGoto,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        className: cn('group/header', columnMeta.headerClassName),\n        children: flexRender(header.column.columnDef.header, header.getContext()),\n        colSpan: header.colSpan,\n        customMenu: columnMeta.menu,\n        defaultWidth: columnMeta.defaultWidth,\n        hasMenu,\n        id: header.id,\n        isFiltered: header.column.getIsFiltered(),\n        index: header.index,\n        isGroup,\n        isPinned,\n        isPlaceholder: header.isPlaceholder,\n        offset: header.column.getStart(isPinned),\n        scrollToIndex,\n        setRowActiveIndex: tableMeta.rowActive.setRowActiveIndex,\n        setColumnSizing: table.setColumnSizing,\n        tooltip: columnMeta.tooltip,\n        width: table.getState().columnSizing[header.id],\n    };\n\n    if (header.isPlaceholder) {\n        const nextHeader = header.headerGroup.headers[header.index + 1];\n        memoedProps.className = cn('!bg-white before:!content-none', memoedProps.className, {\n            'after:!content-none': nextHeader?.isPlaceholder,\n        });\n    }\n\n    if (canFilter) {\n        memoedProps.onFilter = () => {\n            header.column.setFilterValue({ comparator: TableFilterComparator.Contains });\n        };\n    }\n\n    if (canGoto) {\n        memoedProps.onGoto = ((query: string) => tableMeta.rowGoto.handleGoto?.(header.id, query, sorting, filters, search)) as (\n            query: string\n        ) => Promise<number>;\n    }\n\n    if (canHide) {\n        memoedProps.onHide = header.column.getToggleVisibilityHandler();\n    }\n\n    if (canPin) {\n        memoedProps.onPin = (index: number | undefined) => {\n            // TODO: this can probably be moved to a feature hook\n            table.setColumnPinning(pinningState => {\n                return {\n                    ...pinningState,\n                    left:\n                        index === undefined\n                            ? unfreezeAllExternalColumns(pinningState.left)\n                            : freezeUptoExternalColumn(\n                                  index,\n                                  table.getAllLeafColumns().map(column => column.id)\n                              ),\n                };\n            });\n        };\n    }\n\n    if (canResize) {\n        memoedProps.isResizing = header.column.getIsResizing();\n        memoedProps.onResize = header.getResizeHandler();\n    }\n\n    if (canSort) {\n        const handleSortToggle = (sortDirection: TableColumnSortDirection | false) => {\n            if (sortDirection === false) {\n                header.column.clearSorting();\n            } else {\n                header.column.toggleSorting(sortDirection === 'desc');\n            }\n        };\n\n        memoedProps.onSort = header.column.getToggleSortingHandler();\n        memoedProps.onSortToggle = handleSortToggle;\n        memoedProps.sortDirection = header.column.getIsSorted();\n    }\n\n    return <MemoedHeader key={header.id} {...memoedProps} />;\n}\n\nexport type MemoedHeaderProps = {\n    align?: TableColumnAlignment;\n    canFilter: boolean;\n    canHide: boolean;\n    canGoto: boolean;\n    canMeasureSize: boolean;\n    canPin: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    children: JSX.Element | React.ReactNode;\n    className?: string;\n    colSpan: number;\n    customMenu?: TableColumnMenu;\n    defaultWidth?: TableColumnWidth;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFiltered: boolean;\n    isGroup: boolean;\n    isPinned?: ReactTableColumnPinningPosition;\n    isPlaceholder: boolean;\n    isResizing?: boolean;\n    offset?: number;\n    onFilter?: () => void;\n    onGoto?: (query: string) => Promise<number>;\n    onHide?: (event: unknown) => void;\n    onPin?: (index: number | undefined) => void;\n    onResize?: (event: unknown) => void;\n    onSort?: (event: unknown) => void;\n    onSortToggle?: (sortDirection: TableColumnSortDirection | false) => void;\n    scrollToIndex: (index: number) => void;\n    setRowActiveIndex: (index: number) => void;\n    setColumnSizing: any;\n    sortDirection?: TableColumnSortDirection | false;\n    tooltip?: string;\n    width?: TableColumnWidth;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader(props: MemoedHeaderProps) {\n    const {\n        align,\n        canFilter,\n        canGoto,\n        canHide,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        children,\n        className,\n        colSpan,\n        customMenu,\n        defaultWidth,\n        hasMenu,\n        id,\n        index,\n        isFiltered,\n        isGroup,\n        isPinned,\n        isPlaceholder,\n        isResizing,\n        offset,\n        onFilter: handleFilter,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onPin: handlePin,\n        onResize: handleResize,\n        onSort: handleSort,\n        onSortToggle: handleSortToggle,\n        scrollToIndex,\n        setRowActiveIndex,\n        setColumnSizing,\n        sortDirection,\n        tooltip,\n        width,\n    } = props;\n    const [ref, setRef] = React.useState<HTMLTableCellElement | null>(null);\n\n    // save column width if none is set\n    useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);\n\n    // feature specific styles\n    const style: React.CSSProperties = {};\n\n    // column groups often span multiple columns\n    if (colSpan > 1) {\n        style.gridColumn = `span ${colSpan}`;\n    }\n\n    // pinned columns should be offset from either the left or right\n    if (isPinned) {\n        style[isPinned] = `${offset}px`;\n    }\n\n    return (\n        <th\n            {...getSortAttributes(canSort, handleSort, sortDirection)}\n            className={className}\n            data-cell-align={isGroup ? 'center' : align}\n            data-cell-id={id}\n            data-cell-pinned={isPinned ? isPinned : undefined}\n            style={style}\n            ref={setRef}>\n            {isPlaceholder ? null : isInternalColumn(id) ? (\n                children\n            ) : (\n                <Tooltip title={String(tooltip ?? children)} placement=\"top\">\n                    <span className=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {sortDirection ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <HeaderMenu\n                    canFilter={canFilter}\n                    canGoto={canGoto}\n                    canHide={canHide}\n                    canPin={canPin}\n                    canSort={canSort}\n                    className={cn({\n                        'ml-auto': align !== 'right',\n                        'ml-0': align === 'right',\n                    })}\n                    customMenu={customMenu}\n                    index={index}\n                    isFiltered={isFiltered}\n                    onFilter={handleFilter}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    onPin={handlePin}\n                    onSortToggle={handleSortToggle}\n                    scrollToIndex={scrollToIndex}\n                    setRowActiveIndex={setRowActiveIndex}\n                    sortDirection={sortDirection}\n                />\n            ) : null}\n            {canResize ? (\n                <Resizer\n                    headerRef={ref}\n                    id={id}\n                    isResizing={isResizing as boolean}\n                    onResize={handleResize as (event: unknown) => void}\n                    setColumnSizing={setColumnSizing}\n                    width={width}\n                />\n            ) : null}\n        </th>\n    );\n});\n"],"names":["Header","props","header","scrollToIndex","column","getIsGrouped","table","getContext","tableMeta","options","meta","columnMeta","_header$column$column","columnDef","isGroup","subHeaders","length","isPinned","getIsPinned","canFilter","isPlaceholder","getCanFilter","enableColumnFilters","canHide","getCanHide","canMeasureSize","getRowModel","rows","canPin","getCanPin","canResize","getCanResize","canSort","getCanSort","canGoto","rowGoto","isEnabled","getIsSorted","hasMenu","isInternalColumn","id","menu","sorting","getState","filters","columnFilters","search","globalFilter","memoedProps","align","className","cn","headerClassName","children","flexRender","colSpan","customMenu","defaultWidth","isFiltered","getIsFiltered","index","offset","getStart","setRowActiveIndex","rowActive","setColumnSizing","tooltip","width","columnSizing","nextHeader","headerGroup","headers","onFilter","setFilterValue","comparator","TableFilterComparator","Contains","onGoto","query","_tableMeta$rowGoto$ha","_tableMeta$rowGoto","handleGoto","call","onHide","getToggleVisibilityHandler","onPin","setColumnPinning","pinningState","left","undefined","unfreezeAllExternalColumns","freezeUptoExternalColumn","getAllLeafColumns","map","isResizing","getIsResizing","onResize","getResizeHandler","handleSortToggle","sortDirection","clearSorting","toggleSorting","onSort","getToggleSortingHandler","onSortToggle","React","MemoedHeader","key","memo","handleFilter","handleHide","handlePin","handleResize","handleSort","ref","setRef","useState","useSetInitialColumnSizing","style","gridColumn","getSortAttributes","Tooltip","title","String","placement","SortIndicator","direction","HeaderMenu","Resizer","headerRef"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/util.js

@@ -1,16 +1,22 @@
 import React__default from 'react';
 import { isInternalColumn } from '../../../useTableManager/util/columns.js';
 
-function useSetInitialColumnSizing(id, width, element, canMeasureSize, setColumnSizing) {
-  React__default.useEffect(() => {
+function useSetInitialColumnSizing(id, defaultWidth, width, element, canMeasureSize, setColumnSizing) {
+  React__default.useLayoutEffect(() => {
     // columns must set a pixel width...
     // otherwise when scrolling through the table, the column widths adjust based on the content
     // of the column, this is because to the virtualisation mounting new rows and unmounting old ones
     if (canMeasureSize && element && !Number.isInteger(width) && !isInternalColumn(id)) {
-      setColumnSizing(sizes => ({
+      const setWidth = () => setColumnSizing(sizes => ({
         ...sizes,
         [id]: element.getBoundingClientRect().width
       }));
+      // grow columns need to wait for auto layout to run, otherwise they register the incorrect size
+      if (defaultWidth === 'grow') {
+        requestAnimationFrame(setWidth);
+      } else {
+        setWidth();
+      }
     }
   }, [element, canMeasureSize, width]);
 }

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/util.ts"],"sourcesContent":["import React from 'react';\nimport { Header as ReactTableHeader, ColumnPinningPosition as ReactTableColumnPinningPosition } from '@tanstack/react-table';\nimport { TableColumnWidth } from '../../../types';\nimport { isInternalColumn } from '../../../useTableManager/util/columns';\n\nexport function useSetInitialColumnSizing(\n    id: string,\n    width: TableColumnWidth | undefined,\n    element: HTMLTableCellElement | null,\n    canMeasureSize: boolean,\n    setColumnSizing: any\n) {\n    React.useEffect(() => {\n        // columns must set a pixel width...\n        // otherwise when scrolling through the table, the column widths adjust based on the content\n        // of the column, this is because to the virtualisation mounting new rows and unmounting old ones\n        if (canMeasureSize && element && !Number.isInteger(width) && !isInternalColumn(id)) {\n            setColumnSizing(sizes => ({\n                ...sizes,\n                [id]: element.getBoundingClientRect().width,\n            }));\n        }\n    }, [element, canMeasureSize, width]);\n}\n\nexport function getIsPinned<TType = unknown>(\n    header: ReactTableHeader<TType, unknown>\n): ReactTableColumnPinningPosition | undefined {\n    // TODO: Is there a native function that does this check for groups?\n    return header.subHeaders?.length\n        ? header.subHeaders.find(x => x.column.getIsPinned())?.column.getIsPinned()\n        : header.column.getIsPinned();\n}\n"],"names":["useSetInitialColumnSizing","id","width","element","canMeasureSize","setColumnSizing","React","useEffect","Number","isInteger","isInternalColumn","sizes","getBoundingClientRect","getIsPinned","header","_header$subHeaders","subHeaders","length","_header$subHeaders$fi","find","x","column"],"mappings":";;;SAKgBA,yBAAyBA,CACrCC,EAAU,EACVC,KAAmC,EACnCC,OAAoC,EACpCC,cAAuB,EACvBC,eAAoB;EAEpBC,cAAK,CAACC,SAAS,CAAC;;;;IAIZ,IAAIH,cAAc,IAAID,OAAO,IAAI,CAACK,MAAM,CAACC,SAAS,CAACP,KAAK,CAAC,IAAI,CAACQ,gBAAgB,CAACT,EAAE,CAAC,EAAE;MAChFI,eAAe,CAACM,KAAK,KAAK;QACtB,GAAGA,KAAK;QACR,CAACV,EAAE,GAAGE,OAAO,CAACS,qBAAqB,EAAE,CAACV;OACzC,CAAC,CAAC;;GAEV,EAAE,CAACC,OAAO,EAAEC,cAAc,EAAEF,KAAK,CAAC,CAAC;AACxC;SAEgBW,WAAWA,CACvBC,MAAwC;;;EAGxC,OAAO,CAAAC,kBAAA,GAAAD,MAAM,CAACE,UAAU,cAAAD,kBAAA,eAAjBA,kBAAA,CAAmBE,MAAM,IAAAC,qBAAA,GAC1BJ,MAAM,CAACE,UAAU,CAACG,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACC,MAAM,CAACR,WAAW,EAAE,CAAC,cAAAK,qBAAA,uBAAnDA,qBAAA,CAAqDG,MAAM,CAACR,WAAW,EAAE,GACzEC,MAAM,CAACO,MAAM,CAACR,WAAW,EAAE;AACrC;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/util.ts"],"sourcesContent":["import React from 'react';\nimport { Header as ReactTableHeader, ColumnPinningPosition as ReactTableColumnPinningPosition } from '@tanstack/react-table';\nimport { TableColumnWidth } from '../../../types';\nimport { isInternalColumn } from '../../../useTableManager/util/columns';\n\nexport function useSetInitialColumnSizing(\n    id: string,\n    defaultWidth: TableColumnWidth | undefined,\n    width: TableColumnWidth | undefined,\n    element: HTMLTableCellElement | null,\n    canMeasureSize: boolean,\n    setColumnSizing: any\n) {\n    React.useLayoutEffect(() => {\n        // columns must set a pixel width...\n        // otherwise when scrolling through the table, the column widths adjust based on the content\n        // of the column, this is because to the virtualisation mounting new rows and unmounting old ones\n        if (canMeasureSize && element && !Number.isInteger(width) && !isInternalColumn(id)) {\n            const setWidth = () =>\n                setColumnSizing(sizes => ({\n                    ...sizes,\n                    [id]: element.getBoundingClientRect().width,\n                }));\n\n            // grow columns need to wait for auto layout to run, otherwise they register the incorrect size\n            if (defaultWidth === 'grow') {\n                requestAnimationFrame(setWidth);\n            } else {\n                setWidth();\n            }\n        }\n    }, [element, canMeasureSize, width]);\n}\n\nexport function getIsPinned<TType = unknown>(\n    header: ReactTableHeader<TType, unknown>\n): ReactTableColumnPinningPosition | undefined {\n    // TODO: Is there a native function that does this check for groups?\n    return header.subHeaders?.length\n        ? header.subHeaders.find(x => x.column.getIsPinned())?.column.getIsPinned()\n        : header.column.getIsPinned();\n}\n"],"names":["useSetInitialColumnSizing","id","defaultWidth","width","element","canMeasureSize","setColumnSizing","React","useLayoutEffect","Number","isInteger","isInternalColumn","setWidth","sizes","getBoundingClientRect","requestAnimationFrame","getIsPinned","header","_header$subHeaders","subHeaders","length","_header$subHeaders$fi","find","x","column"],"mappings":";;;SAKgBA,yBAAyBA,CACrCC,EAAU,EACVC,YAA0C,EAC1CC,KAAmC,EACnCC,OAAoC,EACpCC,cAAuB,EACvBC,eAAoB;EAEpBC,cAAK,CAACC,eAAe,CAAC;;;;IAIlB,IAAIH,cAAc,IAAID,OAAO,IAAI,CAACK,MAAM,CAACC,SAAS,CAACP,KAAK,CAAC,IAAI,CAACQ,gBAAgB,CAACV,EAAE,CAAC,EAAE;MAChF,MAAMW,QAAQ,GAAGA,MACbN,eAAe,CAACO,KAAK,KAAK;QACtB,GAAGA,KAAK;QACR,CAACZ,EAAE,GAAGG,OAAO,CAACU,qBAAqB,EAAE,CAACX;OACzC,CAAC,CAAC;;MAGP,IAAID,YAAY,KAAK,MAAM,EAAE;QACzBa,qBAAqB,CAACH,QAAQ,CAAC;OAClC,MAAM;QACHA,QAAQ,EAAE;;;GAGrB,EAAE,CAACR,OAAO,EAAEC,cAAc,EAAEF,KAAK,CAAC,CAAC;AACxC;SAEgBa,WAAWA,CACvBC,MAAwC;;;EAGxC,OAAO,CAAAC,kBAAA,GAAAD,MAAM,CAACE,UAAU,cAAAD,kBAAA,eAAjBA,kBAAA,CAAmBE,MAAM,IAAAC,qBAAA,GAC1BJ,MAAM,CAACE,UAAU,CAACG,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACC,MAAM,CAACR,WAAW,EAAE,CAAC,cAAAK,qBAAA,uBAAnDA,qBAAA,CAAqDG,MAAM,CAACR,WAAW,EAAE,GACzEC,MAAM,CAACO,MAAM,CAACR,WAAW,EAAE;AACrC;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n    ColumnFilter as ReactTableColumnFilter,\n    ColumnFiltersState as ReactTableColumnFilterState,\n    ColumnOrderState as ReactTableColumnOrderState,\n    ColumnPinningState as ReactTableColumnPinningState,\n    ColumnSort as ReactTableColumnSort,\n    ColumnSizingState as ReactTableColumnSizingState,\n    GroupingState as ReactTableGroupingState,\n    VisibilityState as ReactTableColumnVisibilityState,\n    SortingState as ReactTableSortingState,\n    BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n    BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, ValueOf } from '../../types';\nimport { MenuProps } from '../../components/Menu/Menu';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\ntype TODO = any;\n\nexport type TableRef = HTMLTableElement & {\n    instance: {\n        resetFiltering: () => void;\n        resetRowExpansion: () => void;\n        resetRowSelection: () => void;\n        resetSorting: () => void;\n    };\n};\n\n// filtering\nexport enum TableFilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsEmpty,\n    IsNotEmpty,\n    IsLessThanOrEqualTo,\n    IsGreaterThanOrEqualTo,\n    HasAnyOf,\n    HasAllOf,\n    HasNoneOf,\n}\nexport type TableFilterValue = {\n    comparator: TableFilterComparator;\n    value: any;\n};\nexport type TableFilter = {\n    id: string;\n    value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType = 'auto' | 'number' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n    | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch'\n    | 'textarea';\nexport type TableColumnRendererControlProps = {\n    className?: string;\n    disabled?: boolean;\n    fontSize?: FontSize;\n    invalid?: boolean;\n    onBlur?: (value: any) => void;\n    onFocus?: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n    setValue: (value: any) => void;\n    value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TValue> = (values: TValue[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n    | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n    | ReactTableBuiltInSortingFn\n    | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n    column: string,\n    query: string,\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n    _meta?: {\n        layout?: 'heading' | 'summary' | 'item';\n    };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n    handler: TableShortcutHandlerFn<TType>;\n    meta?: boolean;\n    shift?: boolean;\n};\n\n// table\nexport type TableFilterHandler = (filters: TableColumnFilter[]) => void;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableServerLoadPageHandler = (\n    pageIndex: number,\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    search: string | undefined\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    search: string | undefined\n) => Promise<void>;\nexport enum TableServerLoadAllState {\n    Incomplete,\n    Loading,\n    Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableSortHandler = (sorting: TableColumnSort[]) => void;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateRenderer = () => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n    columnFilters?: ReactTableColumnFilterState;\n    columnOrder?: ReactTableColumnOrderState;\n    columnPinning?: ReactTableColumnPinningState;\n    columnSizing?: ReactTableColumnSizingState;\n    columnVisibility?: ReactTableColumnVisibilityState;\n    excludeUnmatchedRecordsInSearch?: boolean;\n    fontSize?: TableFontSize;\n    grouping?: ReactTableGroupingState;\n    rowHeight?: TableRowHeight;\n    searchQuery?: string;\n    sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n    columnOrder: boolean;\n    columnPinning: boolean;\n    columnSizing: boolean;\n    columnVisibility: boolean;\n    excludeUnmatchedRecordsInSearch: boolean;\n    fontSize: boolean;\n    grouping: boolean;\n    rowHeight: boolean;\n    sorting: boolean;\n};\n\n// props\nexport type TableFeatureProps = {\n    // react-table built-in\n    enableFiltering?: boolean;\n    enableSearch?: boolean;\n    enableSorting?: boolean;\n    enableColumnFreezing?: boolean;\n    enableColumnHiding?: boolean;\n    enableColumnResizing?: boolean;\n    enableRowExpansion?: boolean;\n    enableRowSelection?: boolean;\n    enableRowSelectionSingle?: boolean;\n\n    // custom -- common between all table types\n    enableColumnOrdering?: boolean;\n    enableFontSize?: boolean;\n    enableFooter?: boolean;\n    enablePrinting?: boolean;\n    enableRowActions?: boolean;\n    enableRowActive?: boolean;\n    enableRowClick?: boolean;\n    enableRowDrag?: boolean;\n    enableRowDrop?: boolean;\n    enableRowGoto?: boolean;\n    enableRowHeight?: boolean;\n    enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps & {\n    children: (JSX.Element | boolean | null | undefined)[];\n    data: TType[];\n    id: string;\n\n    // misc\n    customSettings?: TableCustomSettingsRenderer;\n    defaultColumnFreezingIndex?: number;\n    defaultRowActiveIndex?: number;\n    defaultRowGroupColumnId?: keyof TType;\n    defaultSettings?: TableSettings;\n    emptyState?: TableEmptyStateRenderer;\n    preset?: TablePreset;\n    rowActions?: TableRowActionRenderer<TType>[];\n    rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n    rowActionsLength?: number;\n    rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n    rowIdentityColumnId?: string;\n    shortcuts?: TableShortcuts<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    toolbarPanel?: JSX.Element;\n\n    // handlers\n    onRowClick?: TableRowClickHandler<TType>;\n    onRowDrag?: TableRowDragHandler<TType>;\n    onRowDrop?: TableRowDropHandler<TType>;\n    onRowGoto?: TableRowGotoHandler;\n    onRowSelect?: TableRowSelectHandler<TType>;\n\n    // state change handlers\n    onChangeFilter?: TableFilterHandler;\n    onChangeSearch?: TODO; // not currently supported\n    onChangeSettings?: TableSettingsHandler;\n    onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n    length?: never;\n    loadAll?: never;\n    loadPage?: never;\n    pageSize?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n    length: number | undefined;\n    loadAll: TableServerLoadAllHandler;\n    loadPage: TableServerLoadPageHandler;\n    pageSize?: number;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n    [Key in keyof TType]: {\n        accessor?: Key;\n        id: string;\n        // renderers\n        renderer?: TableColumnRenderer<TType, TType[Key]>;\n        /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n        aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n        control?: TableColumnRendererControl<TType>;\n        footer?: TableColumnRendererFooter<TType[Key]>;\n        header: TableColumnRendererHeader;\n        // options\n        /** Aggregation function to be used when the column is part of a grouped row */\n        aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n        align?: TableColumnAlignment;\n        className?: TableColumnClassNameHandler<TType>;\n        dataType?: TableColumnDataType;\n        defaultHidden?: boolean;\n        defaultWidth?: TableColumnWidth;\n        enableFiltering?: boolean;\n        enableGrouping?: boolean;\n        enableHiding?: boolean;\n        enableOrdering?: boolean;\n        enablePrinting?: boolean;\n        enableResizing?: boolean;\n        enableSearch?: boolean;\n        enableSorting?: boolean;\n        enableTruncate?: boolean;\n        filters?: TableFilterComparator[];\n        headerClassName?: string;\n        menu?: TableColumnMenu;\n        minWidth?: number;\n        sort?: TableColumnSortDirection;\n        sortFn?: TableColumnSortFn<TType>;\n        tooltip?: string;\n    };\n}>;\n\nexport type TableGroupProps = {\n    children: (JSX.Element | boolean | null | undefined)[];\n    header: string;\n    id: string;\n};\n\nexport type TableTexts = {\n    columns: {\n        actions: {\n            tooltip: string;\n        };\n        drag: {\n            tooltip: string;\n        };\n        expansion: {\n            collapse: string;\n            collapseAll: string;\n            expand: string;\n            expandAll: string;\n        };\n        menu: {\n            editFilter: string;\n            filter: string;\n            freezeFirstColumn: string;\n            freezeUptoColumn: string;\n            gotoRow: string;\n            hideColumn: string;\n            unfreezeColumns: string;\n            sorting: string;\n            sortingOrder: {\n                ascending: string;\n                descending: string;\n                unsorted: string;\n            };\n        };\n        resize: {\n            tooltip: string;\n        };\n        select: {\n            deselect: string;\n            deselectAll: string;\n            select: string;\n            selectAll: string;\n        };\n    };\n    columnSettings: {\n        button: string;\n        noResults: string;\n        search: string;\n        tooltip: string;\n    };\n    filters: {\n        button: string;\n        buttons: {\n            addFilter: string;\n            clearFilters: string;\n        };\n        comparators: {\n            contains: string;\n            doesNotContain: string;\n            isEqualTo: string;\n            isNotEqualTo: string;\n            isGreaterThan: string;\n            isLessThan: string;\n            isBetween: string;\n            isEmpty: string;\n            isNotEmpty: string;\n            isBefore: string;\n            isAfter: string;\n            isLessThanOrEqualTo: string;\n            isGreaterThanOrEqualTo: string;\n            isOnOrBefore: string;\n            isOnOrAfter: string;\n            hasAnyOf: string;\n            hasAllOf: string;\n            hasNoneOf: string;\n        };\n        conditions: {\n            and: string;\n            where: string;\n        };\n        emptyFilter: {\n            condition: string;\n            value: string;\n        };\n        hiddenColumn: string;\n        hiddenGroupedColumn: string;\n        tooltip: string;\n        total: string;\n    };\n    fontSize: {\n        tooltip: string;\n        sizes: {\n            small: string;\n            medium: string;\n            large: string;\n        };\n    };\n    footer: {\n        summary: {\n            count: string;\n            records: string;\n            selected: string;\n        };\n    };\n    print: {\n        error: string;\n        loading: string;\n        tooltip: string;\n        warningDialog: {\n            title: string;\n            description: string;\n            checkboxVisibilityLabel: string;\n            cancelButtonText: string;\n            printButtonText: string;\n        };\n        settingsDialog: {\n            title: string;\n            size: string;\n            sizeA5: string;\n            sizeA4: string;\n            sizeA3: string;\n            sizeLetter: string;\n            sizeLegal: string;\n            orientation: string;\n            orientationLandscape: string;\n            orientationPortrait: string;\n            rows: string;\n            rowsAll: string;\n            rowsSelected: string;\n            layout: string;\n            layoutSplitGroups: string;\n        };\n    };\n    rowHeight: {\n        tooltip: string;\n        sizes: {\n            short: string;\n            medium: string;\n            tall: string;\n            extraTall: string;\n        };\n    };\n    search: {\n        excludeUnmatchedResults: string;\n        placeholder: string;\n    };\n    otherOptions: {\n        tooltip: string;\n    };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AA4BA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IA+GrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n    ColumnFilter as ReactTableColumnFilter,\n    ColumnFiltersState as ReactTableColumnFilterState,\n    ColumnOrderState as ReactTableColumnOrderState,\n    ColumnPinningState as ReactTableColumnPinningState,\n    ColumnSort as ReactTableColumnSort,\n    ColumnSizingState as ReactTableColumnSizingState,\n    VisibilityState as ReactTableColumnVisibilityState,\n    SortingState as ReactTableSortingState,\n    BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n    BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, ValueOf } from '../../types';\nimport { MenuProps } from '../../components/Menu/Menu';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\ntype TODO = any;\n\nexport type TableRef = HTMLTableElement & {\n    instance: {\n        resetFiltering: () => void;\n        resetRowExpansion: () => void;\n        resetRowSelection: () => void;\n        resetSorting: () => void;\n    };\n};\n\n// filtering\nexport enum TableFilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsEmpty,\n    IsNotEmpty,\n    IsLessThanOrEqualTo,\n    IsGreaterThanOrEqualTo,\n    HasAnyOf,\n    HasAllOf,\n    HasNoneOf,\n}\nexport type TableFilterValue = {\n    comparator: TableFilterComparator;\n    value: any;\n};\nexport type TableFilter = {\n    id: string;\n    value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType = 'auto' | 'number' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n    | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch'\n    | 'textarea';\nexport type TableColumnRendererControlProps = {\n    className?: string;\n    disabled?: boolean;\n    fontSize?: FontSize;\n    invalid?: boolean;\n    onBlur?: (value: any) => void;\n    onFocus?: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n    setValue: (value: any) => void;\n    value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TValue> = (values: TValue[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n    | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n    | ReactTableBuiltInSortingFn\n    | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n    column: string,\n    query: string,\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n    _meta?: {\n        layout?: 'heading' | 'summary' | 'item';\n    };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n    handler: TableShortcutHandlerFn<TType>;\n    meta?: boolean;\n    shift?: boolean;\n};\n\n// table\nexport type TableFilterHandler = (filters: TableColumnFilter[]) => void;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableServerLoadPageHandler = (\n    pageIndex: number,\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    search: string | undefined\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (\n    sorting: TableColumnSort[],\n    filters: TableColumnFilter[],\n    search: string | undefined\n) => Promise<void>;\nexport enum TableServerLoadAllState {\n    Incomplete,\n    Loading,\n    Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableSortHandler = (sorting: TableColumnSort[]) => void;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateRenderer = () => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n    columnFilters?: ReactTableColumnFilterState;\n    columnOrder?: ReactTableColumnOrderState;\n    columnPinning?: ReactTableColumnPinningState;\n    columnSizing?: ReactTableColumnSizingState;\n    columnVisibility?: ReactTableColumnVisibilityState;\n    excludeUnmatchedRecordsInSearch?: boolean;\n    fontSize?: TableFontSize;\n    rowHeight?: TableRowHeight;\n    searchQuery?: string;\n    sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n    columnOrder: boolean;\n    columnPinning: boolean;\n    columnSizing: boolean;\n    columnVisibility: boolean;\n    excludeUnmatchedRecordsInSearch: boolean;\n    fontSize: boolean;\n    grouping: boolean;\n    rowHeight: boolean;\n    sorting: boolean;\n};\n\n// props\nexport type TableFeatureProps = {\n    // react-table built-in\n    enableFiltering?: boolean;\n    enableSearch?: boolean;\n    enableSorting?: boolean;\n    enableColumnFreezing?: boolean;\n    enableColumnHiding?: boolean;\n    enableColumnResizing?: boolean;\n    enableRowExpansion?: boolean;\n    enableRowSelection?: boolean;\n    enableRowSelectionSingle?: boolean;\n\n    // custom -- common between all table types\n    enableColumnOrdering?: boolean;\n    enableFontSize?: boolean;\n    enableFooter?: boolean;\n    enablePrinting?: boolean;\n    enableRowActions?: boolean;\n    enableRowActive?: boolean;\n    enableRowClick?: boolean;\n    enableRowDrag?: boolean;\n    enableRowDrop?: boolean;\n    enableRowGoto?: boolean;\n    enableRowHeight?: boolean;\n    enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps & {\n    children: (JSX.Element | boolean | null | undefined)[];\n    data: TType[];\n    id: string;\n\n    // misc\n    customSettings?: TableCustomSettingsRenderer;\n    defaultColumnFreezingIndex?: number;\n    defaultRowActiveIndex?: number;\n    defaultRowGroupColumnId?: keyof TType;\n    defaultSettings?: TableSettings;\n    emptyState?: TableEmptyStateRenderer;\n    preset?: TablePreset;\n    rowActions?: TableRowActionRenderer<TType>[];\n    rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n    rowActionsLength?: number;\n    rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n    rowIdentityColumnId?: string;\n    shortcuts?: TableShortcuts<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    toolbarPanel?: JSX.Element;\n\n    // handlers\n    onRowClick?: TableRowClickHandler<TType>;\n    onRowDrag?: TableRowDragHandler<TType>;\n    onRowDrop?: TableRowDropHandler<TType>;\n    onRowGoto?: TableRowGotoHandler;\n    onRowSelect?: TableRowSelectHandler<TType>;\n\n    // state change handlers\n    onChangeFilter?: TableFilterHandler;\n    onChangeSearch?: TODO; // not currently supported\n    onChangeSettings?: TableSettingsHandler;\n    onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n    length?: never;\n    loadAll?: never;\n    loadPage?: never;\n    pageSize?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n    length: number | undefined;\n    loadAll: TableServerLoadAllHandler;\n    loadPage: TableServerLoadPageHandler;\n    pageSize?: number;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n    [Key in keyof TType]: {\n        accessor?: Key;\n        id: string;\n        // renderers\n        renderer?: TableColumnRenderer<TType, TType[Key]>;\n        /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n        aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n        control?: TableColumnRendererControl<TType>;\n        footer?: TableColumnRendererFooter<TType[Key]>;\n        header: TableColumnRendererHeader;\n        // options\n        /** Aggregation function to be used when the column is part of a grouped row */\n        aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n        align?: TableColumnAlignment;\n        className?: TableColumnClassNameHandler<TType>;\n        dataType?: TableColumnDataType;\n        defaultHidden?: boolean;\n        defaultWidth?: TableColumnWidth;\n        enableFiltering?: boolean;\n        enableGrouping?: boolean;\n        enableHiding?: boolean;\n        enableOrdering?: boolean;\n        enablePrinting?: boolean;\n        enableResizing?: boolean;\n        enableSearch?: boolean;\n        enableSorting?: boolean;\n        enableTruncate?: boolean;\n        filters?: TableFilterComparator[];\n        headerClassName?: string;\n        menu?: TableColumnMenu;\n        minWidth?: number;\n        sort?: TableColumnSortDirection;\n        sortFn?: TableColumnSortFn<TType>;\n        tooltip?: string;\n    };\n}>;\n\nexport type TableGroupProps = {\n    children: (JSX.Element | boolean | null | undefined)[];\n    header: string;\n    id: string;\n};\n\nexport type TableTexts = {\n    columns: {\n        actions: {\n            tooltip: string;\n        };\n        drag: {\n            tooltip: string;\n        };\n        expansion: {\n            collapse: string;\n            collapseAll: string;\n            expand: string;\n            expandAll: string;\n        };\n        menu: {\n            editFilter: string;\n            filter: string;\n            freezeFirstColumn: string;\n            freezeUptoColumn: string;\n            gotoRow: string;\n            hideColumn: string;\n            unfreezeColumns: string;\n            sorting: string;\n            sortingOrder: {\n                ascending: string;\n                descending: string;\n                unsorted: string;\n            };\n        };\n        resize: {\n            tooltip: string;\n        };\n        select: {\n            deselect: string;\n            deselectAll: string;\n            select: string;\n            selectAll: string;\n        };\n    };\n    columnSettings: {\n        button: string;\n        noResults: string;\n        search: string;\n        tooltip: string;\n    };\n    filters: {\n        button: string;\n        buttons: {\n            addFilter: string;\n            clearFilters: string;\n        };\n        comparators: {\n            contains: string;\n            doesNotContain: string;\n            isEqualTo: string;\n            isNotEqualTo: string;\n            isGreaterThan: string;\n            isLessThan: string;\n            isBetween: string;\n            isEmpty: string;\n            isNotEmpty: string;\n            isBefore: string;\n            isAfter: string;\n            isLessThanOrEqualTo: string;\n            isGreaterThanOrEqualTo: string;\n            isOnOrBefore: string;\n            isOnOrAfter: string;\n            hasAnyOf: string;\n            hasAllOf: string;\n            hasNoneOf: string;\n        };\n        conditions: {\n            and: string;\n            where: string;\n        };\n        emptyFilter: {\n            condition: string;\n            value: string;\n        };\n        hiddenColumn: string;\n        hiddenGroupedColumn: string;\n        tooltip: string;\n        total: string;\n    };\n    fontSize: {\n        tooltip: string;\n        sizes: {\n            small: string;\n            medium: string;\n            large: string;\n        };\n    };\n    footer: {\n        summary: {\n            count: string;\n            records: string;\n            selected: string;\n        };\n    };\n    print: {\n        error: string;\n        loading: string;\n        tooltip: string;\n        warningDialog: {\n            title: string;\n            description: string;\n            checkboxVisibilityLabel: string;\n            cancelButtonText: string;\n            printButtonText: string;\n        };\n        settingsDialog: {\n            title: string;\n            size: string;\n            sizeA5: string;\n            sizeA4: string;\n            sizeA3: string;\n            sizeLetter: string;\n            sizeLegal: string;\n            orientation: string;\n            orientationLandscape: string;\n            orientationPortrait: string;\n            rows: string;\n            rowsAll: string;\n            rowsSelected: string;\n            layout: string;\n            layoutSplitGroups: string;\n        };\n    };\n    rowHeight: {\n        tooltip: string;\n        sizes: {\n            short: string;\n            medium: string;\n            tall: string;\n            extraTall: string;\n        };\n    };\n    search: {\n        excludeUnmatchedResults: string;\n        placeholder: string;\n    };\n    otherOptions: {\n        tooltip: string;\n    };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AA2BA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IA+GrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}

package/dist/index.css

@@ -607,7 +607,7 @@ table[data-taco^='table'] tr:last-child th:before {
 /* row groups */
 
 table[data-taco^='table'] tr[data-row-group] {
-        @apply bg-grey-100 sticky top-[calc(var(--table-header-group-depth)_*_42px)] z-20 mt-10 print:mt-0;
+        @apply bg-grey-100 sticky top-[calc(var(--table-header-group-depth)_*_42px)] z-30 mt-10 print:mt-0;
     }
 
 table[data-taco^='table'] tr[data-row-group]:first-child {

package/dist/primitives/Table/Core/components/Header/util.d.ts

@@ -1,4 +1,4 @@
 import { Header as ReactTableHeader, ColumnPinningPosition as ReactTableColumnPinningPosition } from '@tanstack/react-table';
 import { TableColumnWidth } from '../../../types';
-export declare function useSetInitialColumnSizing(id: string, width: TableColumnWidth | undefined, element: HTMLTableCellElement | null, canMeasureSize: boolean, setColumnSizing: any): void;
+export declare function useSetInitialColumnSizing(id: string, defaultWidth: TableColumnWidth | undefined, width: TableColumnWidth | undefined, element: HTMLTableCellElement | null, canMeasureSize: boolean, setColumnSizing: any): void;
 export declare function getIsPinned<TType = unknown>(header: ReactTableHeader<TType, unknown>): ReactTableColumnPinningPosition | undefined;

package/dist/primitives/Table/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnFilter as ReactTableColumnFilter, ColumnFiltersState as ReactTableColumnFilterState, ColumnOrderState as ReactTableColumnOrderState, ColumnPinningState as ReactTableColumnPinningState, ColumnSort as ReactTableColumnSort, ColumnSizingState as ReactTableColumnSizingState, GroupingState as ReactTableGroupingState, VisibilityState as ReactTableColumnVisibilityState, SortingState as ReactTableSortingState, BuiltInAggregationFn as ReactTableBuiltInAggregationFn, BuiltInSortingFn as ReactTableBuiltInSortingFn } from '@tanstack/react-table';
+import { ColumnFilter as ReactTableColumnFilter, ColumnFiltersState as ReactTableColumnFilterState, ColumnOrderState as ReactTableColumnOrderState, ColumnPinningState as ReactTableColumnPinningState, ColumnSort as ReactTableColumnSort, ColumnSizingState as ReactTableColumnSizingState, VisibilityState as ReactTableColumnVisibilityState, SortingState as ReactTableSortingState, BuiltInAggregationFn as ReactTableBuiltInAggregationFn, BuiltInSortingFn as ReactTableBuiltInSortingFn } from '@tanstack/react-table';
 import { FontSize, FontSizes, ValueOf } from '../../types';
 import { MenuProps } from '../../components/Menu/Menu';
 import { MenuItemProps } from '../../components/Menu/components/Item';
@@ -108,7 +108,6 @@ export declare type TableSettings = {
     columnVisibility?: ReactTableColumnVisibilityState;
     excludeUnmatchedRecordsInSearch?: boolean;
     fontSize?: TableFontSize;
-    grouping?: ReactTableGroupingState;
     rowHeight?: TableRowHeight;
     searchQuery?: string;
     sorting?: ReactTableSortingState;

package/dist/taco.cjs.development.js

@@ -12467,16 +12467,22 @@ function HeaderMenu(props) {
   });
 }
 
-function useSetInitialColumnSizing(id, width, element, canMeasureSize, setColumnSizing) {
-  React__default.useEffect(() => {
+function useSetInitialColumnSizing(id, defaultWidth, width, element, canMeasureSize, setColumnSizing) {
+  React__default.useLayoutEffect(() => {
     // columns must set a pixel width...
     // otherwise when scrolling through the table, the column widths adjust based on the content
     // of the column, this is because to the virtualisation mounting new rows and unmounting old ones
     if (canMeasureSize && element && !Number.isInteger(width) && !isInternalColumn(id)) {
-      setColumnSizing(sizes => ({
+      const setWidth = () => setColumnSizing(sizes => ({
         ...sizes,
         [id]: element.getBoundingClientRect().width
       }));
+      // grow columns need to wait for auto layout to run, otherwise they register the incorrect size
+      if (defaultWidth === 'grow') {
+        requestAnimationFrame(setWidth);
+      } else {
+        setWidth();
+      }
     }
   }, [element, canMeasureSize, width]);
 }
@@ -12527,6 +12533,7 @@ function Header$5(props) {
     children: reactTable.flexRender(header.column.columnDef.header, header.getContext()),
     colSpan: header.colSpan,
     customMenu: columnMeta.menu,
+    defaultWidth: columnMeta.defaultWidth,
     hasMenu,
     id: header.id,
     isFiltered: header.column.getIsFiltered(),
@@ -12608,6 +12615,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     className,
     colSpan,
     customMenu,
+    defaultWidth,
     hasMenu,
     id,
     index,
@@ -12633,7 +12641,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   } = props;
   const [ref, setRef] = React__default.useState(null);
   // save column width if none is set
-  useSetInitialColumnSizing(id, width, ref, canMeasureSize, setColumnSizing);
+  useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);
   // feature specific styles
   const style = {};
   // column groups often span multiple columns