@ni/nimble-components 35.10.1 → 35.11.0

package/dist/esm/table/components/row/styles.js

@@ -1,12 +1,13 @@
 import { css } from '@ni/fast-element';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../../utilities/style/display';
-import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, smallPadding, standardPadding } from '../../../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, smallPadding, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
 import { Theme } from '../../../theme-provider/types';
 import { hexToRgbaCssColor } from '../../../utilities/style/colors';
 import { themeBehavior } from '../../../utilities/style/theme';
 import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
 import { focusVisible } from '../../../utilities/style/focus';
+import { ZIndexLevels } from '../../../utilities/style/types';
 export const styles = css `
     ${display('flex')}
     ${expandCollapseStyles}
@@ -29,7 +30,7 @@ export const styles = css `
         position: absolute;
     }
 
-    :host([selectable]:not([selected])[allow-hover]:hover)::before {
+    :host([selectable][allow-hover]:hover)::before {
         background-color: ${fillHoverColor};
     }
 
@@ -102,6 +103,46 @@ export const styles = css `
         width: ${mediumPadding};
     }
 
+    .pinned-cell-container {
+        display: grid;
+        grid-template-columns: var(--ni-private-table-pinned-columns-row-grid-columns);
+        position: sticky;
+        left: 0;
+        background: ${applicationBackgroundColor};
+        z-index: ${ZIndexLevels.zIndex1};
+        box-shadow: inset -2px 0 0 0 ${tableRowBorderColor};
+    }
+
+    :host([selectable][allow-hover]:hover) .pinned-cell-container {
+        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
+            ${applicationBackgroundColor};
+    }
+
+    :host([selected]) .pinned-cell-container {
+        background: linear-gradient(${fillSelectedColor}, ${fillSelectedColor}),
+            ${applicationBackgroundColor};
+    }
+
+    :host([selected][allow-hover]:hover) .pinned-cell-container {
+        background: linear-gradient(
+                ${fillHoverSelectedColor},
+                ${fillHoverSelectedColor}
+            ),
+            ${applicationBackgroundColor};
+    }
+
+    :host(${focusVisible}) .pinned-cell-container {
+        box-shadow:
+            inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},
+            inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},
+            inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},
+            inset -2px 0 0 0 ${tableRowBorderColor};
+    }
+    ${'' /* Pushing the pinned-cell-container to a higher z-index for breakpoint menu behavior (not required by table directly) */}
+    :host([menu-open]) .pinned-cell-container {
+        z-index: ${ZIndexLevels.zIndex1000};
+    }
+
     .cell-container {
         display: grid;
         width: 100%;
@@ -177,5 +218,41 @@ export const styles = css `
             :host([selected][allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.2)};
             }
+
+            .pinned-cell-container {
+                box-shadow: inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};
+            }
+
+            :host([selectable][allow-hover]:hover) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.05)},
+                        ${hexToRgbaCssColor(White, 0.05)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+
+            :host([selected]) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.25)},
+                        ${hexToRgbaCssColor(White, 0.25)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+
+            :host([selected][allow-hover]:hover) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.2)},
+                        ${hexToRgbaCssColor(White, 0.2)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+
+            :host(${focusVisible}) .pinned-cell-container {
+                box-shadow:
+                    inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},
+                    inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},
+                    inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},
+                    inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};
+            }
         `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/components/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;;4BAKE,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;kBAOxB,aAAa;;;;;;;4BAOH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;YAGtC,YAAY;;;6BAGK,WAAW,cAAc,WAAW;kBAC/C,gBAAgB;8BACJ,WAAW,eAAe,WAAW;kBACjD,gBAAgB;;;;;;;kBAOhB,aAAa;;sBAET,aAAa;;;;;;;;iBAQlB,iBAAiB;kBAChB,iBAAiB;;;;;;;kBAOjB,aAAa;;sBAET,aAAa;;;;;;;;;;;;uBAYZ,eAAe;;;;;;;;iBAQrB,aAAa;;;;;iBAKb,aAAa;;;;;;;;;;;;;eAaf,aAAa;;;;;;;;;;;;uBAYL,YAAY;;;;qCAIE,YAAY;;oBAE7B,aAAa,MAAM,YAAY;;;;eAIpC,aAAa,MAAM,aAAa;;kBAE7B,aAAa;;;;qCAIM,YAAY;;;;;sBAK3B,aAAa;;0BAET,YAAY;;;;kBAIpB,aAAa;;;;;;;;;;;YAWnB,YAAY;;;CAGvB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    smallPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n    ${display('flex')}\n    ${expandCollapseStyles}\n\n    :host {\n        width: fit-content;\n        min-width: 100%;\n        background-color: ${applicationBackgroundColor};\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid transparent;\n        background-clip: padding-box;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([selectable]:not([selected])[allow-hover]:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host([selected])::before {\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([selected][allow-hover]:hover)::before {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n        box-shadow:\n            inset calc(2 * ${borderWidth}) calc(2 * ${borderWidth})\n                ${borderHoverColor},\n            inset calc(-2 * ${borderWidth}) calc(-2 * ${borderWidth})\n                ${borderHoverColor};\n    }\n\n    .expand-collapse-button {\n        flex: 0 0 auto;\n        margin-left: max(\n            calc(\n                ${mediumPadding} +\n                    (var(--ni-private-table-row-indent-level) - 1) *\n                    ${controlHeight}\n            ),\n            0px\n        );\n    }\n\n    .spinner-container {\n        flex: 0 0 auto;\n        width: ${controlSlimHeight};\n        height: ${controlSlimHeight};\n        align-self: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-left: max(\n            calc(\n                ${mediumPadding} +\n                    (var(--ni-private-table-row-indent-level) - 1) *\n                    ${controlHeight}\n            ),\n            0px\n        );\n    }\n\n    .row-operations-container {\n        flex: 0 0 auto;\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .row-front-spacer {\n        width: ${controlHeight};\n        flex: 0 0 auto;\n    }\n\n    .row-front-spacer.reduced-size-spacer {\n        width: ${mediumPadding};\n    }\n\n    .cell-container {\n        display: grid;\n        width: 100%;\n        grid-auto-flow: column;\n        grid-auto-columns: 1fr;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .cell-container.nested-parent {\n        margin-left: calc(\n            (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1\n        );\n    }\n\n    nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: none;\n    }\n\n    nimble-table-cell[menu-open] {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    nimble-table-cell${focusVisible} {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    nimble-table-cell:first-of-type${focusVisible} {\n        margin-left: calc(\n            -1 * (${controlHeight} - ${smallPadding}) *\n                var(--ni-private-table-cell-focus-offset-multiplier)\n        );\n        padding-left: calc(\n            (${controlHeight} - ${mediumPadding}) *\n                var(--ni-private-table-cell-focus-offset-multiplier) +\n                ${mediumPadding}\n        );\n    }\n\n    nimble-table-cell:first-of-type${focusVisible}::before {\n        content: '';\n        display: block;\n        width: calc(\n            (\n                    ${controlHeight} *\n                        var(--ni-private-table-cell-nesting-level) +\n                        ${smallPadding}\n                ) *\n                var(--ni-private-table-cell-focus-offset-multiplier)\n        );\n        height: ${controlHeight};\n    }\n\n    :host([allow-hover]:hover) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host([selected]) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host(${focusVisible}) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([selectable]:not([selected])[allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n\n            :host([selected])::before {\n                background-color: ${hexToRgbaCssColor(White, 0.25)};\n            }\n\n            :host([selected][allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.2)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    smallPadding,\n    standardPadding,\n    tableRowBorderColor\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\nimport { focusVisible } from '../../../utilities/style/focus';\nimport { ZIndexLevels } from '../../../utilities/style/types';\n\nexport const styles = css`\n    ${display('flex')}\n    ${expandCollapseStyles}\n\n    :host {\n        width: fit-content;\n        min-width: 100%;\n        background-color: ${applicationBackgroundColor};\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid transparent;\n        background-clip: padding-box;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([selectable][allow-hover]:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host([selected])::before {\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([selected][allow-hover]:hover)::before {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n        box-shadow:\n            inset calc(2 * ${borderWidth}) calc(2 * ${borderWidth})\n                ${borderHoverColor},\n            inset calc(-2 * ${borderWidth}) calc(-2 * ${borderWidth})\n                ${borderHoverColor};\n    }\n\n    .expand-collapse-button {\n        flex: 0 0 auto;\n        margin-left: max(\n            calc(\n                ${mediumPadding} +\n                    (var(--ni-private-table-row-indent-level) - 1) *\n                    ${controlHeight}\n            ),\n            0px\n        );\n    }\n\n    .spinner-container {\n        flex: 0 0 auto;\n        width: ${controlSlimHeight};\n        height: ${controlSlimHeight};\n        align-self: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-left: max(\n            calc(\n                ${mediumPadding} +\n                    (var(--ni-private-table-row-indent-level) - 1) *\n                    ${controlHeight}\n            ),\n            0px\n        );\n    }\n\n    .row-operations-container {\n        flex: 0 0 auto;\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .row-front-spacer {\n        width: ${controlHeight};\n        flex: 0 0 auto;\n    }\n\n    .row-front-spacer.reduced-size-spacer {\n        width: ${mediumPadding};\n    }\n\n    .pinned-cell-container {\n        display: grid;\n        grid-template-columns: var(--ni-private-table-pinned-columns-row-grid-columns);\n        position: sticky;\n        left: 0;\n        background: ${applicationBackgroundColor};\n        z-index: ${ZIndexLevels.zIndex1};\n        box-shadow: inset -2px 0 0 0 ${tableRowBorderColor};\n    }\n\n    :host([selectable][allow-hover]:hover) .pinned-cell-container {\n        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),\n            ${applicationBackgroundColor};\n    }\n\n    :host([selected]) .pinned-cell-container {\n        background: linear-gradient(${fillSelectedColor}, ${fillSelectedColor}),\n            ${applicationBackgroundColor};\n    }\n\n    :host([selected][allow-hover]:hover) .pinned-cell-container {\n        background: linear-gradient(\n                ${fillHoverSelectedColor},\n                ${fillHoverSelectedColor}\n            ),\n            ${applicationBackgroundColor};\n    }\n\n    :host(${focusVisible}) .pinned-cell-container {\n        box-shadow:\n            inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},\n            inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},\n            inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},\n            inset -2px 0 0 0 ${tableRowBorderColor};\n    }\n    ${'' /* Pushing the pinned-cell-container to a higher z-index for breakpoint menu behavior (not required by table directly) */}\n    :host([menu-open]) .pinned-cell-container {\n        z-index: ${ZIndexLevels.zIndex1000};\n    }\n\n    .cell-container {\n        display: grid;\n        width: 100%;\n        grid-auto-flow: column;\n        grid-auto-columns: 1fr;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .cell-container.nested-parent {\n        margin-left: calc(\n            (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1\n        );\n    }\n\n    nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: none;\n    }\n\n    nimble-table-cell[menu-open] {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    nimble-table-cell${focusVisible} {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    nimble-table-cell:first-of-type${focusVisible} {\n        margin-left: calc(\n            -1 * (${controlHeight} - ${smallPadding}) *\n                var(--ni-private-table-cell-focus-offset-multiplier)\n        );\n        padding-left: calc(\n            (${controlHeight} - ${mediumPadding}) *\n                var(--ni-private-table-cell-focus-offset-multiplier) +\n                ${mediumPadding}\n        );\n    }\n\n    nimble-table-cell:first-of-type${focusVisible}::before {\n        content: '';\n        display: block;\n        width: calc(\n            (\n                    ${controlHeight} *\n                        var(--ni-private-table-cell-nesting-level) +\n                        ${smallPadding}\n                ) *\n                var(--ni-private-table-cell-focus-offset-multiplier)\n        );\n        height: ${controlHeight};\n    }\n\n    :host([allow-hover]:hover) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host([selected]) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host(${focusVisible}) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([selectable]:not([selected])[allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n\n            :host([selected])::before {\n                background-color: ${hexToRgbaCssColor(White, 0.25)};\n            }\n\n            :host([selected][allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.2)};\n            }\n\n            .pinned-cell-container {\n                box-shadow: inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};\n            }\n\n            :host([selectable][allow-hover]:hover) .pinned-cell-container {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.05)},\n                        ${hexToRgbaCssColor(White, 0.05)}\n                    ),\n                    ${applicationBackgroundColor};\n            }\n\n            :host([selected]) .pinned-cell-container {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.25)},\n                        ${hexToRgbaCssColor(White, 0.25)}\n                    ),\n                    ${applicationBackgroundColor};\n            }\n\n            :host([selected][allow-hover]:hover) .pinned-cell-container {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.2)},\n                        ${hexToRgbaCssColor(White, 0.2)}\n                    ),\n                    ${applicationBackgroundColor};\n            }\n\n            :host(${focusVisible}) .pinned-cell-container {\n                box-shadow:\n                    inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},\n                    inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},\n                    inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},\n                    inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/table/components/row/template.js

@@ -3,11 +3,43 @@ import { ButtonAppearance } from '../../../menu-button/types';
 import { tableCellTag } from '../cell';
 import { checkboxTag } from '../../../checkbox';
 import { tableRowCollapseLabel, tableRowExpandLabel, tableRowLoadingLabel, tableRowSelectLabel } from '../../../label-provider/table/label-tokens';
+import { TableColumnPinLocation } from '../../types';
 import { buttonTag } from '../../../button';
 import { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';
 import { spinnerTag } from '../../../spinner';
 import { SpinnerAppearance } from '../../../spinner/types';
 import { uniquifySlotNameForColumn } from '../../models/utilities';
+const rowCellTemplate = html `
+    <${tableCellTag}
+        class="cell"
+        :cellState="${(_, c) => c.parent.cellStates[c.index]}"
+        :cellViewTemplate="${x => x.columnInternals.cellViewTemplate}"
+        :column="${x => x}"
+        column-id="${x => x.columnId}"
+        :recordId="${(_, c) => c.parent.recordId}"
+        ?has-action-menu="${x => !!x.actionMenuSlot}"
+        action-menu-label="${x => x.actionMenuLabel}"
+        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
+        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
+        @cell-view-slots-request="${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event)}"
+        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]}"
+    >
+
+        ${when((x, c) => (c.parent.currentActionMenuColumn === x) && x.actionMenuSlot, html `
+            <slot
+                name="${x => `row-action-menu-${x.actionMenuSlot}`}"
+                slot="cellActionMenu"
+            ></slot>
+        `)}
+
+        ${repeat(x => x.columnInternals.slotNames, html `
+            <slot
+                name="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+                slot="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
+            ></slot>
+        `)}
+    </${tableCellTag}>
+`;
 export const template = html `
     <template 
         role="row"
@@ -15,6 +47,14 @@ export const template = html `
         aria-expanded=${x => x.expanded}
         style="--ni-private-table-row-indent-level: ${x => x.nestingLevel};"
     >
+        <span class="pinned-cell-container">
+            ${repeat(x => x.columns, html `
+                ${when(x => !x.columnHidden && x.columnInternals.pinLocation === TableColumnPinLocation.left, html `
+                    ${rowCellTemplate}
+                `)}
+            `, { recycle: false, positioning: true })}
+        </span>
+
         ${when(x => !x.rowOperationGridCellHidden, html `
             <span role="gridcell" class="row-operations-container">
                 ${when(x => x.showSelectionCheckbox, html `
@@ -32,7 +72,7 @@ export const template = html `
                 `)}
             </span>
         `)}
-        <span class="row-front-spacer ${x => (x.isTopLevelParentRow || !x.reserveCollapseSpace ? 'reduced-size-spacer' : '')}"></span>
+        <span class="row-front-spacer ${x => (x.isTopLevelParentRow || !x.reserveCollapseSpace ? 'reduced-size-spacer' : '')}  ${x => (x.showSelectionCheckbox ? 'selectable' : '')}"></span>
         ${when(x => x.isParentRow, html `
             ${when(x => x.loading, html `
                 <span class="spinner-container">
@@ -63,36 +103,8 @@ export const template = html `
             class="cell-container ${x => (x.isNestedParent ? 'nested-parent' : '')}"
         >
             ${repeat(x => x.columns, html `
-                ${when(x => !x.columnHidden, html `
-                    <${tableCellTag}
-                        class="cell"
-                        :cellState="${(_, c) => c.parent.cellStates[c.index]}"
-                        :cellViewTemplate="${x => x.columnInternals.cellViewTemplate}"
-                        :column="${x => x}"
-                        column-id="${x => x.columnId}"
-                        :recordId="${(_, c) => c.parent.recordId}"
-                        ?has-action-menu="${x => !!x.actionMenuSlot}"
-                        action-menu-label="${x => x.actionMenuLabel}"
-                        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x)}"
-                        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x)}"
-                        @cell-view-slots-request="${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event)}"
-                        :nestingLevel="${(_, c) => c.parent.cellIndentLevels[c.index]}"
-                    >
-
-                        ${when((x, c) => (c.parent.currentActionMenuColumn === x) && x.actionMenuSlot, html `
-                            <slot
-                                name="${x => `row-action-menu-${x.actionMenuSlot}`}"
-                                slot="cellActionMenu"
-                            ></slot>
-                        `)}
-
-                        ${repeat(x => x.columnInternals.slotNames, html `
-                            <slot
-                                name="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
-                                slot="${(x, c) => uniquifySlotNameForColumn(c.parent, x)}"
-                            ></slot>
-                        `)}
-                    </${tableCellTag}>
+                ${when(x => !x.columnHidden && x.columnInternals.pinLocation !== TableColumnPinLocation.left, html `
+                    ${rowCellTemplate}
                 `)}
             `, { recycle: false, positioning: true })}
         </span>

package/dist/esm/table/components/row/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, repeat, when } from '@ni/fast-element';\nimport type { TableRow } from '.';\nimport {\n    ButtonAppearance,\n    type MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { tableCellTag } from '../cell';\nimport { checkboxTag } from '../../../checkbox';\nimport {\n    tableRowCollapseLabel,\n    tableRowExpandLabel,\n    tableRowLoadingLabel,\n    tableRowSelectLabel\n} from '../../../label-provider/table/label-tokens';\nimport type { TableColumn } from '../../../table-column/base';\nimport { buttonTag } from '../../../button';\nimport { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';\nimport { spinnerTag } from '../../../spinner';\nimport { SpinnerAppearance } from '../../../spinner/types';\nimport type { CellViewSlotRequestEventDetail } from '../../types';\nimport { uniquifySlotNameForColumn } from '../../models/utilities';\n\nexport const template = html<TableRow>`\n    <template \n        role=\"row\"\n        aria-selected=${x => x.ariaSelected}\n        aria-expanded=${x => x.expanded}\n        style=\"--ni-private-table-row-indent-level: ${x => x.nestingLevel};\"\n    >\n        ${when(x => !x.rowOperationGridCellHidden, html<TableRow>`\n            <span role=\"gridcell\" class=\"row-operations-container\">\n                ${when(x => x.showSelectionCheckbox, html<TableRow>`\n                    <${checkboxTag}\n                        ${ref('selectionCheckbox')}\n                        class=\"selection-checkbox\"\n                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}\n                        tabindex=\"-1\"\n                        @change=\"${(x, c) => x.onSelectionCheckboxChange(c.event as CustomEvent)}\"\n                        @click=\"${(_, c) => c.event.stopPropagation()}\"\n                        title=\"${x => tableRowSelectLabel.getValueFor(x)}\"\n                        aria-label=\"${x => tableRowSelectLabel.getValueFor(x)}\"\n                    >\n                    </${checkboxTag}>\n                `)}\n            </span>\n        `)}\n        <span class=\"row-front-spacer ${x => (x.isTopLevelParentRow || !x.reserveCollapseSpace ? 'reduced-size-spacer' : '')}\"></span>\n        ${when(x => x.isParentRow, html<TableRow>`\n            ${when(x => x.loading, html<TableRow>`\n                <span class=\"spinner-container\">\n                    <${spinnerTag}\n                        appearance=\"${SpinnerAppearance.accent}\"\n                        aria-label=\"${x => tableRowLoadingLabel.getValueFor(x)}\"\n                        title=\"${x => tableRowLoadingLabel.getValueFor(x)}\"\n                    >\n                    </${spinnerTag}>\n                </span>\n            `)}\n            ${when(x => !x.loading, html<TableRow>`\n                <${buttonTag}\n                    appearance=\"${ButtonAppearance.ghost}\"\n                    content-hidden\n                    class=\"expand-collapse-button\"\n                    tabindex=\"-1\"\n                    @click=\"${(x, c) => x.onRowExpandToggle(c.event)}\"\n                    title=\"${x => (x.expanded ? tableRowCollapseLabel.getValueFor(x) : tableRowExpandLabel.getValueFor(x))}\"\n                    aria-hidden=\"true\"\n                >\n                    <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot=\"start\" class=\"expander-icon ${x => x.animationClass}\"></${iconArrowExpanderRightTag}>\n                </${buttonTag}>\n            `)}\n        `)}\n\n        <span ${ref('cellContainer')} \n            class=\"cell-container ${x => (x.isNestedParent ? 'nested-parent' : '')}\"\n        >\n            ${repeat(x => x.columns, html<TableColumn, TableRow>`\n                ${when(x => !x.columnHidden, html<TableColumn, TableRow>`\n                    <${tableCellTag}\n                        class=\"cell\"\n                        :cellState=\"${(_, c) => c.parent.cellStates[c.index]}\"\n                        :cellViewTemplate=\"${x => x.columnInternals.cellViewTemplate}\"\n                        :column=\"${x => x}\"\n                        column-id=\"${x => x.columnId}\"\n                        :recordId=\"${(_, c) => c.parent.recordId}\"\n                        ?has-action-menu=\"${x => !!x.actionMenuSlot}\"\n                        action-menu-label=\"${x => x.actionMenuLabel}\"\n                        @cell-action-menu-beforetoggle=\"${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>, x)}\"\n                        @cell-action-menu-toggle=\"${(x, c) => c.parent.onCellActionMenuToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>, x)}\"\n                        @cell-view-slots-request=\"${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event as CustomEvent<CellViewSlotRequestEventDetail>)}\"\n                        :nestingLevel=\"${(_, c) => c.parent.cellIndentLevels[c.index]}\"\n                    >\n\n                        ${when((x, c) => ((c.parent as TableRow).currentActionMenuColumn === x) && x.actionMenuSlot, html<TableColumn, TableRow>`\n                            <slot\n                                name=\"${x => `row-action-menu-${x.actionMenuSlot!}`}\"\n                                slot=\"cellActionMenu\"\n                            ></slot>\n                        `)}\n\n                        ${repeat(x => x.columnInternals.slotNames, html<string, TableColumn>`\n                            <slot\n                                name=\"${(x, c) => uniquifySlotNameForColumn(c.parent, x)}\"\n                                slot=\"${(x, c) => uniquifySlotNameForColumn(c.parent, x)}\"\n                            ></slot>\n                        `)}\n                    </${tableCellTag}>\n                `)}\n            `, { recycle: false, positioning: true })}\n        </span>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, repeat, when } from '@ni/fast-element';\nimport type { TableRow } from '.';\nimport {\n    ButtonAppearance,\n    type MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { tableCellTag } from '../cell';\nimport { checkboxTag } from '../../../checkbox';\nimport {\n    tableRowCollapseLabel,\n    tableRowExpandLabel,\n    tableRowLoadingLabel,\n    tableRowSelectLabel\n} from '../../../label-provider/table/label-tokens';\nimport type { TableColumn } from '../../../table-column/base';\nimport { TableColumnPinLocation } from '../../types';\nimport { buttonTag } from '../../../button';\nimport { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';\nimport { spinnerTag } from '../../../spinner';\nimport { SpinnerAppearance } from '../../../spinner/types';\nimport type { CellViewSlotRequestEventDetail } from '../../types';\nimport { uniquifySlotNameForColumn } from '../../models/utilities';\n\nconst rowCellTemplate = html<TableColumn, TableRow>`\n    <${tableCellTag}\n        class=\"cell\"\n        :cellState=\"${(_, c) => c.parent.cellStates[c.index]}\"\n        :cellViewTemplate=\"${x => x.columnInternals.cellViewTemplate}\"\n        :column=\"${x => x}\"\n        column-id=\"${x => x.columnId}\"\n        :recordId=\"${(_, c) => c.parent.recordId}\"\n        ?has-action-menu=\"${x => !!x.actionMenuSlot}\"\n        action-menu-label=\"${x => x.actionMenuLabel}\"\n        @cell-action-menu-beforetoggle=\"${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>, x)}\"\n        @cell-action-menu-toggle=\"${(x, c) => c.parent.onCellActionMenuToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>, x)}\"\n        @cell-view-slots-request=\"${(x, c) => c.parent.onCellViewSlotsRequest(x, c.event as CustomEvent<CellViewSlotRequestEventDetail>)}\"\n        :nestingLevel=\"${(_, c) => c.parent.cellIndentLevels[c.index]}\"\n    >\n\n        ${when((x, c) => ((c.parent as TableRow).currentActionMenuColumn === x) && x.actionMenuSlot, html<TableColumn, TableRow>`\n            <slot\n                name=\"${x => `row-action-menu-${x.actionMenuSlot!}`}\"\n                slot=\"cellActionMenu\"\n            ></slot>\n        `)}\n\n        ${repeat(x => x.columnInternals.slotNames, html<string, TableColumn>`\n            <slot\n                name=\"${(x, c) => uniquifySlotNameForColumn(c.parent, x)}\"\n                slot=\"${(x, c) => uniquifySlotNameForColumn(c.parent, x)}\"\n            ></slot>\n        `)}\n    </${tableCellTag}>\n`;\n\nexport const template = html<TableRow>`\n    <template \n        role=\"row\"\n        aria-selected=${x => x.ariaSelected}\n        aria-expanded=${x => x.expanded}\n        style=\"--ni-private-table-row-indent-level: ${x => x.nestingLevel};\"\n    >\n        <span class=\"pinned-cell-container\">\n            ${repeat(x => x.columns, html<TableColumn, TableRow>`\n                ${when(x => !x.columnHidden && x.columnInternals.pinLocation === TableColumnPinLocation.left, html<TableColumn, TableRow>`\n                    ${rowCellTemplate}\n                `)}\n            `, { recycle: false, positioning: true })}\n        </span>\n\n        ${when(x => !x.rowOperationGridCellHidden, html<TableRow>`\n            <span role=\"gridcell\" class=\"row-operations-container\">\n                ${when(x => x.showSelectionCheckbox, html<TableRow>`\n                    <${checkboxTag}\n                        ${ref('selectionCheckbox')}\n                        class=\"selection-checkbox\"\n                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}\n                        tabindex=\"-1\"\n                        @change=\"${(x, c) => x.onSelectionCheckboxChange(c.event as CustomEvent)}\"\n                        @click=\"${(_, c) => c.event.stopPropagation()}\"\n                        title=\"${x => tableRowSelectLabel.getValueFor(x)}\"\n                        aria-label=\"${x => tableRowSelectLabel.getValueFor(x)}\"\n                    >\n                    </${checkboxTag}>\n                `)}\n            </span>\n        `)}\n        <span class=\"row-front-spacer ${x => (x.isTopLevelParentRow || !x.reserveCollapseSpace ? 'reduced-size-spacer' : '')}  ${x => (x.showSelectionCheckbox ? 'selectable' : '')}\"></span>\n        ${when(x => x.isParentRow, html<TableRow>`\n            ${when(x => x.loading, html<TableRow>`\n                <span class=\"spinner-container\">\n                    <${spinnerTag}\n                        appearance=\"${SpinnerAppearance.accent}\"\n                        aria-label=\"${x => tableRowLoadingLabel.getValueFor(x)}\"\n                        title=\"${x => tableRowLoadingLabel.getValueFor(x)}\"\n                    >\n                    </${spinnerTag}>\n                </span>\n            `)}\n            ${when(x => !x.loading, html<TableRow>`\n                <${buttonTag}\n                    appearance=\"${ButtonAppearance.ghost}\"\n                    content-hidden\n                    class=\"expand-collapse-button\"\n                    tabindex=\"-1\"\n                    @click=\"${(x, c) => x.onRowExpandToggle(c.event)}\"\n                    title=\"${x => (x.expanded ? tableRowCollapseLabel.getValueFor(x) : tableRowExpandLabel.getValueFor(x))}\"\n                    aria-hidden=\"true\"\n                >\n                    <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot=\"start\" class=\"expander-icon ${x => x.animationClass}\"></${iconArrowExpanderRightTag}>\n                </${buttonTag}>\n            `)}\n        `)}\n\n        <span ${ref('cellContainer')} \n            class=\"cell-container ${x => (x.isNestedParent ? 'nested-parent' : '')}\"\n        >\n            ${repeat(x => x.columns, html<TableColumn, TableRow>`\n                ${when(x => !x.columnHidden && x.columnInternals.pinLocation !== TableColumnPinLocation.left, html<TableColumn, TableRow>`\n                    ${rowCellTemplate}\n                `)}\n            `, { recycle: false, positioning: true })}\n        </span>\n    </template>\n`;\n"]}

package/dist/esm/table/index.d.ts

@@ -86,6 +86,14 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
      * @internal
      */
     get collapseButtonVisibility(): string;
+    /**
+     * @internal
+     */
+    get pinnedColumnOffset(): number;
+    /**
+     * @internal
+     */
+    get pinnedColumnsGridTemplateColumns(): string;
     /**
      * @internal
      */
@@ -118,6 +126,10 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
      * @internal
      */
     visibleColumns: TableColumn[];
+    /**
+     * @internal
+     */
+    pinnedColumns: TableColumn[];
     /**
      * @internal
      * This value determines the size of the viewport area when a user has created horizontal scrollable
@@ -217,6 +229,7 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
     protected idFieldNameChanged(_prev: string | undefined, _next: string | undefined): void;
     protected parentIdFieldNameChanged(_prev: string | undefined, _next: string | undefined): void;
     protected columnsChanged(_prev: TableColumn[] | undefined, _next: TableColumn[]): void;
+    private getPinnedColumnResolvedPixelWidth;
     private updateRequestedSlotsForOpeningActionMenu;
     private handleActionMenuBeforeToggleEvent;
     private handleRowActionMenuToggleEvent;

package/dist/esm/table/index.js

@@ -7,7 +7,7 @@ import { TableColumn } from '../table-column/base';
 import { TableValidator } from './models/table-validator';
 import { styles } from './styles';
 import { template } from './template';
-import { TableColumnSortDirection, TableRowSelectionMode, TableRowSelectionState } from './types';
+import { TableColumnPinLocation, TableColumnSortDirection, TableRowSelectionMode, TableRowSelectionState } from './types';
 import { Virtualizer } from './models/virtualizer';
 import { getTanStackSortingFunction } from './models/sort-operations';
 import { TableLayoutManager } from './models/table-layout-manager';
@@ -47,6 +47,34 @@ export class Table extends FoundationElement {
         }
         return '';
     }
+    /**
+     * @internal
+     */
+    get pinnedColumnOffset() {
+        let offset = 0;
+        for (const column of this.pinnedColumns) {
+            const resolvedPixelWidth = this.getPinnedColumnResolvedPixelWidth(column);
+            if (resolvedPixelWidth !== undefined) {
+                const coercedPixelWidth = Math.max(column.columnInternals.minPixelWidth, resolvedPixelWidth);
+                offset += coercedPixelWidth;
+            }
+        }
+        return offset;
+    }
+    /**
+     * @internal
+     */
+    get pinnedColumnsGridTemplateColumns() {
+        return this.pinnedColumns.map(column => {
+            const resolvedPixelWidth = this.getPinnedColumnResolvedPixelWidth(column);
+            if (resolvedPixelWidth !== undefined) {
+                const coercedPixelWidth = Math.max(column.columnInternals.minPixelWidth, resolvedPixelWidth);
+                return `${coercedPixelWidth}px`;
+            }
+            return '';
+        })
+            .join(' ');
+    }
     /**
      * @internal
      */
@@ -97,6 +125,10 @@ export class Table extends FoundationElement {
          * @internal
          */
         this.visibleColumns = [];
+        /**
+         * @internal
+         */
+        this.pinnedColumns = [];
         /**
          * @internal
          * This value determines the size of the viewport area when a user has created horizontal scrollable
@@ -449,7 +481,10 @@ export class Table extends FoundationElement {
         }
         if (this.tableUpdateTracker.updateColumnWidths) {
             this.rowGridColumns = this.layoutManager.getGridTemplateColumns();
-            this.visibleColumns = this.columns.filter(column => !column.columnHidden);
+            this.visibleColumns = this.columns.filter(column => !column.columnHidden
+                && column.columnInternals.pinLocation !== TableColumnPinLocation.left);
+            this.pinnedColumns = this.columns.filter(column => !column.columnHidden
+                && column.columnInternals.pinLocation === TableColumnPinLocation.left);
         }
         if (this.tableUpdateTracker.requiresKeyboardFocusReset) {
             this.keyboardNavigationManager.resetFocusState();
@@ -527,6 +562,10 @@ export class Table extends FoundationElement {
         this.observeColumns();
         this.tableUpdateTracker.trackColumnInstancesChanged();
     }
+    getPinnedColumnResolvedPixelWidth(column) {
+        const { currentPixelWidth } = column.columnInternals;
+        return currentPixelWidth;
+    }
     updateRequestedSlotsForOpeningActionMenu(openActionMenuRecordId) {
         for (const actionMenuSlot of this.actionMenuSlots) {
             this.requestedSlots.set(actionMenuSlot, {
@@ -701,6 +740,7 @@ export class Table extends FoundationElement {
         this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.columnInternals.currentSortIndex));
         this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.columnInternals.groupIndex));
         this.tableValidator.validateColumnConfigurations(this.columns);
+        this.tableValidator.validatePinnedColumnConfigurations(this.columns);
         if (this.dataHierarchyManager) {
             this.validateWithData(this.dataHierarchyManager.getAllRecords());
         }
@@ -973,12 +1013,21 @@ __decorate([
 __decorate([
     volatile
 ], Table.prototype, "collapseButtonVisibility", null);
+__decorate([
+    volatile
+], Table.prototype, "pinnedColumnOffset", null);
+__decorate([
+    volatile
+], Table.prototype, "pinnedColumnsGridTemplateColumns", null);
 __decorate([
     observable
 ], Table.prototype, "firstSortedColumn", void 0);
 __decorate([
     observable
 ], Table.prototype, "visibleColumns", void 0);
+__decorate([
+    observable
+], Table.prototype, "pinnedColumns", void 0);
 __decorate([
     observable
 ], Table.prototype, "tableScrollableMinWidth", void 0);